/* global React, SEQ_UI, SEQ_DATA */
const { Wordmark, Avatar, TempPill, StatusChip, Icon, brl, fmtDur } = window.SEQ_UI;
const { PROPOSTAS: PROPOSTAS_FALLBACK } = window.SEQ_DATA;

function transformProposal(p) {
  const sentAt = p.sentAt;
  const enviadaEm = sentAt ? new Date(sentAt).toLocaleDateString("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }) : "rascunho";
  const statusMap = { accepted: "aceita", viewed: "viewing", sent: "sent", rejected: "rejeitada", expired: "expirada", draft: "rascunho" };
  const tempMap = { hot: "quente", warm: "morno", cold: "frio", fervendo: "fervendo" };
  return {
    id: p.id,
    title: p.title,
    cliente: p.client?.name || "—",
    empresa: p.client?.company || "—",
    avatar: (p.client?.name || "—").split(" ").map(s => s[0]).slice(0, 2).join(""),
    email: p.client?.email || "",
    valor: (p.totalAmount ?? 0) / 100,
    pagamento: p.paymentTerms || "Único",
    status: statusMap[p.status] || p.status,
    tempo: tempMap[p.temperature] || "frio",
    enviadaEm,
    enviadaEmISO: sentAt,
    aceitaEmISO: p.acceptedAt,
    visualizacoes: p.viewCount ?? 0,
    tempoTotalSeg: p.totalViewSeconds ?? 0,
    iaScore: p.aiScore ?? 0,
    iaLabel: p.aiLabel || "Sem sinal ainda",
    iaInsight: p.aiInsight || "",
    link: `pay.kaleidos.com.br/p/${p.publicSlug || p.id}`,
    canais: { email: "—", whatsapp: "—" },
  };
}

function Dashboard() {
  const [filter, setFilter] = React.useState("todas");
  const [query, setQuery] = React.useState("");
  const [PROPOSTAS, setItems] = React.useState(PROPOSTAS_FALLBACK);

  React.useEffect(() => {
    window.SEQ_API.listProposals()
      .then(d => {
        if (d.proposals?.length) setItems(d.proposals.map(transformProposal));
      })
      .catch(() => {});
  }, []);

  const filtered = PROPOSTAS.filter(p => {
    if (filter !== "todas" && p.status !== filter) return false;
    if (query && !(p.title + p.cliente + p.empresa).toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });

  // KPIs
  const enviadas = PROPOSTAS.length;
  const aceitas = PROPOSTAS.filter(p => p.status === "aceita").length;
  const valorAceito = PROPOSTAS.filter(p => p.status === "aceita").reduce((s,p)=>s+p.valor,0);
  const lendoAgora = PROPOSTAS.filter(p => p.status === "viewing").length;
  const taxaConv = enviadas > 0 ? Math.round((aceitas / enviadas) * 100) : 0;

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <DashTopBar />
      <div className="kp-container kp-container-wide" style={{ padding: "32px 32px 64px", maxWidth: 1440 }}>
        <DashHeader />
        <KPIRow data={{ enviadas, aceitas, valorAceito, lendoAgora, taxaConv }} />
        <FunilStrip />
        <Toolbar filter={filter} setFilter={setFilter} query={query} setQuery={setQuery} />
        <PropostaTable rows={filtered} />
      </div>
    </div>
  );
}

// ─── Top bar ────────────────────────────────────────────
function DashTopBar() {
  return (
    <div style={{
      borderBottom: "1.5px solid var(--kp-ink)",
      background: "color-mix(in srgb, var(--kp-paper) 92%, transparent)",
      backdropFilter: "blur(10px)",
      position: "sticky", top: 0, zIndex: 30,
    }}>
      <div className="kp-container kp-container-wide" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "12px 32px", maxWidth: 1440,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
          <Wordmark size={20} />
          <nav style={{ display: "flex", gap: 4 }}>
            {[
              ["Propostas", true],
              ["Clientes", false],
              ["Templates", false],
              ["Insights", false],
            ].map(([l, active]) => (
              <a key={l} href="#" style={{
                padding: "6px 12px",
                fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em",
                textTransform: "uppercase",
                background: active ? "var(--kp-ink)" : "transparent",
                color: active ? "var(--kp-paper)" : "var(--kp-ink)",
                border: "1.5px solid " + (active ? "var(--kp-ink)" : "transparent"),
              }}>{l}</a>
            ))}
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <input className="kp-input" placeholder="Buscar tudo…" style={{ width: 220, padding: "8px 12px", fontSize: 12 }} />
          <a href="#/proposta" className="kp-btn kp-btn-sm kp-btn-ink">+ Nova proposta</a>
          <Avatar initials="DK" size={32} bg="var(--kp-pink)" />
        </div>
      </div>
    </div>
  );
}

// ─── Page header ────────────────────────────────────────
function DashHeader() {
  return (
    <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 24, marginBottom: 32, flexWrap: "wrap" }}>
      <div>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>
          NÚMERO <em style={{ fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 14, letterSpacing: 0 }}>02</em> · DASHBOARD
        </span>
        <h1 className="kp-display" style={{
          fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.0, margin: "8px 0 0", letterSpacing: "-0.02em",
        }}>
          Suas propostas, <em>respirando</em><br/>em tempo real.
        </h1>
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="kp-btn kp-btn-sm">Exportar CSV</button>
        <button className="kp-btn kp-btn-sm">Esta semana ▾</button>
      </div>
    </div>
  );
}

