import { CheckCircle2, Target } from 'lucide-react';

import type { ReactNode } from 'react';

import { Badge } from '@/Components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';

export interface PlanCardTier {
  name: string;
  description?: string;
  price: number | null;
  price_annual?: number | null;
  per_seat?: boolean;
  min_seats?: number | null;
  coming_soon?: boolean;
  contact_only?: boolean;
  limits?: Record<string, number | null>;
  features?: string[];
  best_for?: string;
}

export interface PriceDisplay {
  label: string;
  sublabel?: string | null;
  crossedOut?: string | null;
  savings?: number | null;
}

interface PlanCardProps {
  tierKey: string;
  tier: PlanCardTier;
  pricing: PriceDisplay;
  billingPeriod: 'monthly' | 'annual';
  isPro?: boolean;
  isCurrent?: boolean;
  isRecommended?: boolean;
  headerExtra?: ReactNode;
  children?: ReactNode; // CTA slot
}

export function PlanCard({
  tier,
  pricing,
  billingPeriod,
  isPro = false,
  isCurrent = false,
  isRecommended = false,
  headerExtra,
  children,
}: PlanCardProps) {
  return (
    <Card
      className={
        isPro
          ? 'border-primary ring-2 ring-primary shadow-lg'
          : isCurrent
            ? 'border-primary shadow-md'
            : ''
      }
    >
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">{tier.name}</CardTitle>
          <div className="flex items-center gap-2">
            {tier.coming_soon && <Badge variant="outline">Coming Soon</Badge>}
            {isPro && !isCurrent && !tier.coming_soon && !isRecommended && (
              <Badge variant="default">Chosen by most teams</Badge>
            )}
            {isRecommended && !isCurrent && !tier.coming_soon && (
              <Badge variant="default">Recommended for You</Badge>
            )}
            {pricing.savings && billingPeriod === 'annual' && !tier.coming_soon && (
              <Badge variant="success">Save ${pricing.savings}</Badge>
            )}
            {isCurrent && <Badge variant="secondary">Current</Badge>}
          </div>
        </div>
        <div className="space-y-2">
          <div className="flex items-baseline gap-2">
            {pricing.crossedOut && (
              <span className="text-lg text-muted-foreground line-through">
                {pricing.crossedOut}
              </span>
            )}
            <p className="text-2xl font-semibold text-foreground">{pricing.label}</p>
          </div>
          {pricing.sublabel && <p className="text-sm text-muted-foreground">{pricing.sublabel}</p>}
          {tier.per_seat && tier.min_seats && (
            <p className="text-xs text-muted-foreground">per seat, min {tier.min_seats} seats</p>
          )}
          {headerExtra}
          {tier.best_for && (
            <div className="flex items-start gap-2 rounded-md border border-primary/20 bg-primary/5 px-3 py-2">
              <Target aria-hidden="true" className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
              <p className="text-sm text-foreground">
                <span className="font-semibold text-primary">Best for:</span>{' '}
                <span className="font-medium">{tier.best_for}</span>
              </p>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {tier.description && <p className="text-sm text-muted-foreground">{tier.description}</p>}
        <ul className="space-y-2 text-sm">
          {(tier.features ?? []).map((feature) => (
            <li key={feature} className="flex items-center gap-2 text-muted-foreground">
              <CheckCircle2 aria-hidden="true" className="h-4 w-4 text-success shrink-0" />
              {feature}
            </li>
          ))}
        </ul>
        {children && <div className="pt-2">{children}</div>}
      </CardContent>
    </Card>
  );
}