// CORE-06 · User management — create  (route: userCreate)
// Add user, assign role(s), invite.
const UserCreatePage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const go = window.makeGo(toast);
  const state = (tweaks && tweaks.userCreateState) || "empty";
  const filled = state === "filled";
  const errors = state === "errors";
  const invited = state === "invited";

  const [role, setRole] = useState(filled ? "procurement-officer" : "");
  const roles = window.MD.ROLES;

  if (invited) {
    return (
      <div className="page" style={{ maxWidth: 720 }}>
        <div className="page-head"><div><h1 className="page-title">Add user</h1><div className="page-sub">Invite a teammate to the platform</div></div></div>
        <Card><div style={{ padding: "56px 24px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <span className="auth-success-ring"><Ic.Send size={24}/></span>
          <div><div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.02em" }}>Invitation sent</div><div className="muted" style={{ fontSize: 13.5, maxWidth: 420, margin: "6px auto 0", lineHeight: 1.5 }}>We've emailed <b>grace@amoms.co.ke</b> an invite to set their password and sign in as a <b>Procurement Officer</b>. The invite expires in 7 days.</div></div>
          <div className="row" style={{ marginTop: 4 }}>
            <Button variant="outline" icon={Ic.UserPlus}>Add another</Button>
            <Button variant="primary" icon={Ic.Users} onClick={()=> go("CORE-05.html")}>Back to users</Button>
          </div>
        </div></Card>
      </div>
    );
  }

  return (
    <div className="page" style={{ maxWidth: 860 }}>
      <div className="page-head">
        <div><h1 className="page-title">Add user</h1><div className="page-sub">Create an account and assign a role — they'll be invited by email</div></div>
        <div className="page-actions"><Button variant="ghost" onClick={()=> go("CORE-05.html")}>Cancel</Button><Button variant="primary" icon={Ic.Send} onClick={()=> toast({ title: "Invite sent" })}>Send invite</Button></div>
      </div>

      {errors && <div className="auth-alert" style={{ marginBottom: 16 }}><Ic.Warning size={15}/><span>Please fix the highlighted fields. A name, valid work email and at least one role are required.</span></div>}

      <div className="col" style={{ gap: 18 }}>
        <Card>
          <CardHead title="Account details"/>
          <div className="card-body">
            <div className="core-form-grid">
              <div className="field"><label className="label">Full name <span className="req">*</span></label><input className="input" defaultValue={filled ? "Grace Mwangi" : ""} placeholder="e.g. Grace Mwangi"/></div>
              <div className="field"><label className="label">Work email <span className="req">*</span></label><input className={`input ${errors ? "" : ""}`} defaultValue={filled ? "grace@amoms.co.ke" : ""} placeholder="name@amoms.co.ke" style={errors ? { borderColor: "var(--destructive)" } : undefined}/>{errors && <div className="field-hint" style={{ color: "var(--destructive)" }}>Enter a valid @amoms.co.ke address.</div>}</div>
              <div className="field"><label className="label">Phone</label><input className="input" defaultValue={filled ? "+254 715 200 884" : ""} placeholder="+254…"/></div>
              <div className="field"><label className="label">Default plant</label><select className="select"><option>Murang'a Plant</option><option>Nyeri Depot</option></select></div>
            </div>
          </div>
        </Card>

        <Card>
          <CardHead title="Role" desc="Determines the home screen and module permissions. Manage fine-grained access in Roles & permissions."/>
          <div className="card-body" style={{ paddingTop: 0 }}>
            <div className="grid-2" style={{ gap: 10 }}>
              {roles.filter(r => !r.system).map(r => (
                <button key={r.id} className={`rbac-role ${role === r.id ? "on" : ""}`} onClick={()=> setRole(r.id)} style={{ alignItems: "flex-start" }}>
                  <span className="rbac-role-ic" style={{ marginTop: 1 }}><Ic.Shield size={16}/></span>
                  <div style={{ flex: 1, minWidth: 0 }}><div className="nm">{r.name}</div><div className="ct" style={{ whiteSpace: "normal", lineHeight: 1.4 }}>{r.desc}</div></div>
                  <span className="proc-check" style={{ marginTop: 2, ...(role === r.id ? { background: "var(--avocado)", borderColor: "var(--avocado)", color: "#fff" } : {}) }}>{role === r.id && <Ic.Check size={11}/>}</span>
                </button>
              ))}
            </div>
            {errors && !role && <div className="field-hint" style={{ color: "var(--destructive)", marginTop: 10 }}>Select at least one role.</div>}
          </div>
        </Card>

        <Card>
          <CardHead title="Invitation"/>
          <div className="card-body" style={{ paddingTop: 0 }}>
            <div className="core-toggle-row"><div className="body"><div className="t">Send email invitation now</div><div className="d">User sets their own password via a secure link (expires in 7 days)</div></div><Switch checked={true} onChange={()=>{}}/></div>
            <div className="core-toggle-row"><div className="body"><div className="t">Require two-factor authentication</div><div className="d">Enforce 2FA setup on first sign-in</div></div><Switch checked={false} onChange={()=>{}}/></div>
          </div>
        </Card>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { userCreate: UserCreatePage });