/**
 * Cartes mémorisées pour éviter les re-renders inutiles
 */

import React, { memo } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { LucideIcon } from 'lucide-react';

// Card de statistiques optimisée
export interface StatsCardProps {
  title: string;
  value: string | number;
  description?: string;
  icon?: LucideIcon;
  iconColor?: string;
  trend?: {
    value: string;
    isPositive: boolean;
  };
  loading?: boolean;
}

export const StatsCard = memo(({
  title,
  value,
  description,
  icon: Icon,
  iconColor = "text-blue-600",
  trend,
  loading = false
}: StatsCardProps) => {
  if (loading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center animate-pulse">
            <div className="h-8 w-8 bg-gray-200 rounded"></div>
            <div className="ml-4 space-y-2 flex-1">
              <div className="h-4 bg-gray-200 rounded w-1/2"></div>
              <div className="h-6 bg-gray-200 rounded w-3/4"></div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="hover:shadow-lg transition-shadow duration-200">
      <CardContent className="p-6">
        <div className="flex items-center">
          {Icon && <Icon className={`h-8 w-8 ${iconColor}`} />}
          <div className="ml-4 flex-1">
            <p className="text-sm font-medium text-gray-600">{title}</p>
            <div className="flex items-center space-x-2">
              <p className="text-2xl font-bold text-gray-900">
                {typeof value === 'number' ? value.toLocaleString() : value}
              </p>
              {trend && (
                <Badge 
                  className={trend.isPositive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}
                >
                  {trend.value}
                </Badge>
              )}
            </div>
            {description && (
              <p className="text-sm text-gray-500 mt-1">{description}</p>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
});

StatsCard.displayName = 'StatsCard';

// Card d'action optimisée
export interface ActionCardProps {
  title: string;
  description: string;
  icon?: LucideIcon;
  iconColor?: string;
  bgColor?: string;
  actions?: Array<{
    label: string;
    onClick: () => void;
    variant?: 'default' | 'outline' | 'destructive';
    loading?: boolean;
  }>;
  loading?: boolean;
}

export const ActionCard = memo(({
  title,
  description,
  icon: Icon,
  iconColor = "text-blue-600",
  bgColor = "bg-blue-50 border-blue-200",
  actions = [],
  loading = false
}: ActionCardProps) => {
  if (loading) {
    return (
      <Card>
        <CardContent className="p-6 animate-pulse">
          <div className="space-y-3">
            <div className="flex items-center gap-3">
              <div className="h-8 w-8 bg-gray-200 rounded"></div>
              <div className="h-4 bg-gray-200 rounded w-1/2"></div>
            </div>
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
            <div className="flex gap-2">
              <div className="h-8 bg-gray-200 rounded w-20"></div>
              <div className="h-8 bg-gray-200 rounded w-20"></div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={`hover:shadow-md transition-all duration-200 ${bgColor}`}>
      <CardContent className="p-6">
        <div className="flex items-start gap-3 mb-4">
          {Icon && <Icon className={`h-8 w-8 ${iconColor} flex-shrink-0 mt-0.5`} />}
          <div className="flex-1">
            <h3 className="font-semibold text-gray-900">{title}</h3>
            <p className="text-sm text-gray-600 mt-1">{description}</p>
          </div>
        </div>
        
        {actions.length > 0 && (
          <div className="flex gap-2 flex-wrap">
            {actions.map((action, index) => (
              <Button
                key={index}
                variant={action.variant || 'default'}
                size="sm"
                onClick={action.onClick}
                disabled={action.loading}
                className="min-w-fit"
              >
                {action.loading ? (
                  <div className="h-4 w-4 animate-spin border-2 border-white border-t-transparent rounded-full" />
                ) : (
                  action.label
                )}
              </Button>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
});

ActionCard.displayName = 'ActionCard';

// Card de liste optimisée
export interface ListItemCardProps {
  id: string;
  title: string;
  subtitle?: string;
  description?: string;
  status?: {
    label: string;
    color: 'success' | 'warning' | 'error' | 'info';
  };
  metadata?: Array<{
    label: string;
    value: string;
  }>;
  actions?: Array<{
    label: string;
    onClick: (id: string) => void;
    icon?: LucideIcon;
    variant?: 'default' | 'outline' | 'destructive';
  }>;
  onClick?: (id: string) => void;
  loading?: boolean;
}

const getStatusColor = (color: 'success' | 'warning' | 'error' | 'info') => {
  switch (color) {
    case 'success': return 'bg-green-100 text-green-800';
    case 'warning': return 'bg-yellow-100 text-yellow-800';
    case 'error': return 'bg-red-100 text-red-800';
    case 'info': return 'bg-blue-100 text-blue-800';
    default: return 'bg-gray-100 text-gray-800';
  }
};

export const ListItemCard = memo(({
  id,
  title,
  subtitle,
  description,
  status,
  metadata = [],
  actions = [],
  onClick,
  loading = false
}: ListItemCardProps) => {
  if (loading) {
    return (
      <Card>
        <CardContent className="p-4 animate-pulse">
          <div className="space-y-2">
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
            <div className="h-3 bg-gray-200 rounded w-1/2"></div>
            <div className="h-3 bg-gray-200 rounded w-full"></div>
            <div className="flex justify-between">
              <div className="h-6 bg-gray-200 rounded w-16"></div>
              <div className="h-6 bg-gray-200 rounded w-20"></div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card 
      className={`hover:shadow-md transition-shadow duration-200 ${
        onClick ? 'cursor-pointer' : ''
      }`}
      onClick={() => onClick?.(id)}
      data-testid={`list-item-${id}`}
    >
      <CardContent className="p-4">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <h3 className="font-medium text-gray-900">{title}</h3>
              {status && (
                <Badge className={getStatusColor(status.color)} variant="outline">
                  {status.label}
                </Badge>
              )}
            </div>
            
            {subtitle && (
              <p className="text-sm text-gray-600 mb-1">{subtitle}</p>
            )}
            
            {description && (
              <p className="text-sm text-gray-500 mb-2">{description}</p>
            )}
            
            {metadata.length > 0 && (
              <div className="flex flex-wrap gap-4 text-xs text-gray-500">
                {metadata.map((item, index) => (
                  <span key={index}>
                    <span className="font-medium">{item.label}:</span> {item.value}
                  </span>
                ))}
              </div>
            )}
          </div>
          
          {actions.length > 0 && (
            <div className="flex gap-1 ml-4 flex-shrink-0">
              {actions.map((action, index) => (
                <Button
                  key={index}
                  variant={action.variant || 'outline'}
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation(); // Empêche le onClick de la carte
                    action.onClick(id);
                  }}
                  className="h-8 px-2"
                >
                  {action.icon && <action.icon className="h-3 w-3" />}
                  {!action.icon && action.label}
                </Button>
              ))}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
});

ListItemCard.displayName = 'ListItemCard';