"use client";

import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { ArrowRight, Globe, Check } from "lucide-react";
import type { VpnCatalogProduct } from "@customer-portal/domain/services";

interface VpnPlanCardProps {
  plan: VpnCatalogProduct;
}

const vpnFeatures = [
  "Secure VPN connection",
  "Pre-configured router",
  "Easy plug & play setup",
  "English support included",
];

export function VpnPlanCard({ plan }: VpnPlanCardProps) {
  return (
    <AnimatedCard className="overflow-hidden border border-border hover:border-primary/30 transition-all duration-300 hover:shadow-md flex flex-col h-full bg-card">
      {/* Top accent stripe */}
      <div className="h-0.5 w-full bg-gradient-to-r from-violet-500 to-purple-600" />

      <div className="p-5 flex flex-col h-full">
        {/* Header */}
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-start gap-3">
            <div className="p-2 bg-violet-500/10 rounded-lg">
              <Globe className="h-5 w-5 text-violet-600" />
            </div>
            <div>
              <h3 className="text-base font-bold text-foreground">{plan.name}</h3>
              <span className="text-xs text-muted-foreground">International</span>
            </div>
          </div>
        </div>

        {/* Pricing */}
        <div className="mb-4">
          <div className="flex items-baseline gap-0.5">
            <span className="text-xs text-primary font-medium">¥</span>
            <span className="text-2xl font-bold text-foreground">
              {(plan.monthlyPrice ?? 0).toLocaleString()}
            </span>
            <span className="text-xs text-muted-foreground">/month</span>
          </div>
          <p className="text-[11px] text-muted-foreground mt-0.5">Router rental included</p>
        </div>

        {/* Features */}
        <ul className="space-y-2 mb-5 flex-grow">
          {vpnFeatures.map((feature, index) => (
            <li key={index} className="flex items-start gap-2 text-xs">
              <Check className="h-3.5 w-3.5 text-primary/60 flex-shrink-0 mt-0.5" />
              <span className="text-muted-foreground">{feature}</span>
            </li>
          ))}
        </ul>

        {/* CTA */}
        <div className="mt-auto">
          <Button
            as="a"
            href={`/order?type=vpn&planSku=${encodeURIComponent(plan.sku)}`}
            className="w-full"
            size="sm"
            rightIcon={<ArrowRight className="w-3.5 h-3.5" />}
          >
            Select {plan.name}
          </Button>
        </div>
      </div>
    </AnimatedCard>
  );
}

export type { VpnPlanCardProps };
