/* portals.jsx — Portais Monitorados (Gratuito / Pago + credenciais) */

const PortalsPage = ({ portals, setPortals, onToast }) => {
  const [adding, setAdding] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [reveal, setReveal] = React.useState({});
  const [showLogin, setShowLogin] = React.useState(false);
  const [showSenha, setShowSenha] = React.useState(false);
  const [draft, setDraft] = React.useState({ name: "", url: "", tipo: "Gratuito", login: "", senha: "" });

  const activeCount = portals.filter(p => p.active).length;
  const pagoCount = portals.filter(p => p.tipo === "Pago").length;

  const addNew = () => {
    if (!draft.name.trim() || !draft.url.trim()) return;
    setPortals([...portals, {
      id: "p" + Date.now(), name: draft.name.trim(), url: draft.url.trim(), tipo: draft.tipo,
      clients: [], active: true, login: draft.tipo === "Pago" ? draft.login.trim() : null,
    }]);
    setDraft({ name: "", url: "", tipo: "Gratuito", login: "", senha: "" });
    setAdding(false);
    onToast(`Portal "${draft.name}" adicionado`);
  };

  const openEdit = (p) => {
    setShowLogin(false);
    setShowSenha(false);
    setEditing({ ...p, login: p.login || "", senha: p.login ? "********" : "" });
  };

  const saveEdit = () => {
    if (!editing.name.trim() || !editing.url.trim()) return;
    setPortals(portals.map(x => x.id === editing.id ? {
      ...x, name: editing.name.trim(), url: editing.url.trim(), tipo: editing.tipo,
      login: editing.tipo === "Pago" ? (editing.login.trim() || null) : null,
    } : x));
    onToast(`Portal "${editing.name}" atualizado`);
    setEditing(null);
  };

  return (
    <div className="page page--wide">
      <div className="page__head">
        <div>
          <h1>Portais monitorados</h1>
          <p>{activeCount} de {portals.length} ativos · {pagoCount} pagos com login automático · lidos na coleta das 06h</p>
        </div>
        <div className="page__actions">
          <button className="btn btn--primary" onClick={() => setAdding(true)}><Icon name="plus" /> Novo portal</button>
        </div>
      </div>

      <div className="card">
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: "20%" }}>Portal</th>
              <th style={{ width: "20%" }}>URL</th>
              <th style={{ width: "10%" }}>Tipo</th>
              <th style={{ width: "20%" }}>Credenciais</th>
              <th style={{ width: "18%" }}>Clientes que usam</th>
              <th style={{ width: "12%", textAlign: "right" }}>Status</th>
            </tr>
          </thead>
          <tbody>
            {portals.map(p => (
              <tr key={p.id}>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <Icon name="portals" />
                    <span style={{ fontWeight: 600, color: "var(--ink-900)" }}>{p.name}</span>
                  </div>
                </td>
                <td className="mono muted" style={{ fontSize: 12 }}>{p.url}</td>
                <td>
                  {p.tipo === "Pago"
                    ? <span className="chip" style={{ background: "#f3e8d4", color: "#7a4f1f" }}><Icon name="lock" style={{ width: 12, height: 12 }} /> Pago</span>
                    : <span className="chip">Gratuito</span>}
                </td>
                <td>
                  {p.tipo === "Pago" ? (
                    <div className="cred">
                      <Icon name="lock" style={{ width: 13, height: 13, color: "var(--ink-400)" }} />
                      <span className="mono">{reveal[p.id] ? p.login : "••••••••@vermkt"}</span>
                      <span className="mono" style={{ color: "var(--ink-300)" }}>·</span>
                      <span className="mono" style={{ color: "var(--ink-400)" }}>{reveal[p.id] ? "••••••" : "senha"}</span>
                      <button className="iconbtn" style={{ padding: 3 }} title="Mostrar/ocultar" onClick={() => setReveal({ ...reveal, [p.id]: !reveal[p.id] })}>
                        <Icon name="eye" style={{ width: 13, height: 13 }} />
                      </button>
                    </div>
                  ) : <span className="muted" style={{ fontSize: 12 }}>— sem login</span>}
                </td>
                <td>
                  <span className="muted" style={{ fontSize: 12.5 }}>{p.clients.length ? p.clients.join(", ") : "—"}</span>
                </td>
                <td>
                  <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
                    <span className="muted" style={{ fontSize: 12 }}>{p.active ? "Ativo" : "Pausado"}</span>
                    <Toggle on={p.active} onChange={() => setPortals(portals.map(x => x.id === p.id ? { ...x, active: !x.active } : x))} />
                    <button className="iconbtn" title="Editar portal" onClick={() => openEdit(p)}><Icon name="edit" /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="muted" style={{ fontSize: 12, marginTop: 12, display: "flex", alignItems: "center", gap: 7 }}>
        <Icon name="drive" style={{ width: 14, height: 14 }} />
        Portais pagos têm o PDF da matéria capturado e arquivado no Google Drive em <span className="mono">cliente/data</span>, com link incluído no clipping.
      </div>

      {adding ? (
        <Modal title="Novo portal monitorado" subtitle="Fonte que será lida automaticamente na coleta das 06h." onClose={() => setAdding(false)}
          footer={
            <>
              <button className="btn" onClick={() => setAdding(false)}>Cancelar</button>
              <button className="btn btn--primary" onClick={addNew} disabled={!draft.name.trim() || !draft.url.trim()}>Adicionar portal</button>
            </>
          }>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="field"><label className="field__label">Nome do portal</label><input className="input" value={draft.name} onChange={e => setDraft({ ...draft, name: e.target.value })} placeholder="Ex.: A Tribuna" autoFocus /></div>
            <div className="field"><label className="field__label">URL / domínio</label><input className="input mono" value={draft.url} onChange={e => setDraft({ ...draft, url: e.target.value })} placeholder="atribuna.com.br" /></div>
          </div>
          <div className="field">
            <label className="field__label">Tipo de acesso</label>
            <div className="tabs" style={{ width: "fit-content" }}>
              {["Gratuito", "Pago"].map(t => (
                <button key={t} className={draft.tipo === t ? "is-active" : ""} onClick={() => setDraft({ ...draft, tipo: t })}>{t}</button>
              ))}
            </div>
          </div>
          {draft.tipo === "Pago" ? (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, background: "var(--ink-50)", padding: 14, borderRadius: 8, border: "1px solid var(--ink-200)" }}>
              <div className="field" style={{ marginBottom: 0 }}><label className="field__label">Login</label><input className="input mono" value={draft.login} onChange={e => setDraft({ ...draft, login: e.target.value })} placeholder="ver.mkt@vermkt.com.br" /></div>
              <div className="field" style={{ marginBottom: 0 }}><label className="field__label">Senha</label><input className="input mono" type="password" value={draft.senha} onChange={e => setDraft({ ...draft, senha: e.target.value })} placeholder="••••••••" /></div>
              <div className="field__hint" style={{ gridColumn: "1 / -1" }}>Credenciais ficam criptografadas e são usadas apenas pelo robô de coleta para capturar o PDF.</div>
            </div>
          ) : null}
        </Modal>
      ) : null}

      {editing ? (
        <Modal title={`Editar portal · ${editing.name}`} subtitle="Atualize os dados da fonte e as credenciais de acesso." onClose={() => setEditing(null)}
          footer={
            <>
              <button className="btn" onClick={() => setEditing(null)}>Cancelar</button>
              <button className="btn btn--primary" onClick={saveEdit} disabled={!editing.name.trim() || !editing.url.trim()}><Icon name="save" /> Salvar alterações</button>
            </>
          }>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="field"><label className="field__label">Nome do portal</label><input className="input" value={editing.name} onChange={e => setEditing({ ...editing, name: e.target.value })} autoFocus /></div>
            <div className="field"><label className="field__label">URL / domínio</label><input className="input mono" value={editing.url} onChange={e => setEditing({ ...editing, url: e.target.value })} /></div>
          </div>
          <div className="field">
            <label className="field__label">Tipo de acesso</label>
            <div className="tabs" style={{ width: "fit-content" }}>
              {["Gratuito", "Pago"].map(t => (
                <button key={t} className={editing.tipo === t ? "is-active" : ""} onClick={() => setEditing({ ...editing, tipo: t })}>{t}</button>
              ))}
            </div>
          </div>
          {editing.tipo === "Pago" ? (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, background: "var(--ink-50)", padding: 14, borderRadius: 8, border: "1px solid var(--ink-200)" }}>
              <div className="field" style={{ marginBottom: 0 }}>
                <label className="field__label">Login</label>
                <div className="cred-input">
                  <input className="input mono" type={showLogin ? "text" : "password"} value={editing.login} onChange={e => setEditing({ ...editing, login: e.target.value })} placeholder="ver.mkt@vermkt.com.br" />
                  <button className="iconbtn" type="button" title={showLogin ? "Ocultar" : "Mostrar"} onClick={() => setShowLogin(!showLogin)}><Icon name="eye" /></button>
                </div>
              </div>
              <div className="field" style={{ marginBottom: 0 }}>
                <label className="field__label">Senha</label>
                <div className="cred-input">
                  <input className="input mono" type={showSenha ? "text" : "password"} value={editing.senha} onChange={e => setEditing({ ...editing, senha: e.target.value })} placeholder="••••••••" />
                  <button className="iconbtn" type="button" title={showSenha ? "Ocultar" : "Mostrar"} onClick={() => setShowSenha(!showSenha)}><Icon name="eye" /></button>
                </div>
              </div>
              <div className="field__hint" style={{ gridColumn: "1 / -1" }}>Credenciais ficam criptografadas e são usadas apenas pelo robô de coleta para capturar o PDF.</div>
            </div>
          ) : (
            <div className="muted" style={{ fontSize: 12.5 }}>Portais gratuitos não exigem login — o robô lê a matéria diretamente.</div>
          )}
        </Modal>
      ) : null}
    </div>
  );
};

window.PortalsPage = PortalsPage;