import React, { useState, useEffect } from 'react';
import { 
  BarChart2, 
  Clock, 
  AlertTriangle, 
  CheckCircle, 
  Filter, 
  Search, 
  MoreVertical, 
  Download, 
  RotateCcw 
} from 'lucide-react';

const ProductionDashboard = () => {
  const [selectedFilter, setSelectedFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredOrders, setFilteredOrders] = useState([]);

  const productionOrders = [
    {
      id: 'OP-001',
      product: 'Sala Modelo X',
      status: 'in-progress',
      currentPhase: 'Ensamble',
      progress: 65,
      startDate: '2024-03-20',
      daysDelayed: 2,
      totalPieces: 10,
      completedPieces: 7,
      assignedLine: 'Línea 1',
      materialStatus: 'Completo',
      responsibleTeam: 'Equipo A'
    },
    {
      id: 'OP-002',
      product: 'Mesa Comedor',
      status: 'delayed',
      currentPhase: 'Materiales',
      progress: 20,
      startDate: '2024-03-22',
      daysDelayed: 3,
      totalPieces: 5,
      completedPieces: 1,
      assignedLine: 'Línea 2',
      materialStatus: 'Faltante',
      responsibleTeam: 'Equipo B'
    },
    {
      id: 'OP-003',
      product: 'Silla Ejecutiva',
      status: 'completed',
      currentPhase: 'Acabado',
      progress: 100,
      startDate: '2024-03-15',
      daysDelayed: 0,
      totalPieces: 15,
      completedPieces: 15,
      assignedLine: 'Línea 3',
      materialStatus: 'Completo',
      responsibleTeam: 'Equipo C'
    }
  ];

  useEffect(() => {
    let result = productionOrders;

    // Filtro por estado
    if (selectedFilter !== 'all') {
      result = result.filter(order => order.status === selectedFilter);
    }

    // Filtro por búsqueda
    if (searchTerm) {
      result = result.filter(order => 
        order.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
        order.product.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    setFilteredOrders(result);
  }, [selectedFilter, searchTerm]);

  // Inicializar filteredOrders en el primer render
  useEffect(() => {
    setFilteredOrders(productionOrders);
  }, []);

  const getStatusColor = (status) => {
    switch(status) {
      case 'in-progress': return 'bg-blue-100 text-blue-800';
      case 'delayed': return 'bg-red-100 text-red-800';
      case 'completed': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getStatusIcon = (status) => {
    switch(status) {
      case 'in-progress': return <Clock className="text-blue-600" />;
      case 'delayed': return <AlertTriangle className="text-red-600" />;
      case 'completed': return <CheckCircle className="text-green-600" />;
      default: return null;
    }
  };

  return (
    <div className="bg-gray-50 min-h-screen p-6">
      <div className="container mx-auto">
        {/* Encabezado con título y acciones */}
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold text-gray-800">Dashboard de Producción</h1>
          <div className="flex space-x-2">
            <button className="p-2 hover:bg-gray-200 rounded-full">
              <Download className="text-gray-600" />
            </button>
            <button className="p-2 hover:bg-gray-200 rounded-full">
              <RotateCcw className="text-gray-600" />
            </button>
          </div>
        </div>

        {/* Controles de filtrado y búsqueda */}
        <div className="mb-6 flex space-x-4">
          <div className="relative flex-grow">
            <input 
              type="text" 
              placeholder="Buscar orden o producto..."
              className="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            <Search className="absolute left-3 top-3 text-gray-400" />
          </div>
          
          <div className="flex items-center space-x-2">
            <Filter className="text-gray-600" />
            <select 
              className="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={selectedFilter}
              onChange={(e) => setSelectedFilter(e.target.value)}
            >
              <option value="all">Todos los Pedidos</option>
              <option value="in-progress">En Progreso</option>
              <option value="delayed">Retrasados</option>
              <option value="completed">Completados</option>
            </select>
          </div>
        </div>

        {/* Resumen estadístico */}
        <div className="grid grid-cols-4 gap-4 mb-6">
          <div className="bg-white p-4 rounded-lg shadow">
            <div className="text-sm text-gray-500">Total Pedidos</div>
            <div className="text-2xl font-bold">{productionOrders.length}</div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow">
            <div className="text-sm text-gray-500">En Progreso</div>
            <div className="text-2xl font-bold text-blue-600">
              {productionOrders.filter(o => o.status === 'in-progress').length}
            </div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow">
            <div className="text-sm text-gray-500">Retrasados</div>
            <div className="text-2xl font-bold text-red-600">
              {productionOrders.filter(o => o.status === 'delayed').length}
            </div>
          </div>
          <div className="bg-white p-4 rounded-lg shadow">
            <div className="text-sm text-gray-500">Completados</div>
            <div className="text-2xl font-bold text-green-600">
              {productionOrders.filter(o => o.status === 'completed').length}
            </div>
          </div>
        </div>

        {/* Lista de órdenes */}
        <div className="grid gap-6">
          {filteredOrders.map((order) => (
            <div 
              key={order.id} 
              className="bg-white shadow-md rounded-lg p-6 border-l-4 hover:shadow-lg transition-shadow"
              style={{
                borderLeftColor: 
                  order.status === 'in-progress' ? '#2563eb' : 
                  order.status === 'delayed' ? '#dc2626' : 
                  order.status === 'completed' ? '#16a34a' : '#6b7280'
              }}
            >
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center space-x-4">
                  <div className="text-xl font-semibold">{order.id}</div>
                  <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(order.status)}`}>
                    {order.status === 'in-progress' ? 'En Progreso' : 
                     order.status === 'delayed' ? 'Retrasado' : 
                     order.status === 'completed' ? 'Completado' : ''}
                  </span>
                </div>
                <div className="flex items-center space-x-2">
                  <button className="hover:bg-gray-100 p-1 rounded-full">
                    <MoreVertical className="text-gray-600" />
                  </button>
                  {getStatusIcon(order.status)}
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div>
                  <div className="text-lg font-medium text-gray-700">{order.product}</div>
                  <div className="text-sm text-gray-500">Fase Actual: {order.currentPhase}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-600">
                    <strong>Línea Asignada:</strong> {order.assignedLine}
                  </div>
                  <div className="text-sm text-gray-600">
                    <strong>Equipo Responsable:</strong> {order.responsibleTeam}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-600">
                    <strong>Estado Material:</strong> 
                    <span className={
                      order.materialStatus === 'Completo' 
                      ? 'text-green-600' 
                      : 'text-red-600'
                    }>
                      {' '}{order.materialStatus}
                    </span>
                  </div>
                </div>
              </div>

              <div className="mt-4">
                <div className="w-full bg-gray-200 rounded-full h-2.5 mb-2">
                  <div 
                    className="h-2.5 rounded-full" 
                    style={{
                      width: `${order.progress}%`,
                      backgroundColor: 
                        order.status === 'in-progress' ? '#2563eb' : 
                        order.status === 'delayed' ? '#dc2626' : 
                        order.status === 'completed' ? '#16a34a' : '#6b7280'
                    }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs text-gray-500">
                  <span>Progreso: {order.progress}%</span>
                  <span>{order.completedPieces}/{order.totalPieces} Piezas</span>
                </div>
              </div>

              <div className="mt-4 flex justify-between text-sm">
                <div>
                  <span className="font-medium">Fecha Inicio:</span> {order.startDate}
                </div>
                {order.daysDelayed > 0 && (
                  <div className="text-red-600">
                    <span className="font-medium">Días Retrasados:</span> {order.daysDelayed}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProductionDashboard;