/* ======================================================================
   KOREALM — Tenant workspace
   ====================================================================== */

function tenantNav(db, me) {
  const apps = db.applications.filter(a => a.tenantId === me.id);
  const insp = db.inspections.filter(i => i.tenantId === me.id && i.status === "requested");
  const pendingRent = db.payments.filter(p => p.tenantId === me.id && p.type === "rent" && p.status === "pending");
  const maint = db.maintenance.filter(m => m.tenantId === me.id && m.status !== "resolved");
  return [
    { view: "dashboard", label: "Dashboard", icon: "home" },
    { view: "applications", label: "Applications", icon: "doc", count: apps.filter(a => a.status === "pending").length },
    { view: "inspections", label: "Inspections", icon: "calendar", count: insp.length },
    { view: "payments", label: "Payments", icon: "card", count: pendingRent.length },
    { view: "maintenance", label: "Maintenance", icon: "wrench", count: maint.length },
  ];
}

/* ---------------- Dashboard ---------------- */
function TenantDashboard({ app }) {
  const { db, session, go, user } = app;
  const me = user(session.tenantId);
  const apps = db.applications.filter(a => a.tenantId === me.id);
  const approved = apps.find(a => a.status === "approved" && !db.payments.some(p => p.tenantId === me.id && p.type === "onboarding" && p.propertyId === a.propertyId));
  const insp = db.inspections.filter(i => i.tenantId === me.id);
  const upcoming = insp.filter(i => ["requested", "confirmed"].includes(i.status)).sort((a, b) => new Date(a.slot.split("|")[0]) - new Date(b.slot.split("|")[0]));
  const nextRent = db.payments.filter(p => p.tenantId === me.id && p.type === "rent" && p.status === "pending")[0];
  const openMaint = db.maintenance.filter(m => m.tenantId === me.id && m.status !== "resolved");
  const leased = db.properties.find(p => p.status === "leased" && db.payments.some(pm => pm.tenantId === me.id && pm.propertyId === p.id));

  return (
    <div>
      <PageHeader title="Welcome back" sub="Here's everything happening with your move."
        actions={<Button variant="primary" icon="search" onClick={() => app.setRole("public")}>Find a home</Button>} />

      {approved && (
        <Card pad className="cta-card anim-rise" style={{ marginBottom: 18 }}>
          <div className="row between wrap gap-16">
            <div className="row gap-14">
              <span className="cta-icon"><Icon name="checkCircle" size={24} /></span>
              <div>
                <h3 style={{ fontSize: 18 }}>Your application was approved</h3>
                <p className="muted" style={{ fontSize: 14.5, marginTop: 3 }}>{user(approved.tenantId).name.split(" ")[0]}, complete your move-in payment for {db.properties.find(p => p.id === approved.propertyId)?.title}.</p>
              </div>
            </div>
            <Button variant="primary" size="lg" iconR="arrowR" onClick={() => go("onboarding", { applicationId: approved.id })}>Pay move-in</Button>
          </div>
        </Card>
      )}

      <div className="grid-4" style={{ marginBottom: 18 }}>
        <Stat k="Active applications" v={apps.filter(a => a.status === "pending").length} icon="doc" />
        <Stat k="Upcoming inspections" v={upcoming.length} icon="calendar" />
        <Stat k="Next rent due" v={nextRent ? window.fmt.money(nextRent.amount) : "—"} mono icon="card" sub={nextRent ? window.fmt.fmtShort(nextRent.date) : "No rent due"} />
        <Stat k="Open requests" v={openMaint.length} icon="wrench" />
      </div>

      <div className="grid-2">
        <Card pad>
          <div className="row between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Upcoming inspections</h3><button className="btn-link" onClick={() => go("inspections")}>View all</button></div>
          {upcoming.length === 0 ? <Empty icon="calendar" title="Nothing booked" >Find a home and book a viewing.</Empty> : (
            <div className="klist">
              {upcoming.slice(0, 3).map(i => { const p = db.properties.find(x => x.id === i.propertyId); const [dt, tm] = i.slot.split("|"); return (
                <div key={i.id} className="row between gap-12">
                  <div className="row gap-12"><span className="date-chip"><span className="dc-m">{new Date(dt).toLocaleDateString("en-US", { month: "short" })}</span><span className="dc-d">{new Date(dt).getDate()}</span></span>
                    <div><div style={{ fontWeight: 600, fontSize: 14 }}>{p?.title}</div><div className="hint">{tm} · {p?.neighborhood}</div></div></div>
                  <StatusBadge status={i.status} />
                </div>
              ); })}
            </div>
          )}
        </Card>

        <Card pad>
          <div className="row between" style={{ marginBottom: 14 }}><h3 style={{ fontSize: 16 }}>Application status</h3><button className="btn-link" onClick={() => go("applications")}>View all</button></div>
          {apps.length === 0 ? <Empty icon="doc" title="No applications yet" >Apply to a home you love.</Empty> : (
            <div className="klist">
              {apps.slice(0, 3).map(a => { const p = db.properties.find(x => x.id === a.propertyId); return (
                <div key={a.id} className="row between gap-12">
                  <div className="row gap-12"><Photo src={p?.img} label="" style={{ width: 42, height: 42, borderRadius: 9 }} /><div><div style={{ fontWeight: 600, fontSize: 14 }}>{p?.title}</div><div className="hint">Applied {window.fmt.fmtShort(a.submittedDate)}</div></div></div>
                  <StatusBadge status={a.status} />
                </div>
              ); })}
            </div>
          )}
        </Card>
      </div>

      {leased && (
        <Card pad style={{ marginTop: 18 }}>
          <span className="section-title">Your home</span>
          <div className="row between wrap gap-16" style={{ marginTop: 14 }}>
            <div className="row gap-14"><Photo src={leased.img} label="home" style={{ width: 84, height: 64, borderRadius: 10 }} /><div><h3 style={{ fontSize: 17 }}>{leased.title}</h3><div className="row gap-6 dim" style={{ fontSize: 13, marginTop: 3 }}><Icon name="pin" size={13} />{leased.address}</div><div className="row gap-12" style={{ marginTop: 8 }}><span className="mono" style={{ fontWeight: 600 }}>{window.fmt.money(leased.price)}/mo</span><span className="badge badge-success"><span className="dot" />Lease active</span></div></div></div>
            <div className="row gap-10"><Button variant="ghost" icon="wrench" onClick={() => go("maintenance")}>Report issue</Button><Button variant="soft" icon="card" onClick={() => go("payments")}>Pay rent</Button></div>
          </div>
        </Card>
      )}
    </div>
  );
}

