'use client';

import * as React from 'react';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { cn } from '../../shared/utils';

export type FeatureCardColor =
  | 'primary'
  | 'chart-1'
  | 'chart-2'
  | 'chart-3'
  | 'chart-4'
  | 'chart-5'
  | 'success'
  | 'info'
  | 'warning'
  | 'destructive';

const colorTokens: Record<FeatureCardColor, { bg: string; icon: string }> = {
  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
  success: { bg: 'bg-success/10', icon: 'text-success' },
  info: { bg: 'bg-info/10', icon: 'text-info' },
  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
};

export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description: string;
  icon: React.ReactNode;
  color?: FeatureCardColor;
  badge?: string;
  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
  actionLabel?: string;
  actionVariant?: React.ComponentProps<typeof Button>['variant'];
  onAction?: () => void;
}

export function FeatureCard({
  title,
  description,
  icon,
  color = 'primary',
  badge,
  badgeVariant = 'default',
  actionLabel,
  actionVariant = 'outline',
  onAction,
  className,
  ...props
}: FeatureCardProps) {
  const { bg, icon: iconColor } = colorTokens[color];

  return (
    <Card
      className={cn(
        'flex flex-col h-full hover:shadow-md transition-shadow duration-200',
        className
      )}
      {...props}
    >
      <CardHeader>
        <div className="flex items-center gap-3">
          <div className={cn('p-2 rounded-[var(--radius)] shrink-0', bg)}>
            <div
              className={cn('size-6 flex items-center justify-center [&>svg]:size-6', iconColor)}
            >
              {icon}
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
            <CardTitle className="text-sm">{title}</CardTitle>
            {badge && (
              <Badge variant={badgeVariant} className="text-xs">
                {badge}
              </Badge>
            )}
          </div>
        </div>
      </CardHeader>

      <CardContent className="flex-1">
        <CardDescription className="text-sm leading-relaxed">{description}</CardDescription>
      </CardContent>

      {actionLabel && (
        <CardFooter>
          <Button variant={actionVariant} className="w-full" onClick={onAction}>
            {actionLabel}
          </Button>
        </CardFooter>
      )}
    </Card>
  );
}