/* ======================================================================
   KOREALM — Admin workspace
   Dashboard · Inspections · Applications · KYC · Rent & commission · Maintenance
   ====================================================================== */

function adminNav(db) {
  const insp = db.inspections.filter(i => i.status === "requested").length;
  const apps = db.applications.filter(a => a.status === "pending").length;
  const kyc = db.kyc.filter(k => k.status === "submitted").length;
  const maint = db.maintenance.filter(m => m.status === "open").length;
  return [
    { view: "dashboard", label: "Overview", icon: "grid" },
    { view: "inspections", label: "Inspections", icon: "calendar", count: insp },
    { view: "applications", label: "Applications", icon: "doc", count: apps },
    { view: "kyc", label: "Landlord KYC", icon: "shield", count: kyc },
    { view: "rent", label: "Rent & commission", icon: "wallet" },
    { view: "maintenance", label: "Maintenance", icon: "wrench", count: maint },
  ];
}

/* ====================================================================
   DASHBOARD
   ==================================================================== */
function AdminDashboard({ app }) {
  const { db, go, user } = app;
  const reqInsp = db.inspections.filter(i => i.status === "requested");
  const pendApps = db.applications.filter(a => a.status === "pending");
  const subKyc = db.kyc.filter(k => k.status === "submitted");
  const openMaint = db.maintenance.filter(m => m.status === "open");

  const paidRent = db.payments.filter(p => p.type === "rent" && p.status === "paid");
  const commission = db.payments.filter(p => p.status === "paid").reduce((s, p) => s + p.commissionAmount, 0);
  const gmv = db.payments.filter(p => p.status === "paid").reduce((s, p) => s + p.amount, 0);
  const leased = db.properties.filter(p => p.status === "leased").length;

  const queues = [
    { label: "Inspections to confirm", count: reqInsp.length, icon: "calendar", view: "inspections", tone: "warning" },
    { label: "Applications to review", count: pendApps.length, icon: "doc", view: "applications", tone: "warning" },
    { label: "KYC to verify", count: subKyc.length, icon: "shield", view: "kyc", tone: "info" },
    { label: "Maintenance to assign", count: openMaint.length, icon: "wrench", view: "maintenance", tone: "danger" },
  ];

  return (
    <div>
      <PageHeader title="Operations overview" sub="Everything that needs Korealm's attention, in one place." />

      <div className="grid-4" style={{ marginBottom: 20 }}>
        <Stat k="Gross transaction volume" v={window.fmt.money(gmv)} mono icon="trend" />
        <Stat k="Commission earned" v={window.fmt.money(commission)} mono icon="wallet" sub="Across all payments" />
        <Stat k="Active leases" v={leased} icon="key" />
        <Stat k="Verified landlords" v={db.kyc.filter(k => k.status === "verified").length} icon="shield" />
      </div>

      <h3 style={{ fontSize: 15, marginBottom: 12 }}>Action queues</h3>
      <div className="grid-4" style={{ marginBottom: 22 }}>
        {queues.map(q => (
          <Card key={q.label} pad="sm" hover onClick={() => go(q.view)} className="anim-rise">
            <div className="row between" style={{ alignItems: "flex-start" }}>
              <span className={"avatar sq"} style={{ width: 38, height: 38, background: `var(--${q.tone}-soft)`, color: `var(--${q.tone})` }}><Icon name={q.icon} size={19} /></span>
              {q.count > 0 ? <Badge tone={q.tone}>{q.count} waiting</Badge> : <Badge tone="success" dot>Clear</Badge>}
            </div>
            <div className="stat" style={{ marginTop: 14 }}>
              <span className="v" style={{ fontSize: 30 }}>{q.count}</span>
              <span className="k">{q.label}</span>
            </div>
            <div className="row gap-4 btn-link" style={{ marginTop: 10, fontSize: 13 }}>Review<Icon name="arrowR" size={14} /></div>
          </Card>
        ))}
      </div>

      <div className="grid-2">
        <Card pad>
          <div className="row between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Latest applications</h3><button className="btn-link" onClick={() => go("applications")}>All</button></div>
          <div className="klist">
            {db.applications.slice(0, 4).map(a => { const p = db.properties.find(x => x.id === a.propertyId); const t = user(a.tenantId); return (
              <div key={a.id} className="row between gap-12">
                <div className="row gap-12"><Avatar name={t.name} size={34} /><div><div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div><div className="hint">{p?.title}</div></div></div>
                <StatusBadge status={a.status} />
              </div>
            ); })}
          </div>
        </Card>
        <Card pad>
          <div className="row between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Recent payments</h3><button className="btn-link" onClick={() => go("rent")}>All</button></div>
          <div className="klist">
            {db.payments.filter(p => p.status === "paid").slice(0, 4).map(p => { const t = user(p.tenantId); return (
              <div key={p.id} className="row between gap-12">
                <div className="row gap-12"><span className="avatar sq" style={{ width: 34, height: 34, background: "var(--green-soft)", color: "var(--green)" }}><Icon name={p.type === "onboarding" ? "key" : "card"} size={16} /></span><div><div style={{ fontWeight: 600, fontSize: 14, textTransform: "capitalize" }}>{p.type} · {t?.name.split(" ")[0]}</div><div className="hint mono">+{window.fmt.money(p.commissionAmount)} commission</div></div></div>
                <span className="mono" style={{ fontWeight: 600, fontSize: 14 }}>{window.fmt.money(p.amount)}</span>
              </div>
            ); })}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ====================================================================
   INSPECTIONS — confirm / decline / reschedule
   ==================================================================== */
function AdminInspections({ app }) {
  const { db, actions, user, toast } = app;
  const [tab, setTab] = useState("requested");
  const [resch, setResch] = useState(null);

  const all = db.inspections.slice().sort((a, b) => new Date(b.requestedDate) - new Date(a.requestedDate));
  const counts = {
    requested: all.filter(i => i.status === "requested").length,
    confirmed: all.filter(i => i.status === "confirmed").length,
    completed: all.filter(i => i.status === "completed").length,
  };
  const list = all.filter(i => tab === "all" ? true : i.status === tab);

  return (
    <div>
      <PageHeader title="Inspection requests" sub="Confirm viewing times with landlords and keep tenants updated." />
      <Tabs value={tab} onChange={setTab} tabs={[
        { value: "requested", label: "To confirm", count: counts.requested },
        { value: "confirmed", label: "Confirmed", count: counts.confirmed },
        { value: "completed", label: "Completed", count: counts.completed },
        { value: "all", label: "All" },
      ]} />
      <div className="col gap-12" style={{ marginTop: 18 }}>
        {list.length === 0 ? <Card pad><Empty icon="calendar" title="Nothing here" >No inspections in this view.</Empty></Card> : list.map(i => {
          const p = db.properties.find(x => x.id === i.propertyId); const t = user(i.tenantId); const ll = user(p?.landlordId);
          const [dt, tm] = i.slot.split("|");
          return (
            <Card key={i.id} pad="sm">
              <div className="row between wrap gap-14">
                <div className="row gap-14" style={{ minWidth: 0 }}>
                  <span className="date-chip lg"><span className="dc-m">{new Date(dt).toLocaleDateString("en-US", { month: "short" })}</span><span className="dc-d">{new Date(dt).getDate()}</span></span>
                  <div style={{ minWidth: 0 }}>
                    <div className="row gap-8 wrap"><h3 style={{ fontSize: 16 }}>{p?.title}</h3><StatusBadge status={i.status} /></div>
                    <div className="row gap-6" style={{ fontSize: 14, fontWeight: 600, margin: "4px 0" }}><Icon name="clock" size={14} className="dim" />{tm}</div>
                    <div className="hint">Tenant {t?.name} · Landlord {ll?.name} · requested {window.fmt.fmtShort(i.requestedDate)}</div>
                    {i.notes && <div className="hint" style={{ marginTop: 4, fontStyle: "italic" }}>"{i.notes}"</div>}
                  </div>
                </div>
                <div className="row gap-8">
                  {i.status === "requested" && <>
                    <Button variant="ghost" size="sm" icon="calendar" onClick={() => setResch(i)}>Reschedule</Button>
                    <Button variant="ghost" size="sm" icon="x" onClick={() => { actions.declineInspection(i.id); toast("Inspection declined", "info"); }}>Decline</Button>
                    <Button variant="primary" size="sm" icon="check" onClick={() => { actions.confirmInspection(i.id); toast("Inspection confirmed — tenant notified", "ok"); }}>Confirm</Button>
                  </>}
                  {i.status === "confirmed" && <Button variant="soft" size="sm" icon="checkCircle" onClick={() => { actions.completeInspection(i.id); toast("Marked completed", "ok"); }}>Mark completed</Button>}
                </div>
              </div>
            </Card>
          );
        })}
      </div>
      {resch && <RescheduleModal inspection={resch} onClose={() => setResch(null)} onSave={(slot) => { actions.rescheduleInspection(resch.id, slot); toast("Rescheduled & confirmed — tenant notified", "ok"); setResch(null); }} />}
    </div>
  );
}

function RescheduleModal({ inspection, onClose, onSave }) {
  const [date, setDate] = useState(null);
  const [time, setTime] = useState(null);
  const days = useMemo(() => Array.from({ length: 6 }, (_, i) => { const d = window.fmt.today(); d.setDate(d.getDate() + i + 1); return d; }), []);
  const times = ["9:30 AM", "11:00 AM", "1:00 PM", "3:00 PM", "4:30 PM"];
  return (
    <Modal icon="calendar" title="Propose a new time" sub="The tenant will be notified of the confirmed slot." onClose={onClose} width={540}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" disabled={!date || !time} onClick={() => onSave(date.toISOString() + "|" + time)}>Confirm new time</Button></>}>
      <span className="section-title">Date</span>
      <div className="day-grid" style={{ marginTop: 10, gridTemplateColumns: "repeat(6,1fr)" }}>
        {days.map((d, i) => <button key={i} className={"day-cell" + (date && +date === +d ? " sel" : "")} onClick={() => setDate(d)}><span className="dc-dow">{d.toLocaleDateString("en-US", { weekday: "short" })}</span><span className="dc-day">{d.getDate()}</span></button>)}
      </div>
      <span className="section-title" style={{ display: "block", marginTop: 18 }}>Time</span>
      <div className="slot-grid" style={{ marginTop: 10, gridTemplateColumns: "repeat(5,1fr)" }}>
        {times.map(t => <button key={t} className={"slot" + (time === t ? " sel" : "")} onClick={() => setTime(t)} style={{ fontSize: 12.5, padding: "10px 4px" }}>{t}</button>)}
      </div>
    </Modal>
  );
}

/* ====================================================================
   APPLICATIONS — approve / reject
   ==================================================================== */
function AdminApplications({ app }) {
  const { db, actions, user, toast } = app;
  const [tab, setTab] = useState("pending");
  const [sel, setSel] = useState(null);
  const [reject, setReject] = useState(null);

  const all = db.applications.slice().sort((a, b) => new Date(b.submittedDate) - new Date(a.submittedDate));
  const counts = { pending: all.filter(a => a.status === "pending").length, approved: all.filter(a => a.status === "approved").length, rejected: all.filter(a => a.status === "rejected").length };
  const list = all.filter(a => tab === "all" ? true : a.status === tab);
  const selApp = all.find(a => a.id === sel);

  return (
    <div>
      <PageHeader title="Tenant applications" sub="Review applicant details and decide on each rental application." />
      <Tabs value={tab} onChange={setTab} tabs={[
        { value: "pending", label: "Pending", count: counts.pending },
        { value: "approved", label: "Approved", count: counts.approved },
        { value: "rejected", label: "Rejected", count: counts.rejected },
        { value: "all", label: "All" },
      ]} />
      {list.length === 0 ? <Card pad style={{ marginTop: 18 }}><Empty icon="doc" title="No applications" >Nothing in this view.</Empty></Card> : (
        <Card style={{ marginTop: 18 }}>
          <table className="table">
            <thead><tr><th>Applicant</th><th>Property</th><th className="num">Income</th><th className="num">Ratio</th><th>Move-in</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {list.map(a => { const p = db.properties.find(x => x.id === a.propertyId); const t = user(a.tenantId); const ratio = (a.income / p?.price); return (
                <tr key={a.id} className="clickable" onClick={() => setSel(a.id)}>
                  <td><div className="row gap-10"><Avatar name={t.name} size={34} /><div><div style={{ fontWeight: 600 }}>{t.name}</div><div className="hint">{a.employment}</div></div></div></td>
                  <td className="muted">{p?.title}</td>
                  <td className="num">{window.fmt.money(a.income)}</td>
                  <td className="num"><span style={{ color: ratio >= 2.5 ? "var(--success)" : "var(--warning)", fontWeight: 600 }}>{ratio.toFixed(1)}×</span></td>
                  <td className="muted">{a.moveIn ? window.fmt.fmtShort(a.moveIn) : "—"}</td>
                  <td><StatusBadge status={a.status} /></td>
                  <td className="right"><Icon name="chevR" size={16} className="dim" /></td>
                </tr>
              ); })}
            </tbody>
          </table>
        </Card>
      )}

      {selApp && (() => {
        const p = db.properties.find(x => x.id === selApp.propertyId); const t = user(selApp.tenantId); const ratio = selApp.income / p?.price;
        return (
          <Drawer title="Application review" sub={p?.title} onClose={() => setSel(null)}
            footer={selApp.status === "pending" ? <>
              <Button variant="ghost" className="grow" icon="x" onClick={() => { setReject(selApp); }}>Reject</Button>
              <Button variant="primary" className="grow" icon="check" onClick={() => { actions.approveApplication(selApp.id); toast("Application approved — tenant notified", "ok"); setSel(null); }}>Approve</Button>
            </> : <Button variant="ghost" className="btn-block" onClick={() => setSel(null)}>Close</Button>}>
            <div className="row gap-12" style={{ marginBottom: 18 }}>
              <Avatar name={t.name} size={48} />
              <div className="grow"><h3 style={{ fontSize: 17 }}>{t.name}</h3><div className="hint">{t.email} · {t.phone}</div></div>
              <StatusBadge status={selApp.status} />
            </div>

            <div className={"ratio-bar " + (ratio >= 2.5 ? "ok" : "warn")} style={{ marginBottom: 16 }}>
              <Icon name={ratio >= 2.5 ? "checkCircle" : "alert"} size={16} />
              Income-to-rent ratio {ratio.toFixed(1)}× — {ratio >= 2.5 ? "meets" : "below"} the 2.5× requirement
            </div>

            <span className="section-title">Applicant details</span>
            <div className="review-grid" style={{ marginTop: 10 }}>
              {[["Property", p?.title], ["Monthly rent", window.fmt.money(p?.price)], ["Employment", selApp.employment], ["Gross income", window.fmt.money(selApp.income)], ["Occupants", selApp.occupants], ["Pets", selApp.pets], ["Move-in", selApp.moveIn ? window.fmt.fmtDate(selApp.moveIn) : "—"], ["Submitted", window.fmt.fmtDate(selApp.submittedDate)], ["Credit consent", selApp.creditConsent ? "Authorized" : "—"]].map(([k, v]) => (
                <div key={k} className="review-row"><span className="muted">{k}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{v}</span></div>
              ))}
            </div>
            {selApp.notes && <><span className="section-title" style={{ display: "block", marginTop: 16 }}>Applicant note</span><p className="muted" style={{ fontSize: 14, marginTop: 8 }}>"{selApp.notes}"</p></>}
            {selApp.status === "rejected" && selApp.reason && <div className="warn-strip" style={{ marginTop: 16 }}><Icon name="xCircle" size={15} />{selApp.reason}</div>}
            {selApp.status === "approved" && <div className="ratio-bar ok" style={{ marginTop: 16 }}><Icon name="checkCircle" size={15} />Approved {window.fmt.fmtDate(selApp.decisionDate)} by {selApp.decisionBy}</div>}
          </Drawer>
        );
      })()}

      {reject && <RejectModal title="Reject application" label="Reason (shared with applicant)" presets={["Income did not meet the 2.5× monthly rent requirement.", "Incomplete application details.", "Property is no longer available.", "Unable to verify employment."]}
        onClose={() => setReject(null)} onConfirm={(reason) => { actions.rejectApplication(reject.id, reason); toast("Application rejected — tenant notified", "info"); setReject(null); setSel(null); }} />}
    </div>
  );
}

function RejectModal({ title, label, presets, onClose, onConfirm }) {
  const [reason, setReason] = useState("");
  return (
    <Modal icon="alert" title={title} sub="Provide a clear reason — it'll be shared in the notification." onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="danger" icon="x" disabled={!reason.trim()} onClick={() => onConfirm(reason.trim())}>Confirm rejection</Button></>}>
      <Field label={label}><Textarea placeholder="Explain the decision…" value={reason} onChange={e => setReason(e.target.value)} /></Field>
      <div className="col gap-8" style={{ marginTop: 14 }}>
        <span className="section-title">Quick reasons</span>
        <div className="row gap-8 wrap">{presets.map(pr => <button key={pr} className="chip" onClick={() => setReason(pr)}>{pr.length > 40 ? pr.slice(0, 38) + "…" : pr}</button>)}</div>
      </div>
    </Modal>
  );
}

/* ====================================================================
   KYC — verify / reject landlord documents
   ==================================================================== */
function AdminKyc({ app }) {
  const { db, actions, user, toast } = app;
  const [tab, setTab] = useState("submitted");
  const [sel, setSel] = useState(null);
  const [reject, setReject] = useState(null);

  const all = db.kyc.slice().sort((a, b) => (b.submittedDate ? new Date(b.submittedDate) : 0) - (a.submittedDate ? new Date(a.submittedDate) : 0));
  const counts = { submitted: all.filter(k => k.status === "submitted").length, verified: all.filter(k => k.status === "verified").length };
  const list = all.filter(k => tab === "all" ? true : tab === "other" ? !["submitted", "verified"].includes(k.status) : k.status === tab);
  const selKyc = all.find(k => k.id === sel);

  return (
    <div>
      <PageHeader title="Landlord verification" sub="Review identity and ownership documents before landlords can collect rent." />
      <Tabs value={tab} onChange={setTab} tabs={[
        { value: "submitted", label: "To verify", count: counts.submitted },
        { value: "verified", label: "Verified", count: counts.verified },
        { value: "all", label: "All landlords" },
      ]} />
      <div className="col gap-12" style={{ marginTop: 18 }}>
        {list.length === 0 ? <Card pad><Empty icon="shield" title="Nothing here" >No landlords in this view.</Empty></Card> : list.map(k => {
          const ll = user(k.landlordId);
          return (
            <Card key={k.id} pad="sm">
              <div className="row between wrap gap-14">
                <div className="row gap-14" style={{ minWidth: 0 }}>
                  <Avatar name={ll.name} size={46} />
                  <div style={{ minWidth: 0 }}>
                    <div className="row gap-8 wrap"><h3 style={{ fontSize: 16 }}>{ll.name}</h3><StatusBadge status={k.status} /></div>
                    <div className="hint" style={{ margin: "3px 0" }}>{ll.company} · {ll.email}</div>
                    <div className="row gap-6" style={{ fontSize: 13 }}><Icon name="doc" size={13} className="dim" />{k.docs.length} document{k.docs.length !== 1 ? "s" : ""}{k.submittedDate ? ` · submitted ${window.fmt.fmtShort(k.submittedDate)}` : ""}</div>
                  </div>
                </div>
                <div className="row gap-8">
                  {k.status === "submitted" ? (
                    <Button variant="primary" size="sm" icon="eye" onClick={() => setSel(k.id)}>Review documents</Button>
                  ) : k.status === "not_started" ? (
                    <Badge tone="neutral">Awaiting upload</Badge>
                  ) : (
                    <Button variant="ghost" size="sm" icon="eye" onClick={() => setSel(k.id)}>View</Button>
                  )}
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      {selKyc && (() => { const ll = user(selKyc.landlordId); return (
        <Drawer title="Verify landlord" sub={ll.name} onClose={() => setSel(null)}
          footer={selKyc.status === "submitted" ? <>
            <Button variant="ghost" className="grow" icon="x" onClick={() => setReject(selKyc)}>Reject</Button>
            <Button variant="primary" className="grow" icon="shield" onClick={() => { actions.verifyKyc(selKyc.id); toast("Landlord verified — they can now collect rent", "ok"); setSel(null); }}>Verify landlord</Button>
          </> : <Button variant="ghost" className="btn-block" onClick={() => setSel(null)}>Close</Button>}>
          <div className="row gap-12" style={{ marginBottom: 18 }}>
            <Avatar name={ll.name} size={48} />
            <div className="grow"><h3 style={{ fontSize: 17 }}>{ll.company}</h3><div className="hint">{ll.name} · {ll.email}</div></div>
            <StatusBadge status={selKyc.status} />
          </div>
          <span className="section-title">Submitted documents</span>
          <div className="col gap-10" style={{ marginTop: 10 }}>
            {selKyc.docs.map(d => (
              <div key={d.type} className="kyc-doc uploaded">
                <span className="doc-ic"><Icon name="doc" size={20} /></span>
                <div className="grow"><div style={{ fontWeight: 600, fontSize: 14 }}>{d.type}</div><div className="hint">{d.name}</div></div>
                <StatusBadge status={d.status === "pending" ? "submitted" : d.status} dot />
              </div>
            ))}
          </div>
          <div className="grid-2" style={{ marginTop: 16, gap: 10 }}>
            {selKyc.docs.slice(0, 2).map(d => <div key={d.type} className="doc-thumb"><Photo label={d.type.toLowerCase()} style={{ height: "100%" }} /></div>)}
          </div>
          {selKyc.status === "verified" && <div className="ratio-bar ok" style={{ marginTop: 16 }}><Icon name="checkCircle" size={15} />Verified {window.fmt.fmtDate(selKyc.decisionDate)}</div>}
          {selKyc.status === "rejected" && selKyc.rejectReason && <div className="warn-strip" style={{ marginTop: 16 }}><Icon name="xCircle" size={15} />{selKyc.rejectReason}</div>}
        </Drawer>
      ); })()}

      {reject && <RejectModal title="Reject verification" label="Reason (shared with landlord)" presets={["Government ID is unclear or expired.", "Proof of ownership does not match the listing.", "Bank details could not be verified.", "Documents appear altered."]}
        onClose={() => setReject(null)} onConfirm={(reason) => { actions.rejectKyc(reject.id, reason); toast("Verification rejected — landlord notified", "info"); setReject(null); setSel(null); }} />}
    </div>
  );
}

/* ====================================================================
   RENT & COMMISSION
   ==================================================================== */
function AdminRent({ app }) {
  const { db, user } = app;
  const [tab, setTab] = useState("all");
  const pays = db.payments.slice().sort((a, b) => new Date(b.date) - new Date(a.date));
  const paid = pays.filter(p => p.status === "paid");
  const gmv = paid.reduce((s, p) => s + p.amount, 0);
  const commission = paid.reduce((s, p) => s + p.commissionAmount, 0);
  const payouts = paid.reduce((s, p) => s + p.landlordPayout, 0);
  const list = pays.filter(p => tab === "all" ? true : p.type === tab);

  return (
    <div>
      <PageHeader title="Rent & commission" sub="All money flowing through Korealm, with the commission split on every transaction." />
      <div className="grid-4" style={{ marginBottom: 18 }}>
        <Stat k="Gross volume" v={window.fmt.money(gmv)} mono icon="trend" />
        <Stat k="Commission earned" v={window.fmt.money(commission)} mono icon="wallet" />
        <Stat k="Landlord payouts" v={window.fmt.money(payouts)} mono icon="building" />
        <Stat k="Transactions" v={paid.length} icon="card" />
      </div>

      <Card pad style={{ marginBottom: 18 }}>
        <div className="row between wrap gap-12" style={{ marginBottom: 14 }}>
          <div><h3 style={{ fontSize: 16 }}>Commission split</h3><p className="hint" style={{ marginTop: 2 }}>Onboarding fees are retained in full; rent splits 10% / 90%.</p></div>
        </div>
        <div className="split-bar"><div className="seg-comm" style={{ width: gmv ? (commission / gmv * 100) + "%" : "0%" }} /><div className="seg-payout" style={{ width: gmv ? (payouts / gmv * 100) + "%" : "0%" }} /></div>
        <div className="split-legend">
          <div className="lg-item"><span className="lg-dot" style={{ background: "var(--gold)" }} /><span>Korealm commission · <strong>{window.fmt.money(commission)}</strong></span></div>
          <div className="lg-item"><span className="lg-dot" style={{ background: "var(--green)" }} /><span>Landlord payouts · <strong>{window.fmt.money(payouts)}</strong></span></div>
        </div>
      </Card>

      <Card>
        <div className="row between wrap gap-10" style={{ padding: "14px 16px 8px" }}>
          <h3 style={{ fontSize: 16 }}>Ledger</h3>
          <div className="seg">
            {[["all", "All"], ["onboarding", "Onboarding"], ["rent", "Rent"]].map(([v, l]) => <button key={v} className={tab === v ? "active" : ""} onClick={() => setTab(v)}>{l}</button>)}
          </div>
        </div>
        <table className="table">
          <thead><tr><th>Reference</th><th>Type</th><th>Tenant</th><th>Property</th><th>Date</th><th className="num">Amount</th><th className="num">Commission</th><th className="num">Payout</th><th>Status</th></tr></thead>
          <tbody>
            {list.map(p => { const prop = db.properties.find(x => x.id === p.propertyId); const t = user(p.tenantId); return (
              <tr key={p.id}>
                <td className="mono" style={{ fontSize: 12.5 }}>{p.reference}</td>
                <td><span className="badge badge-neutral" style={{ textTransform: "capitalize" }}>{p.type}</span></td>
                <td className="muted">{t?.name}</td>
                <td className="muted">{prop?.title}</td>
                <td className="muted">{window.fmt.fmtShort(p.date)}</td>
                <td className="num" style={{ fontWeight: 600 }}>{window.fmt.money(p.amount)}</td>
                <td className="num" style={{ color: "var(--gold)" }}>{window.fmt.money(p.commissionAmount)}</td>
                <td className="num">{window.fmt.money(p.landlordPayout)}</td>
                <td><StatusBadge status={p.status} /></td>
              </tr>
            ); })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

/* ====================================================================
   MAINTENANCE — assign vendor
   ==================================================================== */
function AdminMaintenance({ app }) {
  const { db, actions, user, toast } = app;
  const [tab, setTab] = useState("open");
  const [assign, setAssign] = useState(null);

  const all = db.maintenance.slice().sort((a, b) => new Date(b.createdDate) - new Date(a.createdDate));
  const counts = { open: all.filter(m => m.status === "open").length, assigned: all.filter(m => m.status === "assigned").length, resolved: all.filter(m => m.status === "resolved").length };
  const list = all.filter(m => tab === "all" ? true : m.status === tab);

  return (
    <div>
      <PageHeader title="Maintenance requests" sub="Triage tenant-reported issues and dispatch the right vendor." />
      <Tabs value={tab} onChange={setTab} tabs={[
        { value: "open", label: "Unassigned", count: counts.open },
        { value: "assigned", label: "Assigned", count: counts.assigned },
        { value: "resolved", label: "Resolved", count: counts.resolved },
        { value: "all", label: "All" },
      ]} />
      <div className="col gap-12" style={{ marginTop: 18 }}>
        {list.length === 0 ? <Card pad><Empty icon="wrench" title="Nothing here" >No requests in this view.</Empty></Card> : list.map(m => {
          const p = db.properties.find(x => x.id === m.propertyId); const t = user(m.tenantId); const v = db.vendors.find(x => x.id === m.vendorId);
          return (
            <Card key={m.id} pad="sm">
              <div className="row between wrap gap-14">
                <div className="row gap-14" style={{ minWidth: 0 }}>
                  <span className="avatar sq" style={{ width: 44, height: 44, background: `var(--${m.priority === "high" ? "danger" : m.priority === "medium" ? "warning" : "surface-3"}-soft, var(--surface-3))`, color: m.priority === "high" ? "var(--danger)" : m.priority === "medium" ? "var(--warning)" : "var(--ink-2)" }}><Icon name="wrench" size={20} /></span>
                  <div style={{ minWidth: 0 }}>
                    <div className="row gap-8 wrap"><h3 style={{ fontSize: 16 }}>{m.title}</h3><PriorityBadge p={m.priority} /><StatusBadge status={m.status} /></div>
                    <div className="hint" style={{ margin: "3px 0" }}>{m.category} · {p?.title} · {t?.name} · {window.fmt.fmtShort(m.createdDate)}</div>
                    <p className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>{m.description}</p>
                    {v && <div className="vendor-strip" style={{ marginTop: 10, display: "inline-flex" }}><Icon name="briefcase" size={14} /><span><strong>{v.name}</strong> · {v.trade}</span></div>}
                  </div>
                </div>
                <div className="row gap-8">
                  {m.status === "open" && <Button variant="primary" size="sm" icon="briefcase" onClick={() => setAssign(m)}>Assign vendor</Button>}
                  {m.status === "assigned" && <Button variant="soft" size="sm" icon="checkCircle" onClick={() => { actions.setMaintenanceStatus(m.id, "resolved"); toast("Marked resolved", "ok"); }}>Mark resolved</Button>}
                </div>
              </div>
            </Card>
          );
        })}
      </div>
      {assign && <AssignVendorModal request={assign} vendors={db.vendors} onClose={() => setAssign(null)} onAssign={(vid) => { actions.assignVendor(assign.id, vid); toast("Vendor assigned — tenant & landlord notified", "ok"); setAssign(null); }} />}
    </div>
  );
}

function AssignVendorModal({ request, vendors, onClose, onAssign }) {
  const recommended = vendors.filter(v => v.trade === request.category);
  const others = vendors.filter(v => v.trade !== request.category);
  const ordered = [...recommended, ...others];
  const [sel, setSel] = useState(recommended[0]?.id || vendors[0]?.id);
  return (
    <Modal icon="briefcase" title="Assign a vendor" sub={`${request.category} · ${request.title}`} onClose={onClose} width={560}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" icon="send" disabled={!sel} onClick={() => onAssign(sel)}>Assign & dispatch</Button></>}>
      <div className="col gap-10">
        {ordered.map(v => (
          <button key={v.id} className={"vendor-pick" + (sel === v.id ? " sel" : "")} onClick={() => setSel(v.id)}>
            <span className="avatar sq" style={{ width: 40, height: 40, background: "var(--surface-3)", color: "var(--ink-2)" }}><Icon name="briefcase" size={19} /></span>
            <div className="grow">
              <div className="row gap-8"><span style={{ fontWeight: 600 }}>{v.name}</span>{v.trade === request.category && <Badge tone="green">Best match</Badge>}</div>
              <div className="row gap-10" style={{ marginTop: 2 }}><span className="hint">{v.trade}</span><span className="vendor-rating"><Icon name="star" size={12} style={{ fill: "currentColor" }} />{v.rating}</span><span className="hint">{v.jobs} jobs</span></div>
            </div>
            <span className={"rc-dot" + (sel === v.id ? "" : "")} style={{ width: 18, height: 18, borderRadius: 99, border: "2px solid " + (sel === v.id ? "var(--green)" : "var(--line-strong)"), position: "relative" }}>{sel === v.id && <span style={{ position: "absolute", inset: 3, borderRadius: 99, background: "var(--green)" }} />}</span>
          </button>
        ))}
      </div>
    </Modal>
  );
}

/* ---------------- Router ---------------- */
function AdminScreen({ view, params, app }) {
  switch (view) {
    case "dashboard": return <AdminDashboard app={app} />;
    case "inspections": return <AdminInspections app={app} />;
    case "applications": return <AdminApplications app={app} />;
    case "kyc": return <AdminKyc app={app} />;
    case "rent": return <AdminRent app={app} />;
    case "maintenance": return <AdminMaintenance app={app} />;
    default: return <AdminDashboard app={app} />;
  }
}

window.KOREALM.roles.admin = { nav: adminNav, Screen: AdminScreen };