"use client";
import { Card } from "@/components/ui/card";
import { useTranslations } from "next-intl";
import SummaryItem from "./SummaryItem";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { getPackageDetails } from "@/services/packageService";
import { Package } from "@/types/package";
import { Skeleton } from "@/components/ui/skeleton";

export default function SubscriptionSummaryCard() {
  const t = useTranslations("SuccessPage");
  const searchParams = useSearchParams();
  const [loading, setLoading] = useState(true);
  const [packageData, setPackageData] = useState<Package | null>(null);
  const [payType, setPayType] = useState<"month" | "year">("month");

  useEffect(() => {
    const fetchPackage = async () => {
      const packageId =
        searchParams.get("package_id") ||
        localStorage.getItem("selected_package_id");
      const duration =
        searchParams.get("duration") ||
        localStorage.getItem("selected_pay_type");
      setPayType(duration === "year" ? "year" : "month");

      if (packageId) {
        const details = await getPackageDetails(packageId);
        setPackageData(details);
      }
      setLoading(false);
    };

    fetchPackage();
  }, [searchParams]);

  const isYearly = payType === "year";
  const price = isYearly
    ? (packageData?.year_price ?? packageData?.price)
    : (packageData?.month_price ?? packageData?.price);
  const billingCycle = isYearly
    ? "year"
    : (packageData?.duration_type ?? "month");

  const isTrial = !!packageData?.is_free;

  const summaryItems = isTrial
    ? [
        { label: t("packageName"), value: t("trialPackage") },
        { label: t("packageValue"), value: t("free") },
        {
          label: t("trialDurationLabel"),
          value: t("trialDuration", {
            days: packageData?.free_package_days_count ?? 0,
          }),
        },
      ]
    : [
    {
      label: t("packageName"),
      value: packageData?.name || (loading ? "..." : t("premiumPackage")),
    },
    {
      label: t("packageValue"),
      value: price || (loading ? "..." : "500"),
    },
    {
      label: t("billingCycle"),
      value: t(billingCycle) || (loading ? "..." : t("monthly")),
    },
  ];

  return (
    <Card className="gap-5 p-5 lg:p-10">
      <h3 className="text-[16px] sm:text-[20px] md:text-[24px] font-bold">
        {t("subscriptionSummary")}
      </h3>
      <div className="flex flex-col gap-4">
        {loading
          ? Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex justify-between items-center">
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-4 w-32" />
              </div>
            ))
          : summaryItems.map((item, index) => (
              <SummaryItem
                key={index}
                label={item.label}
                value={item.value}
                currency={packageData?.currency}
                showCurrency={!isTrial && item.label === t("packageValue")}
              />
            ))}
      </div>
    </Card>
  );
}