import { motion } from 'framer-motion';
import { Check } from 'lucide-react';
import { Card, Button } from '@/components/ui';
import { cn, formatCurrency } from '@/lib/utils';
import type { PricingTier } from '@/types/quote';

export interface PricingCardProps {
  tier: PricingTier;
  isSelected: boolean;
  deviceCount: number;
  onSelect: (tierId: string) => void;
}

export function PricingCard({ tier, isSelected, deviceCount, onSelect }: PricingCardProps) {
  const monthlyEstimate = tier.basePrice + tier.perDevicePrice * deviceCount;

  return (
    <motion.div
      whileHover={{ y: -3 }}
      transition={{ duration: 0.2 }}
    >
      <Card
        variant={isSelected ? 'highlighted' : 'default'}
        padding="none"
        className={cn(
          'relative overflow-hidden',
          tier.recommended && !isSelected && 'ring-2 ring-[#fe7400]/30'
        )}
      >
        {/* Recommended badge */}
        {tier.recommended && (
          <div className="bg-gradient-accent text-white text-[11px] font-bold px-3 py-1.5 text-center uppercase tracking-wider"
               style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            Recommended
          </div>
        )}

        <div className="p-6">
          {/* Header */}
          <div className="mb-4">
            <h3 className="text-xl font-bold text-[#333d49]"
                style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
              {tier.name}
            </h3>
            <p className="text-sm text-gray-400 mt-1">{tier.description}</p>
          </div>

          {/* Pricing */}
          <div className="mb-6">
            <div className="flex items-baseline gap-1">
              <span className="text-3xl font-bold text-[#333d49]"
                    style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                {formatCurrency(monthlyEstimate)}
              </span>
              <span className="text-gray-400">/month</span>
            </div>
            <p className="text-xs text-gray-400 mt-1">
              {formatCurrency(tier.basePrice)} base + {formatCurrency(tier.perDevicePrice)}/device
            </p>
          </div>

          {/* Features */}
          <ul className="space-y-2.5 mb-6">
            {tier.features.map((feature, index) => (
              <li key={index} className="flex items-start gap-2.5 text-sm">
                <div className="w-4 h-4 rounded-full bg-[#fe7400]/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <Check className="w-2.5 h-2.5 text-[#fe7400]" strokeWidth={3} />
                </div>
                <span className="text-gray-600">{feature}</span>
              </li>
            ))}
          </ul>

          {/* Select button */}
          <Button
            variant={isSelected ? 'primary' : 'outline'}
            className="w-full"
            onClick={() => onSelect(tier.id)}
          >
            {isSelected ? 'Selected' : 'Select Plan'}
          </Button>
        </div>
      </Card>
    </motion.div>
  );
}
