'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useAuthStore } from '@/stores/auth.store';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';

/**
 * EN: Create login schema with translated messages
 * VI: Tạo login schema với thông báo đã dịch
 */
function createLoginSchema(t: (key: string) => string) {
  return z.object({
    email: z
      .string()
      .min(1, t('validation.emailRequired'))
      .email(t('validation.email')),
    password: z
      .string()
      .min(1, t('validation.password'))
      .min(8, t('validation.passwordMin')),
    rememberMe: z.boolean().optional(),
  });
}

/**
 * EN: Login page component for user authentication
 * VI: Component trang đăng nhập để xác thực người dùng
 *
 * Features:
 * - Email/password inputs with validation
 * - Real-time error messages
 * - Remember me checkbox
 * - Loading state on button
 * - Error handling
 */
export default function LoginPage() {
  // EN: Translation hook / VI: Hook translation
  const { t } = useTranslation();

  // EN: Next.js router for navigation
  // VI: Next.js router để điều hướng
  const router = useRouter();

  // EN: Auth store hooks for login functionality
  // VI: Auth store hooks cho chức năng đăng nhập
  const { login, isLoading } = useAuthStore();

  // EN: General error state for API errors
  // VI: Trạng thái lỗi chung cho lỗi API
  const [apiError, setApiError] = useState<string>('');

  // EN: Create schema with translations / VI: Tạo schema với translations
  const loginSchema = createLoginSchema(t);
  type LoginFormData = z.infer<typeof loginSchema>;

  // EN: React Hook Form setup with Zod resolver
  // VI: Setup React Hook Form với Zod resolver
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: '',
      rememberMe: false,
    },
  });

  /**
   * EN: Handle form submission for login
   * VI: Xử lý submit form để đăng nhập
   *
   * @param data - Form data validated by Zod / Dữ liệu form đã được validate bởi Zod
   */
  const onSubmit = async (data: LoginFormData) => {
    setApiError('');
    try {
      // EN: Attempt login through auth store
      // VI: Thử đăng nhập thông qua auth store
      await login(data.email, data.password);
      // EN: Redirect to dashboard on successful login
      // VI: Chuyển hướng về dashboard khi đăng nhập thành công
      router.push('/dashboard');
    } catch (err: any) {
      // EN: Set error message from API response
      // VI: Đặt thông báo lỗi từ phản hồi API
      setApiError(err.message || t('auth.login.loginFailed'));
    }
  };

  return (
    // EN: Centered login form layout
    // VI: Layout form đăng nhập được căn giữa
    <main role="main" aria-label={t('auth.login.pageLabel')}>
      <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
        <Card className="w-full max-w-md" hover={false} bordered>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl font-semibold">
              {t('auth.login.title')}
            </CardTitle>
            <CardDescription className="mt-2">
              {t('auth.login.description')}
            </CardDescription>
          </CardHeader>

          <form onSubmit={handleSubmit(onSubmit)}>
            <CardContent className="space-y-4">
              {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
              {apiError && (
                <div
                  className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
                  role="alert"
                >
                  <svg
                    className="h-4 w-4 flex-shrink-0"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                  <span>{apiError}</span>
                </div>
              )}

              {/* EN: Email input field / VI: Trường nhập email */}
              <Input
                type="email"
                label={t('auth.login.email')}
                placeholder={t('auth.login.email')}
                {...register('email')}
                errorMessage={errors.email?.message}
                validationState={errors.email ? 'error' : 'default'}
                autoComplete="email"
                aria-required="true"
              />

              {/* EN: Password input field / VI: Trường nhập mật khẩu */}
              <Input
                type="password"
                label={t('auth.login.password')}
                placeholder={t('auth.login.password')}
                {...register('password')}
                errorMessage={errors.password?.message}
                validationState={errors.password ? 'error' : 'default'}
                autoComplete="current-password"
                aria-required="true"
              />

              {/* EN: Submit button / VI: Nút submit */}
              <Button
                type="submit"
                variant="primary"
                size="lg"
                className="w-full"
                disabled={isSubmitting || isLoading}
                loading={isSubmitting || isLoading}
              >
                {isSubmitting || isLoading
                  ? t('auth.login.signingIn')
                  : t('auth.login.title')}
              </Button>
            </CardContent>
          </form>
        </Card>
      </div>
    </main>
  );
}
