bakery-ia/frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx

import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Wrench, Thermometer, Activity, Search, Filter, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
import { Button, StatsGrid, StatusCard, getStatusColor, SearchAndFilter, type FilterConfig, EmptyState } from '../../../../components/ui';
import { Badge } from '../../../../components/ui/Badge';
import { LoadingSpinner } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { Equipment } from '../../../../api/types/equipment';
import { EquipmentModal } from '../../../../components/domain/equipment/EquipmentModal';
import { useEquipment, useCreateEquipment, useUpdateEquipment } from '../../../../api/hooks/equipment';

const MaquinariaPage: React.FC = () => {
  const { t } = useTranslation(['equipment', 'common']);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [selectedItem, setSelectedItem] = useState<Equipment | null>(null);
  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
  const [showEquipmentModal, setShowEquipmentModal] = useState(false);
  const [equipmentModalMode, setEquipmentModalMode] = useState<'view' | 'edit' | 'create'>('create');
  const [selectedEquipment, setSelectedEquipment] = useState<Equipment | null>(null);

  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';

  // Fetch equipment data from API
  const { data: equipment = [], isLoading, error } = useEquipment(tenantId, {
    is_active: true
  });

  // Mutations for create and update
  const createEquipmentMutation = useCreateEquipment(tenantId);
  const updateEquipmentMutation = useUpdateEquipment(tenantId);

  const handleCreateEquipment = () => {
    setSelectedEquipment({
      id: '',
      name: '',
      type: 'other',
      model: '',
      serialNumber: '',
      location: '',
      status: 'operational',
      installDate: new Date().toISOString().split('T')[0],
      lastMaintenance: new Date().toISOString().split('T')[0],
      nextMaintenance: new Date().toISOString().split('T')[0],
      maintenanceInterval: 30,
      efficiency: 100,
      uptime: 100,
      energyUsage: 0,
      utilizationToday: 0,
      alerts: [],
      maintenanceHistory: [],
      specifications: {
        power: 0,
        capacity: 0,
        dimensions: { width: 0, height: 0, depth: 0 },
        weight: 0
      }
    } as Equipment);
    setEquipmentModalMode('create');
    setShowEquipmentModal(true);
  };

  const handleEditEquipment = (equipmentId: string) => {
    // Find the equipment to edit from real data
    const equipmentToEdit = equipment.find(eq => eq.id === equipmentId);
    if (equipmentToEdit) {
      setSelectedEquipment(equipmentToEdit);
      setEquipmentModalMode('edit');
      setShowEquipmentModal(true);
    }
  };

  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 handleSaveEquipment = async (equipmentData: Equipment) => {
    try {
      if (equipmentModalMode === 'create') {
        await createEquipmentMutation.mutateAsync(equipmentData);
      } else if (equipmentModalMode === 'edit' && equipmentData.id) {
        await updateEquipmentMutation.mutateAsync({
          equipmentId: equipmentData.id,
          equipmentData: equipmentData
        });
      }
      setShowEquipmentModal(false);
      setSelectedEquipment(null);
    } catch (error) {
      console.error('Error saving equipment:', error);
      // Error is already handled by mutation with toast
    }
  };

  const filteredEquipment = useMemo(() => {
    return 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 || eq.status === statusFilter;
      const matchesType = !typeFilter || eq.type === typeFilter;

      return matchesSearch && matchesStatus && matchesType;
    });
  }, [equipment, searchTerm, statusFilter, typeFilter]);

  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 totalAlerts = equipment.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0);

    return {
      total,
      operational,
      warning,
      maintenance,
      down,
      totalAlerts
    };
  }, [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: Settings,
      packaging: Settings,
      other: Settings
    };
    return icons[type];
  };

  const stats = [
    {
      title: t('labels.total_equipment'),
      value: equipmentStats.total,
      variant: 'default' as const,
      icon: Settings,
    },
    {
      title: t('labels.operational'),
      value: equipmentStats.operational,
      variant: 'success' as const,
      icon: CheckCircle,
    },
    {
      title: t('labels.warning'),
      value: equipmentStats.warning,
      variant: 'warning' as const,
      icon: AlertTriangle,
    },
    {
      title: t('labels.maintenance_required'),
      value: equipmentStats.maintenance,
      variant: 'info' as const,
      icon: Wrench,
    },
    {
      title: t('labels.down'),
      value: equipmentStats.down,
      variant: 'error' as const,
      icon: AlertTriangle,
    },
    {
      title: t('labels.active_alerts'),
      value: equipmentStats.totalAlerts,
      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const,
      icon: Bell,
    },
  ];

  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>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-64">
        <LoadingSpinner text={t('common:loading')} />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center min-h-64">
        <AlertTriangle className="w-12 h-12 text-red-500 mb-4" />
        <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
          {t('common:errors.load_error')}
        </h3>
        <p className="text-[var(--text-secondary)]">
          {t('common:errors.try_again')}
        </p>
      </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}
      />

      {/* Search and Filter Controls */}
      <SearchAndFilter
        searchValue={searchTerm}
        onSearchChange={setSearchTerm}
        searchPlaceholder={t('common:forms.search_placeholder')}
        filters={[
          {
            key: 'status',
            label: t('fields.status'),
            type: 'dropdown',
            value: statusFilter,
            onChange: (value) => setStatusFilter(value as string),
            placeholder: t('common:forms.select_option'),
            options: [
              { value: 'operational', label: t('equipment_status.operational') },
              { value: 'warning', label: t('equipment_status.warning') },
              { value: 'maintenance', label: t('equipment_status.maintenance') },
              { value: 'down', label: t('equipment_status.down') }
            ]
          },
          {
            key: 'type',
            label: 'Tipo',
            type: 'dropdown',
            value: typeFilter,
            onChange: (value) => setTypeFilter(value as string),
            placeholder: 'Todos los tipos',
            options: [
              { value: 'oven', label: 'Horno' },
              { value: 'mixer', label: 'Batidora' },
              { value: 'proofer', label: 'Fermentadora' },
              { value: 'freezer', label: 'Congelador' },
              { value: 'packaging', label: 'Empaquetado' },
              { value: 'other', label: 'Otro' }
            ]
          }
        ] as FilterConfig[]}
      />

      {/* 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)}%`
              }}
              onClick={() => handleShowMaintenanceDetails(equipment)}
              actions={[
                {
                  label: t('actions.view_details'),
                  icon: Eye,
                  variant: 'primary',
                  priority: 'primary',
                  onClick: () => handleShowMaintenanceDetails(equipment)
                },
                {
                  label: t('actions.edit'),
                  icon: Edit,
                  priority: 'secondary',
                  onClick: () => handleEditEquipment(equipment.id)
                },
                {
                  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 && (
        <EmptyState
          icon={Settings}
          title={t('common:forms.no_results')}
          description={t('common:forms.empty_state')}
          actionLabel={t('actions.add_equipment')}
          actionIcon={Plus}
          onAction={handleCreateEquipment}
        />
      )}

      {/* 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>
      )}
      
      {/* Equipment Modal */}
      {showEquipmentModal && (
        <EquipmentModal
          isOpen={showEquipmentModal}
          onClose={() => {
            setShowEquipmentModal(false);
            setSelectedEquipment(null);
          }}
          equipment={selectedEquipment}
          onSave={handleSaveEquipment}
          mode={equipmentModalMode}
        />
      )}
    </div>
  );
};

export default MaquinariaPage;