"use client";

import { useState, FormEvent, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { ShieldCheck, KeyRound } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { AuthFormWrapper } from "@/components/auth/auth-form-wrapper";
import { useStudentVerify, useStudentResendOtp } from "@/lib/api/hooks/useStudentAuth";
import { ApiRequestError } from "@/lib/api";

function VerifyForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get("email") ?? "";

  const verify = useStudentVerify();
  const resend = useStudentResendOtp();

  const [otp, setOtp] = useState("");
  const [error, setError] = useState("");
  const [resendMsg, setResendMsg] = useState("");

  if (!email) {
    router.replace("/student/login");
    return null;
  }

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError("");
    setResendMsg("");

    if (!otp) {
      setError("Verification code is required");
      return;
    }

    verify.mutate(
      { email, otp },
      {
        onSuccess: () => {
          router.push("/student/dashboard");
        },
        onError: (err) => {
          if (err instanceof ApiRequestError) {
            setError(err.message);
          } else {
            setError("Something went wrong. Please try again.");
          }
        },
      }
    );
  }

  function handleResend() {
    setError("");
    setResendMsg("");
    resend.mutate(
      { email },
      {
        onSuccess: (res) => setResendMsg(res.message),
        onError: (err) => {
          if (err instanceof ApiRequestError) setError(err.message);
          else setError("Failed to resend code.");
        },
      }
    );
  }

  return (
    <AuthFormWrapper
      icon={ShieldCheck}
      iconGradient="from-green-500 to-green-600"
      title="Verify Your Email"
      subtitle={`Enter the code sent to ${email}`}
      backLabel="Change email"
      onBack={() => router.push("/student/login")}
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="otp" className="text-gray-300">
            Verification Code
          </Label>
          <div className="relative">
            <KeyRound className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-gray-400" />
            <Input
              id="otp"
              type="text"
              inputMode="numeric"
              maxLength={6}
              placeholder="123456"
              value={otp}
              onChange={(e) => {
                setOtp(e.target.value.replace(/\D/g, ""));
                setError("");
                setResendMsg("");
              }}
              className={`pl-12 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 text-center text-xl tracking-widest ${
                error ? "border-red-500" : ""
              }`}
            />
          </div>
          {error && <p className="text-red-400 text-sm mt-1">{error}</p>}
          {resendMsg && <p className="text-green-400 text-sm mt-1">{resendMsg}</p>}
        </div>

        <Button
          type="submit"
          disabled={verify.isPending}
          className="w-full text-lg py-6 bg-green-600 hover:bg-green-700"
        >
          {verify.isPending ? "Verifying..." : "Verify & Login"}
        </Button>

        <div className="text-center">
          <button
            type="button"
            onClick={handleResend}
            disabled={resend.isPending}
            className="text-sm text-gray-400 hover:text-green-400 transition-colors"
          >
            {resend.isPending ? "Resending..." : "Didn't receive a code? Resend"}
          </button>
        </div>
      </form>
    </AuthFormWrapper>
  );
}

export default function StudentVerifyPage() {
  return (
    <Suspense>
      <VerifyForm />
    </Suspense>
  );
}