"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { loginSchema, type LoginInput } from "@/lib/validation/schemas";
import { createClient } from "@/lib/supabase/client";
import { AuthLayout } from "@/components/layout/auth-layout";
import { Input, Label, FieldError } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useTranslations } from "@/lib/i18n/i18n-provider";

export function LoginForm({ locale }: { locale: string }) {
  const t = useTranslations();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [serverError, setServerError] = useState<string | null>(null);

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

  async function onSubmit(values: LoginInput) {
    setServerError(null);
    const supabase = createClient();
    const { error } = await supabase.auth.signInWithPassword(values);
    if (error) {
      setServerError(t("auth.errors.invalidCredentials"));
      return;
    }
    const redirect = searchParams.get("redirect") || `/${locale}/dashboard`;
    router.push(redirect);
    router.refresh();
  }

  async function handleGoogle() {
    const supabase = createClient();
    await supabase.auth.signInWithOAuth({
      provider: "google",
      options: { redirectTo: `${window.location.origin}/${locale}/dashboard` }
    });
  }

  return (
    <AuthLayout locale={locale} title={t("auth.login.title")} subtitle={t("auth.login.subtitle")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="email">{t("auth.login.email")}</Label>
          <Input id="email" type="email" autoComplete="email" error={errors.email?.message} {...register("email")} />
          <FieldError id="email-error">{errors.email?.message}</FieldError>
        </div>
        <div>
          <div className="flex items-center justify-between">
            <Label htmlFor="password">{t("auth.login.password")}</Label>
            <Link href={`/${locale}/forgot-password`} className="text-xs text-brand-600 hover:underline">
              {t("auth.login.forgot")}
            </Link>
          </div>
          <Input
            id="password"
            type="password"
            autoComplete="current-password"
            error={errors.password?.message}
            {...register("password")}
          />
          <FieldError id="password-error">{errors.password?.message}</FieldError>
        </div>

        {serverError && <p role="alert" className="text-sm text-red-600">{serverError}</p>}

        <Button type="submit" className="w-full" loading={isSubmitting}>
          {t("auth.login.submit")}
        </Button>
      </form>

      <div className="my-4 flex items-center gap-3">
        <div className="h-px flex-1 bg-ink-100" />
        <span className="text-xs text-ink-400">or</span>
        <div className="h-px flex-1 bg-ink-100" />
      </div>

      <Button variant="secondary" className="w-full" onClick={handleGoogle} type="button">
        {t("auth.login.withGoogle")}
      </Button>

      <p className="mt-6 text-center text-sm text-ink-500">
        {t("auth.login.noAccount")}{" "}
        <Link href={`/${locale}/register`} className="font-medium text-brand-600 hover:underline">
          {t("auth.login.signUp")}
        </Link>
      </p>
    </AuthLayout>
  );
}