// lead-detail.jsx — Right-side accordion panel for a single lead

function LeadDetail({ lead, allLeads, onClose, onOpenLead, onAskAgent, fullHeight = false }) {
  const [open, setOpen] = React.useState({
    profile: true, scoring: false, conv: false, matchings: false,
    actions: false, notes: false, history: false,
  });
  const [notes, setNotes] = React.useState(
    lead.type === 'presta'
      ? `Excellent feeling au premier échange. Solide sur le delivery, peut faire du tech lead à terme.\n\nDéjà refusé 1 mission (TJM trop bas). À garder pour les beaux comptes.`
      : `Bon track record de signature. Process interne RH lent (3 sem). Toujours valider le TJM AVANT de présenter.`,
  );
  if (!lead) return null;

  const toggle = (k) => setOpen(o => ({ ...o, [k]: !o[k] }));
  const ChevR = window.Icon.chev;

  return (
    <div className="split-detail" style={{ height: fullHeight ? '100%' : undefined }}>
      <div className="detail-head">
        <window.Avatar name={lead.name} status={lead.statusKey} size="lg" />
        <div className="meta-stack">
          <div className="hstack" style={{ alignItems: 'baseline' }}>
            <span className="name">{lead.name}</span>
            <span className={`chip ${lead.statusKey} sm`}>{lead.statusLabel} · {lead.score.toFixed(1)}/10</span>
            <span className="tag brown" style={{ marginLeft: 4 }}>
              {lead.type === 'presta' ? 'Prestataire' : 'Client'}
            </span>
          </div>
          <div className="head">{lead.headline}</div>
          <div className="hstack tiny muted" style={{ marginTop: 2, gap: 14 }}>
            <span className="hstack" style={{ gap: 4 }}>
              <window.Icon.globe size={11} /> {lead.location}
            </span>
            <span className="hstack" style={{ gap: 4 }}>
              <window.Icon.link size={11} /> {lead.linkedinUrl}
            </span>
            <span>· Capturé {lead.capturedAt}</span>
          </div>
        </div>
        <div className="quick-actions">
          <button className="btn ghost" title="Plein écran">
            <window.Icon.expand size={14} />
          </button>
          <button className="btn" onClick={() => onAskAgent(lead)}>
            <window.Icon.sparkle size={13} /> Agent Lead
          </button>
          <button className="btn primary">
            <window.Icon.send size={13} /> Répondre
          </button>
        </div>
      </div>

      <div className="main-scroll">
        <Acc open={open.profile} onToggle={() => toggle('profile')} title="Profil">
          <LeadProfile lead={lead} />
        </Acc>

        <Acc open={open.scoring} onToggle={() => toggle('scoring')} title="Scoring"
             badge={`${lead.score.toFixed(1)}/10 · ${lead.statusLabel}`}>
          <LeadScoring lead={lead} />
        </Acc>

        <Acc open={open.conv} onToggle={() => toggle('conv')} title="Conversations LinkedIn"
             badge={`${window.APPORTOO.dmThread(lead.id).length} messages`}>
          <LeadConv lead={lead} onAskAgent={onAskAgent} />
        </Acc>

        <Acc open={open.matchings} onToggle={() => toggle('matchings')} title="Matchings"
             badge={`${(window.APPORTOO.MATCHES[lead.id] || []).length} compatibles`}>
          <LeadMatchings lead={lead} onOpenLead={onOpenLead} />
        </Acc>

        <Acc open={open.actions} onToggle={() => toggle('actions')} title="Actions à faire"
             badge={`${(window.APPORTOO.ACTIONS[lead.id] || []).filter(a => !a.done).length} ouvertes`}>
          <LeadActions lead={lead} />
        </Acc>

        <Acc open={open.notes} onToggle={() => toggle('notes')} title="Notes perso">
          <textarea className="notes-area" value={notes} onChange={e => setNotes(e.target.value)} />
        </Acc>

        <Acc open={open.history} onToggle={() => toggle('history')} title="Historique"
             badge={`${(window.APPORTOO.TIMELINE[lead.id] || []).length} évts`}>
          <LeadTimeline lead={lead} />
        </Acc>
      </div>
    </div>
  );
}

