// Woodbury Operator — Settings. Registers window.SettingsScreen.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, Input, Select, Switch, SegmentedControl, IconTile, Eyebrow } = NS;

  const PERMS = ["Dashboard", "Properties", "Tenants", "Screening", "Leases", "Maintenance", "Documents", "Reports", "Users"];
  const MATRIX = {
    "Super Administrator": PERMS,
    "Site Administrator": ["Dashboard", "Properties", "Tenants", "Screening", "Leases", "Maintenance", "Documents", "Reports"],
    "Site Operator": ["Dashboard", "Maintenance"],
    "Leasing Agent": ["Dashboard", "Screening", "Leases", "Tenants", "Documents"],
  };
  const INTEGRATIONS = [
    { name: "SMS Gateway (Hubtel)", desc: "Send resident SMS alerts", icon: "message-square", on: true },
    { name: "Email (SendGrid)", desc: "Transactional & broadcast email", icon: "mail", on: true },
    { name: "Mobile Money", desc: "Disabled — no financial data on platform", icon: "ban", on: false, locked: true },
    { name: "Calendar Sync", desc: "Inspections & tours to Google Calendar", icon: "calendar", on: false },
  ];

  function SettingsScreen() {
    const [tab, setTab] = React.useState("Organization");
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 1100 }}>
        <window.WBPageHeader eyebrow="Configuration" title="Settings"
          sub="Organization, sites, roles, message templates, and integrations." />
        <SegmentedControl options={["Organization", "Sites", "Roles", "Templates", "Integrations"]} value={tab} onChange={setTab} />

        {tab === "Organization" && (
          <Card>
            <CardHeader title="Organization" />
            <div style={{ padding: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
              <Input label="Organization name" defaultValue="Woodbury Properties" />
              <Input label="Support email" icon="mail" defaultValue="support@woodbury.com" />
              <Select label="Default region" options={["Greater Accra", "Ashanti", "Central", "Western"]} />
              <Select label="Default language" options={["English", "Twi", "Ga"]} />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 12, padding: "16px 28px", borderTop: "1px solid var(--border)", background: "var(--cream-50)" }}>
              <Button variant="primary" icon="check" onClick={() => window.WBToast("Organization settings saved")}>Save</Button>
            </div>
          </Card>
        )}

        {tab === "Sites" && (
          <Card>
            <CardHeader title="Sites" action={<Button variant="primary" size="sm" icon="plus" onClick={() => window.WBToast("Add a new site")}>Add Site</Button>} />
            {window.WB_SITES.map((s, i) => (
              <div key={s} style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <IconTile icon="building-2" tone="brand" size={40} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>{s}</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>Greater Accra</div></div>
                <Badge tone="success" dot>Active</Badge>
                <Button variant="ghost" size="sm" icon="pencil" onClick={() => window.WBToast("Editing " + s)} />
              </div>
            ))}
          </Card>
        )}

        {tab === "Roles" && (
          <Card>
            <CardHeader title="Roles & Permissions" action={<Badge tone="neutral">Read-only preview</Badge>} />
            <div style={{ overflowX: "auto" }}>
              <div style={{ minWidth: 720 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(9, 1fr)", padding: "14px 20px", borderBottom: "1px solid var(--border)" }}>
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Role</span>
                  {PERMS.map((p) => <span key={p} style={{ fontSize: 10, fontWeight: 700, color: "var(--text-muted)", textAlign: "center" }}>{p.slice(0, 4)}</span>)}
                </div>
                {Object.keys(MATRIX).map((role, i) => (
                  <div key={role} style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(9, 1fr)", alignItems: "center", padding: "14px 20px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-heading)" }}>{role}</span>
                    {PERMS.map((p) => (
                      <span key={p} style={{ textAlign: "center", color: MATRIX[role].includes(p) ? "var(--success)" : "var(--cream-300)" }}>
                        <span className="wb-ico" style={{ width: 16, height: 16 }}><i data-lucide={MATRIX[role].includes(p) ? "check" : "minus"}></i></span>
                      </span>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          </Card>
        )}

        {tab === "Templates" && (
          <Card>
            <CardHeader title="Message Templates" />
            <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 22 }}>
              <div>
                <Eyebrow>SMS — Maintenance update</Eyebrow>
                <textarea defaultValue="Hi {name}, your maintenance request for {unit} is now {status}. — Woodbury Properties" rows={2}
                  style={{ width: "100%", marginTop: 10, padding: "12px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border)", background: "var(--surface)", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", boxSizing: "border-box", resize: "vertical" }} />
              </div>
              <div>
                <Eyebrow>Email — Lease renewal</Eyebrow>
                <textarea defaultValue="Dear {name}, your lease at {property} ends on {date}. Please review your renewal options in the resident portal." rows={3}
                  style={{ width: "100%", marginTop: 10, padding: "12px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border)", background: "var(--surface)", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", boxSizing: "border-box", resize: "vertical" }} />
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", padding: "16px 28px", borderTop: "1px solid var(--border)", background: "var(--cream-50)" }}>
              <Button variant="primary" icon="check" onClick={() => window.WBToast("Templates saved")}>Save Templates</Button>
            </div>
          </Card>
        )}

        {tab === "Integrations" && (
          <Card>
            <CardHeader title="Integrations" />
            {INTEGRATIONS.map((it, i) => (
              <div key={it.name} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                <IconTile icon={it.icon} tone={it.locked ? "sunken" : it.on ? "success" : "sunken"} size={44} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 15, color: "var(--text-heading)" }}>{it.name}</div><div style={{ fontSize: 12, color: "var(--text-muted)" }}>{it.desc}</div></div>
                {it.locked ? <Badge tone="neutral">Off</Badge> : <Switch defaultChecked={it.on} onChange={(v) => window.WBToast(it.name + (v ? " connected" : " disconnected"), v ? undefined : "danger")} />}
              </div>
            ))}
          </Card>
        )}
      </div>
    );
  }
  window.SettingsScreen = SettingsScreen;
})();