"use client";

import { useState, type FormEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/common/Button";
import { OtpInput } from "@/components/app/OtpInput";
import { OTP_LENGTH } from "@/constants/auth";
import { isApiError } from "@/lib/apiError";
import { useAuth } from "@/hooks/useAuth";
import { useTranslation } from "@/hooks/useTranslation";

export default function TwoFactorPage() {
  const { t } = useTranslation();
  const { verifyTwoFactor } = useAuth();
  const router = useRouter();
  const [code, setCode] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    if (code.length !== OTP_LENGTH) {
      setError(t("app.auth.errors.otpInvalid"));
      return;
    }
    setError("");
    setLoading(true);
    try {
      await verifyTwoFactor(code);
      router.replace("/dashboard");
    } catch (err) {
      setError(isApiError(err) ? err.message : t("app.auth.errors.generic"));
      setLoading(false);
    }
  }

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
        {t("app.auth.twoFactor.title")}
      </h1>
      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
        {t("app.auth.twoFactor.subtitle")}
      </p>

      <form onSubmit={onSubmit} className="mt-8 space-y-6">
        <div>
          <label className="mb-3 block text-center text-xs font-semibold capitalize tracking-wide text-slate-500 dark:text-slate-400">
            {t("app.auth.twoFactor.code")}
          </label>
          <OtpInput
            value={code}
            onChange={(v) => {
              setCode(v);
              setError("");
            }}
            ariaLabel={t("app.auth.twoFactor.code")}
            autoFocus
            invalid={!!error}
          />
          {error && (
            <p className="mt-3 text-center text-xs font-medium text-rose-600 dark:text-rose-400">
              {error}
            </p>
          )}
        </div>

        <Button type="submit" size="md" loading={loading} className="w-full font-bold">
          {t("app.auth.twoFactor.verify")}
        </Button>

      </form>

      <Link
        href="/login"
        className="mt-8 inline-flex items-center gap-1.5 text-sm font-semibold text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-300"
      >
        <ArrowLeft className="h-4 w-4" />
        {t("app.auth.twoFactor.back")}
      </Link>
    </div>
  );
}