function Acc({ open, onToggle, title, children, badge }) {
  return (
    <div className={`acc ${open ? 'is-open' : ''}`}>
      <div className="acc-head" onClick={onToggle}>
        <window.Icon.chev size={14} className="chev" />
        <h3>{title}</h3>
        {badge && <span className="badge">{badge}</span>}
      </div>
      <div className="acc-body">{children}</div>
    </div>
  );
}

function LeadProfile({ lead }) {
  const skills = window.APPORTOO.SKILLS;
  return (
    <div>
      <dl className="kv">
        {lead.type === 'presta' && (
          <>
            <dt>Tarif jour</dt>
            <dd><b>{lead.tarifJour}</b> <span className="muted tiny">· négociable</span></dd>
            <dt>Anglais</dt>
            <dd>{lead.anglais} <span className="muted tiny">(CECRL)</span></dd>
            <dt>Statut freelance</dt>
            <dd>{lead.freelance} · SASU active</dd>
            <dt>Ancienneté</dt>
            <dd>{lead.seniority}</dd>
            <dt>Stack principale</dt>
            <dd>{lead.stack.map(s => (
              <span key={s} className={`tag ${skills[s]?.cls || ''}`}>{skills[s]?.label || s}</span>
            ))}</dd>
          </>
        )}
        {lead.type === 'client' && (
          <>
            <dt>Société</dt>
            <dd><b>{lead.company}</b></dd>
            <dt>Mission</dt>
            <dd>{lead.mission}</dd>
            <dt>Budget TJM</dt>
            <dd>{lead.budget}</dd>
            <dt>Remote</dt>
            <dd>{lead.remote}</dd>
            <dt>Durée</dt>
            <dd>{lead.duree} · démarrage {lead.start}</dd>
            <dt>Anglais</dt>
            <dd>{lead.anglais}</dd>
            <dt>Stack recherchée</dt>
            <dd>{lead.stack.map(s => (
              <span key={s} className={`tag ${skills[s]?.cls || ''}`}>{skills[s]?.label || s}</span>
            ))}</dd>
          </>
        )}
        <dt>Localisation</dt>
        <dd>{lead.location}</dd>
        <dt>Statut lead</dt>
        <dd><span className="chip sm">{lead.leadStatus}</span></dd>
      </dl>
      <div style={{ marginTop: 14, display: 'flex', gap: 6 }}>
        <button className="btn"><window.Icon.edit size={12} /> Éditer</button>
        <button className="btn"><window.Icon.external size={12} /> Voir LinkedIn</button>
      </div>
    </div>
  );
}

function LeadScoring({ lead }) {
  const breakdown = lead.breakdown;
  const labels = lead.type === 'presta'
    ? { anglais: 'Anglais', freelance: 'Statut freelance', stack: 'Stack confirmée', dispo: 'Dispo' }
    : { urgence: 'Urgence', budget: 'Budget', scope: 'Scope clair', communication: 'Communication' };
  return (
    <div>
      <div className="score-big">
        <div className={`score-circ ${lead.statusKey}`} style={{ '--p': lead.scoreP }}>
          <div className="num">{lead.score.toFixed(1)}<span className="out">/10</span></div>
        </div>
        <div className="score-breakdown">
          {Object.entries(breakdown).map(([k, v]) => (
            <div key={k} className={`score-bar ${v >= 9 ? 'turq' : v >= 7 ? 'warm' : 'cold'}`}>
              <span>{labels[k] || k}</span>
              <span className="bar"><i style={{ width: `${v * 10}%` }} /></span>
              <span className="v">{v}/10</span>
            </div>
          ))}
        </div>
      </div>
      <div className="muted tiny" style={{ borderTop: '1px dashed var(--line)', paddingTop: 10 }}>
        Score recalculé par l'agent IA à chaque nouveau message — pondération configurable dans Réglages › Grille de scoring.
      </div>
    </div>
  );
}

