plot-ledger.jsx

import { useState, useEffect, useCallback, useMemo } from "react";

const DEFAULT_PARTNERS = ["Fareeda", "Nadeem", "Nabeel", "Rustam", "Siddiq", "Murad", "Asad"];
const STORAGE_KEY = "ak-plot-ledger-v1";

const DEFAULT_PINS = {
  admin: "1122",
  Fareeda: "1007", Nadeem: "1001", Nabeel: "1004", Rustam: "1003",
  Siddiq: "1002", Murad: "1005", Asad: "1006",
};

// Distinct receipt color per partner — so no two partners' receipts look alike
const PARTNER_COLORS = {
  Fareeda: { accent: "#A63D62", light: "#F5E3E9", name: "Gulabi (Rose)" },
  Nadeem:  { accent: "#1E2A38", light: "#E7EAEE", name: "Navy" },
  Nabeel:  { accent: "#2F6F6B", light: "#E1EEEC", name: "Firozi (Teal)" },
  Rustam:  { accent: "#C0622A", light: "#F6E7DA", name: "Narangi (Orange)" },
  Siddiq:  { accent: "#6B4C8A", light: "#EBE3F1", name: "Baingani (Purple)" },
  Murad:   { accent: "#3F7A44", light: "#E2EFE2", name: "Sabz (Green)" },
  Asad:    { accent: "#3B5787", light: "#E2E7F0", name: "Aasmani (Blue)" },
};

const money = (n) => "Rs " + Math.round(n).toLocaleString("en-PK");

