/* global React, SEQ_UI, SEQ_LAYOUT */
const { brl, Avatar } = window.SEQ_UI;
const { PageHead, KPI, Pill } = window.SEQ_LAYOUT;

const CLIENTES_FALLBACK = [
  { id: "c1", nome: "Diogo Costa", empresa: "Costa Performance", email: "diogo@costaperf.com", total: 4000, propostas: 1, assinaturas: 0, ult: "ontem", tag: "lead-quente", color: "var(--kp-pink)" },
  { id: "c2", nome: "Marina Vieira", empresa: "Studio Verbete", email: "marina@verbete.co", total: 18250, propostas: 3, assinaturas: 1, ult: "3d atrás", tag: "fiel", color: "var(--kp-green)" },
];

const CLI_COLORS = ["var(--kp-pink)", "var(--kp-green)", "var(--kp-cold)", "var(--kp-yellow)", "var(--kp-warm)", "var(--kp-pink-soft)"];

function transformClient(c, i) {
  const created = c.created_at || c.createdAt;
  const ageMs = created ? Date.now() - new Date(created).getTime() : 0;
  const ageDays = Math.round(ageMs / (1000 * 60 * 60 * 24));
  const ult = ageDays === 0 ? "hoje" : ageDays < 7 ? `${ageDays}d atrás` : ageDays < 30 ? `${Math.round(ageDays/7)}sem atrás` : `${Math.round(ageDays/30)}mo atrás`;
  return {
    id: c.id,
    nome: c.name,
    empresa: c.company || "—",
    email: c.email,
    total: 0,
    propostas: 0,
    assinaturas: 0,
    ult,
    tag: "novo",
    color: CLI_COLORS[i % CLI_COLORS.length],
  };
}

function Clientes() {
  const [CLIENTES, setItems] = React.useState(CLIENTES_FALLBACK);
  const [modal, setModal] = React.useState(false);
  React.useEffect(() => {
    window.SEQ_API.listClients()
      .then(d => {
        if (d.clients?.length) setItems(d.clients.map(transformClient));
      })
      .catch(() => {});
  }, []);
  const total = CLIENTES.reduce((s,c)=>s+c.total,0);
  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="11" label="CRM · CLIENTES" title="Gente que pagou" em="você."
        actions={(<>
          <button className="kp-btn kp-btn-sm">Importar CSV</button>
          <button className="kp-btn kp-btn-sm kp-btn-ink" onClick={()=>setModal(true)}>+ Novo cliente</button>
        </>)}
      />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 22 }}>
          <KPI label="Total de clientes" value={CLIENTES.length} sub="+2 últimos 30d" trend="up"/>
          <KPI label="Receita acumulada" value={brl(total)} sub="LTV médio R$12.225" bg="var(--kp-green)" pulse/>
          <KPI label="Recorrentes" value="4" sub="67% têm assinatura ativa" bg="var(--kp-pink-soft)"/>
          <KPI label="Em alerta" value="1" sub="Tórtola · pagamento atrasado" bg="var(--kp-warm)"/>
        </div>

        <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
          {["Tudo", "VIP", "Recorrentes", "Lead quente", "Em alerta"].map((t,i) => (
            <button key={t} style={{
              padding: "7px 14px", border: "1.5px solid var(--kp-ink)", cursor: "pointer",
              background: i === 0 ? "var(--kp-ink)" : "var(--kp-white)",
              color: i === 0 ? "var(--kp-paper)" : "var(--kp-ink)",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
              boxShadow: i === 0 ? "3px 3px 0 0 var(--kp-pink)" : "none",
            }}>{t}</button>
          ))}
          <span style={{ flex: 1 }}/>
          <input className="kp-input" placeholder="buscar cliente…" style={{ maxWidth: 280, padding: "8px 12px", fontSize: 12 }}/>
        </div>

        <div className="kp-card" style={{ padding: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1.6fr 1.6fr 1fr 1fr 1fr 1fr auto", padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--kp-muted)", gap: 12 }}>
            <div></div><div>Nome</div><div>Empresa · Email</div><div>LTV</div><div>Propostas</div><div>Assinaturas</div><div>Última atividade</div><div></div>
          </div>
          {CLIENTES.map((c,i) => {
            const goDetail = () => { window.location.hash = "#/cliente?id=" + c.id; };
            return (
              <div
                key={c.id}
                onClick={goDetail}
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1.6fr 1.6fr 1fr 1fr 1fr 1fr auto",
                  gap: 12, padding: "14px 18px", alignItems: "center",
                  borderBottom: i === CLIENTES.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)",
                  background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)",
                  cursor: "pointer",
                }}
              >
                <Avatar initials={c.nome.split(" ").map(s=>s[0]).slice(0,2).join("")} size={36} bg={c.color}/>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{c.nome}</div>
                  <Pill bg={c.color}>{c.tag}</Pill>
                </div>
                <div>
                  <div style={{ fontSize: 12.5, color: "var(--kp-ink)" }}>{c.empresa}</div>
                  <div style={{ fontSize: 11, color: "var(--kp-muted)", fontFamily: "var(--kp-mono)" }}>{c.email}</div>
                </div>
                <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(c.total)}</span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{c.propostas}</span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{c.assinaturas}</span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{c.ult}</span>
                <button className="kp-btn kp-btn-sm" onClick={(e) => { e.stopPropagation(); goDetail(); }}>Abrir →</button>
              </div>
            );
          })}
        </div>

        {modal && <NewClientModal onClose={() => setModal(false)} onCreated={() => { setModal(false); window.location.reload(); }} />}
      </div>
    </div>
  );
}

// ─── CPF / CNPJ validation ───
function onlyDigits(s) { return (s || "").replace(/\D/g, ""); }

