/* ======================================================================
   KOREALM — Landlord workspace
   Dashboard · Properties · KYC verification · Rent & payouts · Maintenance
   ====================================================================== */

function landlordNav(db, me) {
  const kyc = db.kyc.find(k => k.landlordId === me.id);
  const myProps = db.properties.filter(p => p.landlordId === me.id);
  const myPropIds = myProps.map(p => p.id);
  const openMaint = db.maintenance.filter(m => myPropIds.includes(m.propertyId) && m.status !== "resolved");
  const compIssues = (db.compliance || []).filter(c => myPropIds.includes(c.propertyId) && c.status !== "valid").length;
  const kycBadge = kyc && kyc.status === "verified" ? 0 : 1;
  return [
    { view: "dashboard", label: "Dashboard", icon: "home" },
    { view: "properties", label: "My properties", icon: "building" },
    { view: "services", label: "Plans & services", icon: "layers", count: compIssues },
    { view: "rent", label: "Rent & payouts", icon: "wallet" },
    { view: "kyc", label: "Verification", icon: "shield", count: kycBadge },
    { view: "maintenance", label: "Maintenance", icon: "wrench", count: openMaint.length },
  ];
}

/* ---------------- Dashboard ---------------- */
function LandlordDashboard({ app }) {
  const { db, session, go, user } = app;
  const me = user(session.landlordId);
  const myProps = db.properties.filter(p => p.landlordId === me.id);
  const myIds = myProps.map(p => p.id);
  const kyc = db.kyc.find(k => k.landlordId === me.id);
  const verified = kyc?.status === "verified";

  const rentPaid = db.payments.filter(p => myIds.includes(p.propertyId) && p.type === "rent" && p.status === "paid");
  const payoutTotal = rentPaid.reduce((s, p) => s + p.landlordPayout, 0);
  const leased = myProps.filter(p => p.status === "leased").length;
  const occupancy = myProps.length ? Math.round((leased / myProps.length) * 100) : 0;
  const openMaint = db.maintenance.filter(m => myIds.includes(m.propertyId) && m.status !== "resolved");
  const apps = db.applications.filter(a => myIds.includes(a.propertyId) && a.status === "pending");

  return (
    <div>
      <PageHeader title="Welcome" sub={me.company ? `${me.company} · landlord workspace` : "Landlord workspace"}
        actions={<Button variant="primary" icon="plus" onClick={() => go("properties")}>List a property</Button>} />

      {!verified && (
        <Card pad className="anim-rise" style={{ marginBottom: 18, borderColor: "var(--warning)", background: "var(--warning-soft)" }}>
          <div className="row between wrap gap-16">
            <div className="row gap-14">
              <span className="cta-icon" style={{ background: "var(--warning)" }}><Icon name="shield" size={22} /></span>
              <div>
                <h3 style={{ fontSize: 17 }}>{kyc?.status === "submitted" ? "Verification under review" : "Verify your account to receive payouts"}</h3>
                <p style={{ fontSize: 14, marginTop: 3, color: "var(--warning)" }}>{kyc?.status === "submitted" ? "Korealm is reviewing your documents — usually within 1 business day." : "Upload your ID and proof of ownership to start collecting rent through Korealm."}</p>
              </div>
            </div>
            {kyc?.status !== "submitted" && <Button variant="primary" iconR="arrowR" onClick={() => go("kyc")}>Complete verification</Button>}
          </div>
        </Card>
      )}

      <div className="grid-4" style={{ marginBottom: 18 }}>
        <Stat k="Monthly payout" v={window.fmt.money(payoutTotal)} mono icon="wallet" sub="Net of commission" />
        <Stat k="Active listings" v={myProps.length} icon="building" sub={`${leased} leased`} />
        <Stat k="Occupancy" v={occupancy + "%"} icon="trend" />
        <Stat k="Open maintenance" v={openMaint.length} icon="wrench" />
      </div>

      <div className="grid-2">
        <Card pad>
          <div className="row between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Your properties</h3><button className="btn-link" onClick={() => go("properties")}>Manage</button></div>
          {myProps.length === 0 ? <Empty icon="building" title="No properties yet" >List your first home to get started.</Empty> : (
            <div className="col gap-10">
              {myProps.slice(0, 4).map(p => (
                <div key={p.id} className="row between gap-12">
                  <div className="row gap-12" style={{ minWidth: 0 }}><Photo src={p.img} label="" style={{ width: 44, height: 34, borderRadius: 7, flex: "none" }} />
                    <div style={{ minWidth: 0 }}><div style={{ fontWeight: 600, fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.title}</div><div className="hint">{window.fmt.money(p.price)}/mo · {p.neighborhood}</div></div>
                  </div>
                  <StatusBadge status={p.status} />
                </div>
              ))}
            </div>
          )}
        </Card>

        <Card pad>
          <div className="row between" style={{ marginBottom: 6 }}><h3 style={{ fontSize: 16 }}>Rent received</h3><span className="badge badge-neutral">Last 6 mo</span></div>
          <RentChart payments={rentPaid} />
        </Card>
      </div>

      {apps.length > 0 && (
        <Card pad style={{ marginTop: 18 }}>
          <div className="row between" style={{ marginBottom: 12 }}><div className="row gap-8"><h3 style={{ fontSize: 16 }}>Applications on your homes</h3><Badge tone="warning">{apps.length} pending</Badge></div></div>
          <p className="hint" style={{ marginBottom: 14 }}>Korealm screens and decides on applications. You'll be notified once a tenant is approved.</p>
          <div className="col gap-10">
            {apps.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={36} /><div><div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div><div className="hint">{p?.title} · {(a.income / p?.price).toFixed(1)}× income</div></div></div>
                <StatusBadge status={a.status} />
              </div>
            ); })}
          </div>
        </Card>
      )}
    </div>
  );
}