// ─── KPI row ────────────────────────────────────────────
function KPIRow({ data }) {
  const cards = [
    { label: "Enviadas (30d)", value: data.enviadas, sub: "+4 vs. mês anterior", bg: "var(--kp-white)" },
    { label: "Lendo agora", value: data.lendoAgora, sub: "ao vivo", bg: "var(--kp-green)", pulse: true },
    { label: "Aceitas", value: data.aceitas, sub: `${data.taxaConv}% de conversão`, bg: "var(--kp-white)" },
    { label: "Receita assinada", value: brl(data.valorAceito).replace("R$\u00A0",""), prefix: "R$", sub: "este mês", bg: "var(--kp-pink)" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 24 }}>
      {cards.map((c, i) => (
        <div key={c.label} className="kp-card" style={{ background: c.bg, padding: 22 }}>
          <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: c.bg === "var(--kp-white)" ? "var(--kp-muted)" : "var(--kp-ink)", display: "flex", alignItems: "center", gap: 6 }}>
            {c.pulse && <span className="kp-dot" />}
            {c.label}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 6 }}>
            {c.prefix && <span className="kp-display" style={{ fontSize: 24, fontStyle: "italic" }}>{c.prefix}</span>}
            <span className="kp-display" style={{ fontSize: 44, fontStyle: "italic", lineHeight: 1 }}>{c.value}</span>
          </div>
          <div style={{ marginTop: 8, fontSize: 12, color: c.bg === "var(--kp-white)" ? "var(--kp-muted)" : "var(--kp-ink)" }}>{c.sub}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Funil strip ────────────────────────────────────────
function FunilStrip() {
  const stages = [
    { k: "Enviadas", n: 24, bg: "var(--kp-white)" },
    { k: "Abertas", n: 21, bg: "var(--kp-cold)" },
    { k: "Re-lidas (3+)", n: 14, bg: "var(--kp-warm)" },
    { k: "Quentes", n: 9, bg: "var(--kp-pink)" },
    { k: "Aceitas", n: 7, bg: "var(--kp-green)" },
  ];
  const max = stages[0].n;
  return (
    <div className="kp-card" style={{ padding: 24, marginBottom: 32 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 14 }}>
        <div>
          <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>FUNIL · 30 DIAS</div>
          <div className="kp-display" style={{ fontSize: 22, marginTop: 4 }}>De enviada a <em>fechada.</em></div>
        </div>
        <div className="kp-mono" style={{ fontSize: 10, color: "var(--kp-muted)", letterSpacing: "0.16em" }}>
          Tempo médio até fechar · <span style={{ color: "var(--kp-ink)" }}>14 dias</span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 10 }}>
        {stages.map(s => {
          const pct = s.n / max;
          return (
            <div key={s.k} style={{ position: "relative" }}>
              <div style={{
                background: s.bg,
                border: "1.5px solid var(--kp-ink)",
                height: 80, position: "relative",
                display: "flex", alignItems: "end", justifyContent: "center",
                padding: 12, overflow: "hidden",
              }}>
                {/* fill bar */}
                <div style={{
                  position: "absolute", inset: 0, top: `${(1-pct)*100}%`,
                  background: "rgba(10,10,10,0.06)",
                }} />
                <span className="kp-display" style={{ fontSize: 36, fontStyle: "italic", lineHeight: 1, position: "relative" }}>{s.n}</span>
              </div>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)", marginTop: 8, textAlign: "center" }}>{s.k}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Toolbar ────────────────────────────────────────────
function Toolbar({ filter, setFilter, query, setQuery }) {
  const filters = [
    ["todas", "Todas"], ["viewing", "Lendo agora"], ["sent", "Aguardando"],
    ["aceita", "Aceitas"], ["rejeitada", "Recusadas"],
  ];
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, marginBottom: 14, flexWrap: "wrap" }}>
      <div style={{ display: "flex", gap: 0, border: "1.5px solid var(--kp-ink)", boxShadow: "2px 2px 0 0 var(--kp-ink)" }}>
        {filters.map(([k, l], i) => (
          <button key={k} onClick={() => setFilter(k)} style={{
            padding: "8px 14px",
            fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em",
            textTransform: "uppercase", border: "none", borderLeft: i === 0 ? "none" : "1px solid rgba(10,10,10,0.15)",
            background: filter === k ? "var(--kp-ink)" : "var(--kp-white)",
            color: filter === k ? "var(--kp-paper)" : "var(--kp-ink)",
            cursor: "pointer",
          }}>{l}</button>
        ))}
      </div>
      <input className="kp-input" placeholder="Filtrar por cliente…" value={query} onChange={(e)=>setQuery(e.target.value)} style={{ maxWidth: 280, padding: "8px 12px", fontSize: 12 }} />
    </div>
  );
}

