'use client';

import { useRouter } from '@/shared/config/i18n/navigation';
import { saveToken } from '@/shared/lib/cookie';
import { Button } from '@/shared/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@/shared/ui/form';
import { Input } from '@/shared/ui/input';
import { Label } from '@/shared/ui/label';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation } from '@tanstack/react-query';
import { Loader2 } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import * as z from 'zod';
import { login } from '../lib/api';

const loginSchema = z.object({
  login: z.string().min(1, 'Login is required'),
  password: z.string().min(1, 'Password is required'),
});

const Login = () => {
  const navigate = useRouter();
  const form = useForm<z.infer<typeof loginSchema>>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      login: '',
      password: '',
    },
  });

  const { mutate, isPending } = useMutation({
    mutationFn: (body: { username: string; password: string }) => login(body),
    onSuccess: (res) => {
      saveToken(res.data.data.accessToken);
      navigate.back();
    },
    onError: () => {
      toast.error('Xatolik yuz berdi', {
        richColors: true,
        position: 'top-center',
      });
    },
  });

  function onSubmit(values: z.infer<typeof loginSchema>) {
    mutate({
      password: values.password,
      username: values.login,
    });
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-4 w-full">
      <Card className="w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl shadow-lg">
        <CardHeader>
          <CardTitle className="text-2xl sm:text-3xl font-semibold text-center">
            Login
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="space-y-6 sm:space-y-8"
            >
              <FormField
                control={form.control}
                name="login"
                render={({ field }) => (
                  <FormItem>
                    <Label className="text-base sm:text-lg">Login</Label>
                    <FormControl>
                      <Input
                        placeholder="Enter your login"
                        className="h-12 sm:h-14 text-base sm:text-lg placeholder:text-base sm:placeholder:text-lg"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <Label className="text-base sm:text-lg">Password</Label>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="Enter your password"
                        className="h-12 sm:h-14 text-base sm:text-lg placeholder:text-base sm:placeholder:text-lg"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button
                type="submit"
                className="w-full h-12 sm:h-14 text-lg sm:text-xl rounded-xl sm:rounded-2xl cursor-pointer"
              >
                {isPending ? <Loader2 className="animate-spin" /> : 'Send'}
              </Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
};

export default Login;