function RentChart({ payments }) {
  // group last 6 months
  const months = [];
  const base = window.fmt.today();
  for (let i = 5; i >= 0; i--) { const d = new Date(base); d.setMonth(d.getMonth() - i); months.push({ key: d.toLocaleDateString("en-US", { month: "short" }), m: d.getMonth(), y: d.getFullYear(), total: 0 }); }
  payments.forEach(p => { const d = new Date(p.date); const mm = months.find(x => x.m === d.getMonth() && x.y === d.getFullYear()); if (mm) mm.total += p.landlordPayout; });
  // seed some history so the chart reads well even with sparse data
  const seedVals = [0, 0, 1305, 2601, 3906, 0];
  months.forEach((mm, i) => { if (mm.total === 0 && seedVals[i]) mm.total = seedVals[i]; });
  const max = Math.max(...months.map(m => m.total), 1);
  return (
    <div>
      <div className="barchart">
        {months.map((m, i) => (
          <div key={i} className="bc-col">
            <div className={"bc-bar" + (i === months.length - 1 ? " accent" : "")} style={{ height: Math.max(6, (m.total / max) * 100) + "%" }} title={window.fmt.money(m.total)} />
            <span className="bc-lbl">{m.key}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Properties ---------------- */
function LandlordProperties({ app }) {
  const { db, session, user, toast } = app;
  const me = user(session.landlordId);
  const myProps = db.properties.filter(p => p.landlordId === me.id);
  const [add, setAdd] = useState(false);

  return (
    <div>
      <PageHeader title="My properties" sub="Manage your listings, pricing, and availability."
        actions={<Button variant="primary" icon="plus" onClick={() => setAdd(true)}>List a property</Button>} />
      {myProps.length === 0 ? <Card pad><Empty icon="building" title="No properties listed" action={<Button variant="primary" icon="plus" onClick={() => setAdd(true)}>List a property</Button>}>Add your first home to start receiving inspections and applications.</Empty></Card> : (
        <div className="col gap-12">
          {myProps.map(p => {
            const apps = db.applications.filter(a => a.propertyId === p.id);
            const insp = db.inspections.filter(i => i.propertyId === p.id);
            return (
              <Card key={p.id} pad="sm">
                <div className="row between wrap gap-16">
                  <div className="row gap-14" style={{ minWidth: 0 }}>
                    <Photo src={p.img} alt={p.title} label={`${p.photos} photos`} style={{ width: 96, height: 72, borderRadius: 10, flex: "none" }} />
                    <div style={{ minWidth: 0 }}>
                      <div className="row gap-8 wrap"><h3 style={{ fontSize: 16 }}>{p.title}</h3><StatusBadge status={p.status} /></div>
                      <div className="row gap-6 dim" style={{ fontSize: 13, margin: "5px 0" }}><Icon name="pin" size={13} />{p.address}</div>
                      <div className="row gap-16" style={{ fontSize: 13.5, color: "var(--ink-2)" }}>
                        <span className="mono" style={{ fontWeight: 600, color: "var(--ink)" }}>{window.fmt.money(p.price)} pcm</span>
                        <span className="row gap-4"><Icon name="bed" size={14} className="dim" />{p.beds === 0 ? "Studio" : p.beds + " bd"}</span>
                        <span className="row gap-4"><Icon name="calendar" size={14} className="dim" />{insp.length} viewings</span>
                        <span className="row gap-4"><Icon name="doc" size={14} className="dim" />{apps.length} applications</span>
                      </div>
                    </div>
                  </div>
                  <div className="row gap-8">
                    <Button variant="ghost" size="sm" icon="eye" onClick={() => { app.setSession(s => ({ ...s, role: "public", view: "detail", params: { id: p.id } })); }}>Preview</Button>
                    <Button variant="ghost" size="sm" icon="pencil" onClick={() => toast("Editing is out of scope for this POC", "info")}>Edit</Button>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}
      {add && <AddPropertyModal landlordId={me.id} onClose={() => setAdd(false)} onAdd={(data) => {
        app.actions.addProperty({ landlordId: me.id, ...data });
        toast("Property listed — pending review by Korealm", "ok");
        setAdd(false);
      }} />}
    </div>
  );
}

function AddPropertyModal({ landlordId, onClose, onAdd }) {
  const [d, setD] = useState({ title: "", type: "Flat", address: "", neighborhood: window.NEIGHBORHOODS[0], price: "", beds: "2", baths: "1", sqft: "" });
  const [err, setErr] = useState({});
  const submit = () => { const e = {}; if (!d.title.trim()) e.title = "Add a title"; if (!d.address.trim()) e.address = "Add an address"; if (!d.price || +d.price <= 0) e.price = "Enter monthly rent"; if (!d.sqft) e.sqft = "Enter size"; setErr(e); if (Object.keys(e).length) return; onAdd(d); };
  return (
    <Modal icon="building" title="List a new property" sub="Listings go live after a quick Korealm review." onClose={onClose} width={600}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" icon="send" onClick={submit}>Submit listing</Button></>}>
      <div className="col gap-16">
        <Field label="Listing title" req error={err.title}><Input placeholder="e.g. Sunlit 2-bed near the park" value={d.title} onChange={e => setD({ ...d, title: e.target.value })} error={err.title} /></Field>
        <div className="grid-2">
          <Field label="Property type"><Select value={d.type} onChange={e => setD({ ...d, type: e.target.value })}>{["Flat", "Loft", "Studio", "Townhouse", "House", "Maisonette"].map(t => <option key={t}>{t}</option>)}</Select></Field>
          <Field label="Area"><Select value={d.neighborhood} onChange={e => setD({ ...d, neighborhood: e.target.value })}>{window.NEIGHBORHOODS.map(n => <option key={n}>{n}</option>)}</Select></Field>
        </div>
        <Field label="Address" req error={err.address}><Input icon="pin" placeholder="Street, flat / unit" value={d.address} onChange={e => setD({ ...d, address: e.target.value })} error={err.address} /></Field>
        <div className="grid-2">
          <Field label="Monthly rent (pcm)" req error={err.price}><MoneyInput placeholder="0" value={d.price} onChange={e => setD({ ...d, price: e.target.value.replace(/[^\d]/g, "") })} error={err.price} /></Field>
          <Field label="Size (sq ft)" req error={err.sqft}><Input className="mono" inputMode="numeric" placeholder="900" value={d.sqft} onChange={e => setD({ ...d, sqft: e.target.value.replace(/[^\d]/g, "") })} error={err.sqft} /></Field>
        </div>
        <div className="grid-2">
          <Field label="Bedrooms"><Select value={d.beds} onChange={e => setD({ ...d, beds: e.target.value })}>{["0", "1", "2", "3", "4"].map(n => <option key={n} value={n}>{n === "0" ? "Studio" : n}</option>)}</Select></Field>
          <Field label="Bathrooms"><Select value={d.baths} onChange={e => setD({ ...d, baths: e.target.value })}>{["1", "2", "3"].map(n => <option key={n} value={n}>{n}</option>)}</Select></Field>
        </div>
        <div className="upload-drop"><Icon name="upload" size={20} /><span style={{ fontWeight: 600, fontSize: 14 }}>Upload photos</span><span className="hint">Drag & drop or click (optional for POC)</span></div>
      </div>
    </Modal>
  );
}

/* ---------------- Rent & payouts ---------------- */
function LandlordRent({ app }) {
  const { db, session, user } = app;
  const me = user(session.landlordId);
  const myIds = db.properties.filter(p => p.landlordId === me.id).map(p => p.id);
  const rent = db.payments.filter(p => myIds.includes(p.propertyId) && p.type === "rent").sort((a, b) => new Date(b.date) - new Date(a.date));
  const paid = rent.filter(p => p.status === "paid");
  const gross = paid.reduce((s, p) => s + p.amount, 0);
  const commission = paid.reduce((s, p) => s + p.commissionAmount, 0);
  const payout = paid.reduce((s, p) => s + p.landlordPayout, 0);
  const pct = gross ? Math.round((payout / gross) * 100) : 0;

  return (
    <div>
      <PageHeader title="Rent & payouts" sub="Rent collected on your behalf, net of Korealm's commission." />
      <div className="grid-3" style={{ marginBottom: 18 }}>
        <Stat k="Gross rent collected" v={window.fmt.money(gross)} mono icon="card" />
        <Stat k="Your net payout" v={window.fmt.money(payout)} mono icon="wallet" sub={`${pct}% of gross`} />
        <Stat k="Korealm commission" v={window.fmt.money(commission)} mono icon="trend" sub="Per property plan" />
      </div>

      <Card pad style={{ marginBottom: 18 }}>
        <h3 style={{ fontSize: 16, marginBottom: 4 }}>Payout breakdown</h3>
        <p className="hint" style={{ marginBottom: 16 }}>How collected rent splits between you and Korealm.</p>
        <div className="split-bar"><div className="seg-payout" style={{ width: pct + "%" }} /><div className="seg-comm" style={{ width: (100 - pct) + "%" }} /></div>
        <div className="split-legend">
          <div className="lg-item"><span className="lg-dot" style={{ background: "var(--green)" }} /><span>Your payout · <strong>{window.fmt.money(payout)}</strong></span></div>
          <div className="lg-item"><span className="lg-dot" style={{ background: "var(--gold)" }} /><span>Commission · <strong>{window.fmt.money(commission)}</strong></span></div>
        </div>
      </Card>

      <Card>
        <div className="row between" style={{ padding: "16px 18px 6px" }}><h3 style={{ fontSize: 16 }}>Payout history</h3></div>
        <table className="table">
          <thead><tr><th>Period</th><th>Property</th><th>Tenant</th><th className="num">Gross</th><th className="num">Commission</th><th className="num">Payout</th><th>Status</th></tr></thead>
          <tbody>
            {rent.map(p => { const prop = db.properties.find(x => x.id === p.propertyId); const t = user(p.tenantId); return (
              <tr key={p.id}>
                <td style={{ fontWeight: 600 }}>{p.period || window.fmt.fmtShort(p.date)}</td>
                <td className="muted">{prop?.title}</td>
                <td className="muted">{t?.name}</td>
                <td className="num">{window.fmt.money(p.amount)}</td>
                <td className="num" style={{ color: "var(--gold)" }}>−{window.fmt.money(p.commissionAmount)}</td>
                <td className="num" style={{ fontWeight: 600 }}>{window.fmt.money(p.landlordPayout)}</td>
                <td><StatusBadge status={p.status} /></td>
              </tr>
            ); })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

/* ---------------- KYC verification ---------------- */
const KYC_DOCS = [
  { type: "Government ID", icon: "user", hint: "Passport or driver's license" },
  { type: "Proof of Ownership", icon: "doc", hint: "Title deed or property tax bill" },
  { type: "Bank Account", icon: "wallet", hint: "Void cheque or bank letter for payouts" },
];

function LandlordKyc({ app }) {
  const { db, session, user, actions, toast } = app;
  const me = user(session.landlordId);
  const kyc = db.kyc.find(k => k.landlordId === me.id);
  const status = kyc?.status || "not_started";
  const [uploads, setUploads] = useState(() => {
    const init = {};
    if (kyc?.docs?.length) kyc.docs.forEach(d => init[d.type] = { name: d.name, status: d.status });
    return init;
  });

  const fileFor = (type) => {
    const names = { "Government ID": "passport_scan.pdf", "Proof of Ownership": "title_deed.pdf", "Bank Account": "void_cheque.pdf" };
    return names[type];
  };
  const upload = (type) => setUploads(u => ({ ...u, [type]: { name: fileFor(type), status: "pending" } }));
  const remove = (type) => setUploads(u => { const n = { ...u }; delete n[type]; return n; });
  const allUploaded = KYC_DOCS.every(d => uploads[d.type]);

  const submit = () => {
    const docs = KYC_DOCS.map(d => ({ type: d.type, name: uploads[d.type].name, status: "pending" }));
    actions.submitKyc(me.id, docs);
    toast("Documents submitted for verification", "ok");
  };

  if (status === "verified") return (
    <div>
      <PageHeader title="Account verification" sub="Your identity and ownership are confirmed." />
      <Card pad>
        <div className="row gap-14" style={{ marginBottom: 18 }}>
          <span className="cta-icon" style={{ background: "var(--success)" }}><Icon name="shield" size={24} /></span>
          <div><h3 style={{ fontSize: 18 }}>You're verified</h3><p className="muted" style={{ fontSize: 14.5, marginTop: 2 }}>Verified on {window.fmt.fmtDate(kyc.decisionDate)} · You can list properties and receive payouts.</p></div>
          <Badge tone="success" className="" >Verified</Badge>
        </div>
        <div className="col gap-10">
          {kyc.docs.map(d => (
            <div key={d.type} className="kyc-doc verified">
              <span className="doc-ic"><Icon name="checkCircle" size={20} /></span>
              <div className="grow"><div style={{ fontWeight: 600, fontSize: 14 }}>{d.type}</div><div className="hint">{d.name}</div></div>
              <Badge tone="success" dot>Verified</Badge>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );

  if (status === "submitted") return (
    <div>
      <PageHeader title="Account verification" sub="Your documents are being reviewed." />
      <Card pad>
        <div className="row gap-14" style={{ marginBottom: 18 }}>
          <span className="cta-icon" style={{ background: "var(--warning)" }}><Icon name="clock" size={24} /></span>
          <div><h3 style={{ fontSize: 18 }}>Under review</h3><p className="muted" style={{ fontSize: 14.5, marginTop: 2 }}>Submitted {window.fmt.fmtDate(kyc.submittedDate)}. Korealm typically verifies within one business day.</p></div>
        </div>
        <div className="col gap-10">
          {kyc.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>
              <Badge tone="warning" dot>Pending review</Badge>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );

  return (
    <div>
      <PageHeader title="Verify your account" sub="Upload three documents so Korealm can confirm your identity and that you can list this property. Required before you receive payouts." />
      {status === "rejected" && kyc?.rejectReason && (
        <div className="warn-strip" style={{ marginBottom: 16 }}><Icon name="alert" size={16} />Previous submission needs attention: {kyc.rejectReason}</div>
      )}
      <Card pad>
        <div className="col gap-12">
          {KYC_DOCS.map(d => {
            const up = uploads[d.type];
            return (
              <div key={d.type} className={"kyc-doc" + (up ? " uploaded" : "")}>
                <span className="doc-ic"><Icon name={up ? "doc" : d.icon} size={20} /></span>
                <div className="grow">
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{d.type}</div>
                  <div className="hint">{up ? up.name : d.hint}</div>
                </div>
                {up ? (
                  <div className="row gap-8"><Badge tone="green" dot>Uploaded</Badge><Button variant="ghost" size="sm" icon="trash" onClick={() => remove(d.type)} /></div>
                ) : (
                  <Button variant="soft" size="sm" icon="upload" onClick={() => upload(d.type)}>Upload</Button>
                )}
              </div>
            );
          })}
        </div>
        <div className="divider" style={{ margin: "20px 0" }} />
        <div className="row between wrap gap-12">
          <div className="row gap-8"><Icon name="lock" size={15} className="dim" /><span className="hint">Documents are encrypted and used only for verification.</span></div>
          <Button variant="primary" icon="shield" disabled={!allUploaded} onClick={submit}>Submit for verification</Button>
        </div>
      </Card>
    </div>
  );
}

/* ---------------- Maintenance (landlord view) ---------------- */
function LandlordMaintenance({ app }) {
  const { db, session, user } = app;
  const me = user(session.landlordId);
  const myIds = db.properties.filter(p => p.landlordId === me.id).map(p => p.id);
  const reqs = db.maintenance.filter(m => myIds.includes(m.propertyId)).sort((a, b) => new Date(b.createdDate) - new Date(a.createdDate));

  return (
    <div>
      <PageHeader title="Maintenance" sub="Issues reported on your properties. Korealm coordinates the vendor." />
      {reqs.length === 0 ? <Card pad><Empty icon="wrench" title="No open issues" >Maintenance requests on your homes will appear here.</Empty></Card> : (
        <div className="col gap-12">
          {reqs.map(m => { const p = db.properties.find(x => x.id === m.propertyId); const v = db.vendors.find(x => x.id === m.vendorId); const t = user(m.tenantId); return (
            <Card key={m.id} pad>
              <div className="row between wrap gap-12">
                <div className="row gap-14" style={{ minWidth: 0 }}>
                  <span className="avatar sq" style={{ width: 42, height: 42, background: "var(--surface-3)", color: "var(--ink-2)" }}><Icon name="wrench" size={19} /></span>
                  <div style={{ minWidth: 0 }}><div className="row gap-8 wrap"><h3 style={{ fontSize: 16 }}>{m.title}</h3><PriorityBadge p={m.priority} /></div><div className="hint" style={{ marginTop: 3 }}>{m.category} · {p?.title} · reported by {t?.name.split(" ")[0]} · {window.fmt.fmtShort(m.createdDate)}</div></div>
                </div>
                <StatusBadge status={m.status} />
              </div>
              <p className="muted" style={{ fontSize: 14, marginTop: 12 }}>{m.description}</p>
              {v && <div className="vendor-strip" style={{ marginTop: 12 }}><Icon name="briefcase" size={15} /><span>Korealm assigned <strong>{v.name}</strong> · {v.trade}</span></div>}
            </Card>
          ); })}
        </div>
      )}
    </div>
  );
}

/* ---------------- Plans & Services ---------------- */
const COMP_TONE = { valid: "success", expiring: "warning", expired: "danger", missing: "neutral" };
const COMP_LABEL = { valid: "Valid", expiring: "Expiring", expired: "Expired", missing: "Not on file" };
const daysUntil = (iso) => iso ? Math.round((new Date(iso) - window.fmt.today()) / 86400000) : null;

function PlanPill({ planId }) {
  const p = window.PRICING.PLAN_BY[planId] || window.PRICING.PLAN_BY.full;
  return <span className="plan-pill"><Icon name={p.icon} size={13} />{p.name}</span>;
}

function LandlordServices({ app }) {
  const { db, session, user, actions, toast } = app;
  const { PLANS, SERVICES, VAT_RATE, vatOf } = window.PRICING;
  const me = user(session.landlordId);
  const myProps = db.properties.filter(p => p.landlordId === me.id);
  const myIds = myProps.map(p => p.id);
  const myComp = (db.compliance || []).filter(c => myIds.includes(c.propertyId));
  const myOrders = (db.serviceOrders || []).filter(o => myIds.includes(o.propertyId)).sort((a, b) => new Date(b.orderedDate) - new Date(a.orderedDate));
  const issues = myComp.filter(c => c.status !== "valid").length;

  const [tab, setTab] = useState("plans");
  const [changePlan, setChangePlan] = useState(null); // property
  const [orderFor, setOrderFor] = useState(null);      // { service } or { property }

  const compFor = (pid, type) => myComp.find(c => c.propertyId === pid && c.type === type);

  return (
    <div>
      <PageHeader title="Plans & services" sub="Choose how Korealm manages each property, order add-ons, and keep compliance up to date."
        actions={<Button variant="primary" icon="plus" onClick={() => setOrderFor({})}>Order a service</Button>} />

      <div className="vat-note" style={{ marginBottom: 16 }}><Icon name="info" size={14} />Prices are Korealm's set rates and <strong>exclude VAT</strong>. 20% VAT is added at checkout. Typical UK market ranges are shown for context.</div>

      <Tabs value={tab} onChange={setTab} tabs={[
        { value: "plans", label: "Management plans" },
        { value: "compliance", label: "Compliance", count: issues },
        { value: "addons", label: "Add-on services" },
        { value: "orders", label: "Order history", count: myOrders.length || undefined },
      ]} />

      {/* ---- PLANS ---- */}
      {tab === "plans" && (
        <div style={{ marginTop: 18 }}>
          <div className="grid-3" style={{ marginBottom: 20 }}>
            {PLANS.map(pl => (
              <Card key={pl.id} pad className="plan-card">
                <div className="row between" style={{ alignItems: "flex-start" }}>
                  <span className="cta-icon" style={{ background: "var(--green)", width: 42, height: 42 }}><Icon name={pl.icon} size={21} /></span>
                  <span className="badge badge-neutral">{pl.range}</span>
                </div>
                <h3 style={{ fontSize: 18, marginTop: 14 }}>{pl.name}</h3>
                <p className="hint" style={{ marginTop: 2 }}>{pl.tagline}</p>
                <div className="plan-price">
                  {pl.oneOff != null
                    ? <><span className="pp-amt mono">{window.fmt.money(pl.oneOff)}</span><span className="pp-unit">+VAT · one-off</span></>
                    : <><span className="pp-amt mono">{Math.round(pl.rate * 100)}%</span><span className="pp-unit">of monthly rent</span></>}
                </div>
                <div className="divider" style={{ margin: "14px 0" }} />
                <div className="col gap-8">
                  {pl.includes.map(it => <div key={it} className="row gap-8" style={{ fontSize: 13.5 }}><Icon name="check" size={15} style={{ color: "var(--green)", flex: "none" }} />{it}</div>)}
                </div>
                <div className="hint" style={{ marginTop: 12 }}>{myProps.filter(p => p.plan === pl.id).length} of your properties on this plan</div>
              </Card>
            ))}
          </div>

          <Card>
            <div className="row between" style={{ padding: "16px 18px 6px" }}><h3 style={{ fontSize: 16 }}>Your properties</h3><span className="hint">Commission is derived from each property's plan</span></div>
            <table className="table">
              <thead><tr><th>Property</th><th>Plan</th><th className="num">Rent</th><th className="num">Commission</th><th></th></tr></thead>
              <tbody>
                {myProps.map(p => { const pl = window.PRICING.PLAN_BY[p.plan]; return (
                  <tr key={p.id}>
                    <td><div style={{ fontWeight: 600 }}>{p.title}</div><div className="hint">{p.neighborhood}</div></td>
                    <td><PlanPill planId={p.plan} /></td>
                    <td className="num mono">{window.fmt.money(p.price)}<span className="dim" style={{ fontSize: 12 }}> pcm</span></td>
                    <td className="num mono">{pl.oneOff != null ? window.fmt.money(pl.oneOff) + " one-off" : Math.round(p.commissionRate * 100) + "%"}</td>
                    <td className="right"><Button variant="ghost" size="sm" icon="pencil" onClick={() => setChangePlan(p)}>Change</Button></td>
                  </tr>
                ); })}
              </tbody>
            </table>
          </Card>
        </div>
      )}

      {/* ---- COMPLIANCE ---- */}
      {tab === "compliance" && (
        <div className="col gap-12" style={{ marginTop: 18 }}>
          <div className="row gap-10 wrap" style={{ marginBottom: 2 }}>
            {["valid", "expiring", "expired", "missing"].map(s => (
              <span key={s} className="legend-chip"><span className={"dot dot-" + COMP_TONE[s]} />{COMP_LABEL[s]} · {myComp.filter(c => c.status === s).length}</span>
            ))}
          </div>
          {myProps.map(p => (
            <Card key={p.id} pad>
              <div className="row between wrap gap-10" style={{ marginBottom: 14 }}>
                <div className="row gap-12" style={{ minWidth: 0 }}>
                  <Photo src={p.img} label="" style={{ width: 46, height: 36, borderRadius: 7, flex: "none" }} />
                  <div style={{ minWidth: 0 }}><h3 style={{ fontSize: 15.5 }}>{p.title}</h3><div className="hint">{p.address}</div></div>
                </div>
                <PlanPill planId={p.plan} />
              </div>
              <div className="comp-grid">
                {window.PRICING.COMPLIANCE_TYPES.map(type => {
                  const s = window.PRICING.SVC[type]; const rec = compFor(p.id, type);
                  const status = rec?.status || "missing"; const dleft = daysUntil(rec?.expires);
                  return (
                    <div key={type} className={"comp-cell comp-" + COMP_TONE[status]}>
                      <div className="row between" style={{ alignItems: "flex-start" }}>
                        <span className="comp-ic"><Icon name={s.icon} size={18} /></span>
                        <Badge tone={COMP_TONE[status]} dot>{COMP_LABEL[status]}</Badge>
                      </div>
                      <div style={{ fontWeight: 600, fontSize: 13.5, marginTop: 10 }}>{type.toUpperCase()}</div>
                      <div className="hint" style={{ minHeight: 16 }}>
                        {status === "missing" ? "No certificate on file"
                          : status === "expired" ? `Expired ${window.fmt.fmtShort(rec.expires)}`
                          : `Valid until ${window.fmt.fmtShort(rec.expires)}${dleft != null && dleft < 120 ? ` · ${dleft}d` : ""}`}
                      </div>
                      <Button variant={status === "valid" ? "ghost" : "soft"} size="sm" className="btn-block" style={{ marginTop: 10 }} icon="refresh"
                        onClick={() => setOrderFor({ property: p, service: s })}>
                        {status === "valid" ? "Renew early" : status === "missing" ? "Order" : "Renew"} · {window.fmt.money(s.price)}+VAT
                      </Button>
                    </div>
                  );
                })}
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* ---- ADD-ONS ---- */}
      {tab === "addons" && (
        <div style={{ marginTop: 18 }}>
          {["Letting", "Tenancy", "Management", "Compliance"].map(cat => {
            const items = SERVICES.filter(s => s.cat === cat);
            if (!items.length) return null;
            return (
              <div key={cat} style={{ marginBottom: 22 }}>
                <span className="section-title" style={{ display: "block", marginBottom: 10 }}>{cat}</span>
                <div className="grid-2">
                  {items.map(s => (
                    <Card key={s.id} pad="sm" className="svc-card">
                      <div className="row gap-12" style={{ minWidth: 0 }}>
                        <span className="svc-ic"><Icon name={s.icon} size={19} /></span>
                        <div className="grow" style={{ minWidth: 0 }}>
                          <div className="row between gap-8"><h3 style={{ fontSize: 15 }}>{s.name}</h3></div>
                          <p className="hint" style={{ marginTop: 2 }}>{s.desc}</p>
                          <div className="row between wrap gap-8" style={{ marginTop: 10, alignItems: "flex-end" }}>
                            <div>
                              <div className="svc-price mono">{window.fmt.money(s.price)}<span className="svc-vat">+VAT</span></div>
                              <div className="hint">Typical UK: {window.fmt.money(s.low)}–{window.fmt.money(s.high)} · {s.unit}</div>
                            </div>
                            <Button variant="soft" size="sm" icon="plus" onClick={() => setOrderFor({ service: s })}>Order</Button>
                          </div>
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* ---- ORDER HISTORY ---- */}
      {tab === "orders" && (
        myOrders.length === 0
          ? <Card pad style={{ marginTop: 18 }}><Empty icon="receipt" title="No orders yet" action={<Button variant="primary" icon="plus" onClick={() => setOrderFor({})}>Order a service</Button>}>Add-on services you order will appear here with their VAT breakdown.</Empty></Card>
          : <Card style={{ marginTop: 18 }}>
              <table className="table">
                <thead><tr><th>Reference</th><th>Service</th><th>Property</th><th>Date</th><th className="num">Net</th><th className="num">VAT</th><th className="num">Total</th><th>Status</th></tr></thead>
                <tbody>
                  {myOrders.map(o => { const p = db.properties.find(x => x.id === o.propertyId); return (
                    <tr key={o.id}>
                      <td className="mono" style={{ fontSize: 12.5 }}>{o.reference}</td>
                      <td style={{ fontWeight: 600 }}>{o.name}</td>
                      <td className="muted">{p?.title}</td>
                      <td className="muted">{window.fmt.fmtShort(o.orderedDate)}</td>
                      <td className="num mono">{window.fmt.money(o.amount)}</td>
                      <td className="num mono dim">{window.fmt.money(o.vat)}</td>
                      <td className="num mono" style={{ fontWeight: 600 }}>{window.fmt.money(o.total)}</td>
                      <td><StatusBadge status={o.status} /></td>
                    </tr>
                  ); })}
                </tbody>
              </table>
            </Card>
      )}

      {changePlan && <ChangePlanModal property={changePlan} onClose={() => setChangePlan(null)}
        onSave={(planId) => { actions.setPropertyPlan(changePlan.id, planId); toast(`${changePlan.title} moved to ${window.PRICING.PLAN_BY[planId].name}`, "ok"); setChangePlan(null); }} />}
      {orderFor && <OrderServiceModal myProps={myProps} preset={orderFor} onClose={() => setOrderFor(null)}
        onOrder={({ propertyId, serviceId }) => { actions.orderService({ propertyId, serviceId, landlordId: me.id }); const s = window.PRICING.SVC[serviceId]; toast(`${s.name} ordered — ${window.fmt.money(window.PRICING.withVat(s.price))} inc. VAT`, "ok"); setOrderFor(null); }} />}
    </div>
  );
}

function ChangePlanModal({ property, onClose, onSave }) {
  const { PLANS } = window.PRICING;
  const [sel, setSel] = useState(property.plan);
  return (
    <Modal icon="layers" title="Change management plan" sub={property.title} onClose={onClose} width={580}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" icon="check" disabled={sel === property.plan} onClick={() => onSave(sel)}>Move to this plan</Button></>}>
      <div className="col gap-10">
        {PLANS.map(pl => (
          <button key={pl.id} className={"plan-pick" + (sel === pl.id ? " sel" : "")} onClick={() => setSel(pl.id)}>
            <span className="svc-ic" style={{ flex: "none" }}><Icon name={pl.icon} size={19} /></span>
            <div className="grow">
              <div className="row between gap-8"><span style={{ fontWeight: 600 }}>{pl.name}</span><span className="mono" style={{ fontWeight: 600 }}>{pl.oneOff != null ? window.fmt.money(pl.oneOff) + "+VAT" : Math.round(pl.rate * 100) + "%"}</span></div>
              <div className="hint" style={{ marginTop: 2 }}>{pl.tagline} · typical {pl.range}</div>
            </div>
            <span className={"radio-dot" + (sel === pl.id ? " on" : "")} />
          </button>
        ))}
      </div>
      <div className="vat-note" style={{ marginTop: 14 }}><Icon name="info" size={14} />Changing plan updates the commission applied to future rent collected on this property.</div>
    </Modal>
  );
}

function OrderServiceModal({ myProps, preset, onClose, onOrder }) {
  const { SERVICES, vatOf } = window.PRICING;
  const [propertyId, setPropertyId] = useState(preset.property?.id || myProps[0]?.id || "");
  const [serviceId, setServiceId] = useState(preset.service?.id || SERVICES[0].id);
  const s = window.PRICING.SVC[serviceId];
  const vat = vatOf(s.price);
  return (
    <Modal icon="tag" title="Order a service" sub="Korealm arranges and bills the service to your account." onClose={onClose} width={560}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" icon="check" disabled={!propertyId} onClick={() => onOrder({ propertyId, serviceId })}>Confirm order · {window.fmt.money(s.price + vat)}</Button></>}>
      <div className="col gap-16">
        <Field label="Property"><Select value={propertyId} onChange={e => setPropertyId(e.target.value)}>{myProps.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}</Select></Field>
        <Field label="Service"><Select value={serviceId} onChange={e => setServiceId(e.target.value)}>{SERVICES.map(x => <option key={x.id} value={x.id}>{x.name} — £{x.price}+VAT</option>)}</Select></Field>
        <div className="order-summary">
          <div className="row gap-10" style={{ marginBottom: 10 }}><span className="svc-ic" style={{ flex: "none" }}><Icon name={s.icon} size={18} /></span><div><div style={{ fontWeight: 600, fontSize: 14 }}>{s.name}</div><div className="hint">{s.desc}</div></div></div>
          <div className="os-row"><span className="muted">Korealm price ({s.unit})</span><span className="mono">{window.fmt.money(s.price)}</span></div>
          <div className="os-row"><span className="muted">VAT (20%)</span><span className="mono">{window.fmt.money(vat)}</span></div>
          <div className="os-row total"><span>Total</span><span className="mono">{window.fmt.money(s.price + vat)}</span></div>
          <div className="hint" style={{ marginTop: 8 }}>Typical UK range: {window.fmt.money(s.low)}–{window.fmt.money(s.high)} ({s.unit})</div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------------- Router ---------------- */
function LandlordScreen({ view, params, app }) {
  switch (view) {
    case "dashboard": return <LandlordDashboard app={app} />;
    case "properties": return <LandlordProperties app={app} />;
    case "services": return <LandlordServices app={app} />;
    case "rent": return <LandlordRent app={app} />;
    case "kyc": return <LandlordKyc app={app} />;
    case "maintenance": return <LandlordMaintenance app={app} />;
    default: return <LandlordDashboard app={app} />;
  }
}

window.KOREALM.roles.landlord = { nav: landlordNav, Screen: LandlordScreen };