/* Kay Construction — Dashboard (Module A). KPIs + active projects + outstanding + budget vs actual + milestones. */

function KPICard({ label, value, meta, icon, accent, small }) {
  return (
    <div className={"kpi" + (accent ? " accent-" + accent : "")}>
      <Icon name={icon} size={30} className="corner" />
      <div className="label">{label}</div>
      <div className={"val" + (small ? " sm" : "")}>{value}</div>
      {meta && <div className="meta">{meta}</div>}
    </div>
  );
}

function Dashboard() {
  useStore();
  const [lang] = useLang();
  const projects = S.all("projects");
  const active = projects.filter((p) => p.status === "berjalan");
  const contractTotal = active.reduce((s, p) => s + (Number(p.contractValue) || 0), 0);

  const outstanding = S.outstandingInvoices();
  const outstandingTotal = outstanding.reduce((s, r) => s + r.sisa, 0);

  const fins = active.map((p) => S.projectFinancials(p.id)).filter(Boolean);
  const marginTotal = fins.reduce((s, f) => s + f.margin, 0);

  const upcoming = S.all("milestones")
    .filter((m) => !m.done && m.targetDate)
    .map((m) => ({ ...m, days: S.daysBetween(S.todayISO(), m.targetDate) }))
    .filter((m) => m.days >= -30)
    .sort((a, b) => a.days - b.days)
    .slice(0, 6);

  const retPending = S.retentionItems().filter((r) => !r.cashed);

  return (
    <div>
      <PageHead title={t("dash.title")} sub={t("dash.subtitle")}>
        <Button variant="primary" icon="plus" onClick={() => go("#/proyek/baru")}>{t("proj.new")}</Button>
      </PageHead>

      <div className="kpi-grid">
        <KPICard label={t("dash.kpi.activeProjects")} value={active.length} icon="projects"
          meta={projects.length + " " + (lang === "en" ? "total" : "total proyek")} />
        <KPICard label={t("dash.kpi.contractValue")} value={S.formatRupiah(contractTotal)} small icon="building"
          meta={active.length + " " + t("status.berjalan").toLowerCase()} />
        <KPICard label={t("dash.kpi.outstanding")} value={S.formatRupiah(outstandingTotal)} small icon="invoice"
          accent={outstandingTotal > 0 ? "neg" : null}
          meta={outstanding.length + " " + (lang === "en" ? "unpaid invoices" : "invoice belum lunas")} />
        <KPICard label={t("dash.kpi.margin")} value={S.formatRupiah(marginTotal)} small icon="kwitansi"
          meta={lang === "en" ? "contract − actual cost" : "kontrak − realisasi"} />
      </div>

      {/* active projects table */}
      <div className="card" style={{ marginBottom: 26 }}>
        <div className="card-head">
          <h2 className="section" style={{ margin: 0 }}>{t("dash.activeProjects")}</h2>
          <span className="linklike" onClick={() => go("#/proyek")}>{t("common.view")} →</span>
        </div>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>{t("col.code")}</th>
                <th>{t("common.client")}</th>
                <th style={{ width: 140 }}>{t("col.progress")}</th>
                <th className="num">{t("col.contract")}</th>
                <th className="num">{t("col.budget")}</th>
                <th className="num">{t("col.actual")}</th>
                <th className="num">{t("col.remaining")}</th>
                <th className="num">{t("col.outstanding")}</th>
                <th>{t("col.target")}</th>
              </tr>
            </thead>
            <tbody>
              {active.length === 0 && <tr><td colSpan="9"><div className="empty" style={{ padding: 30 }}>{t("common.empty")}</div></td></tr>}
              {active.map((p) => {
                const f = S.projectFinancials(p.id);
                const overBudget = f.sisaAnggaran < 0;
                const targetDays = p.targetDate ? S.daysBetween(S.todayISO(), p.targetDate) : null;
                const late = targetDays !== null && targetDays < 0;
                const soon = targetDays !== null && targetDays >= 0 && targetDays <= 30;
                return (
                  <tr key={p.id} className="clickable" onClick={() => go("#/proyek/" + p.id)}>
                    <td data-label={t("col.code")}>
                      <div className="col-code">{p.name}</div>
                      <div className="subtle mono">{p.code}</div>
                    </td>
                    <td data-label={t("common.client")}>{S.clientName(p.clientId)}</td>
                    <td data-label={t("col.progress")}>
                      <div className="row" style={{ gap: 8 }}>
                        <Progress value={p.progress} />
                        <span className="tnum subtle" style={{ minWidth: 30 }}>{p.progress}%</span>
                      </div>
                    </td>
                    <td data-label={t("col.contract")} className="num">{S.formatRupiah(f.contract)}</td>
                    <td data-label={t("col.budget")} className="num">{S.formatRupiah(f.anggaran)}</td>
                    <td data-label={t("col.actual")} className="num">{S.formatRupiah(f.realisasi)}</td>
                    <td data-label={t("col.remaining")} className="num" style={{ color: overBudget ? "var(--neg)" : "inherit", fontWeight: overBudget ? 600 : 400 }}>
                      {S.formatRupiah(f.sisaAnggaran)}
                    </td>
                    <td data-label={t("col.outstanding")} className="num" style={{ color: f.sisaTagihan > 0 ? "var(--ink)" : "var(--muted)", fontWeight: f.sisaTagihan > 0 ? 600 : 400 }}>
                      {S.formatRupiah(f.sisaTagihan)}
                    </td>
                    <td data-label={t("col.target")}>
                      <span style={{ color: late ? "var(--neg)" : soon ? "var(--warn)" : "inherit" }}>{S.shortDate(p.targetDate)}</span>
                      {late && <div className="tiny" style={{ color: "var(--neg)" }}>{Math.abs(targetDays)} {t("dash.days")} {t("dash.overdueBy")}</div>}
                      {soon && <div className="tiny" style={{ color: "var(--warn)" }}>{targetDays} {t("dash.days")}</div>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid-2" style={{ alignItems: "start" }}>
        {/* outstanding invoices */}
        <div className="card">
          <div className="card-head">
            <h2 className="section" style={{ margin: 0 }}>{t("dash.outstanding")}</h2>
            <span className="linklike" onClick={() => go("#/dokumen/invoice")}>{t("common.view")} →</span>
          </div>
          {outstanding.length === 0 ? (
            <div className="empty" style={{ padding: 40 }}><div className="t">{t("dash.noOutstanding")}</div></div>
          ) : (
            <div className="table-wrap">
              <table className="tbl">
                <thead><tr><th>{t("doc.invoice")}</th><th className="num">{t("col.outstanding")}</th><th>{t("col.due")}</th></tr></thead>
                <tbody>
                  {outstanding.map((r) => (
                    <tr key={r.invoice.id} className="clickable" onClick={() => go("#/dokumen/invoice/" + r.invoice.id)}>
                      <td>
                        <div className="mono" style={{ fontWeight: 600, fontSize: 12 }}>{r.invoice.number}</div>
                        <div className="subtle">{S.projectName(r.invoice.projectId)}</div>
                      </td>
                      <td className="num" style={{ fontWeight: 600 }}>{S.formatRupiah(r.sisa)}</td>
                      <td>
                        <div>{S.shortDate(r.invoice.dueDate)}</div>
                        {r.overdueDays > 0
                          ? <div className="tiny" style={{ color: "var(--neg)" }}>{r.overdueDays} {t("dash.days")} {t("dash.overdueBy")}</div>
                          : <div className="tiny muted">{t("dash.dueIn")} {Math.abs(r.overdueDays)} {t("dash.days")}</div>}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* budget vs actual + milestones */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div className="card pad">
            <h2 className="section">{t("dash.budgetVsActual")}</h2>
            {fins.length === 0 && <div className="muted tiny">{t("common.empty")}</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {fins.map((f) => {
                const pct = f.anggaran > 0 ? Math.min(140, (f.realisasi / f.anggaran) * 100) : 0;
                const over = f.realisasi > f.anggaran && f.anggaran > 0;
                const warn = !over && pct > 80;
                return (
                  <div key={f.project.id}>
                    <div className="between" style={{ marginBottom: 6 }}>
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{f.project.name}</span>
                      <span className="tiny tnum muted">{S.formatRupiah(f.realisasi)} / {S.formatRupiah(f.anggaran)}</span>
                    </div>
                    <div className={"meter" + (over ? " over" : warn ? " warn" : "")}>
                      <span style={{ width: Math.min(100, pct) + "%" }}></span>
                    </div>
                    {over && <div className="tiny" style={{ color: "var(--neg)", marginTop: 4 }}>
                      {lang === "en" ? "Over budget by " : "Melebihi anggaran "} {S.formatRupiah(f.realisasi - f.anggaran)}
                    </div>}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card pad">
            <h2 className="section">{t("dash.milestones")}</h2>
            {upcoming.length === 0 && <div className="muted tiny">{t("common.empty")}</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {upcoming.map((m) => (
                <div key={m.id} className="stat-line clickable" style={{ cursor: "pointer" }} onClick={() => go("#/proyek/" + m.projectId)}>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{m.title}</div>
                    <div className="subtle">{S.projectName(m.projectId)}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="tiny tnum">{S.shortDate(m.targetDate)}</div>
                    <div className="tiny" style={{ color: m.days < 0 ? "var(--neg)" : m.days <= 14 ? "var(--warn)" : "var(--muted)" }}>
                      {m.days < 0 ? Math.abs(m.days) + " " + t("dash.days") + " " + t("dash.overdueBy") : t("dash.dueIn") + " " + m.days + " " + t("dash.days")}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {retPending.length > 0 && (
            <div className="card pad">
              <div className="between" style={{ marginBottom: 10 }}>
                <h2 className="section" style={{ margin: 0 }}>{t("ret.title")}</h2>
                <span className="linklike" onClick={() => go("#/laporan")}>{t("common.view")} →</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {retPending.slice(0, 5).map((r) => {
                  const due = r.dueDays <= 0;
                  return (
                    <div key={r.termin.id} className="stat-line clickable" style={{ cursor: "pointer" }} onClick={() => go("#/proyek/" + r.project.id)}>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{r.project.name}</div>
                        <div className="tiny" style={{ color: due ? "var(--pos)" : "var(--muted)" }}>{due ? t("ret.reminder") : (t("ret.release") + " " + S.shortDate(r.releaseDate))}</div>
                      </div>
                      <span className="tnum" style={{ fontWeight: 600 }}>{S.formatRupiah(r.amount)}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });