/* Kay Construction — Projects & Clients (Module core entities). */

const PROJECT_STATUSES = ["prospek", "penawaran", "berjalan", "selesai", "dibatalkan"];
const CLIENT_TYPES = ["company", "individual"];

function nextProjectCode() {
  const year = new Date().getFullYear();
  const codes = S.all("projects").map((p) => p.code).filter((c) => c && c.indexOf("KAY-" + year) === 0);
  let max = 0;
  codes.forEach((c) => { const n = parseInt(c.split("-")[2], 10); if (n > max) max = n; });
  return "KAY-" + year + "-" + String(max + 1).padStart(3, "0");
}

/* ---------------- Project form modal ---------------- */
function ProjectForm({ project, onClose }) {
  useStore();
  const [lang] = useLang();
  const clients = S.all("clients");
  const [f, setF] = useState(project || {
    code: nextProjectCode(), name: "", clientId: clients[0] ? clients[0].id : "",
    status: "prospek", contractValue: 0, progress: 0, startDate: "", targetDate: "", address: "", description: ""
  });
  const set = (k, v) => setF((o) => ({ ...o, [k]: v }));
  const save = () => {
    if (!f.name.trim()) return alert(lang === "en" ? "Project name is required" : "Nama proyek wajib diisi");
    S.upsert("projects", f);
    onClose();
  };
  return (
    <Modal title={project ? t("common.edit") + " " + t("common.project") : t("proj.new")} size="lg" onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button><Button variant="primary" icon="check" onClick={save}>{t("common.save")}</Button></>}>
      <div className="form-grid">
        <Field label={t("proj.code")}><Input value={f.code} onChange={(e) => set("code", e.target.value)} /></Field>
        <Field label={t("common.status")}>
          <Select value={f.status} onChange={(e) => set("status", e.target.value)}>
            {PROJECT_STATUSES.map((s) => <option key={s} value={s}>{tStatus(s)}</option>)}
          </Select>
        </Field>
        <Field label={t("proj.name")} full><Input value={f.name} onChange={(e) => set("name", e.target.value)} placeholder={lang === "en" ? "e.g. Villa Uluwatu Cliff" : "mis. Villa Uluwatu Cliff"} /></Field>
        <Field label={t("common.client")}>
          <Select value={f.clientId} onChange={(e) => set("clientId", e.target.value)}>
            <option value="">— {t("common.none")} —</option>
            {clients.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </Select>
        </Field>
        <Field label={t("proj.contractValue")}><MoneyInput value={f.contractValue} onChange={(v) => set("contractValue", v)} /></Field>
        <Field label={t("proj.startDate")} optional><Input type="date" value={f.startDate} onChange={(e) => set("startDate", e.target.value)} /></Field>
        <Field label={t("proj.targetDate")} optional><Input type="date" value={f.targetDate} onChange={(e) => set("targetDate", e.target.value)} /></Field>
        <Field label={t("proj.progress")}>
          <Input type="range" min="0" max="100" value={f.progress} onChange={(e) => set("progress", parseInt(e.target.value, 10))} style={{ padding: 0 }} />
          <div className="tiny muted">{f.progress}%</div>
        </Field>
        <Field label={t("proj.address")} optional><Input value={f.address} onChange={(e) => set("address", e.target.value)} /></Field>
        <Field label={t("common.description")} optional full><Textarea value={f.description} onChange={(e) => set("description", e.target.value)} /></Field>
      </div>
    </Modal>
  );
}

/* ---------------- Projects list ---------------- */
function ProjectsList({ createNew }) {
  useStore();
  const [lang] = useLang();
  const [q, setQ] = useState("");
  const [filter, setFilter] = useState("all");
  const [showForm, setShowForm] = useState(!!createNew);
  const [confirm, confirmNode] = useConfirm();

  useEffect(() => { if (createNew) { setShowForm(true); go("#/proyek"); } }, []);

  let projects = S.all("projects").slice().sort((a, b) => (b.code || "").localeCompare(a.code || ""));
  if (filter !== "all") projects = projects.filter((p) => p.status === filter);
  if (q) projects = projects.filter((p) => (p.name + p.code + S.clientName(p.clientId)).toLowerCase().includes(q.toLowerCase()));

  return (
    <div>
      <PageHead title={t("proj.title")} sub={lang === "en" ? "All projects and their financial status." : "Semua proyek dan status keuangannya."}>
        <Button variant="primary" icon="plus" onClick={() => setShowForm(true)}>{t("proj.new")}</Button>
      </PageHead>

      <div className="toolbar">
        <div className="search">
          <Icon name="search" className="ico" />
          <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t("common.search")} />
        </div>
        <div className="filters">
          <span className={"chip" + (filter === "all" ? " on" : "")} onClick={() => setFilter("all")}>{t("common.all")}</span>
          {PROJECT_STATUSES.map((s) => <span key={s} className={"chip" + (filter === s ? " on" : "")} onClick={() => setFilter(s)}>{tStatus(s)}</span>)}
        </div>
      </div>

      <div className="card">
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr>
              <th>{t("col.code")}</th><th>{t("common.client")}</th><th>{t("common.status")}</th>
              <th style={{ width: 130 }}>{t("col.progress")}</th><th className="num">{t("col.contract")}</th>
              <th className="num">{t("col.remaining")}</th><th className="num">{t("col.outstanding")}</th>
              <th>{t("col.target")}</th><th></th>
            </tr></thead>
            <tbody>
              {projects.length === 0 && <tr><td colSpan="9"><Empty icon="projects" title={t("common.empty")} /></td></tr>}
              {projects.map((p) => {
                const fin = S.projectFinancials(p.id);
                const over = fin.sisaAnggaran < 0;
                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("common.status")}><StatusBadge status={p.status} /></td>
                    <td data-label={t("col.progress")}><div className="row" style={{ gap: 8 }}><Progress value={p.progress} /><span className="tnum subtle">{p.progress}%</span></div></td>
                    <td data-label={t("col.contract")} className="num">{S.formatRupiah(fin.contract)}</td>
                    <td data-label={t("col.remaining")} className="num" style={{ color: over ? "var(--neg)" : "inherit", fontWeight: over ? 600 : 400 }}>{p.status === "prospek" ? "—" : S.formatRupiah(fin.sisaAnggaran)}</td>
                    <td data-label={t("col.outstanding")} className="num">{fin.sisaTagihan > 0 ? S.formatRupiah(fin.sisaTagihan) : "—"}</td>
                    <td data-label={t("col.target")}>{S.shortDate(p.targetDate)}</td>
                    <td className="num" onClick={(e) => e.stopPropagation()}>
                      <Button variant="ghost" size="sm" icon="trash" onClick={() => confirm(t("common.confirmDelete"), () => S.remove("projects", p.id))} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
      {showForm && <ProjectForm onClose={() => setShowForm(false)} />}
      {confirmNode}
    </div>
  );
}

/* ---------------- Project detail ---------------- */
function ProjectDetail({ id }) {
  useStore();
  const [lang] = useLang();
  const [tab, setTab] = useState("summary");
  const [edit, setEdit] = useState(false);
  const p = S.find("projects", id);
  if (!p) return <Empty icon="projects" title={lang === "en" ? "Project not found" : "Proyek tidak ditemukan"} action={<Button onClick={() => go("#/proyek")}>{t("common.back")}</Button>} />;
  const fin = S.projectFinancials(id);

  return (
    <div>
      <div className="row" style={{ gap: 10, marginBottom: 14 }}>
        <Button variant="ghost" size="sm" icon="back" onClick={() => go("#/proyek")}>{t("proj.title")}</Button>
      </div>
      <div className="page-head">
        <div>
          <div className="row" style={{ gap: 12, marginBottom: 6 }}>
            <span className="mono subtle">{p.code}</span><StatusBadge status={p.status} />
          </div>
          <h1 className="page-title">{p.name}</h1>
          <div className="page-sub">{S.clientName(p.clientId)}{p.address ? " · " + p.address : ""}</div>
        </div>
        <div className="row" style={{ gap: 10 }}>
          <Button icon="edit" onClick={() => setEdit(true)}>{t("common.edit")}</Button>
        </div>
      </div>

      <div className="tabs">
        {[["summary", "proj.tab.summary"], ["timeline", "proj.tab.timeline"], ["finance", "proj.tab.finance"], ["termin", "trm.title"], ["addendum", "add.title"], ["documents", "proj.tab.documents"]].map(([k, lbl]) =>
          <div key={k} className={"tab" + (tab === k ? " active" : "")} onClick={() => setTab(k)}>{t(lbl)}</div>)}
      </div>

      {tab === "summary" && <ProjectSummary p={p} fin={fin} />}
      {tab === "timeline" && <ProjectTimeline p={p} />}
      {tab === "finance" && <ProjectFinance p={p} fin={fin} />}
      {tab === "termin" && window.TerminSchedule && <TerminSchedule p={p} />}
      {tab === "addendum" && window.ContractHistory && <ContractHistory p={p} />}
      {tab === "documents" && <ProjectDocuments p={p} />}

      {edit && <ProjectForm project={p} onClose={() => setEdit(false)} />}
    </div>
  );
}

function ProjectSummary({ p, fin }) {
  const [lang] = useLang();
  const milestones = S.all("milestones").filter((m) => m.projectId === p.id);
  const doneCount = milestones.filter((m) => m.done).length;
  return (
    <div className="grid-2" style={{ alignItems: "start" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <div className="card pad">
          <h2 className="section">{t("proj.tab.summary")}</h2>
          {p.description ? <p style={{ marginTop: 0, color: "var(--ink-soft)" }}>{p.description}</p> : <p className="muted">{t("common.empty")}</p>}
          <div className="divider"></div>
          <div className="dl">
            <dt>{t("proj.startDate")}</dt><dd>{S.formatDate(p.startDate, lang)}</dd>
            <dt>{t("proj.targetDate")}</dt><dd>{S.formatDate(p.targetDate, lang)}</dd>
            <dt>{t("col.progress")}</dt><dd>{p.progress}%</dd>
            <dt>Milestone</dt><dd>{doneCount}/{milestones.length}</dd>
          </div>
        </div>
        <div className="card pad">
          <div className="between" style={{ marginBottom: 12 }}><span style={{ fontWeight: 600 }}>{t("col.progress")}</span><span className="tnum">{p.progress}%</span></div>
          <Progress value={p.progress} />
        </div>
      </div>
      <div className="card pad">
        <h2 className="section">{t("proj.financials")}</h2>
        <div className="stat-line"><span>{t("col.contract")}</span><span className="v">{S.formatRupiah(fin.contract)}</span></div>
        <div className="stat-line"><span>{t("col.budget")} (RAB)</span><span className="v">{S.formatRupiah(fin.anggaran)}</span></div>
        <div className="stat-line"><span>{t("col.actual")}</span><span className="v">{S.formatRupiah(fin.realisasi)}</span></div>
        <div className="stat-line"><span>{t("col.remaining")}</span><span className="v" style={{ color: fin.sisaAnggaran < 0 ? "var(--neg)" : "var(--pos)" }}>{S.formatRupiah(fin.sisaAnggaran)}</span></div>
        <div className="divider"></div>
        <div className="stat-line"><span>{t("col.billed")}</span><span className="v">{S.formatRupiah(fin.tertagih)}</span></div>
        <div className="stat-line"><span>{t("col.received")}</span><span className="v">{S.formatRupiah(fin.diterima)}</span></div>
        <div className="stat-line"><span>{t("col.outstanding")}</span><span className="v" style={{ color: fin.sisaTagihan > 0 ? "var(--neg)" : "inherit" }}>{S.formatRupiah(fin.sisaTagihan)}</span></div>
        <div className="divider"></div>
        <div className="stat-line"><span style={{ fontWeight: 600 }}>{t("dash.kpi.margin")}</span><span className="v serif" style={{ fontSize: 18 }}>{S.formatRupiah(fin.margin)}</span></div>
      </div>
    </div>
  );
}

function ProjectTimeline({ p }) {
  useStore();
  const [lang] = useLang();
  const [confirm, confirmNode] = useConfirm();
  const [adding, setAdding] = useState(false);
  const [nf, setNf] = useState({ title: "", targetDate: "" });
  const milestones = S.all("milestones").filter((m) => m.projectId === p.id).sort((a, b) => (a.targetDate || "").localeCompare(b.targetDate || ""));
  const add = () => { if (!nf.title.trim()) return; S.upsert("milestones", { projectId: p.id, title: nf.title, targetDate: nf.targetDate, done: false }); setNf({ title: "", targetDate: "" }); setAdding(false); };
  const toggle = (m) => S.upsert("milestones", { ...m, done: !m.done });
  return (
    <div className="card">
      <div className="card-head">
        <h2 className="section" style={{ margin: 0 }}>{t("proj.tab.timeline")}</h2>
        <Button size="sm" icon="plus" onClick={() => setAdding(true)}>{t("proj.addMilestone")}</Button>
      </div>
      <div className="card-body">
        {milestones.length === 0 && !adding && <Empty icon="flag" title={t("common.empty")} />}
        <div style={{ display: "flex", flexDirection: "column" }}>
          {milestones.map((m) => {
            const days = m.targetDate ? S.daysBetween(S.todayISO(), m.targetDate) : null;
            return (
              <div key={m.id} className="row" style={{ gap: 12, padding: "12px 0", borderBottom: "1px solid var(--line-soft)" }}>
                <input type="checkbox" checked={m.done} onChange={() => toggle(m)} style={{ width: 18, height: 18, accentColor: "var(--ink)" }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, textDecoration: m.done ? "line-through" : "none", color: m.done ? "var(--muted)" : "var(--ink)" }}>{m.title}</div>
                  <div className="tiny muted">{S.formatDate(m.targetDate, lang)}{!m.done && days !== null && <span style={{ color: days < 0 ? "var(--neg)" : days <= 14 ? "var(--warn)" : "var(--muted)" }}> · {days < 0 ? Math.abs(days) + " " + t("dash.days") + " " + t("dash.overdueBy") : t("dash.dueIn") + " " + days + " " + t("dash.days")}</span>}</div>
                </div>
                {m.done && <Badge tone="pos">{t("status.selesai")}</Badge>}
                <Button variant="ghost" size="sm" icon="trash" onClick={() => confirm(t("common.confirmDelete"), () => S.remove("milestones", m.id))} />
              </div>
            );
          })}
        </div>
        {adding && (
          <div className="row" style={{ gap: 10, marginTop: 16, alignItems: "flex-end" }}>
            <div style={{ flex: 1 }}><Field label={t("common.title")}><Input value={nf.title} autoFocus onChange={(e) => setNf({ ...nf, title: e.target.value })} /></Field></div>
            <div style={{ width: 170 }}><Field label={t("common.date")}><Input type="date" value={nf.targetDate} onChange={(e) => setNf({ ...nf, targetDate: e.target.value })} /></Field></div>
            <Button variant="primary" onClick={add} style={{ marginBottom: 16 }}>{t("common.add")}</Button>
            <Button variant="ghost" onClick={() => setAdding(false)} style={{ marginBottom: 16 }}>{t("common.cancel")}</Button>
          </div>
        )}
      </div>
      {confirmNode}
    </div>
  );
}

function ProjectFinance({ p, fin }) {
  const [lang] = useLang();
  const invoices = S.projectInvoices(p.id);
  const payments = S.all("payments").filter((x) => x.projectId === p.id);
  const expenses = S.all("expenses").filter((x) => x.projectId === p.id).sort((a, b) => (b.date || "").localeCompare(a.date || ""));
  const pct = fin.anggaran > 0 ? (fin.realisasi / fin.anggaran) * 100 : 0;
  const over = fin.realisasi > fin.anggaran && fin.anggaran > 0;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div className="card pad">
        <h2 className="section">{t("dash.budgetVsActual")}</h2>
        <div className="between" style={{ marginBottom: 8 }}>
          <span className="tnum">{S.formatRupiah(fin.realisasi)} <span className="muted">/ {S.formatRupiah(fin.anggaran)}</span></span>
          <span className="tnum" style={{ fontWeight: 600, color: over ? "var(--neg)" : "var(--pos)" }}>{S.formatRupiah(fin.sisaAnggaran)} {lang === "en" ? "left" : "sisa"}</span>
        </div>
        <div className={"meter" + (over ? " over" : pct > 80 ? " warn" : "")}><span style={{ width: Math.min(100, pct) + "%" }}></span></div>
      </div>

      <div className="grid-2" style={{ alignItems: "start" }}>
        <div className="card">
          <div className="card-head"><h2 className="section" style={{ margin: 0 }}>{t("nav.invoice")}</h2></div>
          <div className="table-wrap"><table className="tbl">
            <thead><tr><th>{t("common.number")}</th><th className="num">{t("common.total")}</th><th className="num">{t("col.paid")}</th><th>{t("common.status")}</th></tr></thead>
            <tbody>
              {invoices.length === 0 && <tr><td colSpan="4"><div className="empty" style={{ padding: 24 }}>{t("common.empty")}</div></td></tr>}
              {invoices.map((inv) => { const tot = S.docTotals(inv).total, paid = S.invoicePaid(inv.id); return (
                <tr key={inv.id} className="clickable" onClick={() => go("#/dokumen/invoice/" + inv.id)}>
                  <td><div className="mono tiny" style={{ fontWeight: 600 }}>{inv.number}</div><div className="subtle">{inv.terminDesc}</div></td>
                  <td className="num">{S.formatRupiah(tot)}</td><td className="num">{S.formatRupiah(paid)}</td>
                  <td><StatusBadge status={S.invoiceStatus(inv)} /></td>
                </tr>); })}
            </tbody>
          </table></div>
        </div>

        <div className="card">
          <div className="card-head"><h2 className="section" style={{ margin: 0 }}>{t("exp.title")}</h2><span className="tnum" style={{ fontWeight: 600 }}>{S.formatRupiah(fin.realisasi)}</span></div>
          <div className="table-wrap"><table className="tbl">
            <thead><tr><th>{t("common.description")}</th><th>{t("common.category")}</th><th className="num">{t("common.amount")}</th></tr></thead>
            <tbody>
              {expenses.length === 0 && <tr><td colSpan="3"><div className="empty" style={{ padding: 24 }}>{t("common.empty")}</div></td></tr>}
              {expenses.map((e) => (
                <tr key={e.id}><td><div style={{ fontWeight: 500 }}>{e.description}</div><div className="subtle">{S.shortDate(e.date)}</div></td>
                <td><Badge tone="neutral">{t("exp.cat." + e.category)}</Badge></td><td className="num">{S.formatRupiah(e.amount)}</td></tr>
              ))}
            </tbody>
          </table></div>
        </div>
      </div>
    </div>
  );
}

function ProjectDocuments({ p }) {
  const [lang] = useLang();
  const groups = [
    { type: "rab", coll: "rab", label: t("nav.rab") },
    { type: "penawaran", coll: "quotations", label: t("nav.quotation") },
    { type: "spk", coll: "workOrders", label: t("nav.spk") },
    { type: "invoice", coll: "invoices", label: t("nav.invoice") },
    { type: "kwitansi", coll: "payments", label: t("nav.kwitansi") }
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {groups.map((g) => {
        const docs = S.all(g.coll).filter((d) => d.projectId === p.id);
        return (
          <div className="card" key={g.type}>
            <div className="card-head"><h2 className="section" style={{ margin: 0 }}>{g.label}</h2>
              <Button size="sm" icon="plus" onClick={() => go("#/dokumen/" + g.type + "/baru?project=" + p.id)}>{t("common.new")}</Button></div>
            <div className="card-body" style={{ paddingTop: 8, paddingBottom: 8 }}>
              {docs.length === 0 ? <div className="muted tiny" style={{ padding: "8px 0" }}>{t("common.empty")}</div> :
                docs.map((d) => (
                  <div key={d.id} className="row between" style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)", cursor: "pointer" }} onClick={() => go("#/dokumen/" + g.type + "/" + d.id)}>
                    <div className="row" style={{ gap: 12 }}>
                      <span className="mono tiny" style={{ fontWeight: 600 }}>{d.number}</span>
                      <span className="subtle">{d.title || d.terminDesc || d.forPayment || ""}</span>
                    </div>
                    <div className="row" style={{ gap: 12 }}>
                      {d.status && <StatusBadge status={g.type === "invoice" ? S.invoiceStatus(d) : d.status} />}
                      <span className="tnum" style={{ fontWeight: 600 }}>{S.formatRupiah(d.amount != null ? d.amount : S.docTotals(d).total)}</span>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------------- Clients ---------------- */
function ClientForm({ client, onClose }) {
  const [lang] = useLang();
  const [f, setF] = useState(client || { name: "", type: "individual", contactPerson: "", phone: "", email: "", address: "", npwp: "", note: "" });
  const set = (k, v) => setF((o) => ({ ...o, [k]: v }));
  const save = () => { if (!f.name.trim()) return alert(lang === "en" ? "Name is required" : "Nama wajib diisi"); S.upsert("clients", f); onClose(); };
  return (
    <Modal title={client ? t("common.edit") + " " + t("common.client") : t("client.new")} size="lg" onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button><Button variant="primary" icon="check" onClick={save}>{t("common.save")}</Button></>}>
      <div className="form-grid">
        <Field label={t("client.name")} full><Input value={f.name} onChange={(e) => set("name", e.target.value)} /></Field>
        <Field label={t("client.type")}>
          <Select value={f.type} onChange={(e) => set("type", e.target.value)}>
            <option value="individual">{t("client.individual")}</option>
            <option value="company">{t("client.company")}</option>
          </Select>
        </Field>
        <Field label={t("client.contact")} optional><Input value={f.contactPerson} onChange={(e) => set("contactPerson", e.target.value)} /></Field>
        <Field label={t("client.phone")} optional><Input value={f.phone} onChange={(e) => set("phone", e.target.value)} /></Field>
        <Field label={t("client.email")} optional><Input value={f.email} onChange={(e) => set("email", e.target.value)} /></Field>
        <Field label={t("client.npwp")} optional><Input value={f.npwp} onChange={(e) => set("npwp", e.target.value)} /></Field>
        <Field label={t("client.address")} optional><Input value={f.address} onChange={(e) => set("address", e.target.value)} /></Field>
        <Field label={t("common.note")} optional full><Textarea value={f.note} onChange={(e) => set("note", e.target.value)} /></Field>
      </div>
    </Modal>
  );
}

function ClientsList({ createNew }) {
  useStore();
  const [lang] = useLang();
  const [q, setQ] = useState("");
  const [showForm, setShowForm] = useState(!!createNew);
  const [confirm, confirmNode] = useConfirm();
  useEffect(() => { if (createNew) { setShowForm(true); go("#/klien"); } }, []);
  let clients = S.all("clients").slice().sort((a, b) => a.name.localeCompare(b.name));
  if (q) clients = clients.filter((c) => (c.name + c.contactPerson + c.email).toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <PageHead title={t("client.title")} sub={lang === "en" ? "Clients and their project history." : "Klien dan riwayat proyeknya."}>
        <Button variant="primary" icon="plus" onClick={() => setShowForm(true)}>{t("client.new")}</Button>
      </PageHead>
      <div className="toolbar"><div className="search"><Icon name="search" className="ico" /><Input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t("common.search")} /></div></div>
      <div className="grid-3">
        {clients.length === 0 && <div className="card pad" style={{ gridColumn: "1/-1" }}><Empty icon="clients" title={t("common.empty")} /></div>}
        {clients.map((c) => {
          const projCount = S.all("projects").filter((p) => p.clientId === c.id).length;
          return (
            <div key={c.id} className="card pad" style={{ cursor: "pointer" }} onClick={() => go("#/klien/" + c.id)}>
              <div className="row" style={{ gap: 12, marginBottom: 12 }}>
                <div className="avatar">{c.name.charAt(0)}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 600 }}>{c.name}</div>
                  <div className="subtle">{c.type === "company" ? t("client.company") : t("client.individual")}</div>
                </div>
              </div>
              <div className="tiny muted" style={{ display: "flex", flexDirection: "column", gap: 3 }}>
                {c.phone && <span>{c.phone}</span>}
                {c.email && <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{c.email}</span>}
              </div>
              <div className="divider" style={{ margin: "14px 0" }}></div>
              <div className="between tiny"><span className="muted">{t("client.projects")}</span><span style={{ fontWeight: 600 }}>{projCount}</span></div>
            </div>
          );
        })}
      </div>
      {showForm && <ClientForm onClose={() => setShowForm(false)} />}
      {confirmNode}
    </div>
  );
}

function ClientDetail({ id }) {
  useStore();
  const [lang] = useLang();
  const [edit, setEdit] = useState(false);
  const [confirm, confirmNode] = useConfirm();
  const c = S.find("clients", id);
  if (!c) return <Empty icon="clients" title={lang === "en" ? "Client not found" : "Klien tidak ditemukan"} action={<Button onClick={() => go("#/klien")}>{t("common.back")}</Button>} />;
  const projects = S.all("projects").filter((p) => p.clientId === id);
  return (
    <div>
      <div className="row" style={{ gap: 10, marginBottom: 14 }}><Button variant="ghost" size="sm" icon="back" onClick={() => go("#/klien")}>{t("client.title")}</Button></div>
      <div className="page-head">
        <div className="row" style={{ gap: 16 }}>
          <div className="avatar" style={{ width: 52, height: 52, flexBasis: 52, fontSize: 22 }}>{c.name.charAt(0)}</div>
          <div>
            <h1 className="page-title" style={{ fontSize: 30 }}>{c.name}</h1>
            <div className="page-sub">{c.type === "company" ? t("client.company") : t("client.individual")}{c.contactPerson ? " · " + c.contactPerson : ""}</div>
          </div>
        </div>
        <div className="row" style={{ gap: 10 }}>
          <Button icon="edit" onClick={() => setEdit(true)}>{t("common.edit")}</Button>
          <Button variant="danger" icon="trash" onClick={() => confirm(t("common.confirmDelete"), () => { S.remove("clients", c.id); go("#/klien"); })} />
        </div>
      </div>
      <div className="grid-2" style={{ alignItems: "start" }}>
        <div className="card pad">
          <h2 className="section">{t("client.title")}</h2>
          <div className="dl">
            <dt>{t("client.phone")}</dt><dd>{c.phone || "—"}</dd>
            <dt>{t("client.email")}</dt><dd>{c.email || "—"}</dd>
            <dt>{t("client.address")}</dt><dd>{c.address || "—"}</dd>
            <dt>{t("client.npwp")}</dt><dd className="mono">{c.npwp || "—"}</dd>
          </div>
          {c.note && <><div className="divider"></div><div className="tiny muted">{c.note}</div></>}
        </div>
        <div className="card">
          <div className="card-head"><h2 className="section" style={{ margin: 0 }}>{t("client.projects")}</h2></div>
          <div className="table-wrap"><table className="tbl">
            <thead><tr><th>{t("col.code")}</th><th>{t("common.status")}</th><th className="num">{t("col.contract")}</th></tr></thead>
            <tbody>
              {projects.length === 0 && <tr><td colSpan="3"><div className="empty" style={{ padding: 24 }}>{t("common.empty")}</div></td></tr>}
              {projects.map((p) => (
                <tr key={p.id} className="clickable" onClick={() => go("#/proyek/" + p.id)}>
                  <td><div className="col-code">{p.name}</div><div className="subtle mono">{p.code}</div></td>
                  <td><StatusBadge status={p.status} /></td><td className="num">{S.formatRupiah(p.contractValue)}</td>
                </tr>
              ))}
            </tbody>
          </table></div>
        </div>
      </div>
      {edit && <ClientForm client={c} onClose={() => setEdit(false)} />}
      {confirmNode}
    </div>
  );
}

Object.assign(window, { ProjectsList, ProjectDetail, ClientsList, ClientDetail, ProjectForm, ClientForm, PROJECT_STATUSES });