import { FormEvent, useState } from 'react'
import { useAuth, UserRole } from '../context/AuthContext'

export function LoginPage() {
  const { login } = useAuth()
  const [role, setRole] = useState<UserRole>('farmacia')
  const [name, setName] = useState('Dra. Silva')

  const onSubmit = (event: FormEvent) => {
    event.preventDefault()
    login('fake-jwt-token', role, name)
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100">
      <form
        onSubmit={onSubmit}
        className="w-full max-w-md space-y-4 rounded-lg bg-white p-8 shadow-lg"
      >
        <h1 className="text-2xl font-bold text-medicalBlue">Acesso ao Marketplace</h1>
        <p className="text-sm text-gray-600">Use o nível de acesso para testar as rotas protegidas.</p>
        <div className="space-y-2">
          <label className="text-sm font-medium text-gray-700" htmlFor="name">
            Nome do usuário
          </label>
          <input
            id="name"
            className="w-full rounded border border-gray-200 px-3 py-2"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium text-gray-700" htmlFor="role">
            Perfil
          </label>
          <select
            id="role"
            className="w-full rounded border border-gray-200 px-3 py-2"
            value={role}
            onChange={(e) => setRole(e.target.value as UserRole)}
          >
            <option value="farmacia">Farmácia</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <button type="submit" className="w-full rounded bg-healthGreen px-4 py-2 font-semibold text-white">
          Entrar
        </button>
      </form>
    </div>
  )
}
