// ============================================================
// WASIED · App Hosting · Pterodactyl-grade server panel
// ============================================================

function AppHostingServer({ id }) {
  const srv = DATA.demoServer;
  const [tab, setTab] = React.useState('overview');
  const [power, setPower] = React.useState(srv.status);

  const tabs = [
    { k: 'overview',  label: "Vue d'ensemble", icon: 'dashboard' },
    { k: 'console',   label: 'Console live',   icon: 'terminal' },
    { k: 'files',     label: 'Fichiers',       icon: 'folder' },
    { k: 'backups',   label: 'Sauvegardes',    icon: 'cloud' },
    { k: 'network',   label: 'Réseau',         icon: 'globe' },
    { k: 'startup',   label: 'Démarrage',      icon: 'play' },
    { k: 'settings',  label: 'Paramètres',     icon: 'settings' },
  ];

  return (
    <AppShell
      title={srv.name}
      breadcrumbs={[{ label: 'Hébergement', path: '/app/hosting' }, { label: srv.name }]}
      sectionPadding={false}
      actions={
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <PowerControls power={power} setPower={setPower}/>
        </div>
      }>
      {/* Server header strip */}
      <div style={{ background: 'var(--surface-1)', borderBottom: '1px solid var(--border-1)', padding: '20px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 18, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="live-dot" style={{ width: 9, height: 9, background: power === 'running' ? 'var(--cash)' : 'var(--xp)', color: power === 'running' ? 'var(--cash)' : 'var(--xp)', borderRadius: '50%' }}/>
            <div>
              <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)' }}>{srv.name}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{srv.id} · {srv.fqdn}</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Badge tone="hosting" icon="server">{srv.plan}</Badge>
            <Badge tone="subtle" icon="globe">{srv.location}</Badge>
            <Badge tone="subtle" icon="map">{srv.map}</Badge>
            <Badge tone="subtle" icon="cube">{srv.gamemode}</Badge>
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-3)' }}>Uptime · <span style={{ color: 'var(--fg-1)', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{srv.uptime}</span></div>
        </div>

        {/* Live metrics strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }} className="metrics-strip">
          <LiveMetric label="CPU" value={`${srv.cpuUsage} %`} cap="100 % · 8 vCPU" pct={srv.cpuUsage / 100} color="var(--service-hosting)" history={srv.cpuHistory}/>
          <LiveMetric label="RAM" value={`${srv.ramUsage} Go`} cap={`/ ${srv.ramTotal} Go`} pct={srv.ramUsage / srv.ramTotal} color="var(--accent)" history={srv.ramHistory}/>
          <LiveMetric label="Disque" value={`${srv.diskUsage} Go`} cap={`/ ${srv.diskTotal} Go`} pct={srv.diskUsage / srv.diskTotal} color="var(--vip)"/>
          <LiveMetric label="Joueurs" value={`${srv.players}`} cap={`/ ${srv.maxPlayers}`} pct={srv.players / srv.maxPlayers} color="var(--cash)" history={srv.playerHistory}/>
          <LiveMetric label="Réseau" value={`↓ ${srv.netIn} ↑ ${srv.netOut} Mo/s`} cap="Anti-DDoS · 0 attaque" pct={0.4} color="var(--xp)"/>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ background: 'var(--surface-0)', borderBottom: '1px solid var(--border-1)', padding: '0 24px', display: 'flex', gap: 4, position: 'sticky', top: 56, zIndex: 10 }}>
        {tabs.map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '14px 14px', background: 'transparent', border: 'none', cursor: 'pointer',
            color: tab === t.k ? 'var(--fg-1)' : 'var(--fg-3)', fontWeight: 500, fontSize: 13,
            borderBottom: `2px solid ${tab === t.k ? 'var(--accent)' : 'transparent'}`,
            marginBottom: -1, transition: 'all 140ms var(--ease-out)',
          }}>
            <Icon name={t.icon} size={14}/>{t.label}
          </button>
        ))}
      </div>

      {/* Panel content */}
      <div style={{ padding: '24px' }}>
        {tab === 'overview' && <HostingOverview srv={srv}/>}
        {tab === 'console' && <HostingConsole srv={srv}/>}
        {tab === 'files' && <HostingFiles srv={srv}/>}
        {tab === 'backups' && <HostingBackups srv={srv}/>}
        {tab === 'network' && <HostingNetwork srv={srv}/>}
        {tab === 'startup' && <HostingStartup srv={srv}/>}
        {tab === 'settings' && <HostingSettings srv={srv}/>}
      </div>
    </AppShell>
  );
}

