import React from "react";
import { CreditCard, ShoppingBag, ArrowRight, Loader2, AlertCircle } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

import {
  TenantWelcomeLayout,
  WelcomeStepCard,
  OnboardingCTAList,
  useOnboardingProgress,
} from "..";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { FrostedSurface } from "../../components/tenant/frosted-surface";
import { ADMIN_BILLING_PATH, ADMIN_WELCOME_SUMMARY_PATH } from "../../constants";
import { useTenantPackages } from "../hooks/useTenantPackages";
import { Package } from "../../api";

const DEFAULT_CURRENCY = "EUR";

function useLocaleFormats(locale: string) {
  const currencyFormatter = React.useMemo(
    () =>
      new Intl.NumberFormat(locale, {
        style: "currency",
        currency: DEFAULT_CURRENCY,
        minimumFractionDigits: 0,
      }),
    [locale]
  );

  const dateFormatter = React.useMemo(
    () =>
      new Intl.DateTimeFormat(locale, {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      }),
    [locale]
  );

  return { currencyFormatter, dateFormatter };
}

function formatFeatureLabel(t: ReturnType<typeof useTranslation>["t"], key: string): string {
  const translationKey = `packages.features.${key}`;
  const translated = t(translationKey);
  if (translated !== translationKey) {
    return translated;
  }
  return key
    .split("_")
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}

