"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import Header from "@/components/Header";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp";
import { API_URL } from "@/lib/auth";
import Image from "next/image";
import React, { useState } from "react";

const VerificationScreen = () => {
  const [otp, setOtp] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleVerify = async () => {
    if (otp.length < 6) return;
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(`${API_URL}/auth/verify?code=${otp}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || "Verification failed");
      }

      // 🔥 Call zustand action to update auth state
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <BackgroundWrapper>
      <Header displayTabTitle="Verification" />
      <div className="flex flex-col items-center justify-center pt-10 px-6 gap-4">
        <Image
          src={"/images/icons/otp.svg"}
          height={200}
          width={300}
          alt="otp-banner"
        />
        <h1 className="font-medium text-xl text-center ">
          Enter the code here that you received in your email.
        </h1>
        <InputOTP
          maxLength={6}
          value={otp}
          onChange={setOtp}
          onComplete={handleVerify} // auto-submit when complete
        >
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>

        {error && <p className="text-red-500 mt-3">{error}</p>}

        <button
          onClick={handleVerify}
          disabled={otp.length < 6 || loading}
          className="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg disabled:bg-gray-400 transition"
        >
          {loading ? "Verifying..." : "Verify"}
        </button>
      </div>
    </BackgroundWrapper>
  );
};

export default VerificationScreen;