// Woodbury Resident — Documents. Registers window.RDocuments.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, IconTile, Input } = NS;

  function RDocuments() {
    const R = window.WBR;
    const loading = window.WBRuseLoad();
    const [q, setQ] = React.useState("");
    const rows = R.documents.filter((d) => !q || d.name.toLowerCase().includes(q.toLowerCase()));
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 1000 }}>
        <window.WBRHeader eyebrow="Records" title="My Documents" sub="Your lease, agreements, and inspection records — all in one place." />
        <Card>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 24px", borderBottom: "1px solid var(--border)", gap: 16, flexWrap: "wrap" }}>
            <h3 style={{ margin: 0, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 20, color: "var(--text-heading)" }}>Files</h3>
            <Input icon="search" placeholder="Search documents..." size="sm" value={q} onChange={(e) => setQ(e.target.value)} containerStyle={{ width: 280 }} />
          </div>
          {loading ? <window.WBRSkeleton rows={4} /> : rows.map((d, i) => (
            <div key={d.name} style={{ display: "grid", gridTemplateColumns: "2fr 0.8fr 0.4fr", gap: 16, alignItems: "center", padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <IconTile icon="file-text" tone="sunken" size={40} />
                <div><div style={{ fontWeight: 600, fontSize: 14, color: "var(--text-heading)" }}>{d.name}</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>{d.meta}</div></div>
              </div>
              <div><Badge tone={d.tone}>{d.tag}</Badge></div>
              <div style={{ textAlign: "right" }}><Button variant="ghost" size="sm" icon="download" onClick={() => window.WBRToast("Downloading " + d.name)} /></div>
            </div>
          ))}
          {!loading && rows.length === 0 && <window.WBREmpty icon="file-text" title="No documents found" message={q ? 'No documents match "' + q + '".' : "Your lease and records will appear here."} />}
        </Card>
        <Card style={{ padding: 24, display: "flex", alignItems: "center", gap: 16, background: "var(--brand-tint)" }}>
          <IconTile icon="info" tone="brand" size={44} />
          <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>Need another document?</div><div style={{ fontSize: 13, color: "var(--text-body)" }}>Request a copy of any record from the management office.</div></div>
          <Button variant="secondary" icon="message-square" onClick={() => window.WBRToast("Document request sent to the office")}>Request</Button>
        </Card>
      </div>
    );
  }
  window.RDocuments = RDocuments;
})();