import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Clock, Zap, Wrench, Thermometer, Activity, Search, Filter, Download, TrendingUp, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
import { LoadingSpinner } from '../../../../components/shared';
import { PageHeader } from '../../../../components/layout';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { Equipment } from '../../../../types/equipment';

const MOCK_EQUIPMENT: Equipment[] = [
  {
    id: '1',
    name: 'Horno Principal #1',
    type: 'oven',
    model: 'Miwe Condo CO 4.1212',
    serialNumber: 'MCO-2021-001',
    location: 'Área de Horneado - Zona A',
    status: 'operational',
    installDate: '2021-03-15',
    lastMaintenance: '2024-01-15',
    nextMaintenance: '2024-04-15',
    maintenanceInterval: 90,
    temperature: 220,
    targetTemperature: 220,
    efficiency: 92,
    uptime: 98.5,
    energyUsage: 45.2,
    utilizationToday: 87,
    alerts: [],
    maintenanceHistory: [
      {
        id: '1',
        date: '2024-01-15',
        type: 'preventive',
        description: 'Limpieza general y calibración de termostatos',
        technician: 'Juan Pérez',
        cost: 150,
        downtime: 2,
        partsUsed: ['Filtros de aire', 'Sellos de puerta']
      }
    ],
    specifications: {
      power: 45,
      capacity: 24,
      dimensions: { width: 200, height: 180, depth: 120 },
      weight: 850
    }
  },
  {
    id: '2',
    name: 'Batidora Industrial #2',
    type: 'mixer',
    model: 'Hobart HL800',
    serialNumber: 'HHL-2020-002',
    location: 'Área de Preparación - Zona B',
    status: 'warning',
    installDate: '2020-08-10',
    lastMaintenance: '2024-01-20',
    nextMaintenance: '2024-02-20',
    maintenanceInterval: 30,
    efficiency: 88,
    uptime: 94.2,
    energyUsage: 12.8,
    utilizationToday: 76,
    alerts: [
      {
        id: '1',
        type: 'warning',
        message: 'Vibración inusual detectada en el motor',
        timestamp: '2024-01-23T10:30:00Z',
        acknowledged: false
      },
      {
        id: '2',
        type: 'info',
        message: 'Mantenimiento programado en 5 días',
        timestamp: '2024-01-23T08:00:00Z',
        acknowledged: true
      }
    ],
    maintenanceHistory: [
      {
        id: '1',
        date: '2024-01-20',
        type: 'corrective',
        description: 'Reemplazo de correas de transmisión',
        technician: 'María González',
        cost: 85,
        downtime: 4,
        partsUsed: ['Correa tipo V', 'Rodamientos']
      }
    ],
    specifications: {
      power: 15,
      capacity: 80,
      dimensions: { width: 120, height: 150, depth: 80 },
      weight: 320
    }
  },
  {
    id: '3',
    name: 'Cámara de Fermentación #1',
    type: 'proofer',
    model: 'Bongard EUROPA 16.18',
    serialNumber: 'BEU-2022-001',
    location: 'Área de Fermentación',
    status: 'maintenance',
    installDate: '2022-06-20',
    lastMaintenance: '2024-01-23',
    nextMaintenance: '2024-01-24',
    maintenanceInterval: 60,
    temperature: 32,
    targetTemperature: 35,
    efficiency: 0,
    uptime: 85.1,
    energyUsage: 0,
    utilizationToday: 0,
    alerts: [
      {
        id: '1',
        type: 'info',
        message: 'En mantenimiento programado',
        timestamp: '2024-01-23T06:00:00Z',
        acknowledged: true
      }
    ],
    maintenanceHistory: [
      {
        id: '1',
        date: '2024-01-23',
        type: 'preventive',
        description: 'Mantenimiento programado - sistema de humidificación',
        technician: 'Carlos Rodríguez',
        cost: 200,
        downtime: 8,
        partsUsed: ['Sensor de humedad', 'Válvulas']
      }
    ],
    specifications: {
      power: 8,
      capacity: 16,
      dimensions: { width: 180, height: 200, depth: 100 },
      weight: 450
    }
  }
];

