/* clients.jsx — clientes com Grupo A / Grupo B */

const emptyClient = () => ({
  id: null, name: "", short: "", color: "#1B3A6B", setor: "",
  emails: [], grupoA: [], grupoB: [], active: true,
});

const ClientForm = ({ client, onChange }) => {
  const [emailDraft, setEmailDraft] = React.useState("");
  const addEmail = () => {
    const v = emailDraft.trim().replace(/,$/, "");
    if (!v || client.emails.includes(v)) { setEmailDraft(""); return; }
    onChange({ ...client, emails: [...client.emails, v] }); setEmailDraft("");
  };
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: 12 }}>
        <div className="field">
          <label className="field__label">Nome do cliente</label>
          <input className="input" value={client.name} onChange={e => onChange({ ...client, name: e.target.value })} placeholder="Ex.: Ecoporto" autoFocus />
        </div>
        <div className="field">
          <label className="field__label">Setor</label>
          <input className="input" value={client.setor} onChange={e => onChange({ ...client, setor: e.target.value })} placeholder="Ex.: Portuário" />
        </div>
      </div>

      <div className="field">
        <label className="field__label">E-mails de destino</label>
        <div className="kw-list">
          {client.emails.map(em => (
            <span key={em} className="chip chip--removable">
              {em}
              <button onClick={() => onChange({ ...client, emails: client.emails.filter(e => e !== em) })} aria-label={"Remover " + em}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
              </button>
            </span>
          ))}
          <input className="kw-input" value={emailDraft} type="email" onChange={e => setEmailDraft(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addEmail(); } }} onBlur={addEmail}
            placeholder="nome@dominio.com — Enter" />
        </div>
      </div>

      <div className="field">
        <label className="field__label" style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--brand)" }} />
          Grupo A — Citação direta
        </label>
        <KeywordEditor keywords={client.grupoA} onChange={kws => onChange({ ...client, grupoA: kws })} />
        <div className="field__hint">Menção explícita ao cliente → gera o bloco “Saiu na Mídia”.</div>
      </div>

      <div className="field">
        <label className="field__label" style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--ink-400)" }} />
          Grupo B — Setor
        </label>
        <KeywordEditor keywords={client.grupoB} onChange={kws => onChange({ ...client, grupoB: kws })} variant="b" />
        <div className="field__hint">Notícias temáticas do setor → geram o bloco “Clipping”.</div>
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <label className="field__label" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Toggle on={client.active} onChange={v => onChange({ ...client, active: v })} />
          <span>{client.active ? "Cliente ativo — recebe clipping diário" : "Cliente pausado — não receberá envios"}</span>
        </label>
      </div>
    </div>
  );
};

