import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardHeader, CardBody } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { Input } from '../../ui/Input';
import { Badge } from '../../ui/Badge';
import { Modal } from '../../ui/Modal';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/Tabs';
import { StatsGrid } from '../../ui/Stats';
import {
  Settings,
  AlertTriangle,
  CheckCircle,
  Wrench,
  Calendar,
  Clock,
  Thermometer,
  Activity,
  Zap,
  TrendingUp,
  Search,
  Plus,
  Filter,
  Download,
  BarChart3,
  Bell,
  MapPin,
  User
} from 'lucide-react';
import { useCurrentTenant } from '../../../stores/tenant.store';

export interface Equipment {
  id: string;
  name: string;
  type: 'oven' | 'mixer' | 'proofer' | 'freezer' | 'packaging' | 'other';
  model: string;
  serialNumber: string;
  location: string;
  status: 'operational' | 'maintenance' | 'down' | 'warning';
  installDate: string;
  lastMaintenance: string;
  nextMaintenance: string;
  maintenanceInterval: number; // days
  temperature?: number;
  targetTemperature?: number;
  efficiency: number;
  uptime: number;
  energyUsage: number;
  utilizationToday: number;
  alerts: Array<{
    id: string;
    type: 'warning' | 'critical' | 'info';
    message: string;
    timestamp: string;
    acknowledged: boolean;
  }>;
  maintenanceHistory: Array<{
    id: string;
    date: string;
    type: 'preventive' | 'corrective' | 'emergency';
    description: string;
    technician: string;
    cost: number;
    downtime: number; // hours
    partsUsed: string[];
  }>;
  specifications: {
    power: number; // kW
    capacity: number;
    dimensions: {
      width: number;
      height: number;
      depth: number;
    };
    weight: number;
  };
}