const MaquinariaPage: React.FC = () => {
  const { t } = useTranslation(['equipment', 'common']);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<Equipment['status'] | 'all'>('all');
  const [selectedItem, setSelectedItem] = useState<Equipment | null>(null);
  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
  
  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';

  // Mock functions for equipment actions - these would be replaced with actual API calls
  const handleCreateEquipment = () => {
    console.log('Create new equipment');
    // Implementation would go here
  };

  const handleEditEquipment = (equipmentId: string) => {
    console.log('Edit equipment:', equipmentId);
    // Implementation would go here
  };

  const handleScheduleMaintenance = (equipmentId: string) => {
    console.log('Schedule maintenance for equipment:', equipmentId);
    // Implementation would go here
  };

  const handleAcknowledgeAlert = (equipmentId: string, alertId: string) => {
    console.log('Acknowledge alert:', alertId, 'for equipment:', equipmentId);
    // Implementation would go here
  };

  const handleViewMaintenanceHistory = (equipmentId: string) => {
    console.log('View maintenance history for equipment:', equipmentId);
    // Implementation would go here
  };

  const filteredEquipment = useMemo(() => {
    return MOCK_EQUIPMENT.filter(eq => {
      const matchesSearch = !searchTerm ||
        eq.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        eq.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
        eq.type.toLowerCase().includes(searchTerm.toLowerCase());

      const matchesStatus = statusFilter === 'all' || eq.status === statusFilter;

      return matchesSearch && matchesStatus;
    });
  }, [MOCK_EQUIPMENT, searchTerm, statusFilter]);

  const equipmentStats = useMemo(() => {
    const total = MOCK_EQUIPMENT.length;
    const operational = MOCK_EQUIPMENT.filter(e => e.status === 'operational').length;
    const warning = MOCK_EQUIPMENT.filter(e => e.status === 'warning').length;
    const maintenance = MOCK_EQUIPMENT.filter(e => e.status === 'maintenance').length;
    const down = MOCK_EQUIPMENT.filter(e => e.status === 'down').length;
    const avgEfficiency = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.efficiency, 0) / total;
    const avgUptime = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.uptime, 0) / total;
    const totalAlerts = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0);

    return {
      total,
      operational,
      warning,
      maintenance,
      down,
      avgEfficiency,
      avgUptime,
      totalAlerts
    };
  }, [MOCK_EQUIPMENT]);

  const getStatusConfig = (status: Equipment['status']) => {
    const configs = {
      operational: { color: getStatusColor('completed'), text: t('equipment_status.operational'), icon: CheckCircle },
      warning: { color: getStatusColor('warning'), text: t('equipment_status.warning'), icon: AlertTriangle },
      maintenance: { color: getStatusColor('info'), text: t('equipment_status.maintenance'), icon: Wrench },
      down: { color: getStatusColor('error'), text: t('equipment_status.down'), icon: AlertTriangle }
    };
    return configs[status];
  };

  const getTypeIcon = (type: Equipment['type']) => {
    const icons = {
      oven: Thermometer,
      mixer: Activity,
      proofer: Settings,
      freezer: Zap,
      packaging: Settings,
      other: Settings
    };
    return icons[type];
  };

  const getStatusColor = (status: string): string => {
    const statusColors: { [key: string]: string } = {
      operational: '#10B981', // green-500
      warning: '#F59E0B', // amber-500
      maintenance: '#3B82F6', // blue-500
      down: '#EF4444' // red-500
    };
    return statusColors[status] || '#6B7280'; // gray-500 as default
  };

  const stats = [
    {
      title: t('labels.total_equipment'),
      value: equipmentStats.total,
      icon: Settings,
      variant: 'default' as const
    },
    {
      title: t('labels.operational'),
      value: equipmentStats.operational,
      icon: CheckCircle,
      variant: 'success' as const,
      subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
    },
    {
      title: t('labels.avg_efficiency'),
      value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
      icon: TrendingUp,
      variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
    },
    {
      title: t('labels.active_alerts'),
      value: equipmentStats.totalAlerts,
      icon: Bell,
      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
    }
  ];

  const handleShowMaintenanceDetails = (equipment: Equipment) => {
    setSelectedItem(equipment);
    setShowMaintenanceModal(true);
  };

  const handleCloseMaintenanceModal = () => {
    setShowMaintenanceModal(false);
    setSelectedItem(null);
  };

  // Loading state
  if (!tenantId) {
    return (
      <div className="flex items-center justify-center min-h-64">
        <LoadingSpinner text="Cargando datos..." />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={t('title')}
        description={t('subtitle')}
        actions={[
          {
            id: "add-new-equipment",
            label: t('actions.add_equipment'),
            variant: "primary" as const,
            icon: Plus,
            onClick: handleCreateEquipment,
            tooltip: t('actions.add_equipment'),
            size: "md"
          }
        ]}
      />

      {/* Stats Grid */}
      <StatsGrid
        stats={stats}
        columns={3}
      />

      {/* Controls */}
      <Card className="p-4">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" />
              <Input
                placeholder={t('common:forms.search_placeholder')}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <Filter className="w-4 h-4 text-[var(--text-tertiary)]" />
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as Equipment['status'] | 'all')}
              className="px-3 py-2 border border-[var(--border-primary)] rounded-md bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="all">{t('common:forms.select_option')}</option>
              <option value="operational">{t('equipment_status.operational')}</option>
              <option value="warning">{t('equipment_status.warning')}</option>
              <option value="maintenance">{t('equipment_status.maintenance')}</option>
              <option value="down">{t('equipment_status.down')}</option>
            </select>
          </div>
        </div>
      </Card>

      {/* Equipment Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredEquipment.map((equipment) => {
          const statusConfig = getStatusConfig(equipment.status);
          const TypeIcon = getTypeIcon(equipment.type);

          // Calculate maintenance status
          const nextMaintenanceDate = new Date(equipment.nextMaintenance);
          const daysUntilMaintenance = Math.ceil((nextMaintenanceDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
          const isOverdue = daysUntilMaintenance < 0;

          return (
            <StatusCard
              key={equipment.id}
              id={equipment.id}
              statusIndicator={statusConfig}
              title={equipment.name}
              subtitle={equipment.location}
              primaryValue={`${equipment.efficiency}%`}
              primaryValueLabel={t('fields.efficiency')}
              secondaryInfo={{
                label: t('fields.uptime'),
                value: `${equipment.uptime.toFixed(1)}%`
              }}
              actions={[
                {
                  label: t('actions.view_details'),
                  icon: Eye,
                  variant: 'primary',
                  priority: 'primary',
                  onClick: () => handleShowMaintenanceDetails(equipment)
                },
                {
                  label: t('actions.view_history'),
                  icon: History,
                  priority: 'secondary',
                  onClick: () => handleViewMaintenanceHistory(equipment.id)
                },
                {
                  label: t('actions.schedule_maintenance'),
                  icon: Wrench,
                  priority: 'secondary',
                  onClick: () => handleScheduleMaintenance(equipment.id)
                }
              ]}
            />
          );
        })}
      </div>

      {/* Empty State */}
      {filteredEquipment.length === 0 && (
        <div className="text-center py-12">
          <Settings className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
            {t('common:forms.no_results')}
          </h3>
          <p className="text-[var(--text-secondary)] mb-4">
            {t('common:forms.empty_state')}
          </p>
          <Button
            onClick={handleCreateEquipment}
            variant="primary"
            size="md"
            className="font-medium px-4 sm:px-6 py-2 sm:py-3 shadow-sm hover:shadow-md transition-all duration-200"
          >
            <Plus className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0" />
            <span className="text-sm sm:text-base">{t('actions.add_equipment')}</span>
          </Button>
        </div>
      )}

      {/* Maintenance Details Modal */}
      {selectedItem && showMaintenanceModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-[var(--bg-primary)] rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto my-8">
            <div className="p-4 sm:p-6">
              <div className="flex items-center justify-between mb-4 sm:mb-6">
                <div>
                  <h2 className="text-lg sm:text-xl font-semibold text-[var(--text-primary)]">
                    {selectedItem.name}
                  </h2>
                  <p className="text-[var(--text-secondary)] text-sm">
                    {selectedItem.model} - {selectedItem.serialNumber}
                  </p>
                </div>
                <button
                  onClick={handleCloseMaintenanceModal}
                  className="text-[var(--text-tertiary)] hover:text-[var(--text-primary)] p-1"
                >
                  <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="space-y-4 sm:space-y-6">
                {/* Equipment Status */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                  <div className="p-3 sm:p-4 bg-[var(--bg-secondary)] rounded-lg">
                    <h3 className="font-medium text-[var(--text-primary)] mb-2 text-sm sm:text-base">{t('fields.status')}</h3>
                    <div className="flex items-center space-x-2">
                      <div 
                        className="w-2 h-2 sm:w-3 sm:h-3 rounded-full"
                        style={{ backgroundColor: getStatusConfig(selectedItem.status).color }}
                      />
                      <span className="text-[var(--text-primary)] text-sm sm:text-base">
                        {t(`equipment_status.${selectedItem.status}`)}
                      </span>
                    </div>
                  </div>

                  <div className="p-3 sm:p-4 bg-[var(--bg-secondary)] rounded-lg">
                    <h3 className="font-medium text-[var(--text-primary)] mb-2 text-sm sm:text-base">{t('fields.efficiency')}</h3>
                    <div className="text-lg sm:text-2xl font-bold text-[var(--text-primary)]">
                      {selectedItem.efficiency}%
                    </div>
                  </div>
                </div>

                {/* Maintenance Information */}
                <div className="p-3 sm:p-4 bg-[var(--bg-secondary)] rounded-lg">
                  <h3 className="font-medium text-[var(--text-primary)] mb-3 sm:mb-4 text-sm sm:text-base">{t('maintenance.title')}</h3>
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                    <div>
                      <p className="text-xs sm:text-sm text-[var(--text-secondary)]">{t('maintenance.last')}</p>
                      <p className="text-[var(--text-primary)] text-sm sm:text-base">
                        {new Date(selectedItem.lastMaintenance).toLocaleDateString('es-ES')}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs sm:text-sm text-[var(--text-secondary)]">{t('maintenance.next')}</p>
                      <p className={`font-medium ${(new Date(selectedItem.nextMaintenance).getTime() < new Date().getTime()) ? 'text-red-500' : 'text-[var(--text-primary)]'} text-sm sm:text-base`}>
                        {new Date(selectedItem.nextMaintenance).toLocaleDateString('es-ES')}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs sm:text-sm text-[var(--text-secondary)]">{t('maintenance.interval')}</p>
                      <p className="text-[var(--text-primary)] text-sm sm:text-base">
                        {selectedItem.maintenanceInterval} {t('common:units.days')}
                      </p>
                    </div>
                  </div>
                  
                  {new Date(selectedItem.nextMaintenance).getTime() < new Date().getTime() && (
                    <div className="mt-3 p-2 bg-red-50 dark:bg-red-900/20 rounded border-l-2 border-red-500">
                      <div className="flex items-center space-x-2">
                        <AlertTriangle className="w-4 h-4 text-red-500" />
                        <span className="text-xs sm:text-sm font-medium text-red-700 dark:text-red-300">
                          {t('maintenance.overdue')}
                        </span>
                      </div>
                    </div>
                  )}
                </div>

                {/* Active Alerts */}
                {selectedItem.alerts.filter(a => !a.acknowledged).length > 0 && (
                  <div className="p-3 sm:p-4 bg-[var(--bg-secondary)] rounded-lg">
                    <h3 className="font-medium text-[var(--text-primary)] mb-3 sm:mb-4 text-sm sm:text-base">{t('alerts.title')}</h3>
                    <div className="space-y-2 sm:space-y-3">
                      {selectedItem.alerts.filter(a => !a.acknowledged).map((alert) => (
                        <div 
                          key={alert.id} 
                          className={`p-2 sm:p-3 rounded border-l-2 ${
                            alert.type === 'critical' ? 'bg-red-50 border-red-500 dark:bg-red-900/20' :
                            alert.type === 'warning' ? 'bg-orange-50 border-orange-500 dark:bg-orange-900/20' :
                            'bg-blue-50 border-blue-500 dark:bg-blue-900/20'
                          }`}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                              <AlertTriangle className={`w-3 h-3 sm:w-4 sm:h-4 ${
                                alert.type === 'critical' ? 'text-red-500' :
                                alert.type === 'warning' ? 'text-orange-500' : 'text-blue-500'
                              }`} />
                              <span className="font-medium text-[var(--text-primary)] text-xs sm:text-sm">
                                {alert.message}
                              </span>
                            </div>
                            <span className="text-xs text-[var(--text-secondary)] hidden sm:block">
                              {new Date(alert.timestamp).toLocaleString('es-ES')}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Maintenance History */}
                <div className="p-3 sm:p-4 bg-[var(--bg-secondary)] rounded-lg">
                  <h3 className="font-medium text-[var(--text-primary)] mb-3 sm:mb-4 text-sm sm:text-base">{t('maintenance.history')}</h3>
                  <div className="space-y-3 sm:space-y-4">
                    {selectedItem.maintenanceHistory.map((history) => (
                      <div key={history.id} className="border-b border-[var(--border-primary)] pb-2 sm:pb-3 last:border-0 last:pb-0">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-medium text-[var(--text-primary)] text-sm">{history.description}</h4>
                            <p className="text-xs text-[var(--text-secondary)]">
                              {new Date(history.date).toLocaleDateString('es-ES')} - {history.technician}
                            </p>
                          </div>
                          <span className="px-1.5 py-0.5 sm:px-2 sm:py-1 bg-[var(--bg-tertiary)] text-xs rounded">
                            {t(`maintenance.type.${history.type}`)}
                          </span>
                        </div>
                        <div className="mt-1 sm:mt-2 flex flex-wrap gap-2">
                          <span className="text-xs">
                            <span className="text-[var(--text-secondary)]">{t('common:actions.cost')}:</span> 
                            <span className="font-medium text-[var(--text-primary)]"> €{history.cost}</span>
                          </span>
                          <span className="text-xs">
                            <span className="text-[var(--text-secondary)]">{t('fields.uptime')}:</span> 
                            <span className="font-medium text-[var(--text-primary)]"> {history.downtime}h</span>
                          </span>
                        </div>
                        {history.partsUsed.length > 0 && (
                          <div className="mt-1 sm:mt-2">
                            <span className="text-xs text-[var(--text-secondary)]">{t('fields.parts')}:</span>
                            <div className="flex flex-wrap gap-1 mt-1">
                              {history.partsUsed.map((part, index) => (
                                <span key={index} className="px-1.5 py-0.5 sm:px-2 sm:py-1 bg-[var(--bg-tertiary)] text-xs rounded">
                                  {part}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className="flex justify-end space-x-2 sm:space-x-3 mt-4 sm:mt-6">
                <Button variant="outline" size="sm" onClick={handleCloseMaintenanceModal}>
                  {t('common:actions.close')}
                </Button>
                <Button variant="primary" size="sm" onClick={() => selectedItem && handleScheduleMaintenance(selectedItem.id)}>
                  {t('actions.schedule_maintenance')}
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default MaquinariaPage;