import { type FormEvent, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { createStaff, fetchStaffFormOptions, type RoleOption } from '../../api/staff'

export function StaffCreatePage() {
  const navigate = useNavigate()
  const [roles, setRoles] = useState<RoleOption[]>([])
  const [firstname, setFirstname] = useState('')
  const [lastname, setLastname] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [roleId, setRoleId] = useState<number>(0)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const data = await fetchStaffFormOptions()
        if (cancelled) return
        const list = data.roles ?? []
        setRoles(list)
        if (list[0]?.id) setRoleId(Number(list[0].id))
      } catch {
        if (!cancelled) setRoles([])
      }
    })()
    return () => {
      cancelled = true
    }
  }, [])

  async function onSubmit(e: FormEvent) {
    e.preventDefault()
    if (!roleId) {
      setError('Please select a role.')
      return
    }
    try {
      await createStaff({ firstname, lastname, email, password, role_id: roleId })
      navigate('/app/staff')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to create staff.')
    }
  }

  return (
    <div className="container mt-4">
      <h2>Add Staff Member</h2>
      {error ? <div className="alert alert-danger">{error}</div> : null}
      <form onSubmit={(e) => void onSubmit(e)}>
        <div className="mb-3">
          <label className="form-label">First Name</label>
          <input
            type="text"
            className="form-control"
            value={firstname}
            onChange={(e) => setFirstname(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Last Name</label>
          <input
            type="text"
            className="form-control"
            value={lastname}
            onChange={(e) => setLastname(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Email</label>
          <input
            type="email"
            className="form-control"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Password</label>
          <input
            type="password"
            className="form-control"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <div className="mb-3">
          <label className="form-label">Role</label>
          <select
            className="form-control"
            value={roleId || ''}
            onChange={(e) => setRoleId(Number(e.target.value))}
            required
          >
            {roles.map((role) => (
              <option key={role.id} value={role.id}>
                {role.name}
              </option>
            ))}
          </select>
        </div>
        <button type="submit" className="btn btn-success">
          Create
        </button>
      </form>
    </div>
  )
}