function PowerControls({ power, setPower }) {
  return (
    <>
      {power === 'running' ? <>
        <Button variant="ghost" size="sm" icon="refresh" onClick={() => setPower('restarting')}>Redémarrer</Button>
        <Button variant="ghost" size="sm" icon="stop" onClick={() => setPower('stopped')} style={{ color: 'var(--xp)' }}>Arrêter</Button>
        <Button variant="danger" size="sm" icon="zap" onClick={() => setPower('stopped')}>Kill</Button>
      </> : <Button variant="success" size="sm" icon="play" onClick={() => setPower('running')}>Démarrer</Button>}
    </>
  );
}

function LiveMetric({ label, value, cap, pct, color, history }) {
  return (
    <div style={{ padding: 14, background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 10 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>{label}</span>
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', fontVariantNumeric: 'tabular-nums' }}>{value}</span>
      </div>
      <div style={{ height: 4, background: 'var(--surface-3)', borderRadius: 2, overflow: 'hidden', marginBottom: 6 }}>
        <div style={{ width: `${Math.min(pct * 100, 100)}%`, height: '100%', background: color, transition: 'width 800ms ease' }}/>
      </div>
      {history ? <Sparkline data={history} color={color} width={200} height={28} fill/> : <div style={{ fontSize: 10, color: 'var(--fg-3)', height: 28, display: 'flex', alignItems: 'center' }}>{cap}</div>}
    </div>
  );
}

// ---------- Overview tab ----------
function HostingOverview({ srv }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }} className="dash-main">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="CPU · 30 dernières minutes"/>
          <Sparkline data={srv.cpuHistory} color="var(--service-hosting)" width={760} height={120} fill/>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>
            <span>moyenne 36 %</span><span>pic 45 %</span><span>creux 22 %</span>
          </div>
        </Panel>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="Joueurs connectés"/>
          <Sparkline data={srv.playerHistory} color="var(--cash)" width={760} height={100} fill/>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>
            <span>il y a 30 min · 12 joueurs</span><span>maintenant · 47 joueurs</span>
          </div>
        </Panel>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="Activité récente"/>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.9, color: 'var(--fg-2)' }}>
            {srv.consoleLines.slice(-5).map((l, i) => (
              <div key={i}>
                <span style={{ color: 'var(--fg-4)' }}>{l.t}</span>{' '}
                <span style={{ color: l.tag === 'OK' ? 'var(--cash)' : l.tag === 'WARN' ? 'var(--xp)' : 'var(--accent)', fontWeight: 600 }}>{l.tag}</span>{' '}
                {l.text}
              </div>
            ))}
          </div>
        </Panel>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="Connexion serveur"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <CopyField label="Adresse" value={srv.fqdn}/>
            <CopyField label="SFTP" value={srv.network.sftp}/>
            <CopyField label="ID serveur" value={srv.id}/>
          </div>
        </Panel>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="État de l'hôte"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
            <SidebarStat label="Nœud" value={srv.location}/>
            <SidebarStat label="OS" value="Debian 12 · kernel 6.1"/>
            <SidebarStat label="GMod" value="2024-04 (64-bit)"/>
            <SidebarStat label="Dernière maj." value="il y a 2 h"/>
          </div>
        </Panel>
        <Panel style={{ padding: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Icon name="shield" size={16} color="var(--cash)"/>
            <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>Anti-DDoS · protégé</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--cash)' }}>2 attaques</strong> mitigées dans les dernières 24h. Aucun impact joueurs.
          </div>
        </Panel>
      </div>
    </div>
  );
}

function CopyField({ label, value }) {
  const [copied, setCopied] = React.useState(false);
  return (
    <div>
      <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 4 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 8 }}>
        <code style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</code>
        <button onClick={() => { navigator.clipboard?.writeText(value); setCopied(true); setTimeout(() => setCopied(false), 1200); }} style={{ background: 'transparent', border: 'none', color: 'var(--fg-3)', cursor: 'pointer', fontSize: 11 }}>
          {copied ? '✓' : <Icon name="copy" size={12}/>}
        </button>
      </div>
    </div>
  );
}