function LeadConv({ lead, onAskAgent }) {
  const thread = window.APPORTOO.dmThread(lead.id);
  const [hovered, setHovered] = React.useState(null);
  return (
    <div className="chat">
      {thread.map((m, i) => (
        <div key={i} className={`bubble ${m.from === 'me' ? 'me' : ''}`}>
          {m.from !== 'me' && <window.Avatar name={lead.name} size="sm" />}
          <div>
            <div className="body">
              {m.body}
              {m.from !== 'me' && (
                <span className="ai-icn" title="Suggestion IA" onClick={() => onAskAgent(lead)}>
                  <window.Icon.sparkle size={11} />
                </span>
              )}
            </div>
            <div className="meta">{m.t}</div>
          </div>
        </div>
      ))}
      {/* Inline AI suggestion */}
      <div className="ai-suggest">
        <div className="hdr">
          <window.Icon.sparkle size={11} />
          Réponse suggérée par l'agent
        </div>
        <div>
          {lead.type === 'presta'
            ? `Salut ${lead.name.split(' ')[0]}, ok j'ai un compte sympa qui matche bien (Snowflake/dbt, hybride 2j/sem, TJM ${lead.tarifJour}). On en parle jeudi 11h ? Je t'envoie le brief en MP avant le call.`
            : `Bonjour ${lead.name.split(' ')[0]}, j'ai 2 profils qui correspondent au scope. Je vous envoie un récap par email d'ici demain matin avec leurs CV. Préférez-vous un call ou par écrit pour valider la shortlist ?`}
        </div>
        <div className="acts">
          <button className="primary"><window.Icon.copy size={11} /> Copier</button>
          <button><window.Icon.sparkle size={11} /> Affiner</button>
          <button>Régénérer</button>
        </div>
      </div>
    </div>
  );
}

function LeadMatchings({ lead, onOpenLead }) {
  const matches = (window.APPORTOO.MATCHES[lead.id] || []).map(m => ({
    ...m, lead: window.APPORTOO.byId(m.id),
  })).filter(m => m.lead);
  if (matches.length === 0) {
    return <div className="muted tiny">Aucun matching pour l'instant. L'agent recalcule à chaque ajout.</div>;
  }
  return (
    <div className="vstack" style={{ gap: 8 }}>
      {matches.map((m) => (
        <div key={m.id} className="lead-row" style={{ borderRadius: 8, border: '1px solid var(--line)', padding: '10px 12px', gridTemplateColumns: 'auto 1fr auto' }}
             onClick={() => onOpenLead(m.id)}>
          <window.Avatar name={m.lead.name} status={m.lead.statusKey} size="sm" />
          <div className="meta">
            <div className="meta-row">
              <span className="name">{m.lead.name}</span>
              <span className="tag">{m.lead.type === 'presta' ? 'Presta' : 'Mission'}</span>
            </div>
            <div className="head">{m.reason}</div>
          </div>
          <span className={`score ${m.score >= 9 ? 'turq' : m.score >= 7 ? 'warm' : ''}`}>
            {m.score.toFixed(1)}<span className="out">/10</span>
          </span>
        </div>
      ))}
    </div>
  );
}

function LeadActions({ lead }) {
  const [actions, setActions] = React.useState(window.APPORTOO.ACTIONS[lead.id] || []);
  const toggle = (id) => setActions(a => a.map(x => x.id === id ? { ...x, done: !x.done } : x));
  return (
    <div>
      {actions.length === 0 && (
        <div className="muted tiny">Aucune action générée. L'agent surveille les conv pour proposer.</div>
      )}
      {actions.map(a => (
        <div key={a.id} className={`action-row ${a.done ? 'done' : ''}`}>
          <div className="check" onClick={() => toggle(a.id)}>
            <window.Icon.check size={11} />
          </div>
          <div className="label">{a.label}</div>
          <div className={`due ${a.urgent && !a.done ? 'urgent' : ''}`}>{a.due}</div>
        </div>
      ))}
      <button className="btn ghost" style={{ marginTop: 8, fontSize: 12 }}>
        <window.Icon.plus size={12} /> Nouvelle action
      </button>
    </div>
  );
}

function LeadTimeline({ lead }) {
  const tl = window.APPORTOO.TIMELINE[lead.id] || [];
  if (tl.length === 0) {
    return <div className="muted tiny">Pas encore d'événements historisés.</div>;
  }
  return (
    <div className="timeline">
      {tl.map((t, i) => (
        <div key={i} className={`tl-item ${t.cls}`}>
          <div className="when">{t.when}</div>
          <div className="what">{t.what}</div>
          <div className="who">{t.who}</div>
        </div>
      ))}
    </div>
  );
}

window.LeadDetail = LeadDetail;