import React from 'react';
import { PageHeader } from '../../components/layout';
import StatsGrid from '../../components/ui/Stats/StatsGrid';
import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
import ProcurementPlansToday from '../../components/domain/dashboard/ProcurementPlansToday';
import ProductionPlansToday from '../../components/domain/dashboard/ProductionPlansToday';
import {
  AlertTriangle,
  Clock,
  DollarSign,
  Package,
  TrendingUp,
  TrendingDown
} from 'lucide-react';

const DashboardPage: React.FC = () => {
  const criticalStats = [
    {
      title: 'Ventas Hoy',
      value: '€1,247',
      icon: DollarSign,
      variant: 'success' as const,
      trend: {
        value: 12,
        direction: 'up' as const,
        label: '% vs ayer'
      },
      subtitle: '+€135 más que ayer'
    },
    {
      title: 'Órdenes Pendientes',
      value: '23',
      icon: Clock,
      variant: 'warning' as const,
      trend: {
        value: 4,
        direction: 'down' as const,
        label: '% vs ayer'
      },
      subtitle: 'Requieren atención'
    },
    {
      title: 'Productos Vendidos',
      value: '156',
      icon: Package,
      variant: 'info' as const,
      trend: {
        value: 8,
        direction: 'up' as const,
        label: '% vs ayer'
      },
      subtitle: '+12 unidades más'
    },
    {
      title: 'Stock Crítico',
      value: '4',
      icon: AlertTriangle,
      variant: 'error' as const,
      trend: {
        value: 100,
        direction: 'up' as const,
        label: '% vs ayer'
      },
      subtitle: 'Acción requerida'
    }
  ];

  const handleOrderItem = (itemId: string) => {
    console.log('Ordering item:', itemId);
  };

  const handleStartOrder = (orderId: string) => {
    console.log('Starting production order:', orderId);
  };

  const handlePauseOrder = (orderId: string) => {
    console.log('Pausing production order:', orderId);
  };

  const handleViewDetails = (id: string) => {
    console.log('Viewing details for:', id);
  };

  const handleViewAllPlans = () => {
    console.log('Viewing all plans');
  };

  return (
    <div className="space-y-6 p-4 sm:p-6">
      <PageHeader
        title="Panel de Control"
        description="Vista general de tu panadería"
      />

      {/* Critical Metrics using StatsGrid */}
      <StatsGrid
        stats={criticalStats}
        columns={4}
        title="Métricas Críticas"
        description="Los datos más importantes para la gestión diaria de tu panadería"
        gap="lg"
        className="mb-6"
      />

      {/* Full width blocks - one after another */}
      <div className="space-y-6">
        {/* 1. Real-time alerts block */}
        <RealTimeAlerts />

        {/* 2. Procurement plans block */}
        <ProcurementPlansToday
          onOrderItem={handleOrderItem}
          onViewDetails={handleViewDetails}
          onViewAllPlans={handleViewAllPlans}
        />

        {/* 3. Production plans block */}
        <ProductionPlansToday
          onStartOrder={handleStartOrder}
          onPauseOrder={handlePauseOrder}
          onViewDetails={handleViewDetails}
          onViewAllPlans={handleViewAllPlans}
        />
      </div>
    </div>
  );
};

export default DashboardPage;