import { useEffect } from 'react';
import { Navigate, useLocation, useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Gift, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { loginSchema, type LoginInput } from '@family-wishlist/shared';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import { useAuthStore } from '@/features/auth/authStore';
import { ApiError } from '@/lib/api';
import { Footer } from '@/components/Layout/Footer';

export function LoginPage() {
  const { user, login } = useAuthStore();
  const navigate = useNavigate();
  const location = useLocation();
  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<LoginInput>({
    resolver: zodResolver(loginSchema),
    defaultValues: { username: '', password: '' },
  });

  useEffect(() => {
    if (user) navigate(from, { replace: true });
  }, [user, from, navigate]);

  if (user) return <Navigate to={from} replace />;

  const submit = handleSubmit(async (values) => {
    try {
      await login(values.username, values.password);
      navigate(from, { replace: true });
    } catch (err) {
      if (err instanceof ApiError) toast.error(err.message);
      else toast.error('Login failed');
    }
  });

  return (
    <div className="flex min-h-screen flex-col">
      <div className="container-page flex flex-1 items-center justify-center py-12">
        <div className="w-full max-w-md animate-fade-in-up">
          <div className="mb-6 flex items-center justify-center gap-2">
            <span className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
              <Gift className="h-5 w-5" />
            </span>
            <h1 className="font-display text-3xl">Family Wishlist</h1>
          </div>

          <div className="rounded-xl border border-border bg-surface p-6 shadow-card sm:p-8">
            <h2 className="mb-1 text-xl font-semibold">Welcome back</h2>
            <p className="mb-6 text-sm text-muted">
              Sign in to manage your wishlist. Credentials are set up via the server environment.
            </p>
            <form className="grid gap-4" onSubmit={submit}>
              <div className="field">
                <Label htmlFor="username">Username</Label>
                <Input
                  id="username"
                  autoComplete="username"
                  autoFocus
                  {...register('username')}
                />
                {errors.username && (
                  <span className="field__error">{errors.username.message}</span>
                )}
              </div>
              <div className="field">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  autoComplete="current-password"
                  {...register('password')}
                />
                {errors.password && (
                  <span className="field__error">{errors.password.message}</span>
                )}
              </div>
              <Button type="submit" size="lg" disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
                Sign in
              </Button>
            </form>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}