// CORE-07 · User management — edit  (route: userEdit)
// Edit user, deactivate, reset password.
const UserEditPage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const go = window.makeGo(toast);
  const state = (tweaks && tweaks.userEditState) || "active";
  const roles = window.MD.ROLES;
  const [role, setRole] = useState("procurement-officer");

  const U = { name: "David Onyango", email: "david@amoms.co.ke", initials: "DO", phone: "+254 711 200 145" };
  const STATUS = {
    active:      { tone: "success", label: "Active", note: "Signed in just now" },
    invited:     { tone: "outline", label: "Invite pending", note: "Invited 2 days ago · not yet accepted" },
    deactivated: { tone: "destructive", label: "Deactivated", note: "Access revoked 5 May 2026" },
  }[state];

  return (
    <div className="page" style={{ maxWidth: 1080 }}>
      <div className="page-head">
        <div>
          <div className="row" style={{ gap: 8, marginBottom: 4 }}>
            <span className="mono" style={{ fontSize: 12.5, color: "var(--muted-foreground)", cursor: "pointer" }} onClick={()=> go("CORE-05.html")}>Users</span>
            <Ic.ChevronRight size={13} style={{ color: "var(--muted-foreground)" }}/>
            <span className="mono" style={{ fontSize: 12.5, color: "var(--muted-foreground)" }}>{U.name}</span>
          </div>
          <h1 className="page-title">Edit user</h1>
        </div>
        <div className="page-actions"><Button variant="ghost" onClick={()=> go("CORE-05.html")}>Cancel</Button><Button variant="primary" icon={Ic.Check} onClick={()=> toast({ title: "Changes saved" })}>Save changes</Button></div>
      </div>

      <div className="rbac-layout" style={{ gridTemplateColumns: "1fr 320px" }}>
        <div className="col" style={{ gap: 18 }}>
          <Card>
            <div className="core-prof-head" style={{ padding: 18 }}>
              <Avatar initials={U.initials} tone="soil" className="core-prof-avatar" style={{ width: 60, height: 60, fontSize: 22 }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 18, fontWeight: 600 }}>{U.name}</div>
                <div className="muted" style={{ fontSize: 13 }}>{U.email}</div>
              </div>
              <Badge tone={STATUS.tone}>{STATUS.label}</Badge>
            </div>
          </Card>

          <Card>
            <CardHead title="Account details"/>
            <div className="card-body">
              <div className="core-form-grid">
                <div className="field"><label className="label">Full name</label><input className="input" defaultValue={U.name}/></div>
                <div className="field"><label className="label">Work email</label><input className="input" defaultValue={U.email} disabled/></div>
                <div className="field"><label className="label">Phone</label><input className="input" defaultValue={U.phone}/></div>
                <div className="field"><label className="label">Default plant</label><select className="select"><option>Murang'a Plant</option></select></div>
              </div>
            </div>
          </Card>

          <Card>
            <CardHead title="Role" desc="Changing the role updates module permissions immediately."/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <div className="grid-2" style={{ gap: 10 }}>
                {roles.filter(r => !r.system).slice(0, 6).map(r => (
                  <button key={r.id} className={`rbac-role ${role === r.id ? "on" : ""}`} onClick={()=> setRole(r.id)}>
                    <span className="rbac-role-ic"><Ic.Shield size={16}/></span>
                    <div style={{ flex: 1, minWidth: 0 }}><div className="nm">{r.name}</div><div className="ct">{r.users} {r.users === 1 ? "user" : "users"}</div></div>
                    {role === r.id && <Ic.Check size={16} style={{ color: "var(--avocado-fg)" }}/>}
                  </button>
                ))}
              </div>
              <div style={{ marginTop: 10 }}><button className="auth-link" onClick={()=> go("CORE-08.html")}>View full permission matrix →</button></div>
            </div>
          </Card>

          <Card className="core-danger">
            <CardHead title="Danger zone"/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <div className="core-danger-row">
                <div><div style={{ fontSize: 13.5, fontWeight: 500 }}>Reset password</div><div className="muted" style={{ fontSize: 12 }}>Send a reset link to {U.email}</div></div>
                <Button variant="outline" icon={Ic.Key} onClick={()=> toast({ title: "Reset link sent", desc: U.email })}>Send reset</Button>
              </div>
              {state !== "deactivated" ? (
                <div className="core-danger-row">
                  <div><div style={{ fontSize: 13.5, fontWeight: 500 }}>Deactivate account</div><div className="muted" style={{ fontSize: 12 }}>Revoke access immediately — reversible</div></div>
                  <Button variant="destructive" icon={Ic.Lock} onClick={()=> toast({ title: `${U.name} deactivated`, tone: "danger" })}>Deactivate</Button>
                </div>
              ) : (
                <div className="core-danger-row">
                  <div><div style={{ fontSize: 13.5, fontWeight: 500 }}>Reactivate account</div><div className="muted" style={{ fontSize: 12 }}>Restore access for this user</div></div>
                  <Button variant="primary" icon={Ic.Unlock} onClick={()=> toast({ title: `${U.name} reactivated` })}>Reactivate</Button>
                </div>
              )}
            </div>
          </Card>
        </div>

        {/* Side rail */}
        <div className="col" style={{ gap: 18 }}>
          <Card>
            <CardHead title="Status"/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <div className="core-kv"><span className="k"><Ic.Shield size={15}/> State</span><Badge tone={STATUS.tone}>{STATUS.label}</Badge></div>
              <div className="core-kv"><span className="k"><Ic.Clock size={15}/> Last active</span><span className="v">{state === "active" ? "Just now" : state === "invited" ? "—" : "5 May 2026"}</span></div>
              <div className="core-kv"><span className="k"><Ic.Calendar size={15}/> Created</span><span className="v">12 Jan 2025</span></div>
              <div className="core-kv"><span className="k"><Ic.Fingerprint size={15}/> 2FA</span><span className="v">{state === "active" ? "Enabled" : "Not set"}</span></div>
            </div>
          </Card>
          <Card>
            <CardHead title="Recent activity"/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              {state === "invited" ? (
                <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>No activity yet — the invitation hasn't been accepted.</div>
              ) : [
                ["Created requirement PR-2026-0190", "10:42"],
                ["Broadcast to 142 farmers", "06:50"],
                ["Signed in via SSO", "06:38"],
              ].map(([a, t], i) => (
                <div key={i} className="core-session" style={{ padding: "10px 0" }}>
                  <span className="core-session-ic"><Ic.Clock size={14}/></span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 12.5 }}>{a}</div><div className="muted" style={{ fontSize: 11 }}>Today · {t}</div></div>
                </div>
              ))}
              <div style={{ marginTop: 8 }}><button className="auth-link" onClick={()=> go("CORE-12.html")}>View in audit log →</button></div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { userEdit: UserEditPage });