function maskDoc(s) {
  const d = onlyDigits(s).slice(0, 14);
  if (d.length <= 11) {
    return d
      .replace(/^(\d{3})(\d)/, "$1.$2")
      .replace(/^(\d{3})\.(\d{3})(\d)/, "$1.$2.$3")
      .replace(/\.(\d{3})(\d)/, ".$1-$2");
  }
  return d
    .replace(/^(\d{2})(\d)/, "$1.$2")
    .replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
    .replace(/\.(\d{3})(\d)/, ".$1/$2")
    .replace(/(\d{4})(\d)/, "$1-$2");
}

function isValidCPF(cpf) {
  const c = onlyDigits(cpf);
  if (c.length !== 11 || /^(\d)\1{10}$/.test(c)) return false;
  let s = 0;
  for (let i = 0; i < 9; i++) s += parseInt(c[i]) * (10 - i);
  let r = (s * 10) % 11; if (r === 10) r = 0;
  if (r !== parseInt(c[9])) return false;
  s = 0;
  for (let i = 0; i < 10; i++) s += parseInt(c[i]) * (11 - i);
  r = (s * 10) % 11; if (r === 10) r = 0;
  return r === parseInt(c[10]);
}

function isValidCNPJ(cnpj) {
  const c = onlyDigits(cnpj);
  if (c.length !== 14 || /^(\d)\1{13}$/.test(c)) return false;
  const w1 = [5,4,3,2,9,8,7,6,5,4,3,2];
  const w2 = [6,5,4,3,2,9,8,7,6,5,4,3,2];
  let s = 0;
  for (let i = 0; i < 12; i++) s += parseInt(c[i]) * w1[i];
  let r = s % 11; r = r < 2 ? 0 : 11 - r;
  if (r !== parseInt(c[12])) return false;
  s = 0;
  for (let i = 0; i < 13; i++) s += parseInt(c[i]) * w2[i];
  r = s % 11; r = r < 2 ? 0 : 11 - r;
  return r === parseInt(c[13]);
}

function validateDoc(s) {
  const d = onlyDigits(s);
  if (d.length === 11) return isValidCPF(d) ? null : "CPF inválido";
  if (d.length === 14) return isValidCNPJ(d) ? null : "CNPJ inválido";
  if (d.length === 0) return "CPF/CNPJ obrigatório";
  return "Use 11 dígitos (CPF) ou 14 (CNPJ)";
}

function maskPhone(s) {
  let d = onlyDigits(s).slice(0, 13);
  if (!d) return "";
  if (d.length <= 2) return `+${d}`;
  if (d.length <= 4) return `+${d.slice(0,2)} ${d.slice(2)}`;
  if (d.length <= 9) return `+${d.slice(0,2)} ${d.slice(2,4)} ${d.slice(4)}`;
  return `+${d.slice(0,2)} ${d.slice(2,4)} ${d.slice(4,9)}-${d.slice(9)}`;
}

function NewClientModal({ onClose, onCreated }) {
  const [name, setName] = React.useState("");
  const [company, setCompany] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [document, setDocument] = React.useState("");
  const [docError, setDocError] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  function onDocChange(v) {
    setDocument(maskDoc(v));
    setDocError(null);
  }

  function onDocBlur() {
    const err = validateDoc(document);
    if (err && onlyDigits(document).length > 0) setDocError(err);
  }

  async function submit(e) {
    e.preventDefault();
    if (!name.trim() || !email.trim() || !phone.trim()) return;
    const docErr = validateDoc(document);
    if (docErr) {
      setDocError(docErr);
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      await window.SEQ_API.createClient({
        name: name.trim(),
        email: email.trim(),
        phone: phone.trim(),
        document: onlyDigits(document),
        company: company.trim() || undefined,
      });
      onCreated();
    } catch (err) {
      setError(err.message || "Falha ao criar cliente.");
      setSubmitting(false);
    }
  }

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(10,10,10,0.5)", zIndex: 300, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} className="kp-card" style={{ padding: 28, maxWidth: 560, width: "100%", background: "var(--kp-paper)" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>NOVO CLIENTE</div>
        <form onSubmit={submit}>
          <h2 className="kp-display" style={{ fontSize: 36, lineHeight: 1.05, marginTop: 6 }}>Quem é o <em>próximo</em>?</h2>
          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOME *</span>
              <input className="kp-input" required autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="Marina Vieira" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>EMPRESA</span>
              <input className="kp-input" value={company} onChange={(e) => setCompany(e.target.value)} placeholder="Studio Verbete" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>EMAIL *</span>
              <input className="kp-input" required type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="marina@verbete.co" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>TELEFONE / WHATSAPP *</span>
              <input className="kp-input" required value={phone} onChange={(e) => setPhone(maskPhone(e.target.value))} placeholder="+55 11 99999-9999" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>CPF / CNPJ *</span>
              <input
                className="kp-input"
                required
                value={document}
                onChange={(e) => onDocChange(e.target.value)}
                onBlur={onDocBlur}
                placeholder="000.000.000-00 ou 00.000.000/0000-00"
                inputMode="numeric"
                style={{ marginTop: 6, borderColor: docError ? "#C73E3E" : undefined }}
              />
              {docError && <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "#C73E3E", marginTop: 4 }}>⚠ {docError}</div>}
            </label>
          </div>
          {error && <div style={{ marginTop: 10, padding: "8px 12px", background: "#FFB5B5", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em" }}>⚠ {error}</div>}
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            <button type="button" onClick={onClose} className="kp-btn" style={{ flex: 1 }}>Cancelar</button>
            <button type="submit" disabled={submitting} className="kp-btn kp-btn-ink" style={{ flex: 2 }}>{submitting ? "Criando..." : "Criar cliente →"}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.SEQ_CLIENTES = Clientes;