export default function WelcomePackagesPage() {
  const navigate = useNavigate();
  const { markStep } = useOnboardingProgress();
  const packagesState = useTenantPackages();
  const { t, i18n } = useTranslation("onboarding");
  const locale = i18n.language?.startsWith("en") ? "en-GB" : "de-DE";
  const { currencyFormatter, dateFormatter } = useLocaleFormats(locale);

  React.useEffect(() => {
    if (packagesState.status === "success") {
      const active = packagesState.activePackage;
      markStep({
        packageSelected: Boolean(active),
        lastStep: "packages",
        selectedPackage: active
          ? {
              id: active.package_id,
              name: active.package_name,
              priceText:
                typeof active.price === "number"
                  ? currencyFormatter.format(active.price)
                  : t("packages.card.onRequest"),
              isSubscription: Boolean(active.package_limits?.subscription),
            }
          : null,
        serverStep: active ? "package_selected" : undefined,
        meta: active
          ? {
              packages: [active.package_id],
              is_active: active.active,
            }
          : undefined,
      });
    }
  }, [packagesState, markStep, currencyFormatter, t]);

  const handleSelectPackage = React.useCallback(
    (pkg: Package) => {
      const priceText =
        typeof pkg.price === "number" ? currencyFormatter.format(pkg.price) : t("packages.card.onRequest");

      markStep({
        packageSelected: true,
        lastStep: "packages",
        selectedPackage: {
          id: pkg.id,
          name: pkg.name,
          priceText,
          isSubscription: Boolean(pkg.features?.subscription),
        },
        serverStep: "package_selected",
        meta: { packages: [pkg.id] },
      });

      navigate(ADMIN_WELCOME_SUMMARY_PATH, { state: { packageId: pkg.id } });
    },
    [currencyFormatter, markStep, navigate, t]
  );

  const renderPackageList = () => {
    if (packagesState.status === "loading") {
      return (
        <FrostedSurface className="flex items-center gap-3 border border-white/20 p-6 text-sm text-slate-600 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-300">
          <Loader2 className="size-5 animate-spin text-rose-400" />
          {t("packages.state.loading")}
        </FrostedSurface>
      );
    }

    if (packagesState.status === "error") {
      return (
        <Alert variant="destructive" className="border-rose-300/60 bg-rose-50/80 text-rose-700 dark:border-rose-500/40 dark:bg-rose-500/15 dark:text-rose-200">
          <AlertCircle className="size-4" />
          <AlertTitle>{t("packages.state.errorTitle")}</AlertTitle>
          <AlertDescription>{packagesState.message ?? t("packages.state.errorDescription")}</AlertDescription>
        </Alert>
      );
    }

    if (packagesState.status === "success" && packagesState.catalog.length === 0) {
      return (
        <Alert variant="default" className="border-white/20 bg-white/70 text-slate-700 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/80 dark:text-slate-300">
          <AlertTitle>{t("packages.state.emptyTitle")}</AlertTitle>
          <AlertDescription>{t("packages.state.emptyDescription")}</AlertDescription>
        </Alert>
      );
    }

    if (packagesState.status !== "success") {
      return null;
    }

    return (
      <div className="grid gap-4 md:grid-cols-2">
        {packagesState.catalog.map((pkg) => {
          const isActive = packagesState.activePackage?.package_id === pkg.id;
          const purchased = packagesState.purchasedPackages.find((tenantPkg) => tenantPkg.package_id === pkg.id);
          const featureLabels = Object.entries(pkg.features ?? {})
            .filter(([, enabled]) => Boolean(enabled))
            .map(([key]) => formatFeatureLabel(t, key));

          const isSubscription = Boolean(pkg.features?.subscription);
          const priceText =
            typeof pkg.price === "number" ? currencyFormatter.format(pkg.price ?? 0) : t("packages.card.onRequest");

          const badges: string[] = [];
          if (pkg.max_guests) {
            badges.push(t("packages.card.badges.guests", { count: pkg.max_guests }));
          }
          if (pkg.gallery_days) {
            badges.push(t("packages.card.badges.days", { count: pkg.gallery_days }));
          }
          if (pkg.max_photos) {
            badges.push(t("packages.card.badges.photos", { count: pkg.max_photos }));
          }

          return (
            <FrostedSurface
              key={pkg.id}
              className="flex flex-col gap-4 border border-white/20 p-6 text-slate-900 shadow-md shadow-rose-200/20 transition-colors duration-200 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100"
            >
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-sm font-semibold uppercase tracking-[0.25em] text-rose-400 dark:text-rose-200">
                    {t(isSubscription ? "packages.card.subscription" : "packages.card.creditPack")}
                  </p>
                  <h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100">{pkg.name}</h3>
                </div>
                <span className="text-lg font-medium text-rose-400 dark:text-rose-200">{priceText}</span>
              </div>
              <p className="text-sm text-slate-600 dark:text-slate-300">
                {pkg.max_photos
                  ? t("packages.card.descriptionWithPhotos", { count: pkg.max_photos })
                  : t("packages.card.description")}
              </p>
              <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-wide text-rose-400 dark:text-rose-200">
                {badges.map((badge) => (
                  <span key={badge} className="rounded-full bg-rose-100/80 px-3 py-1 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-100">
                    {badge}
                  </span>
                ))}
                {featureLabels.map((feature) => (
                  <span key={feature} className="rounded-full bg-rose-100/80 px-3 py-1 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-100">
                    {feature}
                  </span>
                ))}
                {isActive ? (
                  <span className="rounded-full bg-sky-100/80 px-3 py-1 text-sky-600 shadow-inner shadow-sky-200/40 dark:bg-sky-500/20 dark:text-sky-200">
                    {t("packages.card.active")}
                  </span>
                ) : null}
              </div>
              <div className="flex flex-col gap-3 pt-2">
                <Button
                  size="lg"
                  className="rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30 hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
                  onClick={() => handleSelectPackage(pkg)}
                  disabled={isActive}
                >
                  {isActive ? t("packages.card.active") : t("packages.card.select")}
                  <ArrowRight className="ml-2 size-4" />
                </Button>
                {purchased ? (
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    {t("packages.card.purchased", {
                      date: purchased.purchased_at
                        ? dateFormatter.format(new Date(purchased.purchased_at))
                        : t("packages.card.purchasedUnknown"),
                    })}
                  </p>
                ) : null}
                <Button
                  variant="ghost"
                  className="text-sm text-slate-600 hover:text-rose-400 dark:text-slate-400 dark:hover:text-rose-200"
                  onClick={() => navigate(ADMIN_BILLING_PATH)}
                >
                  <CreditCard className="mr-2 h-4 w-4" />
                  {t("packages.card.viewBilling")}
                </Button>
              </div>
            </FrostedSurface>
          );
        })}
      </div>
    );
  };

  return (
    <TenantWelcomeLayout
      eyebrow={t("packages.layout.eyebrow")}
      title={t("packages.layout.title")}
      subtitle={t("packages.layout.subtitle")}
    >
      <WelcomeStepCard
        step={2}
        totalSteps={4}
        title={t("packages.step.title")}
        description={t("packages.step.description")}
        icon={CreditCard}
      >
        {renderPackageList()}
      </WelcomeStepCard>

      <OnboardingCTAList
        actions={[
          {
            id: "skip-to-billing",
            label: t("packages.cta.billing.label"),
            description: t("packages.cta.billing.description"),
            buttonLabel: t("packages.cta.billing.button"),
            href: ADMIN_BILLING_PATH,
            icon: ShoppingBag,
            variant: "secondary",
          },
          {
            id: "continue",
            label: t("packages.cta.summary.label"),
            description: t("packages.cta.summary.description"),
            buttonLabel: t("packages.cta.summary.button"),
            onClick: () => navigate(ADMIN_WELCOME_SUMMARY_PATH),
            icon: ArrowRight,
          },
        ]}
      />
    </TenantWelcomeLayout>
  );
}