export interface EquipmentManagerProps {
  className?: string;
  equipment?: Equipment[];
  onCreateEquipment?: () => void;
  onEditEquipment?: (equipmentId: string) => void;
  onScheduleMaintenance?: (equipmentId: string) => void;
  onAcknowledgeAlert?: (equipmentId: string, alertId: string) => void;
  onViewMaintenanceHistory?: (equipmentId: string) => void;
}

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 EquipmentManager: React.FC<EquipmentManagerProps> = ({
  className,
  equipment = MOCK_EQUIPMENT,
  onCreateEquipment,
  onEditEquipment,
  onScheduleMaintenance,
  onAcknowledgeAlert,
  onViewMaintenanceHistory
}) => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('overview');
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<Equipment['status'] | 'all'>('all');
  const [selectedEquipment, setSelectedEquipment] = useState<Equipment | null>(null);
  const [showEquipmentModal, setShowEquipmentModal] = useState(false);

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

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

      return matchesSearch && matchesStatus;
    });
  }, [equipment, searchQuery, statusFilter]);

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

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

  const getStatusConfig = (status: Equipment['status']) => {
    const configs = {
      operational: { color: 'success' as const, icon: CheckCircle, label: t('equipment.status.operational', 'Operational') },
      warning: { color: 'warning' as const, icon: AlertTriangle, label: t('equipment.status.warning', 'Warning') },
      maintenance: { color: 'info' as const, icon: Wrench, label: t('equipment.status.maintenance', 'Maintenance') },
      down: { color: 'error' as const, icon: AlertTriangle, label: t('equipment.status.down', 'Down') }
    };
    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 formatDateTime = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('es-ES', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  };

  const stats = [
    {
      title: t('equipment.stats.total', 'Total Equipment'),
      value: equipmentStats.total,
      icon: Settings,
      variant: 'default' as const
    },
    {
      title: t('equipment.stats.operational', 'Operational'),
      value: equipmentStats.operational,
      icon: CheckCircle,
      variant: 'success' as const,
      subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
    },
    {
      title: t('equipment.stats.avg_efficiency', 'Avg Efficiency'),
      value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
      icon: TrendingUp,
      variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
    },
    {
      title: t('equipment.stats.alerts', 'Active Alerts'),
      value: equipmentStats.totalAlerts,
      icon: Bell,
      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
    }
  ];

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              {t('equipment.manager.title', 'Equipment Management')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('equipment.manager.subtitle', 'Monitor and manage production equipment')}
            </p>
          </div>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm">
              <Download className="w-4 h-4 mr-2" />
              {t('equipment.actions.export', 'Export')}
            </Button>
            <Button variant="primary" size="sm" onClick={onCreateEquipment}>
              <Plus className="w-4 h-4 mr-2" />
              {t('equipment.actions.add', 'Add Equipment')}
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardBody className="space-y-6">
        {/* Stats */}
        <StatsGrid stats={stats} columns={4} gap="md" />

        {/* Filters */}
        <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('equipment.search.placeholder', 'Search equipment...')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(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('equipment.filter.all', 'All Status')}</option>
              <option value="operational">{t('equipment.status.operational', 'Operational')}</option>
              <option value="warning">{t('equipment.status.warning', 'Warning')}</option>
              <option value="maintenance">{t('equipment.status.maintenance', 'Maintenance')}</option>
              <option value="down">{t('equipment.status.down', 'Down')}</option>
            </select>
          </div>
        </div>

        {/* Equipment List */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="overview">
              {t('equipment.tabs.overview', 'Overview')}
            </TabsTrigger>
            <TabsTrigger value="maintenance">
              {t('equipment.tabs.maintenance', 'Maintenance')}
            </TabsTrigger>
            <TabsTrigger value="alerts">
              {t('equipment.tabs.alerts', 'Alerts')}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {filteredEquipment.map((eq) => {
                const statusConfig = getStatusConfig(eq.status);
                const TypeIcon = getTypeIcon(eq.type);
                const StatusIcon = statusConfig.icon;

                return (
                  <div
                    key={eq.id}
                    className="p-4 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors cursor-pointer"
                    onClick={() => {
                      setSelectedEquipment(eq);
                      setShowEquipmentModal(true);
                    }}
                  >
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center space-x-2">
                        <TypeIcon className="w-5 h-5 text-[var(--color-primary)]" />
                        <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
                      </div>
                      <Badge variant={statusConfig.color}>
                        {statusConfig.label}
                      </Badge>
                    </div>

                    <div className="space-y-2 text-sm">
                      <div className="flex items-center justify-between">
                        <span className="text-[var(--text-secondary)]">{t('equipment.efficiency', 'Efficiency')}:</span>
                        <span className="font-medium">{eq.efficiency}%</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-[var(--text-secondary)]">{t('equipment.uptime', 'Uptime')}:</span>
                        <span className="font-medium">{eq.uptime.toFixed(1)}%</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-[var(--text-secondary)]">{t('equipment.location', 'Location')}:</span>
                        <span className="font-medium text-xs">{eq.location}</span>
                      </div>
                      {eq.temperature && (
                        <div className="flex items-center justify-between">
                          <span className="text-[var(--text-secondary)]">{t('equipment.temperature', 'Temperature')}:</span>
                          <span className="font-medium">{eq.temperature}°C</span>
                        </div>
                      )}
                    </div>

                    {eq.alerts.filter(a => !a.acknowledged).length > 0 && (
                      <div className="mt-3 p-2 bg-orange-50 dark:bg-orange-900/20 rounded border-l-2 border-orange-500">
                        <div className="flex items-center space-x-2">
                          <AlertTriangle className="w-4 h-4 text-orange-500" />
                          <span className="text-sm font-medium text-orange-700 dark:text-orange-300">
                            {eq.alerts.filter(a => !a.acknowledged).length} {t('equipment.unread_alerts', 'unread alerts')}
                          </span>
                        </div>
                      </div>
                    )}

                    <div className="flex justify-between mt-4 pt-3 border-t border-[var(--border-primary)]">
                      <Button
                        variant="outline"
                        size="xs"
                        onClick={(e) => {
                          e.stopPropagation();
                          onEditEquipment?.(eq.id);
                        }}
                      >
                        {t('common.edit', 'Edit')}
                      </Button>
                      <Button
                        variant="primary"
                        size="xs"
                        onClick={(e) => {
                          e.stopPropagation();
                          onScheduleMaintenance?.(eq.id);
                        }}
                      >
                        {t('equipment.actions.maintenance', 'Maintenance')}
                      </Button>
                    </div>
                  </div>
                );
              })}
            </div>
          </TabsContent>

          <TabsContent value="maintenance" className="space-y-4">
            {equipment.map((eq) => (
              <div key={eq.id} className="p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
                  <Badge variant={new Date(eq.nextMaintenance) <= new Date() ? 'error' : 'success'}>
                    {new Date(eq.nextMaintenance) <= new Date() ? t('equipment.maintenance.overdue', 'Overdue') : t('equipment.maintenance.scheduled', 'Scheduled')}
                  </Badge>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                  <div>
                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.last', 'Last')}:</span>
                    <div className="font-medium">{formatDateTime(eq.lastMaintenance)}</div>
                  </div>
                  <div>
                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.next', 'Next')}:</span>
                    <div className="font-medium">{formatDateTime(eq.nextMaintenance)}</div>
                  </div>
                  <div>
                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.interval', 'Interval')}:</span>
                    <div className="font-medium">{eq.maintenanceInterval} {t('common.days', 'days')}</div>
                  </div>
                  <div>
                    <span className="text-[var(--text-secondary)]">{t('equipment.maintenance.history', 'History')}:</span>
                    <div className="font-medium">{eq.maintenanceHistory.length} {t('equipment.maintenance.records', 'records')}</div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

          <TabsContent value="alerts" className="space-y-4">
            {equipment.flatMap(eq =>
              eq.alerts.map(alert => (
                <div key={`${eq.id}-${alert.id}`} className={`p-4 rounded-lg border-l-4 ${
                  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 mb-2">
                    <div className="flex items-center space-x-2">
                      <AlertTriangle className={`w-5 h-5 ${
                        alert.type === 'critical' ? 'text-red-500' :
                        alert.type === 'warning' ? 'text-orange-500' : 'text-blue-500'
                      }`} />
                      <h4 className="font-semibold text-[var(--text-primary)]">{eq.name}</h4>
                      <Badge variant={alert.acknowledged ? 'success' : 'warning'}>
                        {alert.acknowledged ? t('equipment.alerts.acknowledged', 'Acknowledged') : t('equipment.alerts.new', 'New')}
                      </Badge>
                    </div>
                    <span className="text-sm text-[var(--text-secondary)]">
                      {new Date(alert.timestamp).toLocaleString('es-ES')}
                    </span>
                  </div>
                  <p className="text-[var(--text-secondary)] mb-3">{alert.message}</p>
                  {!alert.acknowledged && (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onAcknowledgeAlert?.(eq.id, alert.id)}
                    >
                      {t('equipment.alerts.acknowledge', 'Acknowledge')}
                    </Button>
                  )}
                </div>
              ))
            )}
          </TabsContent>
        </Tabs>

        {/* Equipment Details Modal */}
        {selectedEquipment && (
          <Modal
            isOpen={showEquipmentModal}
            onClose={() => {
              setShowEquipmentModal(false);
              setSelectedEquipment(null);
            }}
            title={selectedEquipment.name}
            size="lg"
          >
            <div className="p-6 space-y-6">
              {/* Basic Info */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.model', 'Model')}</label>
                  <p className="text-[var(--text-primary)]">{selectedEquipment.model}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.serial', 'Serial Number')}</label>
                  <p className="text-[var(--text-primary)]">{selectedEquipment.serialNumber}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.location', 'Location')}</label>
                  <p className="text-[var(--text-primary)]">{selectedEquipment.location}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-[var(--text-secondary)]">{t('equipment.install_date', 'Install Date')}</label>
                  <p className="text-[var(--text-primary)]">{formatDateTime(selectedEquipment.installDate)}</p>
                </div>
              </div>

              {/* Current Status */}
              <div className="grid grid-cols-3 gap-4 p-4 bg-[var(--bg-secondary)] rounded-lg">
                <div className="text-center">
                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.efficiency}%</div>
                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.efficiency', 'Efficiency')}</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.uptime.toFixed(1)}%</div>
                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.uptime', 'Uptime')}</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[var(--text-primary)]">{selectedEquipment.energyUsage} kW</div>
                  <div className="text-sm text-[var(--text-secondary)]">{t('equipment.energy_usage', 'Energy Usage')}</div>
                </div>
              </div>

              {/* Actions */}
              <div className="flex justify-end space-x-3">
                <Button variant="outline" onClick={() => onViewMaintenanceHistory?.(selectedEquipment.id)}>
                  {t('equipment.actions.view_history', 'View History')}
                </Button>
                <Button variant="secondary" onClick={() => onEditEquipment?.(selectedEquipment.id)}>
                  {t('common.edit', 'Edit')}
                </Button>
                <Button variant="primary" onClick={() => onScheduleMaintenance?.(selectedEquipment.id)}>
                  {t('equipment.actions.schedule_maintenance', 'Schedule Maintenance')}
                </Button>
              </div>
            </div>
          </Modal>
        )}
      </CardBody>
    </Card>
  );
};

export default EquipmentManager;