/* ---------------- Applications ---------------- */
function TenantApplications({ app }) {
  const { db, session, go, user } = app;
  const me = user(session.tenantId);
  const apps = db.applications.filter(a => a.tenantId === me.id).sort((a, b) => new Date(b.submittedDate) - new Date(a.submittedDate));
  const [sel, setSel] = useState(null);
  const selApp = apps.find(a => a.id === sel);

  return (
    <div>
      <PageHeader title="My applications" sub="Track where each rental application stands." />
      {apps.length === 0 ? <Card pad><Empty icon="doc" title="No applications yet" action={<Button variant="primary" onClick={() => app.setRole("public")}>Browse homes</Button>}>When you apply to a home, it'll show up here.</Empty></Card> : (
        <Card>
          <table className="table">
            <thead><tr><th>Property</th><th>Submitted</th><th>Move-in</th><th className="num">Income</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {apps.map(a => { const p = db.properties.find(x => x.id === a.propertyId); return (
                <tr key={a.id} className="clickable" onClick={() => setSel(a.id)}>
                  <td><div className="row gap-10"><Photo src={p?.img} label="" style={{ width: 38, height: 38, borderRadius: 8 }} /><div><div style={{ fontWeight: 600 }}>{p?.title}</div><div className="hint">{p?.neighborhood}</div></div></div></td>
                  <td className="muted">{window.fmt.fmtDate(a.submittedDate)}</td>
                  <td className="muted">{a.moveIn ? window.fmt.fmtShort(a.moveIn) : "—"}</td>
                  <td className="num">{window.fmt.money(a.income)}</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 paid = db.payments.some(pm => pm.tenantId === me.id && pm.type === "onboarding" && pm.propertyId === selApp.propertyId); return (
        <Drawer title="Application detail" sub={p?.title} onClose={() => setSel(null)}
          footer={selApp.status === "approved" && !paid ? <Button variant="primary" className="btn-block" iconR="arrowR" onClick={() => { setSel(null); go("onboarding", { applicationId: selApp.id }); }}>Pay move-in to secure</Button> : <Button variant="ghost" className="btn-block" onClick={() => setSel(null)}>Close</Button>}>
          <div className="row between" style={{ marginBottom: 16 }}><StatusBadge status={selApp.status} /><span className="hint">Submitted {window.fmt.fmtDate(selApp.submittedDate)}</span></div>
          {selApp.status === "approved" && <div className="ratio-bar ok" style={{ marginBottom: 16 }}><Icon name="checkCircle" size={16} />Approved on {window.fmt.fmtDate(selApp.decisionDate)}. {paid ? "Move-in paid." : "Complete your move-in payment."}</div>}
          {selApp.status === "rejected" && <div className="ratio-bar warn" style={{ marginBottom: 16 }}><Icon name="xCircle" size={16} />{selApp.reason || "Not approved."}</div>}
          <Photo src={p?.img} alt={p?.title} label="property photo" style={{ height: 160, borderRadius: "var(--r)", marginBottom: 16 }} />
          <div className="review-grid">
            {[["Property", p?.title], ["Rent", window.fmt.money(p?.price)], ["Occupants", selApp.occupants], ["Move-in", selApp.moveIn ? window.fmt.fmtDate(selApp.moveIn) : "—"], ["Pets", selApp.pets], ["Employment", selApp.employment], ["Monthly income", window.fmt.money(selApp.income)], ["Income-to-rent", (selApp.income / p?.price).toFixed(1) + "×"]].map(([k, v]) => <div key={k} className="review-row"><span className="muted">{k}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{v}</span></div>)}
          </div>
        </Drawer>
      ); })()}
    </div>
  );
}

/* ---------------- Inspections ---------------- */
function TenantInspections({ app }) {
  const { db, session, user } = app;
  const me = user(session.tenantId);
  const insp = db.inspections.filter(i => i.tenantId === me.id).sort((a, b) => new Date(b.requestedDate) - new Date(a.requestedDate));
  return (
    <div>
      <PageHeader title="My inspections" sub="Viewings you've requested and their confirmation status."
        actions={<Button variant="ghost" icon="search" onClick={() => app.setRole("public")}>Find homes</Button>} />
      {insp.length === 0 ? <Card pad><Empty icon="calendar" title="No inspections booked" >Book a viewing from any listing.</Empty></Card> : (
        <div className="grid-auto">
          {insp.map(i => { const p = db.properties.find(x => x.id === i.propertyId); const [dt, tm] = i.slot.split("|"); return (
            <Card key={i.id} pad>
              <div className="row between" style={{ marginBottom: 12 }}><StatusBadge status={i.status} /><span className="hint">Requested {window.fmt.fmtShort(i.requestedDate)}</span></div>
              <div className="row gap-14">
                <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><h3 style={{ fontSize: 16 }}>{p?.title}</h3><div className="row gap-6 dim" style={{ fontSize: 13, margin: "4px 0" }}><Icon name="pin" size={13} />{p?.address}</div><div className="row gap-6" style={{ fontSize: 14, fontWeight: 600 }}><Icon name="clock" size={14} className="dim" />{tm}</div></div>
              </div>
              {i.status === "confirmed" && <div className="ratio-bar ok" style={{ marginTop: 14 }}><Icon name="checkCircle" size={15} />Confirmed by Korealm — see you there!</div>}
              {i.status === "requested" && <div className="info-strip" style={{ marginTop: 14 }}><Icon name="clock" size={15} />Awaiting confirmation from Korealm</div>}
            </Card>
          ); })}
        </div>
      )}
    </div>
  );
}

/* ---------------- Payments ---------------- */
function TenantPayments({ app }) {
  const { db, session, user, actions, toast } = app;
  const me = user(session.tenantId);
  const pays = db.payments.filter(p => p.tenantId === me.id).sort((a, b) => new Date(b.date) - new Date(a.date));
  const pending = pays.filter(p => p.status === "pending");
  const [payModal, setPayModal] = useState(null);
  const totalPaid = pays.filter(p => p.status === "paid").reduce((s, p) => s + p.amount, 0);

  return (
    <div>
      <PageHeader title="Payments" sub="Your move-in, rent history, and upcoming dues." />
      <div className="grid-3" style={{ marginBottom: 18 }}>
        <Stat k="Total paid" v={window.fmt.money(totalPaid)} mono icon="wallet" />
        <Stat k="Pending" v={pending.length} icon="clock" sub={pending.length ? window.fmt.money(pending.reduce((s, p) => s + p.amount, 0)) + " due" : "All settled"} />
        <Stat k="Next due" v={pending[0] ? window.fmt.fmtShort(pending[0].date) : "—"} icon="calendar" />
      </div>

      {pending.length > 0 && (
        <Card pad className="cta-card" style={{ marginBottom: 18 }}>
          <div className="row between wrap gap-16">
            <div className="row gap-14"><span className="cta-icon"><Icon name="card" size={22} /></span><div><h3 style={{ fontSize: 17 }}>Rent due — {pending[0].period || window.fmt.fmtDate(pending[0].date)}</h3><p className="muted" style={{ fontSize: 14, marginTop: 2 }}>{window.fmt.money(pending[0].amount)} for your home.</p></div></div>
            <Button variant="primary" size="lg" icon="card" onClick={() => setPayModal(pending[0])}>Pay {window.fmt.money(pending[0].amount)}</Button>
          </div>
        </Card>
      )}

      <Card>
        <div className="row between" style={{ padding: "16px 18px 6px" }}><h3 style={{ fontSize: 16 }}>Transaction history</h3></div>
        <table className="table">
          <thead><tr><th>Type</th><th>Property</th><th>Date</th><th>Method</th><th className="num">Amount</th><th>Status</th></tr></thead>
          <tbody>
            {pays.map(p => { const prop = db.properties.find(x => x.id === p.propertyId); return (
              <tr key={p.id}>
                <td><div className="row gap-8"><span className="avatar sq" style={{ width: 30, height: 30, background: "var(--green-soft)", color: "var(--green)" }}><Icon name={p.type === "onboarding" ? "key" : "card"} size={15} /></span><span style={{ fontWeight: 600, textTransform: "capitalize" }}>{p.type}{p.period ? <span className="hint" style={{ display: "block", textTransform: "none" }}>{p.period}</span> : null}</span></div></td>
                <td className="muted">{prop?.title}</td>
                <td className="muted">{window.fmt.fmtDate(p.date)}</td>
                <td className="muted">{p.method}</td>
                <td className="num" style={{ fontWeight: 600 }}>{window.fmt.money(p.amount)}</td>
                <td>{p.status === "pending" ? <Button variant="soft" size="sm" onClick={() => setPayModal(p)}>Pay now</Button> : <StatusBadge status={p.status} />}</td>
              </tr>
            ); })}
          </tbody>
        </table>
      </Card>

      {payModal && <PayRentModal payment={payModal} onClose={() => setPayModal(null)} onPaid={() => { actions.payRent(payModal.id, "Card ····4242"); toast("Rent paid — thank you!", "ok"); setPayModal(null); }} />}
    </div>
  );
}

function PayRentModal({ payment, onClose, onPaid }) {
  const { property } = useApp();
  const [proc, setProc] = useState(false);
  const p = property(payment.propertyId);
  return (
    <Modal icon="card" title="Pay rent" sub={`${payment.period || window.fmt.fmtDate(payment.date)} · ${p?.title}`} onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" disabled={proc} onClick={() => { setProc(true); setTimeout(onPaid, 1100); }}>{proc ? <><span className="spin" />Processing…</> : `Pay ${window.fmt.money(payment.amount)}`}</Button></>}>
      <div className="cost-list">
        <div className="cost-row"><span style={{ fontWeight: 600 }}>Monthly rent</span><span className="mono">{window.fmt.money(payment.amount)}</span></div>
        <div className="cost-row total"><span style={{ fontWeight: 700 }}>Total</span><span className="mono" style={{ fontWeight: 700 }}>{window.fmt.money(payment.amount)}</span></div>
      </div>
      <Field label="Payment method" className="" ><div className="radio-card sel" style={{ marginTop: 4 }}><span className="rc-dot" /><Icon name="card" size={18} /><span style={{ fontWeight: 600 }}>Visa ···· 4242</span></div></Field>
    </Modal>
  );
}

/* ---------------- Maintenance ---------------- */
function TenantMaintenance({ app }) {
  const { db, session, user, actions, toast } = app;
  const me = user(session.tenantId);
  const reqs = db.maintenance.filter(m => m.tenantId === me.id).sort((a, b) => new Date(b.createdDate) - new Date(a.createdDate));
  const leased = db.properties.filter(p => db.payments.some(pm => pm.tenantId === me.id && pm.propertyId === p.id)) ;
  const [open, setOpen] = useState(false);

  return (
    <div>
      <PageHeader title="Maintenance" sub="Report an issue and track repairs."
        actions={<Button variant="primary" icon="plus" onClick={() => setOpen(true)}>New request</Button>} />
      {reqs.length === 0 ? <Card pad><Empty icon="wrench" title="No requests" action={<Button variant="primary" icon="plus" onClick={() => setOpen(true)}>Report an issue</Button>}>Report a problem and we'll dispatch a vendor.</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); 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} · {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>Assigned to <strong>{v.name}</strong> · {v.trade}</span></div>}
            </Card>
          ); })}
        </div>
      )}
      {open && <NewMaintenance properties={leased.length ? leased : db.properties.slice(0, 1)} onClose={() => setOpen(false)} onCreate={(data) => { actions.addMaintenance({ tenantId: me.id, ...data }); toast("Maintenance request submitted", "ok"); setOpen(false); }} />}
    </div>
  );
}

