// Messaging tab — segment composer + preview + send + history.

function MessagingView() {
  const [filter, setFilter] = React.useState({
    verified: 'all', hasMcp: 'all', q: '', inactiveDays: '',
    signupAfter: '', signupBefore: '', emails: ''
  });
  const [subject, setSubject] = React.useState('');
  const [body, setBody] = React.useState('');
  const [preview, setPreview] = React.useState(null);
  const [previewing, setPreviewing] = React.useState(false);
  const [previewError, setPreviewError] = React.useState(null);
  const [sending, setSending] = React.useState(false);
  const [confirmOpen, setConfirmOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [history, setHistory] = React.useState([]);
  const [historyLoading, setHistoryLoading] = React.useState(true);

  const reloadHistory = async () => {
    setHistoryLoading(true);
    try {
      const r = await API.get('/api/admin/messaging/history');
      setHistory(r.rows || []);
    } catch (_e) { /* ignore */ }
    setHistoryLoading(false);
  };

  React.useEffect(() => { reloadHistory(); }, []);

  const buildFilter = () => {
    const f = {};
    if (filter.q.trim()) f.q = filter.q.trim();
    if (filter.verified !== 'all') f.verified = filter.verified;
    if (filter.hasMcp !== 'all') f.hasMcp = filter.hasMcp;
    if (filter.signupAfter) f.signupAfter = new Date(filter.signupAfter).toISOString();
    if (filter.signupBefore) f.signupBefore = new Date(filter.signupBefore).toISOString();
    if (filter.inactiveDays !== '') f.inactiveDays = parseInt(filter.inactiveDays, 10);
    if (filter.emails.trim()) {
      f.emails = filter.emails.split(/[,\s]+/).map((s) => s.trim()).filter(Boolean);
    }
    return f;
  };

  const runPreview = async () => {
    setPreviewing(true); setPreviewError(null);
    try {
      const r = await API.post('/api/admin/messaging/preview', buildFilter());
      setPreview(r);
    } catch (e) {
      setPreviewError(e.message || String(e));
    }
    setPreviewing(false);
  };

  const send = async (dryRun) => {
    setSending(true);
    try {
      const r = await API.post('/api/admin/messaging/send', {
        filter: buildFilter(),
        subject,
        bodyMd: body,
        dryRun,
      });
      setToast({ kind: 'ok', text: dryRun
        ? `Dry-run: hubieran sido ${r.successCount} envíos (${r.recipientCount} destinatarios).`
        : `Enviado a ${r.successCount} de ${r.recipientCount}. ${r.failureCount} fallos.` });
      reloadHistory();
    } catch (e) {
      setToast({ kind: 'bad', text: e.message || String(e) });
    }
    setSending(false);
    setConfirmOpen(false);
    setTimeout(() => setToast(null), 6000);
  };

  return (
    <div className="col" style={{ gap: 18 }}>
      <div className="cards cards-2">
        <div className="panel col" style={{ gap: 14 }}>
          <div className="card-head"><span>Segmento</span></div>
          <div className="row gap-12 wrap">
            <div className="col" style={{ flex: 1 }}>
              <label className="muted" style={{ fontSize: 11 }}>Búsqueda (email/nombre)</label>
              <input className="input" placeholder="ej. @gmail.com" value={filter.q} onChange={(e) => setFilter({ ...filter, q: e.target.value })} />
            </div>
            <div className="col" style={{ width: 180 }}>
              <label className="muted" style={{ fontSize: 11 }}>Verificación</label>
              <select className="select" value={filter.verified} onChange={(e) => setFilter({ ...filter, verified: e.target.value })}>
                <option value="all">Todos</option>
                <option value="yes">Verificados</option>
                <option value="no">Sin verificar</option>
              </select>
            </div>
            <div className="col" style={{ width: 200 }}>
              <label className="muted" style={{ fontSize: 11 }}>Conexión MCP</label>
              <select className="select" value={filter.hasMcp} onChange={(e) => setFilter({ ...filter, hasMcp: e.target.value })}>
                <option value="all">Todos</option>
                <option value="yes">Conectaron Claude.ai</option>
                <option value="no">Sin MCP</option>
              </select>
            </div>
          </div>
          <div className="row gap-12 wrap">
            <div className="col" style={{ flex: 1 }}>
              <label className="muted" style={{ fontSize: 11 }}>Inactivos (días sin login, vacío = ignorar)</label>
              <input className="input" type="number" min="0" placeholder="ej. 7" value={filter.inactiveDays} onChange={(e) => setFilter({ ...filter, inactiveDays: e.target.value })} />
            </div>
            <div className="col" style={{ flex: 1 }}>
              <label className="muted" style={{ fontSize: 11 }}>Signup después de</label>
              <input className="input" type="date" value={filter.signupAfter} onChange={(e) => setFilter({ ...filter, signupAfter: e.target.value })} />
            </div>
            <div className="col" style={{ flex: 1 }}>
              <label className="muted" style={{ fontSize: 11 }}>Signup antes de</label>
              <input className="input" type="date" value={filter.signupBefore} onChange={(e) => setFilter({ ...filter, signupBefore: e.target.value })} />
            </div>
          </div>
          <div className="col">
            <label className="muted" style={{ fontSize: 11 }}>Emails manuales (opcional, sustituye a los filtros)</label>
            <textarea className="textarea" style={{ minHeight: 60 }} placeholder="alice@x.com, bob@y.com" value={filter.emails} onChange={(e) => setFilter({ ...filter, emails: e.target.value })} />
          </div>
          <div className="row" style={{ justifyContent: 'flex-end' }}>
            <button className="btn" onClick={runPreview} disabled={previewing}>{previewing ? <><Spinner /> Calculando…</> : <><Icon name="users" size={13} /> Calcular destinatarios</>}</button>
          </div>
          {previewError && <div className="empty bad">{previewError}</div>}
          {preview && (
            <div className="col" style={{ gap: 6 }}>
              <div className="row spread">
                <span><Badge kind="info">{preview.count}</Badge> destinatarios</span>
                <span className="muted">muestra de hasta 25</span>
              </div>
              <div className="tbl-wrap" style={{ maxHeight: 240 }}>
                <table className="tbl">
                  <thead><tr><th>Email</th><th>Nombre</th><th>Verif.</th><th>MCP</th><th>Signup</th></tr></thead>
                  <tbody>
                    {preview.sample.map((r) => (
                      <tr key={r.email}>
                        <td className="mono">{r.email}</td>
                        <td>{r.displayName}</td>
                        <td>{r.verified ? <Badge kind="ok">sí</Badge> : <Badge>no</Badge>}</td>
                        <td>{r.mcpConnected ? <Badge kind="info">sí</Badge> : <Badge>no</Badge>}</td>
                        <td>{F.date(r.signupAt)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>

        <div className="panel col" style={{ gap: 12 }}>
          <div className="card-head"><span>Mensaje</span></div>
          <div className="col">
            <label className="muted" style={{ fontSize: 11 }}>Asunto</label>
            <input className="input" placeholder="ej. Update de Workspace · 8 may" value={subject} onChange={(e) => setSubject(e.target.value)} />
          </div>
          <div className="col">
            <label className="muted" style={{ fontSize: 11 }}>Cuerpo (Markdown)</label>
            <textarea className="textarea" placeholder={`# Hola!\n\nQueríamos contarte que…\n\n- algo\n- otra cosa\n\n[Ver en Workspace](https://workspace.sebasai.com)`}
              value={body} onChange={(e) => setBody(e.target.value)} />
          </div>
          <div className="row spread">
            <button className="btn" disabled={!subject || !body || sending} onClick={() => send(true)}>
              <Icon name="flask-conical" size={13} /> Dry-run
            </button>
            <button className="btn primary" disabled={!subject || !body || !preview || preview.count === 0 || sending} onClick={() => setConfirmOpen(true)}>
              <Icon name="send" size={13} /> Enviar a {preview?.count ?? 0}
            </button>
          </div>
          <div className="muted" style={{ fontSize: 11 }}>Se manda por Resend (RESEND_FROM_EMAIL). Markdown soporta encabezados, listas, **negrita**, *cursiva*, [links](url), `código`.</div>
        </div>
      </div>

      <div className="panel">
        <div className="card-head row spread">
          <span>Historial</span>
          <button className="btn ghost" onClick={reloadHistory} disabled={historyLoading}><Icon name="refresh-ccw" size={13} /></button>
        </div>
        {historyLoading && <Spinner />}
        {!historyLoading && history.length === 0 && <div className="muted">Aún no hay envíos registrados.</div>}
        {history.length > 0 && (
          <div className="tbl-wrap" style={{ maxHeight: 360 }}>
            <table className="tbl">
              <thead><tr><th>Fecha</th><th>Asunto</th><th>Por</th><th>Destinatarios</th><th>Resultado</th><th>Modo</th></tr></thead>
              <tbody>
                {history.map((h) => (
                  <tr key={h.id}>
                    <td>{F.dateTime(h.startedAt)}</td>
                    <td>{h.subject}</td>
                    <td className="mono softer">{h.sentByEmail}</td>
                    <td className="num">{h.recipientCount}</td>
                    <td>
                      <Badge kind={h.failureCount > 0 ? 'warn' : 'ok'}>{h.successCount} ok{h.failureCount > 0 ? ' / ' + h.failureCount + ' fallos' : ''}</Badge>
                    </td>
                    <td>{h.dryRun ? <Badge>dry-run</Badge> : <Badge kind="info">real</Badge>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {confirmOpen && (
        <Drawer onClose={() => setConfirmOpen(false)} title="Confirmar envío">
          <div className="col" style={{ gap: 12 }}>
            <p>Vas a enviar <strong>{preview?.count ?? 0}</strong> emails con el asunto:</p>
            <div className="panel mono">{subject}</div>
            <p className="muted">Esta acción no se puede deshacer (los correos ya están en la bandeja una vez enviados).</p>
            <div className="row" style={{ justifyContent: 'flex-end', gap: 8 }}>
              <button className="btn" onClick={() => setConfirmOpen(false)}>Cancelar</button>
              <button className="btn primary" disabled={sending} onClick={() => send(false)}>
                {sending ? <><Spinner /> Enviando…</> : <><Icon name="send" size={13} /> Enviar ahora</>}
              </button>
            </div>
          </div>
        </Drawer>
      )}

      {toast && <Toast kind={toast.kind}>{toast.text}</Toast>}
    </div>
  );
}
window.MessagingView = MessagingView;