/* review.jsx — Revisão do Clipping (tela central) */

const AddManualForm = ({ onAdd, onCancel }) => {
  const [title, setTitle] = React.useState("");
  const [source, setSource] = React.useState("");
  const [url, setUrl] = React.useState("");
  const valid = title.trim() && source.trim();
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 160px 180px auto", gap: 8, alignItems: "center" }}>
      <input className="input" placeholder="Título da matéria" value={title} onChange={e => setTitle(e.target.value)} autoFocus />
      <input className="input" placeholder="Fonte" value={source} onChange={e => setSource(e.target.value)} />
      <input className="input mono" placeholder="URL (opcional)" value={url} onChange={e => setUrl(e.target.value)} style={{ fontSize: 12 }} />
      <div className="row" style={{ gap: 6 }}>
        <button className="btn btn--sm" onClick={onCancel}>Cancelar</button>
        <button className="btn btn--primary btn--sm" disabled={!valid} onClick={() => onAdd({ title: title.trim(), source: source.trim(), url: url.trim() })}>Adicionar</button>
      </div>
    </div>
  );
};

const ReviewItem = ({ item, onToggle }) => (
  <div className={"rv-item" + (item.kept ? "" : " is-removed")}>
    <div className="rv-item__main">
      <div className="rv-item__title">{item.title}{item.manual ? <span style={{ marginLeft: 8, fontSize: 11, color: "var(--brand-600)", fontWeight: 500 }}>· adicionado manualmente</span> : null}</div>
      <div className="rv-item__meta">
        <span style={{ fontWeight: 500, color: "var(--ink-600)" }}>{item.source}</span>
        <span>·</span>
        <span className="mono">{item.time || "agora"}</span>
        {item.url ? <><span>·</span><a href="#" onClick={e => e.preventDefault()}><Icon name="link" style={{ width: 12, height: 12 }} /> abrir</a></> : null}
        {item.paid ? <a className="rv-pdf" href="#" onClick={e => e.preventDefault()} title={item.drive}><Icon name="pdf" style={{ width: 12, height: 12 }} /> PDF no Drive</a> : null}
      </div>
    </div>
    <div className="rv-item__actions">
      <button className={"rv-toggle keep" + (item.kept ? " is-on" : "")} title="Manter no clipping" onClick={() => onToggle(true)}>
        <Icon name="check" style={{ width: 16, height: 16 }} />
      </button>
      <button className={"rv-toggle drop" + (!item.kept ? " is-on" : "")} title="Remover do clipping" onClick={() => onToggle(false)}>
        <Icon name="x" style={{ width: 16, height: 16 }} />
      </button>
    </div>
  </div>
);

const EmailPreview = ({ client, saiu, clipping }) => {
  const keptSaiu = saiu.filter(i => i.kept);
  const keptClip = clipping.filter(i => i.kept);
  return (
    <div className="email-prev">
      <div className="email-prev__frame">
        <div className="email-prev__bar">
          <span className="email-prev__dot" style={{ background: "#e0524f" }} />
          <span className="email-prev__dot" style={{ background: "#e7b14c" }} />
          <span className="email-prev__dot" style={{ background: "#5bbd6b" }} />
          <span style={{ marginLeft: 6 }}>Pré-visualização do e-mail</span>
        </div>
        <div className="email-prev__head">
          <div className="email-prev__subj">Clipping {client.name} — {HOJE_LABEL.replace(/^\w+, /, "")}</div>
          <div className="email-prev__from">
            de clipping@vermkt.com.br · para {client.emails.join(", ")}
          </div>
        </div>
        <div className="email-prev__body">
          <div className="email-prev__sec-title midia">📰 SAIU NA MÍDIA</div>
          {keptSaiu.length ? keptSaiu.map(i => (
            <div key={i.id} className="email-prev__li midia">
              <b>{i.title}</b><br />
              <span className="src">{i.source} · {i.time} {i.url ? "· link" : ""}</span>
            </div>
          )) : <div className="email-prev__empty">Nenhuma citação direta hoje.</div>}

          <div className="email-prev__sec-title clip" style={{ marginTop: 18 }}>📋 CLIPPING</div>
          {keptClip.length ? keptClip.map(i => (
            <div key={i.id} className="email-prev__li">
              <b>{i.title}</b><br />
              <span className="src">{i.source} · {i.time}{i.paid ? " · PDF no Drive" : i.url ? " · link" : ""}</span>
            </div>
          )) : <div className="email-prev__empty">Nenhuma notícia de setor hoje.</div>}
        </div>
      </div>
      <div className="muted" style={{ fontSize: 11.5, textAlign: "center", marginTop: 10 }}>
        Atualiza em tempo real conforme você mantém ou remove matérias.
      </div>
    </div>
  );
};

