"use client";

import { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Field, FieldContent } from "@/components/ui/field";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import Image from "next/image";
import useAuthentificate from "@/api/useAuthentificate";

interface AuthDialogProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [rememberMe, setRememberMe] = useState(false);

  const mutation = useAuthentificate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutation.mutate({ email, password, rememberMe });
  };

  useEffect(() => {
    if (mutation.isSuccess) {
      onClose();
    }
  }, [mutation.isSuccess]);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="[&>button]:hidden max-w-4xl w-full h-[600px] rounded-[30px] bg-[#F8F8F8]">
        <div className="flex h-full gap-10">
          {/* Левая часть - форма */}
          <div className="flex-1 rounded-l-[10px] py-8 pl-1 flex flex-col justify-center">
            <DialogHeader className="text-left mb-8">
              <DialogTitle className="text-2xl font-bold text-gray-800 mb-2">
                Авторизация
              </DialogTitle>
            </DialogHeader>

            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Поле email */}
              <Field>
                <FieldContent>
                  <input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Электронная почта"
                    className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
                    required
                  />
                </FieldContent>
              </Field>

              {/* Поле пароля */}
              <Field>
                <FieldContent>
                  <input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="Пароль"
                    className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
                    required
                  />
                </FieldContent>
              </Field>

              {/* Чекбокс и ссылка */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="remember"
                    checked={rememberMe}
                    onCheckedChange={(checked) =>
                      setRememberMe(checked as boolean)
                    }
                  />
                  <Label htmlFor="remember" className="text-sm">
                    Запомнить меня
                  </Label>
                </div>
                <button
                  type="button"
                  className="text-sm hover:text-[#008299] transition-colors"
                >
                  Забыли пароль?
                </button>
              </div>

              {/* Кнопка входа */}
              <Button
                type="submit"
                className="w-full h-[56px] bg-brand px-5 py-4 hover:bg-brand-hover text-white rounded-full font-semibold transition-colors"
              >
                Войти
              </Button>

              {/* Ссылка на регистрацию */}
              <div className="text-center">
                <button
                  type="button"
                  className="hover:text-brand font-bold transition-colors"
                >
                  Создать аккаунт
                </button>
              </div>
            </form>

            {/* Договор */}
            <div className="mt-8 text-xs text-gray-400 text-center">
              Входя в аккаунт или создавая новый, вы соглашаетесь с нашими{" "}
              <button className="text-primary hover:underline">
                Правилами и условиями
              </button>{" "}
              и{" "}
              <button className="text-primary hover:underline">
                Положением о конфиденциальности
              </button>
            </div>
          </div>

          {/* Правая часть - изображение */}
          <div className="hidden md:block flex-1 relative overflow-hidden rounded-[20px]">
            {/* Изображение яхт */}
            <Image
              src="/images/auth.jpg"
              alt="Яхты"
              fill
              className="object-cover rounded-lg"
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
