// home.jsx — Accueil view: clean team-lead agent + leads + DMs

function HomeView({ onOpenLead, onQualify, leads, newLeads, onAskAgent }) {
  const hotDms = leads
    .filter(l => l.unread || l.statusKey === 'hot' || l.statusKey === 'warm')
    .sort((a, b) => b.score - a.score);

  return (
    <div style={{
      display: 'grid',
      gridTemplateRows: 'minmax(0, 1fr) minmax(0, 1fr)',
      gap: 16,
      padding: 16,
      height: '100%',
      boxSizing: 'border-box',
    }}>
      <TeamLeadAgent
        leads={leads}
        newLeads={newLeads}
        onAsk={onAskAgent}
      />
      <div className="home-bottom">
        <div className="card">
          <div className="card-head">
            <h2>Leads à qualifier</h2>
            <span className="count-pill">{newLeads.length}</span>
            <div className="spacer" />
            <span className="muted tiny">Nouveaux inconnus</span>
          </div>
          <div className="card-body">
            {newLeads.length === 0 && <HomeEmpty kind="qualif" />}
            {newLeads.map((l) => (
              <QualifyRowCompact key={l.id} lead={l} onQualify={onQualify} />
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <h2>DM à traiter</h2>
            <span className="count-pill">{hotDms.length}</span>
            <div className="spacer" />
            <span className="muted tiny">Triés par score IA</span>
          </div>
          <div className="card-body">
            {hotDms.length === 0 && <HomeEmpty kind="dm" />}
            {hotDms.map((l) => (
              <DmRowCompact key={l.id} lead={l} onOpen={() => onOpenLead(l.id)} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Team-lead Agent — minimal greeting, the rest sits in the sidebar
// ─────────────────────────────────────────────────────────────────
function TeamLeadAgent({ leads, newLeads, onAsk }) {
  const [input, setInput] = React.useState('');

  const totalMsgs = leads.reduce((acc, l) => acc + window.APPORTOO.dmThread(l.id).length, 0);

  const submit = () => {
    if (!input.trim()) return;
    onAsk && onAsk({ supervisor: true, query: input });
    setInput('');
  };

  const now = new Date();
  const hour = now.getHours();
  const part = hour < 12 ? 'matin' : hour < 18 ? 'après-midi' : 'soir';
  const article = part === 'après-midi' ? 'cet' : 'ce';

  return (
    <div className="team-lead">
      <div className="tl-head">
        <div className="tl-avatar"><window.Icon.sparkle size={18} /></div>
        <div className="tl-meta">
          <div className="tl-name">Agent · Chef d'orchestre</div>
          <div className="tl-sub">
            Vision globale — accès à <b>{leads.length}</b> leads, <b>{totalMsgs}</b> messages, ton calendrier et ton dossier.
          </div>
        </div>
        <span className="chip turq dot" style={{ fontSize: 11 }}>Actif</span>
        <button className="btn ghost" title="Plein écran" onClick={() => onAsk && onAsk({ supervisor: true, fullscreen: true })}>
          <window.Icon.expand size={14} />
        </button>
      </div>

      <div className="tl-clean">
        <div className="tl-hero">
          <div className="tl-h1">Hello François.</div>
          <div className="tl-h2">On attaque quoi {article} {part} ?</div>
        </div>
      </div>

      <div className="tl-input">
        <div className="tl-input-row">
          <window.Icon.sparkle size={16} style={{ color: 'var(--brown)' }} />
          <input
            placeholder="Demande-moi ce que tu veux — j'ai tout le contexte…"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
          />
          <button className="btn primary" onClick={submit} disabled={!input.trim()}>
            <window.Icon.send size={13} /> Envoyer
            <span className="kbd">↵</span>
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Compact rows for the bottom half
// ─────────────────────────────────────────────────────────────────
function QualifyRowCompact({ lead, onQualify }) {
  const tagCls =
    lead.suggestedTag === 'Presta' ? 'turq' :
    lead.suggestedTag === 'Client' ? 'brown' : '';
  return (
    <div className="lead-row compact">
      <window.Avatar name={lead.name} size="sm" />
      <div className="meta">
        <div className="meta-row">
          <span className="name">{lead.name}</span>
          <span className={`chip sm ${tagCls}`} style={{ fontSize: 10 }}>
            <window.Icon.sparkle size={9} /> {lead.suggestedTag}
          </span>
          <span className="time">· {lead.when}</span>
        </div>
        <div className="head">{lead.headline}</div>
      </div>
      <div className="hstack" style={{ gap: 6 }}>
        <button className="btn icon" title="Voir LinkedIn">
          <window.Icon.external size={13} />
        </button>
        <button className="btn primary" onClick={() => onQualify(lead)}>
          Qualifier
        </button>
      </div>
    </div>
  );
}

function DmRowCompact({ lead, onOpen }) {
  return (
    <div className="lead-row compact-dm" onClick={onOpen}>
      <div className={`status-stripe ${lead.statusKey}`} />
      <window.Avatar name={lead.name} status={lead.statusKey} size="sm" />
      <div className="meta">
        <div className="meta-row">
          <span className="name">{lead.name}</span>
          <span className={`chip sm ${lead.statusKey}`} style={{ fontSize: 10 }}>{lead.statusLabel}</span>
          {lead.unread && <span style={{ width: 6, height: 6, background: 'var(--coral)', borderRadius: '50%', flexShrink: 0 }} />}
        </div>
        <div className="preview">{lead.preview}</div>
      </div>
      <span className={`score ${lead.statusKey}`}>
        {lead.score.toFixed(1)}
      </span>
      <button className="btn ghost icon" onClick={(e) => { e.stopPropagation(); onOpen(); }}
              title="Ouvrir">
        <window.Icon.chev size={14} />
      </button>
    </div>
  );
}

function HomeEmpty({ kind }) {
  return (
    <div className="empty" style={{ padding: '40px 24px' }}>
      <div className="mark">
        {kind === 'qualif' ? <window.Icon.user size={22} /> : <window.Icon.inbox size={22} />}
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--brown)', fontWeight: 500, marginBottom: 4 }}>
        {kind === 'qualif' ? 'Tout est qualifié ✓' : 'Inbox zero ✓'}
      </div>
      <div className="tiny">Reviens demain matin.</div>
    </div>
  );
}

window.HomeView = HomeView;