/* Hunian Kita — Settings view */

const SET_TABS = [
  { key: "profile", label: "Profile", icon: "user" },
  { key: "estate", label: "Estate details", icon: "building-2" },
  { key: "notifications", label: "Notifications", icon: "bell" },
  { key: "billing", label: "Plan & billing", icon: "credit-card" },
  { key: "team", label: "Team & roles", icon: "users" },
  { key: "security", label: "Security", icon: "shield" },
];

function Switch({ on, onClick }) {
  return <button className={"switch" + (on ? " on" : "")} onClick={onClick} role="switch" aria-checked={on}><span className="knob" /></button>;
}

function SetRow({ title, desc, children }) {
  return (
    <div className="set-row">
      <div className="set-row-tx"><div className="srt">{title}</div>{desc && <div className="srd">{desc}</div>}</div>
      <div className="set-row-ctl">{children}</div>
    </div>
  );
}

function Settings({ ctx }) {
  const [tab, setTab] = React.useState("profile");
  const [notif, setNotif] = React.useState({ complaints: true, sla: true, payments: true, bookings: false, push: true, wa: true, email: false });
  const tg = (k) => setNotif((n) => ({ ...n, [k]: !n[k] }));
  const save = () => ctx.toast("Settings saved");

  const team = [
    { name: "Rani Wibowo", role: "Estate Manager", email: "rani@grahaasri.id", color: "#02A0C1", access: "Full access" },
    { name: "Sinta Dewi", role: "Finance Admin", email: "sinta@grahaasri.id", color: "#3581E1", access: "Finance & IPL" },
    { name: "Agus Wijaya", role: "Security Coord.", email: "agus@grahaasri.id", color: "#C9810D", access: "Visitors & gate" },
    { name: "Rina Putri", role: "CS Officer", email: "rina@grahaasri.id", color: "#11936A", access: "Complaints & broadcast" },
    { name: "Budi Santoso", role: "Maintenance Lead", email: "budi@grahaasri.id", color: "#7A6CF0", access: "Work-orders" },
  ];

  return (
    <div className="content-inner">
      <div className="set-shell">
        <aside className="set-nav">
          {SET_TABS.map((s) => (
            <button key={s.key} className={"set-navitem" + (tab === s.key ? " active" : "")} onClick={() => setTab(s.key)}>
              <Icon name={s.icon} size={17} /><span>{s.label}</span></button>
          ))}
        </aside>

        <div className="set-body">
          {tab === "profile" && (
            <div className="card pad">
              <div className="card-h"><h3>Profile</h3><div className="right"><button className="btn primary sm" onClick={save}><Icon name="check" size={15} />Save changes</button></div></div>
              <div className="set-avatar"><Avatar name="Rani Wibowo" size={64} /><div><button className="btn ghost sm"><Icon name="upload" size={14} />Change photo</button><div className="statline" style={{ marginTop: 6 }}>PNG or JPG, max 2MB</div></div></div>
              <div className="divider" />
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
                <div className="field"><label>Full name</label><input defaultValue="Rani Wibowo" /></div>
                <div className="field"><label>Role</label><input defaultValue="Estate Manager" disabled /></div>
                <div className="field"><label>Email</label><input defaultValue="rani@grahaasri.id" /></div>
                <div className="field"><label>Phone</label><input defaultValue="+62 812-1100-2200" /></div>
                <div className="field"><label>Language</label><select defaultValue="Bahasa Indonesia"><option>Bahasa Indonesia</option><option>English</option></select></div>
                <div className="field"><label>Timezone</label><select defaultValue="WIB (GMT+7)"><option>WIB (GMT+7)</option><option>WITA (GMT+8)</option><option>WIT (GMT+9)</option></select></div>
              </div>
              <div className="divider" />
              <div className="block-label" style={{ marginTop: 0 }}>Password</div>
              <button className="btn ghost sm"><Icon name="key-round" size={14} />Change password</button>
            </div>
          )}

          {tab === "estate" && (
            <div className="card pad">
              <div className="card-h"><h3>Estate details</h3><div className="right"><button className="btn primary sm" onClick={save}><Icon name="check" size={15} />Save changes</button></div></div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
                <div className="field" style={{ gridColumn: "1 / -1" }}><label>Estate name</label><input defaultValue="Graha Asri Residence" /></div>
                <div className="field" style={{ gridColumn: "1 / -1" }}><label>Address</label><input defaultValue="Jl. Asri Raya No. 1, Bekasi, Jawa Barat" /></div>
                <div className="field"><label>Total units</label><input defaultValue="1,240" /></div>
                <div className="field"><label>Estate type</label><select defaultValue="Mixed residential"><option>Landed cluster</option><option>Apartment / tower</option><option>Mixed residential</option><option>Townhouse</option></select></div>
              </div>
              <div className="divider" />
              <div className="block-label" style={{ marginTop: 0 }}>IPL defaults · aturan dasar</div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
                <div className="field"><label>Default monthly IPL</label><input defaultValue="Rp 700.000" /></div>
                <div className="field"><label>Due date</label><select defaultValue="10th of month"><option>1st of month</option><option>10th of month</option><option>15th of month</option></select></div>
                <div className="field"><label>Denda telat</label><input defaultValue="2% / bulan" /></div>
                <div className="field"><label>Diskon bayar setahun</label><input defaultValue="Gratis 1 bulan" /></div>
                <div className="field"><label>Masa tenggang</label><input defaultValue="sampai tgl 10" /></div>
                <div className="field"><label>Jimpitan ronda</label><input defaultValue="Rp 2.000 / malam" /></div>
              </div>
              <div className="callout" style={{ marginTop: 4 }}>
                <span className="cic"><Icon name="info" size={20} /></span>
                <div style={{ flex: 1 }}><div className="ct" style={{ fontSize: 13.5 }}>Tiap RT/RW bisa punya aturan berbeda</div><div className="cm">Atur tarif, denda, dan diskon per RT/RW di menu IPL &amp; finance → Aturan IPL per RT/RW.</div></div>
              </div>
            </div>
          )}

          {tab === "notifications" && (
            <div className="card pad">
              <div className="card-h"><h3>Notifications</h3><div className="right"><button className="btn primary sm" onClick={save}><Icon name="check" size={15} />Save changes</button></div></div>
              <div className="block-label" style={{ marginTop: 0 }}>Alert me about</div>
              <SetRow title="New complaints" desc="Get notified when a resident reports an issue"><Switch on={notif.complaints} onClick={() => tg("complaints")} /></SetRow>
              <SetRow title="SLA breaches" desc="When a work-order is about to or has breached SLA"><Switch on={notif.sla} onClick={() => tg("sla")} /></SetRow>
              <SetRow title="Payments received" desc="When IPL is paid and reconciled"><Switch on={notif.payments} onClick={() => tg("payments")} /></SetRow>
              <SetRow title="Booking requests" desc="New facility booking awaiting approval"><Switch on={notif.bookings} onClick={() => tg("bookings")} /></SetRow>
              <div className="divider" />
              <div className="block-label" style={{ marginTop: 0 }}>Channels</div>
              <SetRow title="Push notifications"><Switch on={notif.push} onClick={() => tg("push")} /></SetRow>
              <SetRow title="WhatsApp"><Switch on={notif.wa} onClick={() => tg("wa")} /></SetRow>
              <SetRow title="Email digest"><Switch on={notif.email} onClick={() => tg("email")} /></SetRow>
            </div>
          )}

          {tab === "billing" && (
            <div className="card pad">
              <div className="card-h"><h3>Plan & billing</h3></div>
              <div className="plan-card">
                <div><span className="badge info" style={{ marginBottom: 8 }}>Current plan</span>
                  <div className="plan-name">Pro</div>
                  <div className="statline">1,240 units · billed monthly to the management body</div></div>
                <div className="plan-price"><div className="pv">Rp 3,72jt<small>/mo</small></div><div className="statline">Rp 3.000 / unit</div>
                  <button className="btn ghost sm" style={{ marginTop: 10 }}>Manage plan</button></div>
              </div>
              <div className="grid mt" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
                <div className="ms"><span className="msv">1,240</span><span className="msl">Registered units</span></div>
                <div className="ms"><span className="msv">1,068</span><span className="msl">App-active residents</span></div>
                <div className="ms"><span className="msv">Jun 1</span><span className="msl">Next invoice</span></div>
              </div>
              <div className="divider" />
              <div className="block-label" style={{ marginTop: 0 }}>Payment method</div>
              <div className="pay-method"><span className="ci" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name="building-2" size={16} /></span>
                <div style={{ flex: 1 }}><div className="srt">BCA · Auto-debit ••4471</div><div className="srd">Treasurer account · Graha Asri</div></div>
                <button className="btn ghost sm">Update</button></div>
            </div>
          )}

          {tab === "team" && (
            <div className="card pad">
              <div className="card-h"><h3>Team & roles</h3><span className="hint">{team.length} members</span><div className="right"><button className="btn primary sm" onClick={() => ctx.toast("Invite sent")}><Icon name="user-plus" size={15} />Invite member</button></div></div>
              <table className="tbl">
                <thead><tr><th>Member</th><th>Role</th><th>Access</th><th></th></tr></thead>
                <tbody>
                  {team.map((m) => (
                    <tr key={m.email}>
                      <td><div className="who"><Avatar name={m.name} size={30} color={m.color} /><div><div className="nm">{m.name}</div><div className="meta">{m.email}</div></div></div></td>
                      <td className="strong">{m.role}</td>
                      <td><span className="badge calm">{m.access}</span></td>
                      <td onClick={(e) => e.stopPropagation()}><button className="iconbtn" style={{ width: 32, height: 32 }}><Icon name="ellipsis" size={16} /></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {tab === "security" && (
            <div className="card pad">
              <div className="card-h"><h3>Security</h3></div>
              <SetRow title="Two-factor authentication" desc="Require a code on every new sign-in"><Switch on={true} onClick={() => {}} /></SetRow>
              <SetRow title="Single sign-on (SSO)" desc="Available on Enterprise plan"><span className="badge calm">Enterprise</span></SetRow>
              <div className="divider" />
              <div className="block-label" style={{ marginTop: 0 }}>Active sessions</div>
              <div className="pay-method"><span className="ci" style={{ background: "var(--pos-soft)", color: "var(--pos)" }}><Icon name="monitor" size={16} /></span>
                <div style={{ flex: 1 }}><div className="srt">Chrome · Windows — this device</div><div className="srd">Bekasi, ID · active now</div></div>
                <span className="badge pos"><span className="bdot" />Current</span></div>
              <div className="pay-method"><span className="ci" style={{ background: "var(--surface-3)", color: "var(--t3)" }}><Icon name="smartphone" size={16} /></span>
                <div style={{ flex: 1 }}><div className="srt">Hunian Kita app · Android</div><div className="srd">Bekasi, ID · 2 hours ago</div></div>
                <button className="btn ghost sm" onClick={() => ctx.toast("Session revoked")}>Revoke</button></div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Settings = Settings;