import { ReactNode } from 'react';
import { Button } from './button';
import { Card, CardContent } from './card';
import { cn } from '@/lib/utils';

// FE-COMP-003: Add empty states to all list views

/**
 * EmptyStateProps - Propriétés du composant EmptyState
 *
 * @interface EmptyStateProps
 */
export interface EmptyStateProps {
  /**
   * Icône à afficher au-dessus du titre
   *
   * @example
   * ```tsx
   * <EmptyState icon={<Inbox />} title="Aucun élément" />
   * ```
   */
  icon?: ReactNode;

  /**
   * Titre de l'état vide (requis)
   *
   * @example
   * ```tsx
   * <EmptyState title="Aucun résultat trouvé" />
   * ```
   */
  title: string;

  /**
   * Description optionnelle sous le titre
   *
   * @example
   * ```tsx
   * <EmptyState
   *   title="Aucun résultat"
   *   description="Essayez de modifier vos critères de recherche"
   * />
   * ```
   */
  description?: string;

  /**
   * Action optionnelle (bouton) à afficher sous la description
   *
   * @example
   * ```tsx
   * <EmptyState
   *   title="Aucun élément"
   *   action={{
   *     label: "Créer un élément",
   *     onClick: () => handleCreate(),
   *     variant: "primary"
   *   }}
   * />
   * ```
   */
  action?: {
    /** Texte du bouton */
    label: string;
    /** Fonction appelée lors du clic */
    onClick: () => void;
    /** Variant du bouton */
    variant?: 'default' | 'outline' | 'ghost';
  };

  /**
   * Classes CSS personnalisées
   */
  className?: string;

  /**
   * Taille de l'état vide
   *
   * - `sm`: Petit (py-6, icône h-8 w-8)
   * - `md`: Moyen (py-12, icône h-12 w-12) - par défaut
   * - `lg`: Grand (py-16, icône h-16 w-16)
   *
   * @default 'md'
   */
  size?: 'sm' | 'md' | 'lg';

  /**
   * Variante d'affichage de l'état vide
   *
   * - `default`: Affiché dans un Card (comportement actuel)
   * - `centered`: Centré verticalement et horizontalement dans le parent
   * - `card`: Affiché dans un Card avec bordure en pointillé
   *
   * @default 'default'
   */
  variant?: 'default' | 'centered' | 'card';
}

/**
 * EmptyState - Composant réutilisable pour afficher des états vides dans les listes
 *
 * Composant pour afficher un état vide lorsqu'une liste ou une section est vide.
 * Design Kodo intégré avec support pour icône, titre, description et action.
 * Inclut une animation d'entrée subtile (fade-in + scale) pour un rendu poli.
 *
 * FE-COMP-003: Add empty states to all list views
 *
 * @example
 * ```tsx
 * // État vide simple
 * <EmptyState
 *   title="Aucun élément trouvé"
 *   description="Il n'y a pas encore d'éléments à afficher"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // État vide centré avec icône et action
 * <EmptyState
 *   variant="centered"
 *   icon={<Inbox />}
 *   title="Aucun message"
 *   description="Vous n'avez pas encore de messages"
 *   action={{
 *     label: "Créer un message",
 *     onClick: () => handleCreate(),
 *     variant: "primary"
 *   }}
 * />
 * ```
 *
 * @component
 * @param {EmptyStateProps} props - Propriétés du composant
 * @returns {JSX.Element} Card contenant l'état vide stylisé
 */
export function EmptyState({
  icon,
  title,
  description,
  action,
  className,
  size = 'md',
  variant = 'default',
}: EmptyStateProps) {
  const sizeClasses = {
    sm: 'py-6',
    md: 'py-12',
    lg: 'py-16',
  };

  const iconSizeClasses = {
    sm: 'h-8 w-8',
    md: 'h-12 w-12',
    lg: 'h-16 w-16',
  };

  const iconBgSizeClasses = {
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-5',
  };

  const content = (
    <div className="flex flex-col items-center animate-empty-state-in">
      {icon && (
        <div className="flex justify-center mb-4">
          <div
            className={cn(
              'bg-muted rounded-full flex items-center justify-center',
              iconBgSizeClasses[size],
            )}
          >
            <div
              className={cn('text-muted-foreground', iconSizeClasses[size])}
            >
              {icon}
            </div>
          </div>
        </div>
      )}
      <h3 className="text-lg font-semibold mb-2 text-foreground font-heading">
        {title}
      </h3>
      {description && (
        <p className="text-sm text-muted-foreground mb-4 max-w-md mx-auto text-center">
          {description}
        </p>
      )}
      {action && (
        <Button
          onClick={action.onClick}
          variant={action.variant || 'default'}
          size={size === 'sm' ? 'sm' : 'default'}
        >
          {action.label}
        </Button>
      )}
    </div>
  );

  if (variant === 'centered') {
    return (
      <div
        className={cn(
          'flex flex-1 items-center justify-center text-center',
          sizeClasses[size],
          className,
        )}
      >
        {content}
      </div>
    );
  }

  if (variant === 'card') {
    return (
      <div
        className={cn(
          'border-2 border-dashed border-border rounded-xl text-center',
          sizeClasses[size],
          className,
        )}
      >
        {content}
      </div>
    );
  }

  return (
    <Card className={cn(className)}>
      <CardContent className={cn('text-center', sizeClasses[size])}>
        {content}
      </CardContent>
    </Card>
  );
}
