// settings.jsx — Réglages view

function SettingsView() {
  const [tab, setTab] = React.useState('extension');
  const [grid, setGrid] = React.useState([
    { name: 'Anglais (niveau CECRL)', weight: 20, threshold: 7 },
    { name: 'Statut freelance confirmé', weight: 25, threshold: 8 },
    { name: 'Stack technique alignée', weight: 30, threshold: 7 },
    { name: 'Disponibilité court terme', weight: 15, threshold: 6 },
    { name: 'Tarif dans le budget', weight: 10, threshold: 7 },
  ]);
  return (
    <div className="page">
      <div className="set-grid">
        <div className="set-nav">
          {[
            { k: 'extension', l: 'Extension Chrome', i: 'globe' },
            { k: 'agents', l: 'Agents IA', i: 'sparkle' },
            { k: 'scoring', l: 'Grille de scoring', i: 'star' },
            { k: 'shortcuts', l: 'Raccourcis clavier', i: 'cmd' },
            { k: 'data', l: 'Données & export', i: 'archive' },
          ].map(it => {
            const Ico = window.Icon[it.i];
            return (
              <div key={it.k} className={`set-nav-item ${tab === it.k ? 'is-active' : ''}`} onClick={() => setTab(it.k)}>
                <div className="hstack" style={{ gap: 8 }}>
                  <Ico size={14} style={{ color: tab === it.k ? 'var(--brown)' : 'var(--ink-3)' }} />
                  {it.l}
                </div>
              </div>
            );
          })}
        </div>
        <div>
          {tab === 'extension' && <ExtensionSettings />}
          {tab === 'agents' && <AgentsSettings />}
          {tab === 'scoring' && <ScoringSettings grid={grid} setGrid={setGrid} />}
          {tab === 'shortcuts' && <ShortcutsSettings />}
          {tab === 'data' && <DataSettings />}
        </div>
      </div>
    </div>
  );
}

function ExtensionSettings() {
  return (
    <>
      <div className="set-card">
        <h2>Extension Chrome</h2>
        <div className="sub">Synchronisation automatique des conversations et profils LinkedIn.</div>
        <div className="set-row">
          <div className="lbl">
            <b>Connectée</b>
            <span>Version 1.4.2 · Dernière synchro il y a 18 secondes</span>
          </div>
          <span className="chip turq dot">Active</span>
        </div>
        <div className="set-row">
          <div className="lbl">
            <b>Synchro automatique</b>
            <span>Capture chaque nouveau message reçu sur LinkedIn</span>
          </div>
          <Toggle on={true} />
        </div>
        <div className="set-row">
          <div className="lbl">
            <b>Enrichir profils</b>
            <span>Stack technique, ancienneté, tarif détectés par l'agent</span>
          </div>
          <Toggle on={true} />
        </div>
        <div className="set-row">
          <div className="lbl">
            <b>Notifier capture (bannière)</b>
            <span>Affiche une bannière en haut quand du nouveau contenu arrive</span>
          </div>
          <Toggle on={true} />
        </div>
      </div>
      <div className="set-card">
        <h2 style={{ fontSize: 17 }}>Comptes LinkedIn liés</h2>
        <div className="set-row">
          <window.Avatar name="François B." size="sm" />
          <div className="lbl">
            <b>François Berland</b>
            <span>Compte principal · 4 286 contacts</span>
          </div>
          <button className="btn ghost">Délier</button>
        </div>
      </div>
    </>
  );
}

function AgentsSettings() {
  return (
    <>
      <div className="set-card">
        <h2>Agents IA</h2>
        <div className="sub">Trois agents s'activent selon le contexte. Tu peux personnaliser leur ton et leur niveau d'autonomie.</div>
        <div className="set-row">
          <div className="lbl">
            <b>Agent Conversations</b>
            <span>Suggestions inline dans les threads LinkedIn (mode 1)</span>
          </div>
          <Toggle on={true} />
        </div>
        <div className="set-row">
          <div className="lbl">
            <b>Agent Lead</b>
            <span>Panneau latéral / plein écran contextualisé sur un lead (mode 2 & 3)</span>
          </div>
          <Toggle on={true} />
        </div>
        <div className="set-row">
          <div className="lbl">
            <b>Agent Superviseur</b>
            <span>Vision globale du pipeline, questions transverses (bouton flottant)</span>
          </div>
          <Toggle on={true} />
        </div>
      </div>
      <div className="set-card">
        <h2 style={{ fontSize: 17 }}>Tonalité de réponse</h2>
        <div className="sub">Comment l'agent doit s'exprimer dans les suggestions de réponse.</div>
        <div className="set-row">
          <div className="lbl">
            <b>Style</b>
            <span>L'agent s'adaptera à ce registre</span>
          </div>
          <select className="btn" style={{ width: 200 }}>
            <option>Cordial, tutoiement (défaut)</option>
            <option>Pro, vouvoiement</option>
            <option>Direct, sans formules</option>
          </select>
        </div>
      </div>
    </>
  );
}

