"use client";

import React from "react";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import { RegistrationLayoutProps, RegistrationStep } from "@/types/registration";

export const RegistrationLayout: React.FC<RegistrationLayoutProps> = ({
  children,
  currentStep,
  totalSteps,
  className,
}) => {
  const t = useTranslations("LandingPage");

  const getStepNumber = (step: RegistrationStep): number => {
    switch (step) {
      case "identity":
        return 1;
      case "otp":
        return 2;
      case "profile":
        return 3;
      default:
        return 1;
    }
  };

  const currentStepNumber = getStepNumber(currentStep);

  return (
    <div className={`overflow-y-auto flex flex-wrap w-full h-dvh ${className || ""}`}>
      {/* Left Side - Background */}
      <div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
        <div className="max-w-[520px] pt-16 ps-20">
          <Link href="/" className="mb-6 inline-block">
            <Image 
              src="/assets/mediahub-logo.png" 
              alt="MediaHub Logo" 
              width={250} 
              height={250} 
              className="mb-10 w-full h-full" 
            />
          </Link>
        </div>
        <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
          <Image 
            src="/assets/vector-login.svg" 
            alt="Background Vector" 
            width={300} 
            height={300} 
            className="mb-10 w-full h-full" 
          />
        </div>
      </div>

      {/* Right Side - Form */}
      <div className="flex-1 w-full bg-white dark:bg-slate-600">
        <div className="flex flex-col mb-8">
          {/* Step Indicator */}
          <div className="flex flex-row justify-center py-10">
            <ul className="flex flex-row items-center text-center">
              {Array.from({ length: totalSteps }, (_, index) => {
                const stepNumber = index + 1;
                const isActive = stepNumber === currentStepNumber;
                const isCompleted = stepNumber < currentStepNumber;
                
                return (
                  <React.Fragment key={stepNumber}>
                    <li>
                      <div 
                        className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full transition-all duration-300 ${
                          isActive 
                            ? "bg-white border-[#f32d2d] text-[#f32d2d]" 
                            : isCompleted 
                            ? "bg-[#f32d2d] text-white"
                            : "bg-gray-300 text-gray-600"
                        }`}
                      >
                        <b>{stepNumber}</b>
                      </div>
                    </li>
                    {stepNumber < totalSteps && (
                      <div 
                        className={`w-16 h-1 transition-all duration-300 ${
                          isCompleted ? "bg-[#f32d2d]" : "bg-gray-300"
                        }`}
                      />
                    )}
                  </React.Fragment>
                );
              })}
            </ul>
          </div>

          {/* Step Title */}
          <div className="flex flex-row">
            <div className="px-8 my-10 gap-3">
              <h1 className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold">
                {currentStep === "identity" && t("registerFirst", { defaultValue: "Registration" })}
                {currentStep === "otp" && t("enterOTP", { defaultValue: "Enter OTP" })}
                {currentStep === "profile" && t("userData", { defaultValue: "User Data" })}
              </h1>
              <p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
                {t("alreadyHave", { defaultValue: "Already have an account?" })}{" "}
                <Link href="/auth" className="text-red-500">
                  <b>{t("logIn", { defaultValue: "Log In" })}</b>
                </Link>
              </p>
            </div>
          </div>

          {/* Form Content */}
          <div className="flex-1">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
};