"use client";

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { FormField } from "@/components/auth/form-field";
import { emailValidationSchema, EmailValidationData, EmailSetupFormProps } from "@/types/auth";
import { useEmailSetup } from "@/hooks/use-auth";

export const EmailSetupForm: React.FC<EmailSetupFormProps> = ({
  loginCredentials,
  onSuccess,
  onError,
  onBack,
  className,
}) => {
  const { setupEmail, loading } = useEmailSetup();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    getValues,
  } = useForm<EmailValidationData>({
    resolver: zodResolver(emailValidationSchema),
    mode: "onChange",
  });

  const onSubmit = async (data: EmailValidationData) => {
    try {
      if (!loginCredentials) {
        onError?.("Login credentials not found. Please try logging in again.");
        return;
      }

      const result = await setupEmail(loginCredentials, data);
      
      switch (result) {
        case "otp":
          onSuccess?.();
          break;
        case "success":
          onSuccess?.();
          break;
        default:
          onError?.("Unexpected response from email setup");
      }
    } catch (error: any) {
      onError?.(error.message || "Email setup failed");
    }
  };

  return (
    <div className={className}>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        {/* Header */}
        <div className="text-left space-y-2">
          <h1 className="font-semibold text-3xl text-left">
            Anda perlu memasukkan email baru untuk bisa Login.
          </h1>
          <p className="text-default-500 text-base">
            Please provide your old and new email addresses for verification.
          </p>
        </div>

        {/* Old Email Field */}
        <FormField
          label="Email Lama"
          name="oldEmail"
          type="email"
          placeholder="Enter your old email address"
          error={errors.oldEmail?.message}
          disabled={isSubmitting || loading}
          required
          inputProps={{
            size: "lg",
            ...register("oldEmail"),
          }}
        />

        {/* New Email Field */}
        <FormField
          label="Email Baru"
          name="newEmail"
          type="email"
          placeholder="Enter your new email address"
          error={errors.newEmail?.message}
          disabled={isSubmitting || loading}
          required
          inputProps={{
            size: "lg",
            ...register("newEmail"),
          }}
        />

        {/* Action Buttons */}
        <div className="flex gap-4 pt-4">
          {onBack && (
            <Button
              type="button"
              variant="outline"
              onClick={onBack}
              disabled={isSubmitting || loading}
              className="flex-1"
            >
              Back
            </Button>
          )}
          <Button
            type="submit"
            disabled={isSubmitting || loading}
            className="flex-1 bg-red-500 hover:bg-red-600"
          >
            {isSubmitting || loading ? (
              <div className="flex items-center gap-2">
                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                Processing...
              </div>
            ) : (
              "Simpan"
            )}
          </Button>
        </div>
      </form>
    </div>
  );
};