// ---------- Console tab ----------
function HostingConsole({ srv }) {
  const [lines, setLines] = React.useState(srv.consoleLines);
  const [cmd, setCmd] = React.useState('');
  const ref = React.useRef(null);
  React.useEffect(() => {
    const id = setInterval(() => {
      const extras = [
        { tag: 'INFO', text: '[Heartbeat] tick 19:45:0' + (Math.floor(Math.random() * 9)) },
        { tag: 'INFO', text: '[Voice] OOC: ' + ['Gordon Freeman', 'Alyx Vance', 'Daniel Walker', 'Jack Harper'][Math.floor(Math.random() * 4)] + ': "' + ['gg', 'ok', 'on bouge', 'rdv au spawn', 'qui veut faire un braquage'][Math.floor(Math.random() * 5)] + '"' },
        { tag: 'OK', text: '[Health] check passed · 47 players online' },
      ];
      const next = extras[Math.floor(Math.random() * extras.length)];
      setLines(prev => [...prev.slice(-50), { t: new Date().toLocaleTimeString('fr-FR', { hour12: false }), ...next }]);
    }, 2500);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [lines]);
  const runCmd = (e) => {
    e.preventDefault();
    if (!cmd.trim()) return;
    setLines(prev => [...prev, { t: new Date().toLocaleTimeString('fr-FR', { hour12: false }), tag: 'CMD', text: '$ ' + cmd }]);
    setTimeout(() => setLines(prev => [...prev, { t: new Date().toLocaleTimeString('fr-FR', { hour12: false }), tag: 'OK', text: `Command "${cmd}" executed.` }]), 250);
    setCmd('');
  };
  const tagColor = (tag) => tag === 'OK' ? 'var(--cash)' : tag === 'WARN' ? 'var(--xp)' : tag === 'ERROR' ? 'var(--hp)' : tag === 'CMD' ? 'var(--accent)' : 'var(--fg-2)';
  return (
    <Panel style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--fg-1)', fontWeight: 500 }}>
          <span className="live-dot" style={{ width: 7, height: 7, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>Console live
        </span>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' }}>WebSocket · {lines.length} lignes</span>
        <Button variant="ghost" size="xs" icon="download">Exporter</Button>
        <Button variant="ghost" size="xs" icon="trash">Vider</Button>
      </div>
      <div ref={ref} style={{ padding: 16, background: '#06090F', height: 540, overflowY: 'auto', fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.75 }}>
        {lines.map((l, i) => (
          <div key={i} style={{ display: 'flex', gap: 8, padding: '1px 0' }}>
            <span style={{ color: 'var(--fg-4)', flexShrink: 0 }}>{l.t}</span>
            <span style={{ color: tagColor(l.tag), flexShrink: 0, minWidth: 50, fontWeight: 600 }}>{l.tag}</span>
            <span style={{ color: 'var(--fg-2)' }}>{l.text}</span>
          </div>
        ))}
      </div>
      <form onSubmit={runCmd} style={{ padding: 14, borderTop: '1px solid var(--border-1)', display: 'flex', gap: 10 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 8, fontFamily: 'var(--font-mono)' }}>
          <span style={{ color: 'var(--accent)' }}>$</span>
          <input value={cmd} onChange={e => setCmd(e.target.value)} placeholder='say "Hello world", restart, status…' style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: '10px 0' }}/>
        </div>
        <Button variant="primary" type="submit" icon="send">Exécuter</Button>
      </form>
    </Panel>
  );
}

