"use client";

import { useState } from "react";

import { useRouter } from "next/navigation";

import axios from "axios";

import Cookies from "js-cookie";

import { ShieldCheck } from "lucide-react";

import { zodResolver } from "@hookform/resolvers/zod";

import { Controller, useForm } from "react-hook-form";

import { loginSchema } from "@/schemas/auth.schema";

import { LoginFormType } from "@/types/auth.type";

import { Button } from "@/components/shadcnui/button";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/shadcnui/card";

import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/shadcnui/field";

import { Input } from "@/components/shadcnui/input";

const LoginForm = () => {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  const form = useForm<LoginFormType>({
    resolver: zodResolver(loginSchema),

    defaultValues: {
      mobile: "",
    },
  });

  const onSubmit = async (values: LoginFormType) => {
    try {
      setLoading(true);

      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/login`,
        {
          mobile: values.mobile,
        },
      );

      if (response.data.success) {
        Cookies.set("kero_mobile", values.mobile);

        router.push("/verify-otp");
      }
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex min-h-[80vh] items-center justify-center px-4">
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute top-0 left-0 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl" />

        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl" />
      </div>

      <Card className="w-full max-w-md border border-gray-200 bg-white/80 shadow-2xl backdrop-blur-xl dark:border-gray-800 dark:bg-black/60">
        <CardHeader className="space-y-4 text-center">
          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg">
            <ShieldCheck
              className="text-white"
              size={30}
            />
          </div>

          <div>
            <CardTitle className="text-3xl font-bold">Admin Login</CardTitle>

            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
              Login to access Kero Admin Dashboard
            </p>
          </div>
        </CardHeader>

        <CardContent>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-6">
            <FieldGroup>
              <Controller
                name="mobile"
                control={form.control}
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <FieldLabel className="mb-2">Mobile Number</FieldLabel>

                    <Input
                      {...field}
                      placeholder="Enter mobile number"
                      aria-invalid={fieldState.invalid}
                      className="h-12 rounded-xl border-gray-300 bg-white dark:border-gray-700 dark:bg-black"
                    />

                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                )}
              />
            </FieldGroup>

            <Button
              type="submit"
              disabled={loading}
              className="h-12 w-full rounded-xl text-base font-semibold shadow-lg">
              {loading ? "Sending OTP..." : "Send OTP"}
            </Button>
          </form>

          <div className="mt-6 text-center">
            <p className="text-xs text-gray-500 dark:text-gray-400">
              Only authorized admin users can access this dashboard
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default LoginForm;