import React from 'react';
import { clsx } from 'clsx';
import { Card } from '../ui';

export interface AnalyticsCardProps {
  /**
   * Card title
   */
  title?: string;
  /**
   * Card subtitle/description
   */
  subtitle?: string;
  /**
   * Card content
   */
  children: React.ReactNode;
  /**
   * Custom className
   */
  className?: string;
  /**
   * Action buttons for card header
   */
  actions?: React.ReactNode;
  /**
   * Loading state
   */
  loading?: boolean;
  /**
   * Empty state message
   */
  emptyMessage?: string;
  /**
   * Whether the card has data
   */
  isEmpty?: boolean;
}

/**
 * AnalyticsCard - Preset Card component for analytics pages
 *
 * Provides consistent styling and structure for analytics content cards:
 * - Standard padding (p-6)
 * - Rounded corners (rounded-lg)
 * - Title with consistent styling (text-lg font-semibold mb-4)
 * - Optional subtitle
 * - Optional header actions
 * - Loading state support
 * - Empty state support
 */
export const AnalyticsCard: React.FC<AnalyticsCardProps> = ({
  title,
  subtitle,
  children,
  className,
  actions,
  loading = false,
  emptyMessage,
  isEmpty = false,
}) => {
  return (
    <Card className={clsx('p-6', className)}>
      {/* Card Header */}
      {(title || subtitle || actions) && (
        <div className="mb-4">
          {/* Title Row */}
          {(title || actions) && (
            <div className="flex items-center justify-between mb-2">
              {title && (
                <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                  {title}
                </h3>
              )}
              {actions && <div className="flex items-center gap-2">{actions}</div>}
            </div>
          )}

          {/* Subtitle */}
          {subtitle && (
            <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>
          )}
        </div>
      )}

      {/* Loading State */}
      {loading && (
        <div className="flex flex-col items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)] mb-3"></div>
          <p className="text-sm text-[var(--text-secondary)]">Cargando datos...</p>
        </div>
      )}

      {/* Empty State */}
      {!loading && isEmpty && (
        <div className="flex flex-col items-center justify-center py-12">
          <svg
            className="w-12 h-12 text-[var(--text-tertiary)] mb-3"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
            />
          </svg>
          <p className="text-sm text-[var(--text-secondary)]">
            {emptyMessage || 'No hay datos disponibles'}
          </p>
        </div>
      )}

      {/* Card Content */}
      {!loading && !isEmpty && children}
    </Card>
  );
};