function NewMaintenance({ properties, onClose, onCreate }) {
  const [d, setD] = useState({ propertyId: properties[0]?.id, category: "Plumbing", priority: "medium", title: "", description: "" });
  const [err, setErr] = useState({});
  const submit = () => { const e = {}; if (!d.title.trim()) e.title = "Add a short title"; if (!d.description.trim()) e.description = "Describe the issue"; setErr(e); if (Object.keys(e).length) return; onCreate(d); };
  return (
    <Modal icon="wrench" title="Report a maintenance issue" sub="A Korealm coordinator will assign a vendor." onClose={onClose}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" icon="send" onClick={submit}>Submit request</Button></>}>
      <div className="col gap-16">
        <Field label="Property"><Select value={d.propertyId} onChange={e => setD({ ...d, propertyId: e.target.value })}>{properties.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}</Select></Field>
        <div className="grid-2">
          <Field label="Category"><Select value={d.category} onChange={e => setD({ ...d, category: e.target.value })}>{["Plumbing", "Electrical", "HVAC", "Appliance", "General"].map(c => <option key={c}>{c}</option>)}</Select></Field>
          <Field label="Priority"><Select value={d.priority} onChange={e => setD({ ...d, priority: e.target.value })}>{["low", "medium", "high"].map(c => <option key={c} value={c} style={{ textTransform: "capitalize" }}>{c[0].toUpperCase() + c.slice(1)}</option>)}</Select></Field>
        </div>
        <Field label="Title" req error={err.title}><Input placeholder="e.g. Leaking kitchen tap" value={d.title} onChange={e => setD({ ...d, title: e.target.value })} error={err.title} /></Field>
        <Field label="Description" req error={err.description}><Textarea placeholder="Describe what's happening, when it started…" value={d.description} onChange={e => setD({ ...d, description: e.target.value })} error={err.description} /></Field>
        <div className="upload-drop"><Icon name="upload" size={20} /><span style={{ fontWeight: 600, fontSize: 14 }}>Add photos</span><span className="hint">Drag & drop or click to upload (optional)</span></div>
      </div>
    </Modal>
  );
}

/* ---------------- Router ---------------- */
function TenantScreen({ view, params, app }) {
  switch (view) {
    case "dashboard": return <TenantDashboard app={app} />;
    case "applications": return <TenantApplications app={app} />;
    case "inspections": return <TenantInspections app={app} />;
    case "payments": return <TenantPayments app={app} />;
    case "maintenance": return <TenantMaintenance app={app} />;
    case "book-inspection": return <window.BookInspection propertyId={params.propertyId} />;
    case "apply": return <window.ApplyFlow propertyId={params.propertyId} />;
    case "onboarding": return <window.OnboardingPayment applicationId={params.applicationId} />;
    default: return <TenantDashboard app={app} />;
  }
}

window.KOREALM.roles.tenant = { nav: tenantNav, Screen: TenantScreen };