import { type FormEvent, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { createUserRecord } from '../../api/session'

/** CI `user/create.php` — admin create user (expects Laravel `POST /api/v1/users`). */
export function UserCreatePage() {
  const navigate = useNavigate()
  const [error, setError] = useState<string | null>(null)
  const [form, setForm] = useState({
    password: '',
    firstname: '',
    lastname: '',
    cellphone: '',
    email: '',
    address_street: '',
    city: '',
    state: '',
    zip: '',
    role: '',
    accept_school_policy: false,
  })

  async function onSubmit(e: FormEvent) {
    e.preventDefault()
    try {
      await createUserRecord({
        ...form,
        accept_school_policy: form.accept_school_policy ? 1 : 0,
      })
      navigate('/app/user/user-list')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Create failed.')
    }
  }

  return (
    <div className="container mt-4">
      <h1 className="h3 mb-4">Create User</h1>
      {error ? <div className="alert alert-danger">{error}</div> : null}
      <form onSubmit={(e) => void onSubmit(e)} className="row g-3" style={{ maxWidth: 560 }}>
        <div className="col-12">
          <label className="form-label">Password</label>
          <input
            type="password"
            className="form-control"
            required
            value={form.password}
            onChange={(e) => setForm((c) => ({ ...c, password: e.target.value }))}
          />
        </div>
        <div className="col-md-6">
          <label className="form-label">First Name</label>
          <input
            className="form-control"
            required
            value={form.firstname}
            onChange={(e) => setForm((c) => ({ ...c, firstname: e.target.value }))}
          />
        </div>
        <div className="col-md-6">
          <label className="form-label">Last Name</label>
          <input
            className="form-control"
            required
            value={form.lastname}
            onChange={(e) => setForm((c) => ({ ...c, lastname: e.target.value }))}
          />
        </div>
        <div className="col-12">
          <label className="form-label">Cell Phone</label>
          <input
            className="form-control"
            required
            value={form.cellphone}
            onChange={(e) => setForm((c) => ({ ...c, cellphone: e.target.value }))}
          />
        </div>
        <div className="col-12">
          <label className="form-label">Email</label>
          <input
            type="email"
            className="form-control"
            required
            value={form.email}
            onChange={(e) => setForm((c) => ({ ...c, email: e.target.value }))}
          />
        </div>
        <div className="col-12">
          <label className="form-label">Address Street</label>
          <input
            className="form-control"
            required
            value={form.address_street}
            onChange={(e) => setForm((c) => ({ ...c, address_street: e.target.value }))}
          />
        </div>
        <div className="col-md-6">
          <label className="form-label">City</label>
          <input
            className="form-control"
            required
            value={form.city}
            onChange={(e) => setForm((c) => ({ ...c, city: e.target.value }))}
          />
        </div>
        <div className="col-md-3">
          <label className="form-label">State</label>
          <input
            className="form-control"
            required
            value={form.state}
            onChange={(e) => setForm((c) => ({ ...c, state: e.target.value }))}
          />
        </div>
        <div className="col-md-3">
          <label className="form-label">Zip</label>
          <input
            className="form-control"
            required
            value={form.zip}
            onChange={(e) => setForm((c) => ({ ...c, zip: e.target.value }))}
          />
        </div>
        <div className="col-12">
          <label className="form-label">Role</label>
          <input
            className="form-control"
            required
            value={form.role}
            onChange={(e) => setForm((c) => ({ ...c, role: e.target.value }))}
          />
        </div>
        <div className="col-12 form-check">
          <input
            type="checkbox"
            className="form-check-input"
            id="pol"
            checked={form.accept_school_policy}
            onChange={(e) => setForm((c) => ({ ...c, accept_school_policy: e.target.checked }))}
          />
          <label className="form-check-label" htmlFor="pol">
            Accept School Policy
          </label>
        </div>
        <div className="col-12">
          <button type="submit" className="btn btn-primary me-2">
            Create
          </button>
          <Link className="btn btn-outline-secondary" to="/app/user/user-list">
            Cancel
          </Link>
        </div>
      </form>
    </div>
  )
}