"use client";

import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { ArrowRight, Check, ShieldCheck } from "lucide-react";
import type { VpnCatalogProduct } from "@customer-portal/domain/services";
import { CardPricing } from "@/features/services/components/base/CardPricing";
import { cn } from "@/shared/utils/cn";
import { getVpnRegionConfig } from "@/features/services/utils";

interface VpnPlanCardProps {
  plan: VpnCatalogProduct;
}

export function VpnPlanCard({ plan }: VpnPlanCardProps) {
  const region = getVpnRegionConfig(plan.name);
  const isUS = region.accent === "blue";
  const isUK = region.accent === "red";

  return (
    <AnimatedCard
      className={cn(
        "p-6 transition-all duration-300 hover:shadow-lg flex flex-col h-full",
        "border hover:-translate-y-0.5",
        isUS && "border-blue-500/30 hover:border-blue-500/50",
        isUK && "border-red-500/30 hover:border-red-500/50",
        !isUS && !isUK && "border-primary/20 hover:border-primary/40"
      )}
    >
      {/* Header with flag and region */}
      <div className="flex items-start gap-4 mb-5">
        {/* Flag/Icon */}
        <div
          className={cn(
            "w-14 h-14 rounded-xl flex items-center justify-center text-2xl",
            isUS && "bg-blue-500/10",
            isUK && "bg-red-500/10",
            !isUS && !isUK && "bg-primary/10"
          )}
          role="img"
          aria-label={region.flagAlt}
        >
          {region.flag}
        </div>

        {/* Title and location */}
        <div className="flex-1">
          <h3 className="text-xl font-semibold text-foreground">{plan.name}</h3>
          <p className="text-sm text-muted-foreground">{region.location}</p>
        </div>

        {/* Shield icon */}
        <div
          className={cn(
            "p-2 rounded-lg",
            isUS && "bg-blue-500/10 text-blue-600",
            isUK && "bg-red-500/10 text-red-600",
            !isUS && !isUK && "bg-primary/10 text-primary"
          )}
        >
          <ShieldCheck className="h-5 w-5" />
        </div>
      </div>

      {/* Pricing */}
      <div className="mb-5">
        <CardPricing monthlyPrice={plan.monthlyPrice} size="lg" alignment="left" />
        <p className="text-xs text-muted-foreground mt-1">Router rental included</p>
      </div>

      {/* Features list */}
      <div className="flex-1 mb-5">
        <ul className="space-y-2">
          {region.features.map((feature, index) => (
            <li key={index} className="flex items-start gap-2 text-sm">
              <Check
                className={cn(
                  "h-4 w-4 mt-0.5 flex-shrink-0",
                  isUS && "text-blue-500",
                  isUK && "text-red-500",
                  !isUS && !isUK && "text-primary"
                )}
              />
              <span className="text-muted-foreground">{feature}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Action Button */}
      <div className="mt-auto">
        <Button
          as="a"
          href={`/order?type=VPN&planSku=${encodeURIComponent(plan.sku)}`}
          className="w-full"
          rightIcon={<ArrowRight className="w-4 h-4" />}
        >
          Select {region.region}
        </Button>
      </div>
    </AnimatedCard>
  );
}

export type { VpnPlanCardProps };
