// dashboard.jsx — Dashboard screen

const Dashboard = ({ t, lang, onNav, onOpenInvoice }) => {
  const totalOutstanding = INVOICES.filter(i => i.status === "pending" || i.status === "overdue")
    .reduce((s, i) => s + calcInvoiceTotal(i).total, 0);
  const totalOverdue = INVOICES.filter(i => i.status === "overdue")
    .reduce((s, i) => s + calcInvoiceTotal(i).total, 0);
  const totalPaid = INVOICES.filter(i => i.status === "paid")
    .reduce((s, i) => s + calcInvoiceTotal(i).total, 0);
  const totalDraft = INVOICES.filter(i => i.status === "draft").length;

  const maxBar = Math.max(...CASHFLOW.map(c => c.paid + c.outstanding));

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* KPIs */}
      <div className="kpi-grid">
        <div className="kpi accent">
          <div className="label">{t("outstanding")}</div>
          <div className="value">{fmtMoney(totalOutstanding)}</div>
          <div className="delta up"><Icon name="arrowUp" size={12}/> +12.4% {t("vs")}</div>
          <Sparkline className="spark" values={[8,12,9,14,11,18,16,22,19,24]} color="var(--accent)"/>
        </div>
        <div className="kpi">
          <div className="label">{t("paidThisMonth")}</div>
          <div className="value">{fmtMoney(totalPaid)}</div>
          <div className="delta up"><Icon name="arrowUp" size={12}/> +8.1% {t("vs")}</div>
          <Sparkline className="spark" values={[14,12,15,13,18,16,22,20,25,28]} color="var(--green)"/>
        </div>
        <div className="kpi">
          <div className="label">{t("overdue")}</div>
          <div className="value" style={{ color: "var(--red)" }}>{fmtMoney(totalOverdue)}</div>
          <div className="delta">2 invoices · 12 {t("daysOverdue")}</div>
          <Sparkline className="spark" values={[2,3,3,4,5,5,6,7,8,12]} color="var(--red)"/>
        </div>
        <div className="kpi">
          <div className="label">{t("draft")}</div>
          <div className="value">{totalDraft}</div>
          <div className="delta">~$13.9K {lang === "es" ? "potencial" : "potential"}</div>
          <Sparkline className="spark" values={[4,3,5,4,2,3,2,1,2,1]} color="var(--fg-2)"/>
        </div>
      </div>

      {/* Cashflow + Quick actions */}
      <div className="row cols-2">
        <div className="card">
          <div className="card-hd">
            <h3>{t("cashflow")}</h3>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Legend color="var(--accent)" label={t("paid")}/>
              <Legend color="oklch(from var(--accent) l c h / 0.3)" label={t("outstanding")}/>
            </div>
          </div>
          <div className="card-body">
            <div className="bar-chart">
              {CASHFLOW.map((c, i) => {
                const tot = c.paid + c.outstanding;
                const pH = (c.paid / maxBar) * 100;
                const oH = (c.outstanding / maxBar) * 100;
                return (
                  <div key={c.week} className={`bar-col ${i % 2 ? "even" : ""}`} title={`${c.week}: $${tot.toFixed(1)}K`}>
                    <div className="bar-out" style={{ height: `${oH}%` }}/>
                    <div className="bar-paid" style={{ height: `${pH}%` }}/>
                  </div>
                );
              })}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              {CASHFLOW.map(c => <div key={c.week} className="bar-label" style={{ flex: 1, textAlign: "center" }}>{c.week}</div>)}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-hd">
            <h3>{t("quickActions")}</h3>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <button className="btn primary" style={{ justifyContent: "flex-start", height: 38 }} onClick={() => onNav("editor")}>
              <Icon name="plus"/> {t("newInvoice")}
            </button>
            <button className="btn" style={{ justifyContent: "flex-start", height: 38 }}>
              <Icon name="bell"/> {t("sendReminder")}
              <span style={{ marginLeft: "auto", color: "var(--fg-2)", fontFamily: "var(--font-mono)", fontSize: 11 }}>2 {lang === "es" ? "pendientes" : "due"}</span>
            </button>
            <button className="btn" style={{ justifyContent: "flex-start", height: 38 }}>
              <Icon name="card"/> {t("recordPayment")}
            </button>
            <button className="btn" style={{ justifyContent: "flex-start", height: 38 }}>
              <Icon name="download"/> {t("exportCsv")}
            </button>
            <hr style={{ border: 0, borderTop: "1px solid var(--line-soft)", margin: "4px 0" }}/>
            <div style={{ fontSize: 11, color: "var(--fg-2)", textTransform: "uppercase", letterSpacing: 0.06, fontWeight: 600, padding: "4px 0" }}>{t("upcoming")}</div>
            {INVOICES.filter(i => i.status === "pending").slice(0, 3).map(inv => {
              const c = CLIENTS.find(c => c.id === inv.clientId);
              const tot = calcInvoiceTotal(inv).total;
              const days = Math.round((new Date(inv.due) - new Date("2026-04-27")) / 86400000);
              return (
                <div key={inv.id} onClick={() => onOpenInvoice(inv.id)}
                  style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 6px", borderRadius: 6, cursor: "pointer" }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--bg-2)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", background: c.color, flexShrink: 0 }}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
                    <div style={{ fontSize: 10.5, color: "var(--fg-2)", fontFamily: "var(--font-mono)" }}>{inv.number} · {days > 0 ? t("inDays", { n: days }) : `${-days}d ${lang === "es" ? "vencido" : "overdue"}`}</div>
                  </div>
                  <div className="num" style={{ fontSize: 12, fontWeight: 600 }}>{fmtMoneyShort(tot)}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Activity + top clients */}
      <div className="row cols-2">
        <div className="card">
          <div className="card-hd">
            <h3>{t("recentActivity")}</h3>
            <button className="btn ghost sm">{lang === "es" ? "Ver todo" : "View all"} <Icon name="arrowRight" size={12}/></button>
          </div>
          <div className="card-body flush">
            {ACTIVITY.map(a => <ActivityRow key={a.id} a={a} lang={lang} t={t}/>)}
          </div>
        </div>

        <div className="card">
          <div className="card-hd">
            <h3>{t("topClients")}</h3>
            <span className="subtitle">YTD 2026</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[...CLIENTS].sort((a, b) => b.ltv - a.ltv).slice(0, 5).map(c => {
              const max = Math.max(...CLIENTS.map(c => c.ltv));
              return (
                <div key={c.id}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: c.color }}/>
                    <span style={{ fontSize: 12.5, fontWeight: 500 }}>{c.name}</span>
                    <span className="num" style={{ marginLeft: "auto", fontSize: 12, color: "var(--fg-1)" }}>{fmtMoneyShort(c.ltv)}</span>
                  </div>
                  <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${(c.ltv / max) * 100}%`, background: c.color }}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

const Sparkline = ({ values, color, className }) => {
  const max = Math.max(...values), min = Math.min(...values);
  const w = 80, h = 28;
  const pts = values.map((v, i) => `${(i / (values.length - 1)) * w},${h - ((v - min) / (max - min || 1)) * h}`).join(" ");
  return (
    <svg className={className} width={w} height={h} viewBox={`0 0 ${w} ${h}`} fill="none">
      <polyline points={pts} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};

const Legend = ({ color, label }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--fg-2)" }}>
    <span style={{ width: 8, height: 8, borderRadius: 2, background: color }}/>{label}
  </span>
);

const ActivityRow = ({ a, lang, t }) => {
  const map = {
    paid: { icon: "check", color: "var(--green)", label: lang === "es" ? "Pagado" : "Paid" },
    sent: { icon: "send", color: "var(--accent)", label: lang === "es" ? "Enviado" : "Sent" },
    viewed: { icon: "eye", color: "var(--fg-1)", label: lang === "es" ? "Visto" : "Viewed" },
    reminder: { icon: "bell", color: "var(--amber)", label: lang === "es" ? "Recordatorio" : "Reminder" },
    created: { icon: "plus", color: "var(--violet)", label: lang === "es" ? "Creado" : "Created" },
  };
  const m = map[a.type];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 16px", borderBottom: "1px solid var(--line-soft)" }}>
      <div style={{ width: 26, height: 26, borderRadius: 6, background: "var(--bg-2)", color: m.color, display: "grid", placeItems: "center", flexShrink: 0 }}>
        <Icon name={m.icon} size={13}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5 }}>
          <b style={{ fontWeight: 500 }}>{m.label}</b>
          <span style={{ color: "var(--fg-2)" }}> · </span>
          <span style={{ color: "var(--fg-1)" }}>{a.client}</span>
        </div>
        <div className="num" style={{ fontSize: 11, color: "var(--fg-2)", marginTop: 2 }}>{a.invoice}</div>
      </div>
      <div className="num" style={{ fontSize: 12, fontWeight: 600 }}>{fmtMoneyShort(a.amount)}</div>
      <div style={{ fontSize: 11, color: "var(--fg-3)", width: 64, textAlign: "right" }}>{lang === "es" ? a.whenEs : a.when}</div>
    </div>
  );
};

window.Dashboard = Dashboard;