// Woodbury Resident — Profile. Registers window.RProfile.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, Avatar, Input, Eyebrow, Switch } = NS;

  function Field({ label, value, editing }) {
    if (editing) return <Input label={label} defaultValue={value} />;
    return (
      <div style={{ background: "var(--cream-50)", borderRadius: "var(--radius-md)", padding: "14px 16px" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</div>
        <div style={{ fontWeight: 600, fontSize: 14, color: "var(--text-heading)", marginTop: 4, wordBreak: "break-word" }}>{value}</div>
      </div>
    );
  }

  function RProfile() {
    const R = window.WBR.resident;
    const [editing, setEditing] = React.useState(false);
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 900 }}>
        <window.WBRHeader eyebrow="Account" title="My Profile"
          actions={editing
            ? <React.Fragment><Button variant="ghost" onClick={() => setEditing(false)}>Cancel</Button><Button variant="primary" icon="check" onClick={() => { setEditing(false); window.WBRToast("Profile updated"); }}>Save</Button></React.Fragment>
            : <Button variant="primary" icon="pencil" onClick={() => setEditing(true)}>Edit</Button>} />
        <Card style={{ padding: 28 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
            <div style={{ position: "relative" }}>
              <Avatar src={R.avatar} name={R.name} size={84} />
              {editing && <button onClick={() => window.WBRToast("Photo upload opened")} style={{ position: "absolute", bottom: 0, right: 0, width: 30, height: 30, borderRadius: 9999, border: "2px solid var(--surface)", background: "var(--brand)", color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><span className="wb-ico" style={{ width: 15, height: 15 }}><i data-lucide="camera"></i></span></button>}
            </div>
            <div style={{ flex: 1, minWidth: 180 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}><h2 style={{ margin: 0, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 24, color: "var(--text-heading)" }}>{R.name}</h2><Badge tone="success" dot>Active Tenant</Badge></div>
              <p style={{ margin: "6px 0 0", fontSize: 14, color: "var(--text-muted)" }}>{R.property} · {R.unit}</p>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 24 }}>
            <Field label="Full name" value={R.name} editing={editing} />
            <Field label="Email" value={R.email} editing={editing} />
            <Field label="Phone" value={R.phone} editing={editing} />
            <Field label="Emergency contact" value={R.emergency} editing={editing} />
          </div>
        </Card>
        <Card style={{ padding: 28 }}>
          <Eyebrow>Notifications</Eyebrow>
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 4 }}>
            {[["SMS alerts", "Maintenance updates & office notices", true], ["Email summaries", "Weekly account summary", true], ["Announcement push", "Community-wide announcements", false]].map(([t, d, on], i) => (
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 16, padding: "14px 0", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14, color: "var(--text-heading)" }}>{t}</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>{d}</div></div>
                <Switch defaultChecked={on} onChange={(v) => window.WBRToast(t + (v ? " on" : " off"), v ? undefined : "danger")} />
              </div>
            ))}
          </div>
        </Card>
      </div>
    );
  }
  window.RProfile = RProfile;
})();