leopost/src/components/subscription/plan-card.tsx

'use client'

import { Plan, PlanFeatures } from '@/types/database'
import { formatFeatureValue, formatPrice, FEATURE_LABELS, getPlanBadgeColor } from '@/lib/plans'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { switchPlan } from '@/app/actions/subscription'
import { useTransition } from 'react'
import { useRouter } from 'next/navigation'

interface PlanCardProps {
  plan: Plan
  isCurrentPlan: boolean
  onPlanChange?: () => void
}

export function PlanCard({ plan, isCurrentPlan, onPlanChange }: PlanCardProps) {
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

  const features = plan.features as PlanFeatures

  function handleSwitchPlan() {
    startTransition(async () => {
      const result = await switchPlan(plan.id)
      if (result.success) {
        router.refresh()
        if (onPlanChange) {
          onPlanChange()
        }
      }
    })
  }

  // Highlight features to show
  const displayFeatures: (keyof PlanFeatures)[] = [
    'posts_per_month',
    'social_accounts',
    'ai_models',
    'image_generation',
    'automation',
  ]

  return (
    <Card className={`relative ${isCurrentPlan ? 'ring-2 ring-blue-500' : ''}`}>
      {isCurrentPlan && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
          <span className="bg-blue-500 text-white text-xs font-medium px-3 py-1 rounded-full">
            Piano attuale
          </span>
        </div>
      )}

      <CardHeader className="text-center pt-8">
        <div className="mb-2">
          <span className={`inline-block px-3 py-1 text-xs font-medium rounded-full border ${getPlanBadgeColor(plan.name)}`}>
            {plan.display_name_it}
          </span>
        </div>
        <CardTitle className="text-3xl">
          {formatPrice(plan.price_monthly)}
        </CardTitle>
        <CardDescription>
          {plan.name === 'free' && 'Perfetto per iniziare'}
          {plan.name === 'creator' && 'Per creator seri'}
          {plan.name === 'pro' && 'Per professionisti'}
        </CardDescription>
      </CardHeader>

      <CardContent>
        <ul className="space-y-3">
          {displayFeatures.map((featureKey) => {
            const value = features[featureKey]
            const isIncluded = value !== false

            return (
              <li key={featureKey} className="flex items-center gap-2">
                <span className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
                  isIncluded ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400'
                }`}>
                  {isIncluded ? '\u2713' : '\u2014'}
                </span>
                <span className="text-sm">
                  <span className="font-medium">
                    {formatFeatureValue(featureKey, value)}
                  </span>
                  {' '}
                  <span className="text-gray-500">
                    {FEATURE_LABELS[featureKey].toLowerCase()}
                  </span>
                </span>
              </li>
            )
          })}
        </ul>
      </CardContent>

      <CardFooter>
        {isCurrentPlan ? (
          <Button variant="outline" className="w-full" disabled>
            Piano attuale
          </Button>
        ) : (
          <Button
            className="w-full"
            onClick={handleSwitchPlan}
            disabled={isPending}
            variant={plan.name === 'pro' ? 'default' : 'outline'}
          >
            {isPending ? 'Cambio in corso...' : (
              plan.price_monthly === 0 ? 'Passa a Gratuito' : `Passa a ${plan.display_name_it}`
            )}
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}