// Woodbury Resident — Lease detail + notice to vacate. Registers window.RLease.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, IconTile, Eyebrow, ProgressBar, Modal, Select, Textarea, Input } = NS;

  function RLease({ onBack }) {
    const L = window.WBR.lease;
    const R = window.WBR.resident;
    const [vacate, setVacate] = React.useState(false);
    const pct = Math.round(((L.total - L.left) / L.total) * 100);

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 1000 }}>
        <window.WBRHeader eyebrow="Tenancy" title="My Lease" sub={L.type + " · " + L.ref}
          actions={<Button variant="secondary" icon="arrow-left" onClick={onBack}>Back</Button>} />

        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24, alignItems: "start" }}>
          <Card>
            <CardHeader title="Lease Terms" action={<Badge tone="success" dot>Active</Badge>} />
            <div style={{ padding: "8px 0" }}>
              {L.terms.map((t, i) => (
                <div key={t.label} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                  <IconTile icon={t.icon} tone="sunken" size={38} />
                  <div style={{ flex: 1 }}><div style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>{t.label}</div><div style={{ fontWeight: 600, fontSize: 15, color: "var(--text-heading)", marginTop: 2 }}>{t.value}</div></div>
                </div>
              ))}
            </div>
          </Card>

          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <Card style={{ padding: 24 }}>
              <Eyebrow>Time Remaining</Eyebrow>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, margin: "12px 0 4px" }}>
                <span style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 34, color: "var(--text-heading)" }}>{L.left}</span>
                <span style={{ fontSize: 14, color: "var(--text-body)" }}>days left</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-muted)", margin: "10px 0 6px" }}><span>{L.start}</span><span>{L.end}</span></div>
              <ProgressBar value={pct} tone={L.left <= 30 ? "danger" : "brand"} style={{ marginBottom: 16 }} />
              <Button variant="primary" size="sm" full icon="refresh-cw" onClick={() => window.WBRToast("Renewal request sent to management")}>Request Renewal</Button>
              <Button variant="ghost" size="sm" full icon="calendar-x" style={{ marginTop: 8 }} onClick={() => setVacate(true)}>Give Notice to Vacate</Button>
            </Card>
            <Card style={{ padding: 24 }}>
              <Eyebrow>Lease Document</Eyebrow>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 14 }}>
                <IconTile icon="file-text" tone="brand" size={40} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14, color: "var(--text-heading)" }}>Signed Tenancy Agreement.pdf</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>248 KB · Signed 12 Apr</div></div>
                <Button variant="ghost" size="sm" icon="download" onClick={() => window.WBRToast("Downloading lease agreement")} />
              </div>
            </Card>
          </div>
        </div>

        <Modal open={vacate} onClose={() => setVacate(false)} icon="calendar-x" title="Give Notice to Vacate" subtitle="Submit your intent to move out."
          footer={<React.Fragment><Button variant="secondary" onClick={() => setVacate(false)}>Cancel</Button><Button variant="danger" icon="send" onClick={() => { setVacate(false); window.WBRToast("Notice to vacate submitted — the office will confirm", "accent"); }}>Submit Notice</Button></React.Fragment>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ background: "var(--warning-bg)", borderRadius: "var(--radius-md)", padding: 14, fontSize: 13, color: "var(--terracotta-700)", lineHeight: 1.5 }}>
              Your tenancy requires <strong>30 days'</strong> notice. The office will schedule a move-out inspection after you submit.
            </div>
            <Input label="Intended move-out date" type="date" />
            <Select label="Reason (optional)" options={["Prefer not to say", "Relocating", "Buying a home", "Job change", "Other"]} />
            <Textarea label="Notes for the office (optional)" placeholder="Anything the office should know…" />
          </div>
        </Modal>
      </div>
    );
  }
  window.RLease = RLease;
})();