// leads-list.jsx — Prestataires, Clients, Conversations split views

function LeadsListView({ kind, allLeads, selectedId, onSelect, onOpenLead, onAskAgent }) {
  const [search, setSearch] = React.useState('');
  const [filters, setFilters] = React.useState({ status: 'all', tags: [] });

  const pool = kind === 'presta' ? allLeads.filter(l => l.type === 'presta')
              : kind === 'client' ? allLeads.filter(l => l.type === 'client')
              : allLeads;

  const filtered = pool.filter(l => {
    if (filters.status !== 'all' && l.statusKey !== filters.status) return false;
    if (filters.tags.length > 0 && !filters.tags.some(t => l.stack?.includes(t))) return false;
    if (search && !`${l.name} ${l.headline}`.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const sel = filtered.find(l => l.id === selectedId) || filtered[0];

  const allTags = ['python', 'spark', 'dbt', 'snowflake', 'gcp', 'aws', 'llm', 'rag', 'databricks'];
  const toggleTag = (t) =>
    setFilters(f => ({ ...f, tags: f.tags.includes(t) ? f.tags.filter(x => x !== t) : [...f.tags, t] }));

  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="split" style={{ height: 'calc(100vh - 60px - 32px)' }}>
        <div className="split-list">
          <div className="split-list-head">
            <div className="search">
              <window.Icon.search size={14} />
              <input placeholder={`Rechercher ${kind === 'presta' ? 'un presta' : kind === 'client' ? 'un client' : 'un lead'}…`}
                     value={search} onChange={e => setSearch(e.target.value)} />
              <span className="kbd">/</span>
            </div>
            <div className="filter-bar">
              {[
                { k: 'all', l: 'Tous', cls: '' },
                { k: 'hot', l: 'Hot', cls: 'hot' },
                { k: 'warm', l: 'Warm', cls: 'warm' },
                { k: 'cold', l: 'Cold', cls: 'cold' },
              ].map(f => (
                <span key={f.k}
                      className={`chip dot ${f.cls} ${filters.status === f.k ? 'is-on' : ''}`}
                      onClick={() => setFilters(x => ({ ...x, status: f.k }))}>
                  {f.l}
                </span>
              ))}
              <div className="sep" />
              {allTags.slice(0, 5).map(t => (
                <span key={t}
                      className={`chip sm ${filters.tags.includes(t) ? 'is-on' : ''}`}
                      onClick={() => toggleTag(t)}>
                  {window.APPORTOO.SKILLS[t]?.label || t}
                </span>
              ))}
              <span className="chip sm" title="Plus de filtres">
                <window.Icon.plus size={11} />
              </span>
            </div>
            <div className="hstack tiny muted" style={{ justifyContent: 'space-between' }}>
              <span><b style={{ color: 'var(--ink)' }}>{filtered.length}</b> {kind === 'presta' ? 'prestataires' : kind === 'client' ? 'clients' : 'leads'}</span>
              <span className="mono">Trié par score ↓</span>
            </div>
          </div>
          <div className="split-list-scroll">
            {filtered.length === 0 && (
              <div className="empty">Aucun résultat.</div>
            )}
            {filtered
              .sort((a, b) => b.score - a.score)
              .map(l => (
                <LeadCompactRow key={l.id} lead={l}
                                selected={sel && l.id === sel.id}
                                onClick={() => onSelect(l.id)} />
              ))}
          </div>
        </div>

        {sel ? (
          <window.LeadDetail lead={sel} allLeads={allLeads}
                             onOpenLead={onSelect}
                             onAskAgent={onAskAgent}
                             fullHeight />
        ) : (
          <div className="split-detail">
            <div className="empty" style={{ height: '100%' }}>
              <div className="mark"><window.Icon.user size={22} /></div>
              <div>Sélectionne un lead pour voir sa fiche.</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function LeadCompactRow({ lead, selected, onClick }) {
  return (
    <div className={`lead-compact ${selected ? 'is-selected' : ''}`} onClick={onClick} style={{ position: 'relative' }}>
      <window.Avatar name={lead.name} status={lead.statusKey} size="sm" />
      <div className="vstack" style={{ gap: 2, minWidth: 0 }}>
        <div className="top">
          <span className="nm">{lead.name}</span>
          {lead.unread && <span style={{ width: 6, height: 6, background: 'var(--coral)', borderRadius: '50%', flexShrink: 0 }} />}
        </div>
        <div className="hd">{lead.headline}</div>
        <div className="hstack" style={{ gap: 4, marginTop: 2 }}>
          {(lead.stack || []).slice(0, 3).map(s => (
            <span key={s} className="tag" style={{ fontSize: 10 }}>{window.APPORTOO.SKILLS[s]?.label || s}</span>
          ))}
        </div>
      </div>
      <div className="right">
        <span className={`score ${lead.statusKey} sm`} style={{ fontSize: 11 }}>
          {lead.score.toFixed(1)}
        </span>
        <span className="tiny muted mono">{lead.lastSeen}</span>
      </div>
    </div>
  );
}

window.LeadsListView = LeadsListView;

// ============================================================
// Conversations view — mail-style inbox
// ============================================================
function ConversationsView({ allLeads, selectedId, onSelect, onAskAgent }) {
  const [filter, setFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const filtered = allLeads.filter(l => {
    if (filter === 'unread' && !l.unread) return false;
    if (filter === 'pending' && !window.APPORTOO.ACTIONS[l.id]?.some(a => !a.done)) return false;
    if (search && !`${l.name} ${l.preview}`.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });
  const sel = filtered.find(l => l.id === selectedId) || filtered[0];
  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="split" style={{ height: 'calc(100vh - 60px - 32px)', gridTemplateColumns: '380px 1fr' }}>
        <div className="split-list">
          <div className="split-list-head">
            <div className="search">
              <window.Icon.search size={14} />
              <input placeholder="Rechercher dans les conversations…" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <div className="filter-bar">
              {[
                { k: 'all', l: 'Toutes' },
                { k: 'unread', l: 'Non lues' },
                { k: 'pending', l: 'Action en attente' },
              ].map(f => (
                <span key={f.k} className={`chip ${filter === f.k ? 'is-on' : ''}`} onClick={() => setFilter(f.k)}>
                  {f.l}
                </span>
              ))}
            </div>
          </div>
          <div className="split-list-scroll">
            {filtered.map(l => (
              <div key={l.id}
                   className={`conv-list ${l.unread ? 'unread' : ''} ${sel && l.id === sel.id ? 'is-selected' : ''}`}
                   onClick={() => onSelect(l.id)}>
                <window.Avatar name={l.name} status={l.statusKey} size="sm" />
                <div className="vstack" style={{ gap: 2, minWidth: 0 }}>
                  <div className="hstack" style={{ gap: 6 }}>
                    <span className="ttl">{l.name}</span>
                    <span className="tag" style={{ fontSize: 10 }}>{l.type === 'presta' ? 'Presta' : 'Client'}</span>
                  </div>
                  <span className="pv">{l.preview}</span>
                </div>
                <div className="vstack" style={{ alignItems: 'flex-end', gap: 4 }}>
                  <span className="tm">{l.lastSeen}</span>
                  <span className={`chip sm ${l.statusKey}`}>{l.statusLabel}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        {sel && (
          <ConvDetail lead={sel} onAskAgent={onAskAgent} />
        )}
      </div>
    </div>
  );
}

function ConvDetail({ lead, onAskAgent }) {
  const thread = window.APPORTOO.dmThread(lead.id);
  return (
    <div className="split-detail">
      <div className="detail-head">
        <window.Avatar name={lead.name} status={lead.statusKey} size="lg" />
        <div className="meta-stack">
          <span className="name">{lead.name}</span>
          <div className="head">{lead.headline}</div>
          <div className="hstack tiny muted" style={{ gap: 10 }}>
            <span>{thread.length} messages</span>
            <span>· dernier {lead.lastSeen}</span>
          </div>
        </div>
        <div className="quick-actions">
          <button className="btn ghost"><window.Icon.archive size={13} /> Archiver <span className="kbd">E</span></button>
          <button className="btn" onClick={() => onAskAgent(lead)}><window.Icon.sparkle size={13} /> Agent</button>
          <button className="btn primary"><window.Icon.reply size={13} /> Répondre <span className="kbd">R</span></button>
        </div>
      </div>
      <div className="main-scroll" style={{ padding: '20px 22px' }}>
        <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>
          ))}
          <div className="ai-suggest">
            <div className="hdr">
              <window.Icon.sparkle size={11} />
              Réponse suggérée
            </div>
            <div>
              {lead.type === 'presta'
                ? `Salut ${lead.name.split(' ')[0]}, top, je note. Je te bloque jeudi 11h pour un call brief, ça te va ? Je t'envoie les détails par mail entre-temps.`
                : `Bonjour ${lead.name.split(' ')[0]}, parfait. Je vous envoie 2 profils ciblés d'ici demain matin. Préférez-vous une présentation rapide en visio ou un envoi écrit ?`}
            </div>
            <div className="acts">
              <button className="primary"><window.Icon.copy size={11} /> Copier</button>
              <button>Affiner</button>
              <button>Régénérer</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ConversationsView = ConversationsView;