import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useLogin } from '@/hooks/useAuth'

const schema = z.object({
  email: z.string().email('Email inválido'),
  password: z.string().min(1, 'Password obrigatória'),
  tenant_slug: z.string().optional(),
})
type FormData = z.infer<typeof schema>

export default function LoginPage() {
  const [showSlug, setShowSlug] = useState(false)
  const { mutate: login, isPending, error } = useLogin()

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({ resolver: zodResolver(schema) })

  const onSubmit = (data: FormData) => {
    login({
      email: data.email,
      password: data.password,
      tenant_slug: data.tenant_slug || undefined,
    })
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900">TechXCar</h1>
          <p className="text-gray-500 mt-1 text-sm">Gestão de Oficina</p>
        </div>

        <form
          onSubmit={handleSubmit(onSubmit)}
          className="bg-white p-8 rounded-lg shadow-sm border border-gray-200 space-y-4"
        >
          <div className="space-y-1.5">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" autoComplete="email" {...register('email')} />
            {errors.email && <p className="text-red-500 text-xs">{errors.email.message}</p>}
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              type="password"
              autoComplete="current-password"
              {...register('password')}
            />
            {errors.password && <p className="text-red-500 text-xs">{errors.password.message}</p>}
          </div>

          {showSlug && (
            <div className="space-y-1.5">
              <Label htmlFor="tenant_slug">Workspace (slug da oficina)</Label>
              <Input
                id="tenant_slug"
                type="text"
                placeholder="minha-oficina"
                {...register('tenant_slug')}
              />
            </div>
          )}

          {error && <p className="text-red-500 text-sm text-center">{error.message}</p>}

          <Button type="submit" className="w-full" disabled={isPending}>
            {isPending ? 'A entrar...' : 'Entrar'}
          </Button>

          <button
            type="button"
            onClick={() => setShowSlug((v) => !v)}
            className="w-full text-xs text-gray-400 hover:text-gray-600 text-center"
          >
            {showSlug ? 'Ocultar campo workspace' : 'Entrar numa oficina específica'}
          </button>
        </form>
      </div>
    </div>
  )
}