"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Check, ChevronLeft, ChevronRight } from "lucide-react";
import BasicInfoStep from "./BasicInfoStep";
import CompanyInfoStep from "./CompanyInfoStep";
import PaymentConfirmStep from "./PaymentConfirmStep";
import { useTranslations } from "next-intl";
import { useLocaleDirection } from "@/hooks/useLocale";
import PlanSummary from "./PlanSummary";

export default function SubscribeSection() {
  const t = useTranslations("subscribe");
  const { locale } = useLocaleDirection();

  const [step, setStep] = useState(1);
  const steps = [
    { id: 1, title: t("basicInfo") },
    { id: 2, title: t("companyInfo") },
    { id: 3, title: t("paymentInfo") },
  ];

  return (
    <div className="space-y-10 w-full max-w-[1280px] mx-auto">
      <h2 className="text-[32px] font-bold text-primary-main">{t("title")}</h2>

      <div className="space-y-10">
        <div className="flex items-center justify-between relative">
          <div className="absolute top-[12px] w-full left-[0px] h-[1px] bg-[#919EAB29]"></div>
          {steps.map((s) => (
            <div
              key={s.id}
              className="flex flex-col items-center text-center gap-2 bg-white relative z-2"
            >
              <div
                className={`flex items-center justify-center h-6 w-6 rounded-full text-[12px] text-white ${
                  step > s.id
                    ? "bg-[#27AE60] "
                    : step === s.id
                    ? "bg-primary-main"
                    : "bg-primary-lighter"
                }`}
              >
                {step > s.id ? <Check className="h-4 w-4" /> : s.id}
              </div>
              <span
                className={`text-[16px] font-bold  ${
                  step > s.id
                    ? "text-primary-main "
                    : step === s.id
                    ? "text-primary-main"
                    : "text-primary-lighter"
                }`}
              >
                {s.title}
              </span>
            </div>
          ))}
        </div>

        <div className="p-4 md:p-10 bg-bg md:rounded-[24px] rounded-[16px]">
          {step === 1 && <BasicInfoStep />}

          {step === 2 && <CompanyInfoStep />}

          {step === 3 && <PaymentConfirmStep />}
        </div>

        <div className="flex justify-between">
          <Button
            variant="outline"
            onClick={() => setStep((s) => Math.max(1, s - 1))}
            disabled={step === 1}
          >
            {locale === "ar" ? (
              <ChevronRight className="w-4 h-4" />
            ) : (
              <ChevronLeft className="w-4 h-4" />
            )}
            {t("back")}
          </Button>

          {step < 3 ? (
            <Button onClick={() => setStep((s) => s + 1)}>
              {t("next")}
              {locale === "ar" ? (
                <ChevronLeft className="w-4 h-4" />
              ) : (
                <ChevronRight className="w-4 h-4" />
              )}
            </Button>
          ) : (
            <Button as="link" href={`/${locale ?? ""}/response`}>
              {t("toPayment")}
              {locale === "ar" ? (
                <ChevronLeft className="w-4 h-4" />
              ) : (
                <ChevronRight className="w-4 h-4" />
              )}
            </Button>
          )}
        </div>

        <PlanSummary />
      </div>
    </div>
  );
}