"use client";

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

export function SimPlanCard({ plan, isFamily }: { plan: SimCatalogProduct; isFamily?: boolean }) {
  const displayPrice = plan.monthlyPrice ?? plan.unitPrice ?? plan.oneTimePrice ?? 0;
  const isFamilyPlan = isFamily ?? Boolean(plan.simHasFamilyDiscount);
  const router = useRouter();

  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-blue-600" />
            <span className="font-bold text-base text-gray-900">{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-green-600 font-medium mt-1">Discounted pricing applied</div>
        )}
      </div>

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

      {/* Action Button */}
      <Button
        className="w-full"
        onClick={() => {
          const { resetSimConfig, setSimConfig } = useCatalogStore.getState();
          resetSimConfig();
          setSimConfig({ planSku: plan.sku, currentStep: 1 });
          router.push(`/catalog/sim/configure?plan=${plan.sku}`);
        }}
        rightIcon={<ArrowRightIcon className="w-4 h-4" />}
      >
        Configure
      </Button>
    </AnimatedCard>
  );
}