const ReviewPage = ({ client, clip, clients, reviewClient, setReviewClient, onUpdate, onApprove, onToast }) => {
  const [addingTo, setAddingTo] = React.useState(null); // 'saiu' | 'clipping' | null
  const [confirm, setConfirm] = React.useState(false);

  if (!client) return <div className="page"><div className="empty">Selecione um cliente para revisar.</div></div>;

  const isSent = clip.status === "sent";
  const setKept = (group, id, kept) => {
    onUpdate(client.id, {
      ...clip,
      [group]: clip[group].map(i => i.id === id ? { ...i, kept } : i),
    });
  };
  const addManual = (group, data) => {
    const item = { id: "m" + Date.now(), ...data, time: null, paid: false, kept: true, manual: true };
    onUpdate(client.id, { ...clip, [group]: [...clip[group], item] });
    setAddingTo(null);
    onToast("Matéria adicionada manualmente");
  };

  const keptSaiu = clip.saiu.filter(i => i.kept).length;
  const keptClip = clip.clipping.filter(i => i.kept).length;
  const totalKept = keptSaiu + keptClip;

  const Section = ({ group, variant, title, emoji, hint }) => (
    <div className={"rv-section rv-section--" + variant}>
      <div className="rv-section__head">
        <h3>{emoji} {title}</h3>
        <span className="tag">{hint}</span>
        <div className="spacer" />
        <span className="muted" style={{ fontSize: 12 }}>{clip[group].filter(i => i.kept).length}/{clip[group].length} mantidas</span>
      </div>
      <div className="rv-section__body">
        {clip[group].length === 0 ? (
          <div className="empty" style={{ padding: 22 }}>Nenhuma matéria nesta seção hoje.</div>
        ) : clip[group].map(item => (
          <ReviewItem key={item.id} item={item} onToggle={(kept) => setKept(group, item.id, kept)} />
        ))}
        {!isSent ? (
          <div className="rv-section__add">
            {addingTo === group ? (
              <AddManualForm onAdd={(d) => addManual(group, d)} onCancel={() => setAddingTo(null)} />
            ) : (
              <button className="btn btn--sm" onClick={() => setAddingTo(group)}><Icon name="plus" /> Adicionar manualmente</button>
            )}
          </div>
        ) : null}
      </div>
    </div>
  );

  return (
    <div className="page page--wide">
      <div className="review">
        <div className="review__main">
          <div className="rv-head">
            <div className="rv-head__badge" style={{ background: client.color }}>{client.short}</div>
            <div style={{ flex: 1 }}>
              <h2>{client.name}</h2>
              <div className="sub">Clipping de {HOJE_LABEL} · {client.emails.length} destinatário{client.emails.length > 1 ? "s" : ""}</div>
            </div>
            <select className="select" style={{ width: 210 }} value={reviewClient} onChange={e => setReviewClient(e.target.value)} title="Trocar de cliente">
              {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
            {isSent
              ? <Status kind="ok">Enviado às {clip.sentAt} por {clip.approvedBy}</Status>
              : <Status kind="warn">Aguardando aprovação</Status>}
          </div>

          <Section group="saiu" variant="a" title="Saiu na Mídia" emoji="📰" hint="Grupo A · citação direta" />
          <Section group="clipping" variant="b" title="Clipping" emoji="📋" hint="Grupo B · setor" />

          {!isSent ? (
            <div className="rv-bar">
              <div className="rv-bar__info">
                <b>{totalKept} matérias</b> serão enviadas · {keptSaiu} em Saiu na Mídia, {keptClip} em Clipping
              </div>
              <div className="spacer" />
              <button className="btn btn--danger" onClick={() => { onToast("Clipping reprovado — nada será enviado"); }}>
                <Icon name="x" /> Reprovar tudo
              </button>
              <button className="btn" onClick={() => onToast("Rascunho salvo")}>
                <Icon name="save" /> Salvar rascunho
              </button>
              <button className="btn btn--approve btn--lg" disabled={totalKept === 0} onClick={() => setConfirm(true)}>
                <Icon name="send" /> Aprovar e Enviar
              </button>
            </div>
          ) : (
            <div className="rv-bar">
              <div className="rv-bar__info"><Icon name="checkCircle" style={{ width: 16, height: 16, color: "var(--ok-700)", verticalAlign: "-3px", marginRight: 6 }} />Este clipping já foi <b>aprovado e enviado</b>.</div>
              <div className="spacer" />
              <button className="btn" onClick={() => onToast("Clipping reenviado para " + client.name)}><Icon name="send" /> Reenviar</button>
            </div>
          )}
        </div>

        <EmailPreview client={client} saiu={clip.saiu} clipping={clip.clipping} />
      </div>

      {confirm ? (
        <Modal
          title="Aprovar e enviar clipping?"
          subtitle={`${client.name} · ${HOJE_LABEL}`}
          onClose={() => setConfirm(false)}
          footer={
            <>
              <button className="btn" onClick={() => setConfirm(false)}>Cancelar</button>
              <button className="btn btn--approve" onClick={() => { setConfirm(false); onApprove(client.id); }}>
                <Icon name="send" /> Confirmar envio
              </button>
            </>
          }
        >
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start", marginBottom: 16 }}>
            <div className="rv-head__badge" style={{ background: client.color, width: 40, height: 40 }}>{client.short}</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 15, color: "var(--ink-900)" }}>{totalKept} matérias serão enviadas agora</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{keptSaiu} em “Saiu na Mídia” · {keptClip} em “Clipping”</div>
            </div>
          </div>
          <div style={{ background: "var(--ink-50)", border: "1px solid var(--ink-200)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--ink-500)", marginBottom: 6 }}>Destinatários</div>
            <div className="email-list">
              {client.emails.map(e => <span key={e} className="mono">{e}</span>)}
            </div>
          </div>
          <p className="muted" style={{ fontSize: 12.5, marginTop: 14, marginBottom: 0 }}>
            O e-mail será disparado imediatamente no formato padrão VER MKT e registrado no histórico em seu nome.
          </p>
        </Modal>
      ) : null}
    </div>
  );
};

window.ReviewPage = ReviewPage;