"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next";
import toast, { Toaster } from "react-hot-toast";
import { addCustomer, loginWithEmail } from "../../utils/api";
import AuthService from "../../services/AuthService";
import { CustomerType } from "../../enums";
import { fadeInUp } from "../../components/Animation/OwnerPageAnimation";
import { staggerContainer } from "../../components/Animation/OwnerPageAnimation";
import InteractiveBackground from "@/app/components/Animation/Background";
import HeaderOfSteps from "@/app/components/OwnerComponents/HeaderOfSteps";
import HeaderOfForm from "@/app/components/OwnerComponents/HeaderOfForm";
import OwnerFormStepOne from "@/app/components/OwnerComponents/OwnerFormStepOne";
import Policy from "@/app/components/OwnerComponents/PolicyAgree";
import ButtomStepOne from "@/app/components/OwnerComponents/ButtomStepOne";
import ButtomStepTwo from "@/app/components/OwnerComponents/ButtomStepTwo";
import HavAccount from "@/app/components/HavAccount";
import OtpDialog from "@/app/components/OwnerComponents/OtpDialog";
import { validateStep1 } from "@/app/validations/OwnerValidatoin";
export default function TenantRegisterPage() {
  const { t } = useTranslation();
  const [step, setStep] = useState(1);
  const [showOtpModal, setShowOtpModal] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    whatsapp: "",
    phone2: "",
    nationalNumber: "",
    password: "",
    confirmPassword: "",
    customerType: CustomerType.PERSONAL,
    agreeTerms: false,
  });
  const [errors, setErrors] = useState({});

  const handleNextStep = () => {
    if (validateStep1(formData, setErrors, t)) {
      setStep(2);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      toast.error(t("validation.correctErrors"));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.agreeTerms) {
      toast.error(t("validation.agreeToTerms"));
      return;
    }
    setIsLoading(true);
    const payload = {
      firstName: formData.firstName,
      lastName: formData.lastName,
      email: formData.email,
      phoneNumber: formData.phone,
      whatsAppNumber: formData.whatsapp,
      phone: formData.phone2,
      nationalNumber: formData.nationalNumber,
      password: formData.password,
      customerType: formData.customerType,
    };
    try {
      const res = await addCustomer(payload, null, null);
      if (res.status === 200 || res.ok) {
        const apiMessage = res.message || res.data?.message;
        toast.success(apiMessage || t("register.accountCreated"), { duration: 4000 });
        const loginRes = await loginWithEmail(formData.email, formData.password);
        if (loginRes.status === 206) {
          const otpToken = loginRes.data;
          if (otpToken) AuthService.addToken(otpToken);
          toast(loginRes.message || t("register.otpSentEmail"), { icon: "📧" });
          setShowOtpModal(true);
        } else if (loginRes.status === 200) {
          const loginToken = loginRes.data;
          if (loginToken) AuthService.addToken(loginToken);
          toast.success(loginRes.message || t("register.loginSuccess"));
        }
      } else {
        const errMsg = res.message || res.data?.message || t("register.accountCreationFailed");
        toast.error(errMsg);
      }
    } catch (err) {
      toast.error(err.message || t("register.registrationError"));
    } finally {
      setIsLoading(false);
    }
  };
  return (
    <div className="min-h-screen  flex items-center justify-center p-4 relative overflow-hidden">
      <Toaster position="top-center" reverseOrder={false} />
      <div className="absolute inset-0 overflow-hidden">
        <InteractiveBackground />{" "}
      </div>
      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} className="relative z-10 w-full max-w-md">
        <HeaderOfSteps step={step} colors={"bg-blue-500"} numberStep={[1, 2]} />
        <div className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
          <HeaderOfForm num={1} step={step} />
          <div className="p-8">
            <motion.form
              variants={staggerContainer}
              initial="initial"
              animate="animate"
              onSubmit={ step === 1? (e) => { e.preventDefault(); handleNextStep();  }: handleSubmit  }
              className="space-y-6"
            >
              {step === 1 && <OwnerFormStepOne setErrors={setErrors} setFormData={setFormData} formData={formData} errors={errors} type={"customer"} />}
              {step === 2 && <Policy formData={formData} setFormData={setFormData} type={"customer"} />}
              <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
                {step === 1 ? <ButtomStepOne type={"custoemr"} /> : <ButtomStepTwo formData={formData} setFormData={setFormData} isLoading={isLoading} type={"type"} />}
              </motion.div>
              {step === 1 && <HavAccount />}
            </motion.form>
          </div>
        </div>
      </motion.div>
      <AnimatePresence>{showOtpModal && <OtpDialog formData={formData} setShowOtpModal={setShowOtpModal} type={"customer"} />}</AnimatePresence>
    </div>
  );
}