// Woodbury Resident — Home. Registers window.RHome.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, IconTile, Eyebrow, ProgressBar } = NS;

  function RHome({ onNavigate, onNewRequest }) {
    const R = window.WBR;
    const open = R.requests.filter((r) => r.stage < 4);
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 28, padding: "36px 40px", maxWidth: 1200 }}>
        <window.WBRHeader eyebrow="Resident Portal" title={"Akwaaba, " + R.resident.first} sub={"Welcome home to " + R.resident.property + " · " + R.resident.unit + "."}
          actions={<Button variant="primary" icon="plus" onClick={onNewRequest}>New Request</Button>} />

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24, alignItems: "start" }}>
          {/* Unit hero */}
          <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", minHeight: 260, boxShadow: "var(--shadow-card)" }}>
            <img src="../../assets/images/featured-cantonments.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, rgba(59,39,20,0.35), rgba(56,35,16,0.9))" }} />
            <div style={{ position: "absolute", left: 28, right: 28, bottom: 24 }}>
              <span style={{ display: "inline-flex", alignItems: "center", height: 26, padding: "0 12px", borderRadius: 9999, background: "var(--terracotta-500)", color: "#fff", fontWeight: 700, fontSize: 11, letterSpacing: "0.04em", textTransform: "uppercase" }}>Your Residence</span>
              <div style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 30, color: "var(--cream-50)", margin: "10px 0 4px" }}>{R.resident.unit}</div>
              <div style={{ fontSize: 14, color: "rgba(250,249,246,0.85)" }}>{R.resident.property} · resident since {R.resident.moveIn}</div>
            </div>
          </div>

          {/* Lease status */}
          <Card style={{ padding: 24 }}>
            <Eyebrow>Lease Status</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)" }}>{R.resident.leaseLeft}</span>
              <span style={{ fontSize: 14, color: "var(--text-body)" }}>days remaining</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-muted)", margin: "10px 0 6px" }}><span>Ends {R.resident.leaseEnds}</span><span>{R.resident.term}</span></div>
            <ProgressBar value={8} tone="danger" style={{ marginBottom: 16 }} />
            <Button variant="secondary" size="sm" full icon="file-signature" onClick={() => onNavigate("Lease")}>View Lease Details</Button>
          </Card>
        </div>

        {/* Quick actions */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {[
            { icon: "wrench", label: "Log a Request", tone: "brand", go: onNewRequest },
            { icon: "message-square", label: "Message Office", tone: "accent", go: () => onNavigate("Messages") },
            { icon: "file-text", label: "My Documents", tone: "success", go: () => onNavigate("Documents") },
            { icon: "user", label: "My Profile", tone: "sunken", go: () => onNavigate("Profile") },
          ].map((a) => (
            <Card key={a.label} style={{ padding: 20, display: "flex", alignItems: "center", gap: 14, cursor: "pointer" }} onClick={a.go}>
              <IconTile icon={a.icon} tone={a.tone} size={44} />
              <span style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>{a.label}</span>
            </Card>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>
          {/* Open requests */}
          <Card>
            <CardHeader title="My Open Requests" action={<a href="#" onClick={(e) => { e.preventDefault(); onNavigate("Requests"); }} style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta-600)" }}>View all</a>} />
            {open.length === 0 && <div style={{ padding: 28, textAlign: "center", color: "var(--text-muted)", fontSize: 14 }}>No open requests. All caught up.</div>}
            {open.map((r, i) => (
              <div key={r.id} onClick={() => onNavigate("Requests", r.id)} style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none", cursor: "pointer" }}>
                <IconTile icon={r.icon} tone={r.tone} size={42} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: "var(--text-heading)" }}>{r.title}</div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{r.id} · {window.WBR.stages[r.stage]}</div>
                </div>
                <Badge tone={r.tone === "danger" ? "danger" : "warning"}>{r.priority}</Badge>
              </div>
            ))}
          </Card>

          {/* Announcements */}
          <Card>
            <CardHeader title="Announcements" action={<a href="#" onClick={(e) => { e.preventDefault(); onNavigate("Announcements"); }} style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--terracotta-600)" }}>View all</a>} />
            {R.announcements.map((a, i) => {
              const tones = { danger: ["var(--danger-bg)", "var(--danger)"], accent: ["rgba(194,125,72,0.14)", "var(--terracotta-600)"], success: ["var(--success-bg)", "var(--success)"], brand: ["var(--walnut-100)", "var(--walnut-700)"] }[a.tone];
              return (
                <div key={i} style={{ display: "flex", gap: 14, padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                  <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: tones[0], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><span className="wb-ico" style={{ width: 18, height: 18, color: tones[1] }}><i data-lucide={a.icon}></i></span></div>
                  <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14, color: "var(--text-heading)" }}>{a.title}</div><p style={{ margin: "2px 0 0", fontSize: 13, lineHeight: 1.5, color: "var(--text-body)" }}>{a.body}</p><div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 4 }}>{a.time}</div></div>
                </div>
              );
            })}
          </Card>
        </div>
      </div>
    );
  }
  window.RHome = RHome;
})();