const ClientsPage = ({ clients, setClients, onToast }) => {
  const [search, setSearch] = React.useState("");
  const [editing, setEditing] = React.useState(null);
  const [confirmDel, setConfirmDel] = React.useState(null);
  const visible = clients.filter(c => c.name.toLowerCase().includes(search.toLowerCase()));

  const save = () => {
    if (!editing.name.trim()) return;
    const short = editing.short || editing.name.slice(0, 2).toUpperCase();
    if (editing.id) {
      setClients(clients.map(c => c.id === editing.id ? { ...editing, short } : c));
      onToast("Cliente atualizado");
    } else {
      setClients([...clients, { ...editing, short, id: "cl" + Date.now(), since: "Jun 2026" }]);
      onToast("Cliente cadastrado");
    }
    setEditing(null);
  };

  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1>Clientes</h1>
          <p>{clients.filter(c => c.active).length} ativos · carteira VER MKT</p>
        </div>
        <div className="page__actions">
          <Search value={search} onChange={setSearch} placeholder="Buscar cliente..." />
          <button className="btn btn--primary" onClick={() => setEditing(emptyClient())}><Icon name="plus" /> Novo cliente</button>
        </div>
      </div>

      <div className="card">
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: "26%" }}>Cliente</th>
              <th style={{ width: "26%" }}>E-mails</th>
              <th style={{ width: "20%" }}>Palavras-chave</th>
              <th style={{ width: "13%" }}>Status</th>
              <th style={{ width: "15%", textAlign: "right" }}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {visible.map(c => (
              <tr key={c.id}>
                <td>
                  <div className="row" style={{ gap: 11 }}>
                    <div className="cl-card__badge" style={{ background: c.color, width: 34, height: 34, borderRadius: 8, fontSize: 12 }}>{c.short}</div>
                    <div>
                      <div style={{ fontWeight: 600, color: "var(--ink-900)" }}>{c.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{c.setor}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div className="email-list">
                    {c.emails.slice(0, 2).map(e => <span key={e} className="mono">{e}</span>)}
                    {c.emails.length > 2 ? <span className="muted" style={{ fontSize: 12 }}>+{c.emails.length - 2} outro</span> : null}
                  </div>
                </td>
                <td>
                  <div style={{ display: "flex", gap: 6 }}>
                    <span className="chip" style={{ background: "var(--brand-50)", color: "var(--brand)" }}><span className="chip__dot" style={{ background: "var(--brand)" }} />A · {c.grupoA.length}</span>
                    <span className="chip"><span className="chip__dot" />B · {c.grupoB.length}</span>
                  </div>
                </td>
                <td>{c.active ? <Status kind="ok">Ativo</Status> : <Status kind="mute">Pausado</Status>}</td>
                <td>
                  <div className="actions">
                    <button className="iconbtn" title="Editar" onClick={() => setEditing({ ...c })}><Icon name="edit" /></button>
                    <button className="iconbtn" title={c.active ? "Pausar" : "Reativar"} onClick={() => { setClients(clients.map(x => x.id === c.id ? { ...x, active: !x.active } : x)); onToast(c.active ? "Cliente pausado" : "Cliente reativado"); }}><Icon name={c.active ? "pause" : "play"} /></button>
                    <button className="iconbtn" title="Excluir" onClick={() => setConfirmDel(c)}><Icon name="trash" /></button>
                  </div>
                </td>
              </tr>
            ))}
            {visible.length === 0 ? <tr><td colSpan="5"><div className="empty">Nenhum cliente encontrado.</div></td></tr> : null}
          </tbody>
        </table>
      </div>

      {editing ? (
        <Modal
          wide
          title={editing.id ? "Editar cliente" : "Novo cliente"}
          subtitle={editing.id ? "As alterações entram em vigor na próxima coleta (06h)." : "Será incluído na coleta de amanhã às 06h."}
          onClose={() => setEditing(null)}
          footer={
            <>
              <button className="btn" onClick={() => setEditing(null)}>Cancelar</button>
              <button className="btn btn--primary" onClick={save} disabled={!editing.name.trim() || editing.emails.length === 0}>
                {editing.id ? "Salvar alterações" : "Cadastrar cliente"}
              </button>
            </>
          }
        >
          <ClientForm client={editing} onChange={setEditing} />
        </Modal>
      ) : null}

      {confirmDel ? (
        <Modal title="Excluir cliente?" subtitle="O histórico de envios anteriores é mantido." onClose={() => setConfirmDel(null)}
          footer={
            <>
              <button className="btn" onClick={() => setConfirmDel(null)}>Cancelar</button>
              <button className="btn btn--danger" onClick={() => { setClients(clients.filter(c => c.id !== confirmDel.id)); onToast("Cliente removido"); setConfirmDel(null); }}>
                <Icon name="trash" /> Excluir {confirmDel.name}
              </button>
            </>
          }>
          <p style={{ margin: 0, color: "var(--ink-700)" }}><strong>{confirmDel.name}</strong> não receberá mais clippings. Para pausar temporariamente, use o botão de pausar na tabela.</p>
        </Modal>
      ) : null}
    </div>
  );
};

window.ClientsPage = ClientsPage;