function ScoringSettings({ grid, setGrid }) {
  const update = (i, k, v) => {
    setGrid(g => g.map((row, idx) => idx === i ? { ...row, [k]: v } : row));
  };
  const total = grid.reduce((a, b) => a + b.weight, 0);
  return (
    <>
      <div className="set-card">
        <h2>Grille de scoring — Prestataires</h2>
        <div className="sub">Pondération de chaque critère (somme = 100). Seuil minimum pour considérer le critère validé.</div>
        <div className="grid-row" style={{ borderBottom: '1px solid var(--line)', paddingBottom: 6, color: 'var(--ink-4)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
          <span>Critère</span>
          <span style={{ textAlign: 'center' }}>Poids %</span>
          <span style={{ textAlign: 'center' }}>Seuil</span>
        </div>
        {grid.map((row, i) => (
          <div key={i} className="grid-row">
            <span className="nm">{row.name}</span>
            <input type="number" value={row.weight} min={0} max={100} onChange={e => update(i, 'weight', Number(e.target.value))} />
            <input type="number" value={row.threshold} min={0} max={10} onChange={e => update(i, 'threshold', Number(e.target.value))} />
          </div>
        ))}
        <div className="hstack" style={{ paddingTop: 12, justifyContent: 'space-between' }}>
          <div className="muted tiny">
            Total poids : <b style={{ color: total === 100 ? 'var(--turq-deep)' : 'var(--coral-deep)' }}>{total}%</b>
            {total !== 100 && <span style={{ marginLeft: 6 }}>(doit valoir 100%)</span>}
          </div>
          <div className="hstack" style={{ gap: 6 }}>
            <button className="btn ghost">Réinitialiser</button>
            <button className="btn primary">Enregistrer</button>
          </div>
        </div>
      </div>
      <div className="set-card">
        <h2 style={{ fontSize: 17 }}>Seuils Hot / Warm / Cold</h2>
        <div className="sub">À partir de quel score un lead est considéré Hot ? Warm ?</div>
        <div className="set-row">
          <div className="lbl"><b>Hot</b><span>Score ≥ ce seuil</span></div>
          <span className="chip hot mono" style={{ fontSize: 12 }}>≥ 8.0</span>
        </div>
        <div className="set-row">
          <div className="lbl"><b>Warm</b><span>Score entre Warm et Hot</span></div>
          <span className="chip warm mono" style={{ fontSize: 12 }}>6.0 – 7.9</span>
        </div>
        <div className="set-row">
          <div className="lbl"><b>Cold</b><span>Score &lt; ce seuil</span></div>
          <span className="chip cold mono" style={{ fontSize: 12 }}>&lt; 6.0</span>
        </div>
      </div>
    </>
  );
}

function ShortcutsSettings() {
  const shortcuts = [
    { k: '⌘K', l: 'Palette de commande' },
    { k: '⌘J', l: 'Agent superviseur' },
    { k: 'J / K', l: 'Naviguer dans la liste (Superhuman)' },
    { k: 'E', l: 'Archiver' },
    { k: 'R', l: 'Répondre via agent' },
    { k: '↵', l: 'Ouvrir le lead sélectionné' },
    { k: 'G + H', l: 'Aller à Accueil' },
    { k: 'G + P', l: 'Aller à Prestataires' },
    { k: 'G + C', l: 'Aller à Clients' },
    { k: 'G + M', l: 'Aller à Matchings' },
    { k: '?', l: 'Afficher cette aide' },
  ];
  return (
    <div className="set-card">
      <h2>Raccourcis clavier</h2>
      <div className="sub">Inspirés de Superhuman — gardez les mains sur le clavier.</div>
      {shortcuts.map(s => (
        <div key={s.k} className="set-row">
          <div className="lbl"><b>{s.l}</b></div>
          <span className="kbd" style={{ fontFamily: 'var(--font-mono)', background: 'var(--bg-1)', padding: '3px 9px', borderRadius: 6, color: 'var(--ink-2)' }}>{s.k}</span>
        </div>
      ))}
    </div>
  );
}

function DataSettings() {
  return (
    <div className="set-card">
      <h2>Données & export</h2>
      <div className="sub">Tout est stocké en local. Export possible à tout moment.</div>
      <div className="set-row">
        <div className="lbl"><b>Leads</b><span>13 fiches · 41 Mo</span></div>
        <button className="btn">Exporter CSV</button>
      </div>
      <div className="set-row">
        <div className="lbl"><b>Conversations</b><span>342 messages capturés</span></div>
        <button className="btn">Exporter JSON</button>
      </div>
      <div className="set-row">
        <div className="lbl"><b>Sauvegarde chiffrée</b><span>iCloud Drive · dernière hier 22h11</span></div>
        <Toggle on={true} />
      </div>
    </div>
  );
}

function Toggle({ on }) {
  const [v, setV] = React.useState(on);
  return (
    <button onClick={() => setV(!v)} style={{
      width: 36, height: 20, borderRadius: 999, border: 0, padding: 0,
      background: v ? 'var(--turq)' : 'var(--ink-5)', position: 'relative', cursor: 'pointer',
    }}>
      <span style={{
        position: 'absolute', top: 2, left: v ? 18 : 2, width: 16, height: 16,
        background: '#fff', borderRadius: '50%', transition: 'left .15s',
        boxShadow: '0 1px 2px rgba(0,0,0,.25)',
      }} />
    </button>
  );
}

window.SettingsView = SettingsView;