// ---------- Files tab ----------
function HostingFiles({ srv }) {
  const [path, setPath] = React.useState('/');
  const [selected, setSelected] = React.useState(null);
  return (
    <Panel style={{ padding: 0, overflow: 'hidden' }}>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>Fichiers</span>
        <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', padding: '4px 10px', background: 'var(--surface-2)', borderRadius: 6 }}>{path}</code>
        <span style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <Button variant="ghost" size="sm" icon="upload">Upload</Button>
          <Button variant="ghost" size="sm" icon="plus">Nouveau</Button>
          <Button variant="ghost" size="sm" icon="refresh">Refresh</Button>
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 100px 140px 120px', gap: 16, padding: '10px 18px', borderBottom: '1px solid var(--border-1)', fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>
        <span></span>
        <span>Nom</span>
        <span style={{ textAlign: 'right' }}>Taille</span>
        <span style={{ textAlign: 'right' }}>Modifié</span>
        <span style={{ textAlign: 'right' }}>Actions</span>
      </div>
      <div style={{ maxHeight: 560, overflowY: 'auto' }}>
        {srv.files.map((f, i) => (
          <div key={i} onClick={() => setSelected(f.name)} style={{
            display: 'grid', gridTemplateColumns: '40px 1fr 100px 140px 120px', gap: 16,
            padding: '10px 18px', borderTop: '1px solid var(--border-1)',
            background: selected === f.name ? 'var(--surface-2)' : 'transparent',
            cursor: 'pointer', alignItems: 'center', fontSize: 13, color: 'var(--fg-1)',
            transition: 'background 120ms ease',
          }}
            onMouseEnter={e => { if (selected !== f.name) e.currentTarget.style.background = 'var(--surface-1)'; }}
            onMouseLeave={e => { if (selected !== f.name) e.currentTarget.style.background = 'transparent'; }}>
            <Icon name={f.type === 'folder' ? 'folder' : 'fileText'} size={14} color={f.type === 'folder' ? 'var(--service-hosting)' : 'var(--fg-3)'}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{f.name}</span>
            <span style={{ textAlign: 'right', fontSize: 12, color: 'var(--fg-3)' }}>{f.size}</span>
            <span style={{ textAlign: 'right', fontSize: 12, color: 'var(--fg-3)' }}>{f.modified}</span>
            <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
              <button style={iconBtn}><Icon name="download" size={12}/></button>
              <button style={iconBtn}><Icon name="edit" size={12}/></button>
              <button style={iconBtn}><Icon name="trash" size={12}/></button>
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

const iconBtn = {
  width: 26, height: 26, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  background: 'transparent', border: 'none', borderRadius: 6, cursor: 'pointer', color: 'var(--fg-3)',
};

// ---------- Backups tab ----------
function HostingBackups({ srv }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 18, background: 'rgba(143,168,255,0.04)', border: '1px solid var(--border-1)', borderRadius: 12, marginBottom: 14 }}>
        <Icon name="cloud" size={24} color="var(--accent)"/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>Sauvegardes automatiques AWS S3</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>Snapshot quotidien à 03:00 · 30 jours de rétention · stockage chiffré AES-256</div>
        </div>
        <Button variant="primary" size="sm" icon="plus">Snapshot manuel</Button>
      </div>
      <Panel style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 100px 140px 80px 200px', gap: 16, padding: '10px 22px', borderBottom: '1px solid var(--border-1)', fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>
          <span>Nom du snapshot</span>
          <span style={{ textAlign: 'right' }}>Taille</span>
          <span>Date</span>
          <span>Type</span>
          <span style={{ textAlign: 'right' }}>Actions</span>
        </div>
        {srv.backups.map((b, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 100px 140px 80px 200px', gap: 16, padding: '14px 22px', borderTop: '1px solid var(--border-1)', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="cloud" size={14} color="var(--fg-3)"/>
              <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)' }}>{b.name}</code>
            </div>
            <span style={{ fontSize: 12, color: 'var(--fg-3)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{b.size}</span>
            <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>{b.date}</span>
            <Badge tone={b.auto ? 'subtle' : 'brand'} size="sm">{b.auto ? 'Auto' : 'Manuel'}</Badge>
            <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
              <Button variant="ghost" size="xs" icon="download">DL</Button>
              <Button variant="ghost" size="xs" icon="refresh">Restaurer</Button>
              <Button variant="ghost" size="xs" icon="trash"/>
            </div>
          </div>
        ))}
      </Panel>
    </div>
  );
}

// ---------- Network tab ----------
function HostingNetwork({ srv }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="dash-main">
      <Panel style={{ padding: 22 }}>
        <SectionHead title="Connexion principale"/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <CopyField label="IP publique" value={srv.network.ip}/>
          <CopyField label="Port GMod" value={String(srv.network.port)}/>
          <CopyField label="SFTP" value={srv.network.sftp}/>
        </div>
        <Button variant="ghost" size="sm" icon="plus" style={{ marginTop: 14 }}>Ajouter une allocation</Button>
      </Panel>
      <Panel style={{ padding: 22 }}>
        <SectionHead title="Protection Anti-DDoS"/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <Icon name="shieldCheck" size={28} color="var(--cash)"/>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--cash)' }}>Protection active</div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>Anti-DDoS GMod-aware · couche applicative</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Stat value={srv.network.ddos.attacks24h} label="Attaques 24 h"/>
          <Stat value={`${srv.network.ddos.mitigated} / ${srv.network.ddos.attacks24h}`} label="Mitigées · 0 impact"/>
        </div>
      </Panel>
      <Panel style={{ padding: 22, gridColumn: 'span 2' }}>
        <SectionHead title="Trafic réseau · 24 h"/>
        <Sparkline data={[0.4, 0.6, 1.2, 0.8, 1.4, 2.1, 3.7, 4.2, 3.9, 4.5, 5.1, 4.8, 5.2, 4.9, 4.7, 4.2, 3.8, 3.4, 3.1, 2.8, 3.2, 3.9, 4.6, 4.1]} color="var(--xp)" width={1000} height={120} fill/>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>
          <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>maintenant</span>
        </div>
      </Panel>
    </div>
  );
}

// ---------- Startup tab ----------
function HostingStartup({ srv }) {
  return (
    <Panel style={{ padding: 22, maxWidth: 920 }}>
      <SectionHead title="Configuration de démarrage"/>
      <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 18 }}>Les variables sont injectées au démarrage de votre serveur. Modifiez-les puis redémarrez pour appliquer.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { name: 'SRCDS_MAP', value: srv.map, doc: 'Map de démarrage' },
          { name: 'SRCDS_GAMEMODE', value: 'darkrp_wasied', doc: 'Gamemode chargé au boot' },
          { name: 'SRCDS_MAXPLAYERS', value: '80', doc: 'Slots ouverts (limite de plan : 80)' },
          { name: 'SRCDS_HOSTNAME', value: 'MainCity RP · Powered by Wasied', doc: 'Nom affiché dans la liste serveurs' },
          { name: 'SRCDS_PASSWORD', value: '', doc: 'Mot de passe d\'accès, vide = serveur public' },
          { name: 'WORKSHOP_ID', value: '3194827361', doc: 'Collection Workshop chargée au boot' },
          { name: 'STEAM_TOKEN', value: '••••••••••••••••', doc: 'GSLT · Steam Game Server Login Token' },
        ].map((v, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 1.5fr', gap: 14, alignItems: 'center' }}>
            <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>{v.name}</code>
            <input defaultValue={v.value} style={{ background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 8, padding: '8px 12px', color: 'var(--fg-1)', fontFamily: 'var(--font-mono)', fontSize: 12, outline: 'none' }}/>
            <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>{v.doc}</span>
          </div>
        ))}
      </div>
      <Button variant="primary" size="md" style={{ marginTop: 20 }} icon="check">Sauver et redémarrer</Button>
    </Panel>
  );
}