export default function PlotLedger() {
  const [loaded, setLoaded] = useState(false);
  const [saveState, setSaveState] = useState("idle");

  const [advanceTotal, setAdvanceTotal] = useState(300000);
  const [installmentTotal, setInstallmentTotal] = useState(45000);
  const [months, setMonths] = useState(60);
  const [penaltyType, setPenaltyType] = useState("fixed");
  const [penaltyValue, setPenaltyValue] = useState(500);
  const [currentMonth, setCurrentMonth] = useState(1);
  const [advancePaid, setAdvancePaid] = useState({});
  const [monthlyPayments, setMonthlyPayments] = useState({});
  const [pins, setPins] = useState(DEFAULT_PINS);
  const [receipts, setReceipts] = useState([]); // {id, partner, type, amount, date}
  const [partners] = useState(DEFAULT_PARTNERS);

  const [lastReceipt, setLastReceipt] = useState(null);
  const [showReceipt, setShowReceipt] = useState(false);

  const [viewer, setViewer] = useState(null);
  const [loginRole, setLoginRole] = useState("partner");
  const [loginName, setLoginName] = useState(DEFAULT_PARTNERS[0]);
  const [loginPin, setLoginPin] = useState("");
  const [loginError, setLoginError] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const res = await window.storage.get(STORAGE_KEY, true);
        if (res && res.value) {
          const d = JSON.parse(res.value);
          setAdvanceTotal(d.advanceTotal ?? 300000);
          setInstallmentTotal(d.installmentTotal ?? 45000);
          setMonths(d.months ?? 60);
          setPenaltyType(d.penaltyType ?? "fixed");
          setPenaltyValue(d.penaltyValue ?? 500);
          setCurrentMonth(d.currentMonth ?? 1);
          setAdvancePaid(d.advancePaid ?? {});
          setMonthlyPayments(d.monthlyPayments ?? {});
          setPins(d.pins ?? DEFAULT_PINS);
          setReceipts(d.receipts ?? []);
        }
      } catch (e) {
        // no saved data yet, defaults used
      } finally {
        setLoaded(true);
      }
    })();
  }, []);

  const save = useCallback(async (extra) => {
    setSaveState("saving");
    try {
      const payload = {
        advanceTotal, installmentTotal, months, penaltyType, penaltyValue,
        currentMonth, advancePaid, monthlyPayments, pins, receipts,
        ...extra,
      };
      const result = await window.storage.set(STORAGE_KEY, JSON.stringify(payload), true);
      setSaveState(result ? "saved" : "error");
    } catch (e) {
      setSaveState("error");
    }
  }, [advanceTotal, installmentTotal, months, penaltyType, penaltyValue, currentMonth, advancePaid, monthlyPayments, pins, receipts]);

  useEffect(() => {
    if (!loaded || !viewer) return;
    const t = setTimeout(() => save(), 350);
    return () => clearTimeout(t);
    // eslint-disable-next-line
  }, [advanceTotal, installmentTotal, months, penaltyType, penaltyValue, currentMonth, advancePaid, monthlyPayments, pins, receipts, loaded, viewer]);

  const n = partners.length;
  const advanceShare = advanceTotal / n;
  const installmentShare = installmentTotal / n;
  const totalPlotPrice = advanceTotal + installmentTotal * months;
  const perPartnerTotal = advanceShare + installmentShare * months;

  const generateReceipt = (partner, type, amount) => {
    setReceipts((prev) => {
      const receipt = { id: prev.length + 1, partner, type, amount, date: new Date().toISOString() };
      setLastReceipt(receipt);
      setShowReceipt(true);
      return [...prev, receipt];
    });
  };

  const toggleAdvance = (p) => {
    setAdvancePaid((prev) => {
      const willBePaid = !prev[p];
      if (willBePaid) generateReceipt(p, "Advance Payment", advanceShare);
      return { ...prev, [p]: willBePaid };
    });
  };

  const toggleMonthly = (p, m) => {
    setMonthlyPayments((prev) => {
      const key = String(m);
      const monthObj = { ...(prev[key] || {}) };
      const willBePaid = !monthObj[p];
      monthObj[p] = willBePaid;
      if (willBePaid) generateReceipt(p, `Month ${m} Installment`, installmentShare);
      return { ...prev, [key]: monthObj };
    });
  };

  const monthsPaidCount = (p, asOfMonth) => {
    let c = 0;
    for (let m = 1; m <= asOfMonth; m++) {
      if (monthlyPayments[String(m)] && monthlyPayments[String(m)][p]) c++;
    }
    return c;
  };

  const computeRows = useCallback((asOfMonth) => {
    return partners.map((p) => {
      const paidMonths = monthsPaidCount(p, asOfMonth);
      const overdueMonths = Math.max(0, asOfMonth - paidMonths);
      const advDone = !!advancePaid[p];
      const advOverdue = !advDone;
      const penaltyFromInstallments =
        penaltyType === "fixed"
          ? overdueMonths * Number(penaltyValue || 0)
          : overdueMonths * installmentShare * (Number(penaltyValue || 0) / 100);
      const penaltyFromAdvance = advOverdue
        ? (penaltyType === "fixed" ? Number(penaltyValue || 0) : advanceShare * (Number(penaltyValue || 0) / 100))
        : 0;
      const totalPenalty = penaltyFromInstallments + penaltyFromAdvance;
      const totalPaid = paidMonths * installmentShare + (advDone ? advanceShare : 0);
      const totalExpectedSoFar = advanceShare + asOfMonth * installmentShare;
      const balanceDue = totalExpectedSoFar - totalPaid + totalPenalty;
      return { name: p, paidMonths, overdueMonths, advDone, totalPenalty, totalPaid, balanceDue };
    });
  }, [partners, monthlyPayments, advancePaid, penaltyType, penaltyValue, installmentShare, advanceShare]);

  const rows = useMemo(() => computeRows(currentMonth), [computeRows, currentMonth]);
  const overallRows = useMemo(() => computeRows(months), [computeRows, months]);

  const sumUp = (rowSet) => rowSet.reduce(
    (acc, r) => ({ collected: acc.collected + r.totalPaid, penalty: acc.penalty + r.totalPenalty, due: acc.due + r.balanceDue }),
    { collected: 0, penalty: 0, due: 0 }
  );
  const totals = useMemo(() => sumUp(rows), [rows]);
  const overallTotals = useMemo(() => sumUp(overallRows), [overallRows]);
  const targetSoFar = advanceTotal + installmentTotal * currentMonth;

  const exportBackup = () => {
    const header = ["Shareek", "Advance Status", "Qistain Adaa", "Kul Qistain", "Penalty", "Kul Adaa", "Baqaya"];
    const lines = [header.join(",")];
    overallRows.forEach((r) => {
      lines.push([r.name, r.advDone ? "Ada Shuda" : "Pending", r.paidMonths, months, Math.round(r.totalPenalty), Math.round(r.totalPaid), Math.round(r.balanceDue)].join(","));
    });
    lines.push("");
    lines.push(`Total Collected,,,,${Math.round(overallTotals.penalty)},${Math.round(overallTotals.collected)},${Math.round(overallTotals.due)}`);
    lines.push(`Backup Date,${new Date().toLocaleDateString("en-PK")}`);
    const csv = lines.join("\n");
    const blob = new Blob([csv], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `AK-Plot-Ledger-Backup-Month-${currentMonth}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const handleLogin = () => {
    setLoginError("");
    if (loginRole === "admin") {
      if (loginPin === pins.admin) setViewer({ role: "admin" });
      else setLoginError("Admin PIN ghalat hai.");
    } else {
      if (loginPin === pins[loginName]) setViewer({ role: "partner", name: loginName });
      else setLoginError("PIN ghalat hai. Apna PIN admin (Nadeem) se check kar lein.");
    }
    setLoginPin("");
  };

  if (!loaded) {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#F6F1E7", fontFamily: "Georgia, serif", color: "#1E2A38" }}>
        Ledger load ho raha hai...
      </div>
    );
  }

  const sharedStyles = `
    * { box-sizing: border-box; }
    .mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; }
    .ledger-input {
      background: #FFFDF8; border: 1px solid #D8CBAA; border-radius: 4px;
      padding: 6px 8px; font-family: ui-monospace, monospace; font-size: 14px; color: #1E2A38;
      width: 100%;
    }
    .ledger-input:focus { outline: 2px solid #B08D2B; outline-offset: 1px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 10px 12px; text-align: left; }
    thead th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #6B5A34; border-bottom: 2px solid #1E2A38; padding-bottom: 8px; }
    tbody tr { border-bottom: 1px solid #E4D9BC; }
    tbody tr:hover { background: #FBF7EC; }
    button.pill { border: none; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; font-weight: 600; transition: opacity .15s; }
    button.pill:hover { opacity: 0.85; }
    button.step { border: 1px solid #1E2A38; background: #1E2A38; color: #F6F1E7; border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
    button.step:disabled { opacity: 0.3; cursor: not-allowed; }
    @media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr 1fr !important; } th, td { padding: 8px 6px; font-size: 13px; } }
    @media print {
      body * { visibility: hidden; }
      .receipt-print-area, .receipt-print-area * { visibility: visible; }
      .receipt-print-area { position: fixed; top: 0; left: 0; width: 100%; }
    }
  `;

  const ReceiptModal = () => {
    if (!showReceipt || !lastReceipt) return null;
    const c = PARTNER_COLORS[lastReceipt.partner] || PARTNER_COLORS.Nadeem;
    const dt = new Date(lastReceipt.date);
    return (
      <div style={{ position: "fixed", inset: 0, background: "rgba(30,42,56,0.55)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50, padding: 16 }}>
        <div className="receipt-print-area" style={{ background: "#FFFDF8", borderRadius: 12, width: "100%", maxWidth: 380, overflow: "hidden", boxShadow: "0 10px 40px rgba(0,0,0,0.3)" }}>
          <div style={{ background: c.accent, padding: "18px 22px", color: "#FFFDF8" }}>
            <div style={{ fontSize: 11, letterSpacing: 0.1, opacity: 0.85, textTransform: "uppercase" }}>AK Plot Partnership</div>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 19, marginTop: 2 }}>Payment Receipt</div>
          </div>
          <div style={{ padding: "20px 22px", background: c.light }}>
            <Row label="Receipt No" value={`#${String(lastReceipt.id).padStart(4, "0")}`} />
            <Row label="Tareekh" value={dt.toLocaleDateString("en-PK")} />
            <Row label="Wasool Kunda" value={lastReceipt.partner} bold />
            <Row label="Mad (For)" value={lastReceipt.type} />
            <Row label="Raqam" value={money(lastReceipt.amount)} bold color={c.accent} />
            <Row label="Wasool Kiya" value="Nadeem — NR Graphic" />
          </div>
          <div style={{ padding: "14px 22px 20px", display: "flex", gap: 8 }}>
            <button className="pill" style={{ flex: 1, padding: "9px 0", background: c.accent, color: "#FFFDF8" }} onClick={() => window.print()}>Print / Save PDF</button>
            <button className="pill" style={{ flex: 1, padding: "9px 0", background: "#EFE7CF", color: "#1E2A38" }} onClick={() => setShowReceipt(false)}>Band Karein</button>
          </div>
        </div>
      </div>
    );
  };

  if (!viewer) {
    return (
      <div style={{ minHeight: "100vh", background: "#F6F1E7", fontFamily: "'Inter', system-ui, sans-serif", color: "#1E2A38", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
        <style>{sharedStyles}</style>
        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 12, padding: 28, maxWidth: 360, width: "100%" }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 20, marginBottom: 4 }}>AK Plot Ledger</div>
          <div style={{ fontSize: 12.5, color: "#8A7A50", marginBottom: 18 }}>Apna role chunein aur PIN dalein</div>
          <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
            <button className="pill" style={{ flex: 1, padding: "8px 0", background: loginRole === "partner" ? "#1E2A38" : "#EFE7CF", color: loginRole === "partner" ? "#F6F1E7" : "#1E2A38" }} onClick={() => setLoginRole("partner")}>Main Shareek hoon</button>
            <button className="pill" style={{ flex: 1, padding: "8px 0", background: loginRole === "admin" ? "#1E2A38" : "#EFE7CF", color: loginRole === "admin" ? "#F6F1E7" : "#1E2A38" }} onClick={() => setLoginRole("admin")}>Main Admin hoon</button>
          </div>
          {loginRole === "partner" && (
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 11, color: "#8A7A50", marginBottom: 4 }}>Apna naam chunein</div>
              <select className="ledger-input" value={loginName} onChange={(e) => setLoginName(e.target.value)}>
                {partners.map((p) => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
          )}
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 11, color: "#8A7A50", marginBottom: 4 }}>PIN</div>
            <input className="ledger-input" type="password" value={loginPin} onChange={(e) => setLoginPin(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleLogin()} placeholder="****" />
          </div>
          {loginError && <div style={{ color: "#A63D40", fontSize: 12.5, marginBottom: 10 }}>{loginError}</div>}
          <button className="pill" style={{ width: "100%", padding: "10px 0", background: "#B08D2B", color: "#FFFDF8", fontSize: 14 }} onClick={handleLogin}>Dekhein</button>
          <div style={{ fontSize: 11, color: "#8A7A50", marginTop: 16, lineHeight: 1.5 }}>
            Har shareek ko sirf apna PIN admin (Nadeem) se private tor par milega.
          </div>
        </div>
      </div>
    );
  }

  if (viewer.role === "partner") {
    const me = rows.find((r) => r.name === viewer.name);
    const meOverall = overallRows.find((r) => r.name === viewer.name);
    const paidThisMonth = !!(monthlyPayments[String(currentMonth)] && monthlyPayments[String(currentMonth)][viewer.name]);
    const myReceipts = receipts.filter((r) => r.partner === viewer.name).slice(-5).reverse();
    const c = PARTNER_COLORS[viewer.name] || PARTNER_COLORS.Nadeem;
    return (
      <div style={{ minHeight: "100vh", background: "#F6F1E7", fontFamily: "'Inter', system-ui, sans-serif", color: "#1E2A38", paddingBottom: 60 }}>
        <style>{sharedStyles}</style>
        <ReceiptModal />
        <div style={{ background: c.accent, padding: "24px 20px", borderBottom: "4px solid #B08D2B", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 22, color: "#FFFDF8" }}>Assalam-o-Alaikum, {viewer.name}</div>
            <div style={{ color: "#FFFDF8", opacity: 0.8, fontSize: 13 }}>AK Plot — aap ka apna hisaab</div>
          </div>
          <button className="pill" style={{ background: "#F3DEDE", color: "#A63D40" }} onClick={() => setViewer(null)}>Logout</button>
        </div>
        <div style={{ maxWidth: 480, margin: "0 auto", padding: "22px 20px" }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 15, marginBottom: 14 }}>Month <span className="mono" style={{ color: c.accent }}>{currentMonth}</span> / {months}</div>
          <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18, marginBottom: 16 }}>
            <Row label="Advance" value={me.advDone ? "Ada shuda" : "Baqi"} color={me.advDone ? "#2F6F4E" : "#A63D40"} />
            <Row label={`Is mahine (Month ${currentMonth}) ki qist`} value={paidThisMonth ? "Ada shuda" : "Abhi baqi"} color={paidThisMonth ? "#2F6F4E" : "#A63D40"} />
            <Row label="Ab tak Qistain Adaa" value={`${me.paidMonths} / ${currentMonth}`} />
            <Row label="Penalty (ab tak)" value={money(me.totalPenalty)} color={me.totalPenalty > 0 ? "#A63D40" : "#1E2A38"} />
            <Row label="Kul Adaigi (ab tak)" value={money(me.totalPaid)} />
            <Row label="Baqaya (Due)" value={money(me.balanceDue)} color={me.balanceDue > 0 ? "#A63D40" : "#2F6F4E"} bold />
          </div>
          <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18, marginBottom: 16 }}>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 14, marginBottom: 10 }}>Poori Scheme ({months} months) ka Khaka</div>
            <Row label="Kul hissa (advance + saari qistain)" value={money(perPartnerTotal)} />
            <Row label="Agar aaj scheme khatam ho to baqaya" value={money(meOverall.balanceDue)} color={meOverall.balanceDue > 0 ? "#A63D40" : "#2F6F4E"} bold />
          </div>
          <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18 }}>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 14, marginBottom: 10 }}>Meri Receipts</div>
            {myReceipts.length === 0 && <div style={{ fontSize: 12.5, color: "#8A7A50" }}>Abhi tak koi receipt nahi bani.</div>}
            {myReceipts.map((r) => (
              <div key={r.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #EFE7CF" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{r.type}</div>
                  <div style={{ fontSize: 11, color: "#8A7A50" }}>{new Date(r.date).toLocaleDateString("en-PK")} • {money(r.amount)}</div>
                </div>
                <button className="pill" style={{ background: c.light, color: c.accent, fontSize: 11 }} onClick={() => { setLastReceipt(r); setShowReceipt(true); }}>Dekhein</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ minHeight: "100vh", background: "#F6F1E7", fontFamily: "'Inter', system-ui, sans-serif", color: "#1E2A38", paddingBottom: 60 }}>
      <style>{sharedStyles}</style>
      <ReceiptModal />
      <div style={{ background: "#1E2A38", padding: "28px 20px 22px", borderBottom: "4px solid #B08D2B" }}>
        <div style={{ maxWidth: 980, margin: "0 auto", width: "100%", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 26, color: "#F6F1E7", letterSpacing: 0.3 }}>AK Plot — Partnership Ledger</div>
            <div style={{ color: "#C9BB94", fontSize: 13.5, marginTop: 4 }}>Admin View • 7 sharikon ka mushtarka plot • {months}-month scheme</div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="pill" style={{ background: "#EFE7CF", color: "#1E2A38" }} onClick={exportBackup}>Backup (CSV) Download</button>
            <button className="pill" style={{ background: "#F3DEDE", color: "#A63D40" }} onClick={() => setViewer(null)}>Logout</button>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 980, margin: "0 auto", padding: "22px 20px 0" }}>
        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18, marginBottom: 22 }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 15, marginBottom: 12, color: "#1E2A38" }}>Scheme ki Tafseel</div>
          <div className="settings-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
            <Field label="Advance (total)"><input className="ledger-input" type="number" value={advanceTotal} onChange={(e) => setAdvanceTotal(Number(e.target.value) || 0)} /></Field>
            <Field label="Monthly Qist (total)"><input className="ledger-input" type="number" value={installmentTotal} onChange={(e) => setInstallmentTotal(Number(e.target.value) || 0)} /></Field>
            <Field label="Duration (months)"><input className="ledger-input" type="number" value={months} onChange={(e) => setMonths(Math.max(1, Number(e.target.value) || 1))} /></Field>
            <Field label="Penalty Type">
              <select className="ledger-input" value={penaltyType} onChange={(e) => setPenaltyType(e.target.value)}>
                <option value="fixed">Fixed Rs / month</option>
                <option value="percent">% of qist / month</option>
              </select>
            </Field>
            <Field label={penaltyType === "fixed" ? "Penalty (Rs / late month)" : "Penalty (% / late month)"}>
              <input className="ledger-input" type="number" value={penaltyValue} onChange={(e) => setPenaltyValue(Number(e.target.value) || 0)} />
            </Field>
            <Field label="Har shareek ka Advance"><div className="ledger-input mono" style={{ background: "#F2EBD6" }}>{money(advanceShare)}</div></Field>
            <Field label="Har shareek ki Monthly Qist"><div className="ledger-input mono" style={{ background: "#F2EBD6" }}>{money(installmentShare)}</div></Field>
            <Field label="Total Plot Price"><div className="ledger-input mono" style={{ background: "#F2EBD6" }}>{money(totalPlotPrice)}</div></Field>
          </div>
          <div style={{ fontSize: 12.5, color: "#6B5A34", marginTop: 10 }}>
            Har shareek {months}-month scheme mein kul <b className="mono">{money(perPartnerTotal)}</b> ada karega. Payment "Paid" mark karte hi us shareek ki receipt khud-ba-khud ban jayegi.
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 16 }}>Month <span className="mono" style={{ color: "#B08D2B" }}>{currentMonth}</span> / {months}</div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <button className="step" onClick={() => setCurrentMonth((m) => Math.max(1, m - 1))} disabled={currentMonth <= 1}>‹</button>
            <button className="step" onClick={() => setCurrentMonth((m) => Math.min(months, m + 1))} disabled={currentMonth >= months}>›</button>
          </div>
        </div>

        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, overflow: "hidden", marginBottom: 22 }}>
          <div style={{ overflowX: "auto" }}>
            <table>
              <thead><tr><th>Shareek</th><th>Advance</th><th>Month {currentMonth}</th><th>Qistain Adaa</th><th>Penalty</th><th>Kul Adaa</th><th>Baqaya (Due)</th></tr></thead>
              <tbody>
                {rows.map((r) => {
                  const paidThisMonth = !!(monthlyPayments[String(currentMonth)] && monthlyPayments[String(currentMonth)][r.name]);
                  const c = PARTNER_COLORS[r.name] || PARTNER_COLORS.Nadeem;
                  return (
                    <tr key={r.name}>
                      <td style={{ fontWeight: 600 }}>
                        <span style={{ display: "inline-block", width: 9, height: 9, borderRadius: "50%", background: c.accent, marginRight: 7 }}></span>
                        {r.name}
                      </td>
                      <td><button className="pill" style={{ background: r.advDone ? "#DDEBE1" : "#F3DEDE", color: r.advDone ? "#2F6F4E" : "#A63D40" }} onClick={() => toggleAdvance(r.name)}>{r.advDone ? "Paid" : "Pending"}</button></td>
                      <td><button className="pill" style={{ background: paidThisMonth ? "#DDEBE1" : "#F3DEDE", color: paidThisMonth ? "#2F6F4E" : "#A63D40" }} onClick={() => toggleMonthly(r.name, currentMonth)}>{paidThisMonth ? "Paid" : "Baqi"}</button></td>
                      <td className="mono">{r.paidMonths} / {currentMonth}</td>
                      <td className="mono" style={{ color: r.totalPenalty > 0 ? "#A63D40" : "#1E2A38" }}>{money(r.totalPenalty)}</td>
                      <td className="mono">{money(r.totalPaid)}</td>
                      <td className="mono" style={{ fontWeight: 700, color: r.balanceDue > 0 ? "#A63D40" : "#2F6F4E" }}>{money(r.balanceDue)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 30 }}>
          <SummaryCard label="Ab tak Target" value={money(targetSoFar)} />
          <SummaryCard label="Ab tak Collected" value={money(totals.collected)} accent="#2F6F4E" />
          <SummaryCard label="Kul Penalty + Baqaya" value={money(totals.penalty + Math.max(0, totals.due))} accent="#A63D40" />
        </div>

        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, overflow: "hidden", marginBottom: 22 }}>
          <div style={{ padding: "14px 18px 0" }}>
            <div style={{ fontFamily: "Georgia, serif", fontSize: 15, color: "#1E2A38" }}>Sub Shareekon ki Total Summary <span style={{ fontSize: 12, color: "#8A7A50" }}>(poori {months}-month scheme ke hisaab se)</span></div>
          </div>
          <div style={{ overflowX: "auto", padding: "10px 0 4px" }}>
            <table>
              <thead><tr><th>Shareek</th><th>Advance</th><th>Qistain Adaa (kul)</th><th>Penalty</th><th>Kul Adaa</th><th>Baqaya</th></tr></thead>
              <tbody>
                {overallRows.map((r) => (
                  <tr key={r.name}>
                    <td style={{ fontWeight: 600 }}>{r.name}</td>
                    <td><span className="pill" style={{ background: r.advDone ? "#DDEBE1" : "#F3DEDE", color: r.advDone ? "#2F6F4E" : "#A63D40" }}>{r.advDone ? "Paid" : "Pending"}</span></td>
                    <td className="mono">{r.paidMonths} / {months}</td>
                    <td className="mono" style={{ color: r.totalPenalty > 0 ? "#A63D40" : "#1E2A38" }}>{money(r.totalPenalty)}</td>
                    <td className="mono">{money(r.totalPaid)}</td>
                    <td className="mono" style={{ fontWeight: 700, color: r.balanceDue > 0 ? "#A63D40" : "#2F6F4E" }}>{money(r.balanceDue)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr style={{ borderTop: "2px solid #1E2A38" }}>
                  <td style={{ fontWeight: 700 }}>Kul (Sab Shareek)</td><td></td><td></td>
                  <td className="mono" style={{ fontWeight: 700 }}>{money(overallTotals.penalty)}</td>
                  <td className="mono" style={{ fontWeight: 700 }}>{money(overallTotals.collected)}</td>
                  <td className="mono" style={{ fontWeight: 700 }}>{money(overallTotals.due)}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18, marginBottom: 22 }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 15, marginBottom: 4 }}>Recent Receipts</div>
          <div style={{ fontSize: 12, color: "#8A7A50", marginBottom: 12 }}>Har shareek ka apna rang — Paid mark karte hi yahan list ho jati hai.</div>
          {receipts.length === 0 && <div style={{ fontSize: 12.5, color: "#8A7A50" }}>Abhi tak koi receipt nahi bani.</div>}
          {receipts.slice(-8).reverse().map((r) => {
            const c = PARTNER_COLORS[r.partner] || PARTNER_COLORS.Nadeem;
            return (
              <div key={r.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #EFE7CF" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ display: "inline-block", width: 9, height: 9, borderRadius: "50%", background: c.accent }}></span>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{r.partner} — {r.type}</div>
                    <div style={{ fontSize: 11, color: "#8A7A50" }}>{new Date(r.date).toLocaleDateString("en-PK")} • {money(r.amount)}</div>
                  </div>
                </div>
                <button className="pill" style={{ background: c.light, color: c.accent, fontSize: 11 }} onClick={() => { setLastReceipt(r); setShowReceipt(true); }}>Dekhein</button>
              </div>
            );
          })}
        </div>

        <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: 18, marginBottom: 22 }}>
          <div style={{ fontFamily: "Georgia, serif", fontSize: 15, marginBottom: 4 }}>Shareekon ke PIN</div>
          <div style={{ fontSize: 12, color: "#8A7A50", marginBottom: 12 }}>Har PIN privately apne shareek ko bhej dein.</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
            {partners.map((p) => (
              <div key={p} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ display: "inline-block", width: 9, height: 9, borderRadius: "50%", background: (PARTNER_COLORS[p] || PARTNER_COLORS.Nadeem).accent }}></span>
                <div style={{ width: 70, fontSize: 13 }}>{p}</div>
                <input className="ledger-input mono" value={pins[p] || ""} onChange={(e) => setPins((prev) => ({ ...prev, [p]: e.target.value }))} />
              </div>
            ))}
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 79, fontSize: 13, fontWeight: 700 }}>Admin</div>
              <input className="ledger-input mono" value={pins.admin || ""} onChange={(e) => setPins((prev) => ({ ...prev, admin: e.target.value }))} />
            </div>
          </div>
        </div>

        <div style={{ fontSize: 12, color: "#8A7A50", textAlign: "center" }}>
          {saveState === "saving" ? "Save ho raha hai…" : saveState === "saved" ? "Data mehfooz (saved) hai — sab shareekon ko sync ho jayega." : saveState === "error" ? "Save mein masla — dobara try karein." : ""}
        </div>
      </div>
    </div>
  );
}

function Row({ label, value, color, bold }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "7px 0", borderBottom: "1px solid #EFE7CF", fontSize: 14 }}>
      <span style={{ color: "#6B5A34" }}>{label}</span>
      <span className="mono" style={{ fontWeight: bold ? 700 : 500, color: color || "#1E2A38" }}>{value}</span>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "#8A7A50", marginBottom: 4, letterSpacing: 0.03 }}>{label}</div>
      {children}
    </div>
  );
}

function SummaryCard({ label, value, accent }) {
  return (
    <div style={{ background: "#FFFDF8", border: "1px solid #E4D9BC", borderRadius: 10, padding: "16px 18px" }}>
      <div style={{ fontSize: 11.5, color: "#8A7A50", textTransform: "uppercase", letterSpacing: 0.05, marginBottom: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 20, fontWeight: 700, color: accent || "#1E2A38" }}>{value}</div>
    </div>
  );
}