// ─── Table of propostas ─────────────────────────────────
function PropostaTable({ rows }) {
  return (
    <div className="kp-card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1.8fr 1.2fr 0.9fr 1.4fr 0.9fr 0.6fr",
        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)",
      }}>
        <div>Proposta · Cliente</div>
        <div>Status · Canais</div>
        <div>Valor</div>
        <div>Engajamento</div>
        <div>Score IA</div>
        <div></div>
      </div>
      {rows.map((p, i) => <PropostaRow key={p.id} p={p} striped={i % 2 === 1} />)}
      {rows.length === 0 && (
        <div style={{ padding: 48, textAlign: "center", color: "var(--kp-muted)" }}>
          <div className="kp-display" style={{ fontSize: 24, marginBottom: 8 }}>Nada por aqui.</div>
          <div style={{ fontSize: 14 }}>Tente outro filtro.</div>
        </div>
      )}
    </div>
  );
}

function PropostaRow({ p, striped }) {
  return (
    <a href="#/proposta" style={{
      display: "grid",
      gridTemplateColumns: "1.8fr 1.2fr 0.9fr 1.4fr 0.9fr 0.6fr",
      padding: "16px 18px",
      borderBottom: "1px solid rgba(10,10,10,0.1)",
      alignItems: "center",
      background: striped ? "var(--kp-soft)" : "var(--kp-white)",
      transition: "background .15s ease",
    }} onMouseEnter={(e)=>e.currentTarget.style.background="var(--kp-cold)"} onMouseLeave={(e)=>e.currentTarget.style.background = striped ? "var(--kp-soft)" : "var(--kp-white)"}>
      {/* Title + cliente */}
      <div style={{ display: "flex", gap: 12, alignItems: "center", minWidth: 0 }}>
        <Avatar initials={p.avatar} size={40} bg={
          p.status === "aceita" ? "var(--kp-green)" :
          p.status === "viewing" ? "var(--kp-pink-soft)" :
          p.status === "rejeitada" ? "var(--kp-soft)" : "var(--kp-cold)"
        }/>
        <div style={{ minWidth: 0 }}>
          <div className="kp-display" style={{ fontSize: 17, lineHeight: 1.15, fontWeight: 400, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {p.title}
          </div>
          <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 2, display: "flex", gap: 6, alignItems: "center" }}>
            <span>{p.cliente}</span>
            <span style={{ color: "var(--kp-faint)" }}>·</span>
            <span style={{ fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.1em" }}>{p.empresa}</span>
          </div>
        </div>
      </div>

      {/* Status + canais */}
      <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "start" }}>
        <StatusChip status={p.status} />
        <div style={{ display: "flex", gap: 8, fontSize: 11, color: "var(--kp-muted)", alignItems: "center" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}><Icon.mail s={11} /> {p.canais?.email}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}><Icon.whatsapp s={11} /> {p.canais?.whatsapp}</span>
        </div>
      </div>

      {/* Valor */}
      <div>
        <div className="kp-display" style={{ fontSize: 22, fontStyle: "italic", lineHeight: 1 }}>{brl(p.valor)}</div>
        <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 2 }}>{p.enviadaEm}</div>
      </div>

      {/* Engajamento */}
      <div>
        <div style={{ display: "flex", gap: 14, fontSize: 12 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
            <Icon.eye s={12} /> <strong>{p.visualizacoes}</strong> views
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
            <Icon.clock s={12} /> {fmtDur(p.tempoTotalSeg)}
          </span>
        </div>
        <div style={{ marginTop: 6 }}>
          <TempPill temp={p.tempo} />
        </div>
      </div>

      {/* IA score */}
      <div>
        <ScoreBar pct={p.iaScore} status={p.status} />
        <div style={{ fontSize: 11, color: "var(--kp-muted)", marginTop: 4 }}>{p.iaLabel}</div>
      </div>

      {/* Arrow */}
      <div style={{ justifySelf: "end", color: "var(--kp-muted)" }}>
        <Icon.arrow s={16} />
      </div>
    </a>
  );
}

function ScoreBar({ pct, status }) {
  const color = status === "aceita" ? "var(--kp-green)" :
                status === "rejeitada" ? "#FFB5B5" :
                pct >= 60 ? "var(--kp-pink)" :
                pct >= 30 ? "var(--kp-warm)" :
                "var(--kp-cold)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{
        width: 80, height: 18, border: "1.5px solid var(--kp-ink)",
        background: "var(--kp-white)", position: "relative",
      }}>
        <div style={{
          position: "absolute", inset: 0, right: `${100 - pct}%`,
          background: color,
        }} />
      </div>
      <span className="kp-display" style={{ fontSize: 17, fontStyle: "italic", lineHeight: 1, minWidth: 30 }}>{pct}%</span>
    </div>
  );
}

window.SEQ_DASH = Dashboard;