// Woodbury Resident — Messages (chat with office). Registers window.RMessages.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, Button, Avatar, Input, IconTile } = NS;

  function RMessages() {
    const R = window.WBR;
    const [msgs, setMsgs] = React.useState(R.messages);
    const [draft, setDraft] = React.useState("");
    const scrollRef = React.useRef(null);
    React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs.length]);
    const send = () => {
      const text = draft.trim(); if (!text) return;
      const t = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
      setMsgs((m) => [...m, { me: true, text, time: t }]); setDraft("");
      setTimeout(() => setMsgs((m) => [...m, { me: false, text: "Thanks Kofi — the office has received your message and will respond shortly.", time: t }]), 900);
    };
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 20, padding: "36px 40px", maxWidth: 900, height: "100%" }}>
        <window.WBRHeader eyebrow="Communication" title="Messages" sub="Chat directly with the Lashibi Townhouses management office." />
        <Card style={{ display: "flex", flexDirection: "column", height: 560, overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 24px", borderBottom: "1px solid var(--border)" }}>
            <IconTile icon="building-2" tone="brand" size={42} />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>Lashibi Townhouses Office</div><div style={{ fontSize: 12, color: "var(--success)" }}>● Typically replies within an hour</div></div>
          </div>
          <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 12, background: "var(--bg-app)" }}>
            {msgs.map((m, i) => (
              <div key={i} style={{ alignSelf: m.me ? "flex-end" : "flex-start", maxWidth: "72%" }}>
                <div style={{ padding: "10px 14px", borderRadius: 16, borderBottomRightRadius: m.me ? 4 : 16, borderBottomLeftRadius: m.me ? 16 : 4, background: m.me ? "var(--brand)" : "var(--surface)", color: m.me ? "var(--cream-50)" : "var(--text-heading)", fontSize: 14, lineHeight: 1.5, boxShadow: m.me ? "none" : "var(--shadow-xs)" }}>{m.text}</div>
                <div style={{ fontSize: 10, color: "var(--text-muted)", marginTop: 4, textAlign: m.me ? "right" : "left" }}>{m.time}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 12, padding: 16, borderTop: "1px solid var(--border)" }}>
            <Input placeholder="Type a message…" value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") send(); }} containerStyle={{ flex: 1 }} />
            <Button variant="primary" icon="send" onClick={send}>Send</Button>
          </div>
        </Card>
      </div>
    );
  }
  window.RMessages = RMessages;
})();