// Woodbury Resident — Announcements with read state. Registers window.RAnnouncements.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, IconTile } = NS;

  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)"],
  };

  function RAnnouncements() {
    const loading = window.WBRuseLoad();
    const [items, setItems] = React.useState(window.WBR.announcements);
    const unread = items.filter((a) => a.unread).length;
    const markAll = () => { setItems((l) => l.map((a) => ({ ...a, unread: false }))); window.WBR.announcements = window.WBR.announcements.map((a) => ({ ...a, unread: false })); window.WBRToast("All announcements marked read"); };
    const read = (id) => setItems((l) => l.map((a) => a.id === id ? { ...a, unread: false } : a));

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 900 }}>
        <window.WBRHeader eyebrow="Community" title="Announcements" sub="Notices from your estate's management office."
          actions={unread > 0 ? <Button variant="secondary" icon="check-check" onClick={markAll}>Mark all read ({unread})</Button> : null} />
        <Card>
          <CardHeader title="All Notices" action={<Badge tone={unread ? "accent" : "neutral"}>{unread ? unread + " unread" : "All read"}</Badge>} />
          {loading ? <window.WBRSkeleton rows={3} /> : items.length === 0 ? (
            <window.WBREmpty icon="megaphone" title="No announcements" message="Notices from your management office will appear here." />
          ) : items.map((a, i) => {
            const tones = TONES[a.tone] || TONES.brand;
            return (
              <div key={a.id} onClick={() => read(a.id)} style={{ display: "flex", gap: 14, padding: "18px 24px", borderTop: i ? "1px solid var(--border)" : "none", background: a.unread ? "var(--brand-tint)" : "transparent", cursor: a.unread ? "pointer" : "default" }}>
                <div style={{ width: 42, height: 42, borderRadius: "var(--radius-md)", background: tones[0], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><span className="wb-ico" style={{ width: 19, height: 19, color: tones[1] }}><i data-lucide={a.icon}></i></span></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>{a.title}</span>
                    {a.unread && <span style={{ width: 8, height: 8, borderRadius: 9999, background: "var(--terracotta-500)", flexShrink: 0 }} />}
                  </div>
                  <p style={{ margin: "3px 0 0", fontSize: 14, lineHeight: 1.5, color: "var(--text-body)" }}>{a.body}</p>
                  <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 5 }}>{a.time}</div>
                </div>
              </div>
            );
          })}
        </Card>
      </div>
    );
  }
  window.RAnnouncements = RAnnouncements;
})();