/**
 * OtpStep - Enter 6-digit OTP verification code
 */

"use client";

import { useState, useCallback } from "react";
import { Button } from "@/components/atoms";
import { OtpInput } from "@/features/get-started/components/OtpInput/OtpInput";
import { useEligibilityCheckStore } from "../../../stores/eligibility-check.store";

export function OtpStep() {
  const {
    formData,
    verifyOtp,
    resendOtp,
    goToStep,
    loading,
    otpError,
    clearOtpError,
    attemptsRemaining,
    resendDisabled,
    resendCountdown,
  } = useEligibilityCheckStore();

  const [otpValue, setOtpValue] = useState("");

  const handleCodeChange = useCallback(
    (value: string) => {
      setOtpValue(value);
      clearOtpError();
    },
    [clearOtpError]
  );

  const handleComplete = useCallback(
    async (code: string) => {
      await verifyOtp(code);
    },
    [verifyOtp]
  );

  const handleVerify = async () => {
    if (otpValue.length === 6) {
      await verifyOtp(otpValue);
    }
  };

  const handleResend = async () => {
    setOtpValue("");
    await resendOtp();
  };

  const handleChangeEmail = () => {
    goToStep("form");
  };

  return (
    <div className="space-y-6">
      {/* Email reminder */}
      <p className="text-sm text-muted-foreground text-center">
        We sent a 6-digit code to{" "}
        <span className="font-medium text-foreground">{formData.email}</span>
      </p>

      {/* OTP Input */}
      <div className="py-4">
        <OtpInput
          length={6}
          value={otpValue}
          onChange={handleCodeChange}
          onComplete={handleComplete}
          disabled={loading}
          {...(otpError && { error: otpError })}
          autoFocus
        />
      </div>

      {/* Attempts remaining warning */}
      {attemptsRemaining !== null && attemptsRemaining < 3 && (
        <p className="text-sm text-warning text-center">
          {attemptsRemaining} attempt{attemptsRemaining === 1 ? "" : "s"} remaining
        </p>
      )}

      {/* Verify Button */}
      <Button
        type="button"
        onClick={handleVerify}
        disabled={loading || otpValue.length !== 6}
        loading={loading}
        className="w-full h-11"
      >
        {loading ? "Verifying..." : "Verify & Continue"}
      </Button>

      {/* Actions */}
      <div className="flex items-center justify-between">
        <Button
          type="button"
          variant="ghost"
          onClick={handleChangeEmail}
          disabled={loading}
          className="text-sm"
        >
          Change email
        </Button>

        <Button
          type="button"
          variant="ghost"
          onClick={handleResend}
          disabled={loading || resendDisabled}
          className="text-sm"
        >
          {resendDisabled && resendCountdown > 0 ? `Resend in ${resendCountdown}s` : "Resend code"}
        </Button>
      </div>

      {/* Help text */}
      <p className="text-xs text-muted-foreground text-center">
        The code expires in 10 minutes. Check your spam folder if you don&apos;t see it.
      </p>
    </div>
  );
}
