"use client";

import { DevicePhoneMobileIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";
import type { SimCatalogProduct } from "@customer-portal/domain/services";
import { CardPricing } from "@/features/services/components/base/CardPricing";
import { CardBadge } from "@/features/services/components/base/CardBadge";
import { useRouter } from "next/navigation";
import { useCatalogStore } from "@/features/services/stores/services.store";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";

export type SimPlanCardAction = { label: string; href: string };
export type SimPlanCardActionResolver =
  | SimPlanCardAction
  | ((plan: SimCatalogProduct) => SimPlanCardAction);

export function SimPlanCard({
  plan,
  isFamily,
  action,
  disabled,
  disabledReason,
}: {
  plan: SimCatalogProduct;
  isFamily?: boolean | undefined;
  action?: SimPlanCardActionResolver | undefined;
  disabled?: boolean | undefined;
  disabledReason?: string | undefined;
}) {
  const displayPrice = plan.monthlyPrice ?? plan.unitPrice ?? plan.oneTimePrice ?? 0;
  const isFamilyPlan = isFamily ?? Boolean(plan.simHasFamilyDiscount);
  const router = useRouter();
  const servicesBasePath = useServicesBasePath();
  const resolvedAction = typeof action === "function" ? action(plan) : action;

  return (
    <AnimatedCard
      variant={isFamilyPlan ? "success" : "default"}
      className="p-6 w-full max-w-sm flex flex-col h-full"
    >
      {/* Header with data size and pricing */}
      <div className="flex items-start justify-between gap-4 mb-3">
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <DevicePhoneMobileIcon className="h-5 w-5 text-primary" />
            <span className="font-bold text-base text-foreground">{plan.simDataSize}</span>
          </div>
          {isFamilyPlan && <CardBadge text="Family Discount" variant="family" size="sm" />}
        </div>
      </div>

      {/* Pricing */}
      <div className="mb-4">
        <CardPricing monthlyPrice={displayPrice} size="sm" alignment="left" />
        {isFamilyPlan && (
          <div className="text-xs text-success font-medium mt-1">Discounted pricing applied</div>
        )}
      </div>

      {/* Description */}
      <div className="mb-4 flex-grow">
        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">{plan.name}</p>
      </div>

      {/* Action Button */}
      <Button
        className="w-full"
        disabled={Boolean(disabled)}
        onClick={() => {
          if (disabled) return;
          if (resolvedAction) {
            router.push(resolvedAction.href);
            return;
          }
          const { resetSimConfig, setSimConfig } = useCatalogStore.getState();
          resetSimConfig();
          setSimConfig({ planSku: plan.sku, currentStep: 1 });
          router.push(`${servicesBasePath}/sim/configure?planSku=${encodeURIComponent(plan.sku)}`);
        }}
        rightIcon={<ArrowRightIcon className="w-4 h-4" />}
      >
        {disabled ? disabledReason || "Not available" : (resolvedAction?.label ?? "Configure")}
      </Button>
    </AnimatedCard>
  );
}