// ---------- Settings tab ----------
function HostingSettings({ srv }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, maxWidth: 1100 }} className="dash-main">
      <Panel style={{ padding: 22 }}>
        <SectionHead title="Identité du serveur"/>
        <Input label="Nom" defaultValue={srv.name}/>
        <div style={{ marginTop: 14 }}>
          <Input label="ID (lecture seule)" defaultValue={srv.id} disabled/>
        </div>
        <Button variant="primary" size="sm" style={{ marginTop: 18 }}>Sauver</Button>
      </Panel>
      <Panel style={{ padding: 22 }}>
        <SectionHead title="Synchronisation Git"/>
        <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 14 }}>Inclus dans Elite. Synchronise un repo GitHub sur votre serveur de dev à chaque push.</p>
        <Input label="Repo GitHub" placeholder="username/mon-addon"/>
        <div style={{ marginTop: 14 }}>
          <Input label="Branche" defaultValue="main"/>
        </div>
        <Toggle on={false} onChange={()=>{}} label="Auto-pull sur push" sub="Webhook GitHub configuré automatiquement"/>
      </Panel>
      <Panel style={{ padding: 22 }}>
        <SectionHead title="Réinstallation"/>
        <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 14 }}>Repart d'une installation propre du gamemode. Les fichiers user sont conservés sauf si vous décochez ci-dessous.</p>
        <Toggle on={true} onChange={()=>{}} label="Conserver mes fichiers" sub="addons, lua, data, cfg"/>
        <Button variant="ghost" size="sm" style={{ marginTop: 14, color: 'var(--xp)' }} icon="refresh">Réinstaller</Button>
      </Panel>
      <Panel style={{ padding: 22, border: '1px solid rgba(251,113,133,0.16)' }}>
        <SectionHead title="Zone dangereuse"/>
        <div style={{ padding: 14, background: 'rgba(251,113,133,0.04)', border: '1px solid rgba(251,113,133,0.12)', borderRadius: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 4 }}>Résilier ce serveur</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 14 }}>Action immédiate. Une sauvegarde finale est créée et conservée 30 jours.</div>
          <Button variant="danger" size="sm">Résilier le serveur</Button>
        </div>
      </Panel>
    </div>
  );
}

Object.assign(window, { AppHostingServer });