import { FC } from 'react';
import { StatsGrid, StatsCard } from './index';
import { pagePresets, businessMetrics, formatters } from './StatsPresets';
import { 
  Calendar, 
  CheckCircle, 
  Clock, 
  AlertTriangle, 
  Zap, 
  Shield 
} from 'lucide-react';

// Example: Production Management Stats (matching your screenshot)
export const ProductionStatsExample: FC = () => {
  // Sample data
  const productionData = {
    dailyTarget: 150,
    completed: 85,
    inProgress: 12,
    pending: 53,
    efficiency: 78,
    quality: 94,
  };

  return (
    <StatsGrid 
      stats={pagePresets.production(productionData)}
      columns={6}
      title="Gestión de Producción"
      description="Planifica y controla la producción diaria de tu panadería"
    />
  );
};

// Example: Custom Stats Configuration
export const CustomStatsExample = () => {
  return (
    <StatsGrid
      stats={[
        {
          title: 'Meta Diaria',
          value: 150,
          icon: Calendar,
          variant: 'default',
        },
        {
          title: 'Completado',
          value: 85,
          icon: CheckCircle,
          variant: 'success',
        },
        {
          title: 'En Proceso',
          value: 12,
          icon: Clock,
          variant: 'info',
        },
        {
          title: 'Pendiente',
          value: 53,
          icon: AlertTriangle,
          variant: 'warning',
        },
        {
          title: 'Eficiencia',
          value: 78,
          icon: Zap,
          variant: 'purple',
          formatValue: formatters.percentage,
        },
        {
          title: 'Calidad',
          value: 94,
          icon: Shield,
          variant: 'success',
          formatValue: formatters.percentage,
        },
      ]}
      columns={6}
    />
  );
};

// Example: Sales Dashboard
export const SalesStatsExample = () => {
  const salesData = {
    revenue: 15420,
    revenueGrowth: 12.5,
    orders: 142,
    ordersGrowth: -3.2,
    customers: 89,
  };

  return (
    <StatsGrid 
      stats={pagePresets.sales(salesData)}
      columns={3}
      title="Ventas del Día"
      description="Resumen de rendimiento de ventas"
    />
  );
};

// Example: Individual StatsCard Usage
export const IndividualStatsExample = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <StatsCard
        title="Pedidos Hoy"
        value={45}
        icon={CheckCircle}
        variant="success"
        trend={{
          value: 15,
          direction: 'up',
          label: '%',
        }}
      />
      
      <StatsCard
        title="Ingresos"
        value={2840}
        icon={Calendar}
        variant="info"
        formatValue={formatters.currency}
        subtitle="Últimas 24 horas"
      />
      
      <StatsCard
        title="Productos Vendidos"
        value={1250}
        icon={Zap}
        variant="default"
        formatValue={formatters.number}
        size="lg"
      />
      
      <StatsCard
        title="Satisfacción"
        value={96}
        icon={Shield}
        variant="success"
        formatValue={formatters.percentage}
        onClick={() => console.log('Navigate to satisfaction details')}
      />
    </div>
  );
};

// Example: Loading State
export const LoadingStatsExample = () => {
  return (
    <StatsGrid
      stats={[
        { title: '', value: '' },
        { title: '', value: '' },
        { title: '', value: '' },
        { title: '', value: '' },
      ]}
      loading
      columns={4}
    />
  );
};

// Example: Using Business Metrics Directly
export const BusinessMetricsExample = () => {
  return (
    <div className="space-y-8">
      <StatsGrid
        stats={[
          businessMetrics.production.dailyTarget(150),
          businessMetrics.production.completed(85),
          businessMetrics.production.efficiency(78),
        ]}
        columns={3}
        title="Producción"
      />

      <StatsGrid
        stats={[
          businessMetrics.sales.revenue(15420, { value: 12.5, direction: 'up' }),
          businessMetrics.sales.orders(142, { value: 3.2, direction: 'down' }),
          businessMetrics.sales.customers(89),
        ]}
        columns={3}
        title="Ventas"
      />

      <StatsGrid
        stats={[
          businessMetrics.inventory.totalItems(450),
          businessMetrics.inventory.lowStock(12),
          businessMetrics.inventory.outOfStock(3),
        ]}
        columns={3}
        title="Inventario"
      />
    </div>
  );
};