"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="p-6 border border-border hover:border-primary/40 transition-all duration-300 hover:shadow-lg flex flex-col h-full bg-white">
      {/* Header with icon and name */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-start gap-3">
          <div className="p-2.5 bg-primary/10 rounded-xl">
            <Globe className="h-6 w-6 text-primary" />
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-bold text-foreground">{plan.name}</h3>
            <span className="text-sm text-muted-foreground">International</span>
          </div>
        </div>
        <div className="p-1.5 rounded-full border border-primary/30">
          <Check className="h-4 w-4 text-primary" />
        </div>
      </div>

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

      {/* Features list */}
      <ul className="space-y-2 mb-6 flex-grow">
        {vpnFeatures.map((feature, index) => (
          <li key={index} className="flex items-start gap-2 text-sm">
            <svg
              className="h-4 w-4 text-gray-500 flex-shrink-0 mt-0.5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clipRule="evenodd"
              />
            </svg>
            <span className="text-muted-foreground">{feature}</span>
          </li>
        ))}
      </ul>

      {/* 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 {plan.name}
        </Button>
      </div>
    </AnimatedCard>
  );
}

export type { VpnPlanCardProps };
