import React, { useState, useCallback, useRef } from 'react';
import { Card, Button, Badge, Input, Modal, Table, Select, DatePicker } from '../../ui';
import { productionService, type QualityCheckResponse, QualityCheckStatus } from '../../../services/api/production.service';
import type { QualityCheck, QualityCheckCriteria, ProductionBatch, QualityCheckType } from '../../../types/production.types';

interface QualityControlProps {
  className?: string;
  batchId?: string;
  checkType?: QualityCheckType;
  onQualityCheckCompleted?: (result: QualityCheck) => void;
  onCorrectiveActionRequired?: (check: QualityCheck, actions: string[]) => void;
}

interface QualityCheckTemplate {
  id: string;
  name: string;
  spanishName: string;
  productTypes: string[];
  criteria: QualityChecklistItem[];
  requiresPhotos: boolean;
  passThreshold: number;
  criticalPoints: string[];
}

interface QualityChecklistItem {
  id: string;
  category: string;
  description: string;
  spanishDescription: string;
  type: 'boolean' | 'numeric' | 'scale' | 'text';
  required: boolean;
  minValue?: number;
  maxValue?: number;
  unit?: string;
  acceptableCriteria?: string;
  weight: number;
  isCritical: boolean;
}

interface QualityInspectionResult {
  checklistId: string;
  value: string | number | boolean;
  notes?: string;
  photo?: File;
  timestamp: string;
  inspector: string;
}

const QUALITY_CHECK_TEMPLATES: Record<string, QualityCheckTemplate> = {
  visual_inspection: {
    id: 'visual_inspection',
    name: 'Visual Inspection',
    spanishName: 'Inspección Visual',
    productTypes: ['pan', 'bolleria', 'reposteria'],
    requiresPhotos: true,
    passThreshold: 80,
    criticalPoints: ['color_defects', 'structural_defects'],
    criteria: [
      {
        id: 'color_uniformity',
        category: 'appearance',
        description: 'Color uniformity',
        spanishDescription: 'Uniformidad del color',
        type: 'scale',
        required: true,
        minValue: 1,
        maxValue: 5,
        acceptableCriteria: 'Score 3 or higher',
        weight: 20,
        isCritical: false,
      },
      {
        id: 'surface_texture',
        category: 'appearance',
        description: 'Surface texture quality',
        spanishDescription: 'Calidad de la textura superficial',
        type: 'scale',
        required: true,
        minValue: 1,
        maxValue: 5,
        acceptableCriteria: 'Score 3 or higher',
        weight: 15,
        isCritical: false,
      },
      {
        id: 'shape_integrity',
        category: 'structure',
        description: 'Shape and form integrity',
        spanishDescription: 'Integridad de forma y estructura',
        type: 'boolean',
        required: true,
        acceptableCriteria: 'Must be true',
        weight: 25,
        isCritical: true,
      },
      {
        id: 'size_consistency',
        category: 'dimensions',
        description: 'Size consistency within batch',
        spanishDescription: 'Consistencia de tamaño en el lote',
        type: 'scale',
        required: true,
        minValue: 1,
        maxValue: 5,
        acceptableCriteria: 'Score 3 or higher',
        weight: 20,
        isCritical: false,
      },
      {
        id: 'defects_presence',
        category: 'defects',
        description: 'Visible defects or imperfections',
        spanishDescription: 'Defectos visibles o imperfecciones',
        type: 'boolean',
        required: true,
        acceptableCriteria: 'Must be false',
        weight: 20,
        isCritical: true,
      },
    ],
  },
  weight_check: {
    id: 'weight_check',
    name: 'Weight Check',
    spanishName: 'Control de Peso',
    productTypes: ['pan', 'bolleria', 'reposteria'],
    requiresPhotos: false,
    passThreshold: 95,
    criticalPoints: ['weight_variance'],
    criteria: [
      {
        id: 'individual_weight',
        category: 'weight',
        description: 'Individual piece weight',
        spanishDescription: 'Peso individual de la pieza',
        type: 'numeric',
        required: true,
        minValue: 0,
        unit: 'g',
        acceptableCriteria: 'Within ±5% of target',
        weight: 40,
        isCritical: true,
      },
      {
        id: 'batch_average_weight',
        category: 'weight',
        description: 'Batch average weight',
        spanishDescription: 'Peso promedio del lote',
        type: 'numeric',
        required: true,
        minValue: 0,
        unit: 'g',
        acceptableCriteria: 'Within ±3% of target',
        weight: 30,
        isCritical: true,
      },
      {
        id: 'weight_variance',
        category: 'consistency',
        description: 'Weight variance within batch',
        spanishDescription: 'Variación de peso dentro del lote',
        type: 'numeric',
        required: true,
        minValue: 0,
        unit: '%',
        acceptableCriteria: 'Less than 5%',
        weight: 30,
        isCritical: true,
      },
    ],
  },
  temperature_check: {
    id: 'temperature_check',
    name: 'Temperature Check',
    spanishName: 'Control de Temperatura',
    productTypes: ['pan', 'bolleria'],
    requiresPhotos: false,
    passThreshold: 90,
    criticalPoints: ['core_temperature'],
    criteria: [
      {
        id: 'core_temperature',
        category: 'temperature',
        description: 'Core temperature',
        spanishDescription: 'Temperatura del núcleo',
        type: 'numeric',
        required: true,
        minValue: 85,
        maxValue: 98,
        unit: '°C',
        acceptableCriteria: '88-95°C',
        weight: 60,
        isCritical: true,
      },
      {
        id: 'cooling_temperature',
        category: 'temperature',
        description: 'Cooling temperature',
        spanishDescription: 'Temperatura de enfriado',
        type: 'numeric',
        required: false,
        minValue: 18,
        maxValue: 25,
        unit: '°C',
        acceptableCriteria: '20-23°C',
        weight: 40,
        isCritical: false,
      },
    ],
  },
  packaging_quality: {
    id: 'packaging_quality',
    name: 'Packaging Quality',
    spanishName: 'Calidad del Empaquetado',
    productTypes: ['pan', 'bolleria', 'reposteria'],
    requiresPhotos: true,
    passThreshold: 85,
    criticalPoints: ['seal_integrity', 'labeling_accuracy'],
    criteria: [
      {
        id: 'seal_integrity',
        category: 'packaging',
        description: 'Package seal integrity',
        spanishDescription: 'Integridad del sellado del envase',
        type: 'boolean',
        required: true,
        acceptableCriteria: 'Must be true',
        weight: 30,
        isCritical: true,
      },
      {
        id: 'labeling_accuracy',
        category: 'labeling',
        description: 'Label accuracy and placement',
        spanishDescription: 'Precisión y colocación de etiquetas',
        type: 'scale',
        required: true,
        minValue: 1,
        maxValue: 5,
        acceptableCriteria: 'Score 4 or higher',
        weight: 25,
        isCritical: true,
      },
      {
        id: 'package_appearance',
        category: 'appearance',
        description: 'Overall package appearance',
        spanishDescription: 'Apariencia general del envase',
        type: 'scale',
        required: true,
        minValue: 1,
        maxValue: 5,
        acceptableCriteria: 'Score 3 or higher',
        weight: 20,
        isCritical: false,
      },
      {
        id: 'barcode_readability',
        category: 'labeling',
        description: 'Barcode readability',
        spanishDescription: 'Legibilidad del código de barras',
        type: 'boolean',
        required: true,
        acceptableCriteria: 'Must be true',
        weight: 25,
        isCritical: false,
      },
    ],
  },
};

const STATUS_COLORS = {
  [QualityCheckStatus.SCHEDULED]: 'bg-[var(--color-info)]/10 text-[var(--color-info)]',
  [QualityCheckStatus.IN_PROGRESS]: 'bg-yellow-100 text-yellow-800',
  [QualityCheckStatus.PASSED]: 'bg-[var(--color-success)]/10 text-[var(--color-success)]',
  [QualityCheckStatus.FAILED]: 'bg-[var(--color-error)]/10 text-[var(--color-error)]',
  [QualityCheckStatus.REQUIRES_REVIEW]: 'bg-[var(--color-primary)]/10 text-[var(--color-primary)]',
  [QualityCheckStatus.CANCELLED]: 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]',
};

export const QualityControl: React.FC<QualityControlProps> = ({
  className = '',
  batchId,
  checkType,
  onQualityCheckCompleted,
  onCorrectiveActionRequired,
}) => {
  const [qualityChecks, setQualityChecks] = useState<QualityCheckResponse[]>([]);
  const [selectedTemplate, setSelectedTemplate] = useState<QualityCheckTemplate | null>(null);
  const [activeCheck, setActiveCheck] = useState<QualityCheck | null>(null);
  const [inspectionResults, setInspectionResults] = useState<Record<string, QualityInspectionResult>>({});
  const [loading, setLoading] = useState(false);
  const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
  const [uploadedPhotos, setUploadedPhotos] = useState<Record<string, File>>({});
  const [currentInspector, setCurrentInspector] = useState<string>('inspector-1');
  const fileInputRef = useRef<HTMLInputElement>(null);

  const loadQualityChecks = useCallback(async () => {
    setLoading(true);
    try {
      const params: any = {};
      if (batchId) params.batch_id = batchId;
      if (checkType) params.check_type = checkType;

      const response = await productionService.getQualityChecks(params);
      
      if (response.success && response.data) {
        setQualityChecks(response.data.items || []);
      }
    } catch (error) {
      console.error('Error loading quality checks:', error);
    } finally {
      setLoading(false);
    }
  }, [batchId, checkType]);

  const startQualityCheck = (template: QualityCheckTemplate, batch?: any) => {
    setSelectedTemplate(template);
    setInspectionResults({});
    setUploadedPhotos({});
    setIsInspectionModalOpen(true);

    // Initialize empty results for all criteria
    template.criteria.forEach(criterion => {
      setInspectionResults(prev => ({
        ...prev,
        [criterion.id]: {
          checklistId: criterion.id,
          value: criterion.type === 'boolean' ? false : criterion.type === 'numeric' ? 0 : '',
          timestamp: new Date().toISOString(),
          inspector: currentInspector,
        }
      }));
    });
  };

  const updateInspectionResult = (criterionId: string, value: string | number | boolean, notes?: string) => {
    setInspectionResults(prev => ({
      ...prev,
      [criterionId]: {
        ...prev[criterionId],
        value,
        notes,
        timestamp: new Date().toISOString(),
      }
    }));
  };

  const handlePhotoUpload = (criterionId: string, file: File) => {
    setUploadedPhotos(prev => ({
      ...prev,
      [criterionId]: file,
    }));

    // Update inspection result with photo reference
    setInspectionResults(prev => ({
      ...prev,
      [criterionId]: {
        ...prev[criterionId],
        photo: file,
      }
    }));
  };

  const calculateOverallScore = (): number => {
    if (!selectedTemplate) return 0;

    let totalScore = 0;
    let totalWeight = 0;

    selectedTemplate.criteria.forEach(criterion => {
      const result = inspectionResults[criterion.id];
      if (result) {
        let score = 0;
        
        if (criterion.type === 'boolean') {
          score = result.value ? 100 : 0;
        } else if (criterion.type === 'scale') {
          const numValue = Number(result.value);
          score = (numValue / (criterion.maxValue || 5)) * 100;
        } else if (criterion.type === 'numeric') {
          // For numeric values, assume pass/fail based on acceptable range
          score = 100; // Simplified - would need more complex logic
        }

        totalScore += score * criterion.weight;
        totalWeight += criterion.weight;
      }
    });

    return totalWeight > 0 ? totalScore / totalWeight : 0;
  };

  const checkCriticalFailures = (): string[] => {
    if (!selectedTemplate) return [];

    const failures: string[] = [];

    selectedTemplate.criteria.forEach(criterion => {
      if (criterion.isCritical) {
        const result = inspectionResults[criterion.id];
        if (result) {
          if (criterion.type === 'boolean' && !result.value) {
            failures.push(criterion.spanishDescription);
          } else if (criterion.type === 'scale' && Number(result.value) < 3) {
            failures.push(criterion.spanishDescription);
          }
        }
      }
    });

    return failures;
  };

  const completeQualityCheck = async () => {
    if (!selectedTemplate) return;

    const overallScore = calculateOverallScore();
    const criticalFailures = checkCriticalFailures();
    const passed = overallScore >= selectedTemplate.passThreshold && criticalFailures.length === 0;

    const checkData = {
      status: passed ? QualityCheckStatus.PASSED : QualityCheckStatus.FAILED,
      results: {
        overallScore,
        criticalFailures,
        individualResults: inspectionResults,
        photos: Object.keys(uploadedPhotos),
      },
      notes: `Inspección completada. Puntuación: ${overallScore.toFixed(1)}%`,
      corrective_actions: criticalFailures.length > 0 ? [
        `Fallas críticas encontradas: ${criticalFailures.join(', ')}`,
        'Revisar proceso de producción',
        'Re-entrenar personal si es necesario'
      ] : undefined,
    };

    try {
      // This would be the actual check ID from the created quality check
      const mockCheckId = 'check-id';
      const response = await productionService.completeQualityCheck(mockCheckId, checkData);
      
      if (response.success) {
        if (onQualityCheckCompleted) {
          onQualityCheckCompleted(response.data as unknown as QualityCheck);
        }
        
        if (!passed && checkData.corrective_actions && onCorrectiveActionRequired) {
          onCorrectiveActionRequired(response.data as unknown as QualityCheck, checkData.corrective_actions);
        }
        
        setIsInspectionModalOpen(false);
        setSelectedTemplate(null);
        await loadQualityChecks();
      }
    } catch (error) {
      console.error('Error completing quality check:', error);
    }
  };

  const renderInspectionForm = () => {
    if (!selectedTemplate) return null;

    return (
      <div className="space-y-6">
        <div className="bg-[var(--color-info)]/5 border border-[var(--color-info)]/20 p-4 rounded-lg">
          <h3 className="font-semibold text-blue-900 mb-2">{selectedTemplate.spanishName}</h3>
          <p className="text-sm text-[var(--color-info)]">
            Umbral de aprobación: {selectedTemplate.passThreshold}%
          </p>
          {selectedTemplate.criticalPoints.length > 0 && (
            <p className="text-sm text-[var(--color-info)] mt-1">
              Puntos críticos: {selectedTemplate.criticalPoints.length}
            </p>
          )}
        </div>

        <div className="space-y-4">
          {selectedTemplate.criteria.map((criterion) => (
            <Card key={criterion.id} className={`p-4 ${criterion.isCritical ? 'border-orange-200 bg-orange-50' : ''}`}>
              <div className="flex justify-between items-start mb-3">
                <div className="flex-1">
                  <h4 className="font-medium text-[var(--text-primary)]">{criterion.spanishDescription}</h4>
                  <p className="text-sm text-[var(--text-secondary)] mt-1">{criterion.acceptableCriteria}</p>
                  {criterion.isCritical && (
                    <Badge className="bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs mt-1">
                      Punto Crítico
                    </Badge>
                  )}
                </div>
                <span className="text-sm text-[var(--text-tertiary)]">Peso: {criterion.weight}%</span>
              </div>

              <div className="space-y-3">
                {criterion.type === 'boolean' && (
                  <div className="flex gap-4">
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name={criterion.id}
                        value="true"
                        checked={inspectionResults[criterion.id]?.value === true}
                        onChange={() => updateInspectionResult(criterion.id, true)}
                        className="mr-2"
                      />
                      Sí / Pasa
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name={criterion.id}
                        value="false"
                        checked={inspectionResults[criterion.id]?.value === false}
                        onChange={() => updateInspectionResult(criterion.id, false)}
                        className="mr-2"
                      />
                      No / Falla
                    </label>
                  </div>
                )}

                {criterion.type === 'scale' && (
                  <div className="flex items-center gap-4">
                    <span className="text-sm">1</span>
                    <input
                      type="range"
                      min={criterion.minValue || 1}
                      max={criterion.maxValue || 5}
                      step="1"
                      value={inspectionResults[criterion.id]?.value || criterion.minValue || 1}
                      onChange={(e) => updateInspectionResult(criterion.id, parseInt(e.target.value))}
                      className="flex-1"
                    />
                    <span className="text-sm">{criterion.maxValue || 5}</span>
                    <span className="min-w-8 text-center font-medium">
                      {inspectionResults[criterion.id]?.value || criterion.minValue || 1}
                    </span>
                  </div>
                )}

                {criterion.type === 'numeric' && (
                  <div className="flex items-center gap-2">
                    <Input
                      type="number"
                      min={criterion.minValue}
                      max={criterion.maxValue}
                      step="0.1"
                      value={inspectionResults[criterion.id]?.value || ''}
                      onChange={(e) => updateInspectionResult(criterion.id, parseFloat(e.target.value) || 0)}
                      className="w-24"
                    />
                    {criterion.unit && <span className="text-sm text-[var(--text-secondary)]">{criterion.unit}</span>}
                  </div>
                )}

                <Input
                  placeholder="Notas adicionales (opcional)"
                  value={inspectionResults[criterion.id]?.notes || ''}
                  onChange={(e) => {
                    const currentResult = inspectionResults[criterion.id];
                    if (currentResult) {
                      updateInspectionResult(criterion.id, currentResult.value, e.target.value);
                    }
                  }}
                />

                {selectedTemplate.requiresPhotos && (
                  <div>
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*"
                      onChange={(e) => {
                        const file = e.target.files?.[0];
                        if (file) {
                          handlePhotoUpload(criterion.id, file);
                        }
                      }}
                      className="hidden"
                    />
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => fileInputRef.current?.click()}
                    >
                      📸 {uploadedPhotos[criterion.id] ? 'Cambiar foto' : 'Tomar foto'}
                    </Button>
                    {uploadedPhotos[criterion.id] && (
                      <p className="text-sm text-[var(--color-success)] mt-1">
                        ✓ Foto capturada: {uploadedPhotos[criterion.id].name}
                      </p>
                    )}
                  </div>
                )}
              </div>
            </Card>
          ))}
        </div>

        <Card className="p-4 bg-[var(--bg-secondary)]">
          <div className="flex justify-between items-center mb-2">
            <span className="font-medium">Puntuación general</span>
            <span className="text-2xl font-bold text-[var(--color-info)]">
              {calculateOverallScore().toFixed(1)}%
            </span>
          </div>
          
          <div className="w-full bg-[var(--bg-quaternary)] rounded-full h-3 mb-2">
            <div
              className={`h-3 rounded-full transition-all duration-500 ${
                calculateOverallScore() >= selectedTemplate.passThreshold 
                  ? 'bg-green-500' 
                  : 'bg-red-500'
              }`}
              style={{ width: `${calculateOverallScore()}%` }}
            />
          </div>
          
          <div className="flex justify-between text-sm text-[var(--text-secondary)]">
            <span>Umbral: {selectedTemplate.passThreshold}%</span>
            <span className={
              calculateOverallScore() >= selectedTemplate.passThreshold 
                ? 'text-[var(--color-success)] font-medium' 
                : 'text-[var(--color-error)] font-medium'
            }>
              {calculateOverallScore() >= selectedTemplate.passThreshold ? '✓ APROBADO' : '✗ REPROBADO'}
            </span>
          </div>

          {checkCriticalFailures().length > 0 && (
            <div className="mt-3 p-2 bg-[var(--color-error)]/10 border border-red-200 rounded">
              <p className="text-sm font-medium text-[var(--color-error)]">Fallas críticas detectadas:</p>
              <ul className="text-sm text-[var(--color-error)] mt-1">
                {checkCriticalFailures().map((failure, index) => (
                  <li key={index}>• {failure}</li>
                ))}
              </ul>
            </div>
          )}
        </Card>
      </div>
    );
  };

  const renderQualityChecksTable = () => {
    const columns = [
      { key: 'batch', label: 'Lote', sortable: true },
      { key: 'type', label: 'Tipo de control', sortable: true },
      { key: 'status', label: 'Estado', sortable: true },
      { key: 'inspector', label: 'Inspector', sortable: false },
      { key: 'scheduled_date', label: 'Fecha programada', sortable: true },
      { key: 'completed_date', label: 'Fecha completada', sortable: true },
      { key: 'actions', label: 'Acciones', sortable: false },
    ];

    const data = qualityChecks.map(check => ({
      id: check.id,
      batch: `#${check.batch?.batch_number || 'N/A'}`,
      type: QUALITY_CHECK_TEMPLATES[check.check_type]?.spanishName || check.check_type,
      status: (
        <Badge className={STATUS_COLORS[check.status]}>
          {check.status === QualityCheckStatus.SCHEDULED && 'Programado'}
          {check.status === QualityCheckStatus.IN_PROGRESS && 'En progreso'}
          {check.status === QualityCheckStatus.PASSED && 'Aprobado'}
          {check.status === QualityCheckStatus.FAILED && 'Reprobado'}
          {check.status === QualityCheckStatus.REQUIRES_REVIEW && 'Requiere revisión'}
        </Badge>
      ),
      inspector: check.inspector || 'No asignado',
      scheduled_date: check.scheduled_date 
        ? new Date(check.scheduled_date).toLocaleDateString('es-ES')
        : '-',
      completed_date: check.completed_date 
        ? new Date(check.completed_date).toLocaleDateString('es-ES')
        : '-',
      actions: (
        <div className="flex gap-2">
          {check.status === QualityCheckStatus.SCHEDULED && (
            <Button
              variant="primary"
              size="sm"
              onClick={() => {
                const template = QUALITY_CHECK_TEMPLATES[check.check_type];
                if (template) {
                  startQualityCheck(template);
                }
              }}
            >
              Iniciar
            </Button>
          )}
          <Button variant="outline" size="sm">
            Ver detalles
          </Button>
        </div>
      ),
    }));

    return <Table columns={columns} data={data} />;
  };

  return (
    <div className={`space-y-6 ${className}`}>
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-[var(--text-primary)]">Control de Calidad</h2>
          <p className="text-[var(--text-secondary)]">Gestiona las inspecciones de calidad y cumplimiento</p>
        </div>

        <div className="flex gap-2">
          <Select
            value={currentInspector}
            onChange={(e) => setCurrentInspector(e.target.value)}
            className="w-48"
          >
            <option value="inspector-1">María García (Inspector)</option>
            <option value="inspector-2">Juan López (Supervisor)</option>
            <option value="inspector-3">Ana Martín (Jefe Calidad)</option>
          </Select>

          <Button
            variant="primary"
            onClick={() => {
              // Show modal to select quality check type
              const template = QUALITY_CHECK_TEMPLATES.visual_inspection;
              startQualityCheck(template);
            }}
          >
            Nueva inspección
          </Button>
        </div>
      </div>

      {/* Quick Start Templates */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {Object.values(QUALITY_CHECK_TEMPLATES).map((template) => (
          <Card
            key={template.id}
            className="p-4 cursor-pointer hover:shadow-md transition-shadow border-2 border-transparent hover:border-[var(--color-info)]/20"
            onClick={() => startQualityCheck(template)}
          >
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-semibold text-[var(--text-primary)]">{template.spanishName}</h3>
              {template.requiresPhotos && (
                <span className="text-sm bg-[var(--color-info)]/10 text-[var(--color-info)] px-2 py-1 rounded">
                  📸 Fotos
                </span>
              )}
            </div>
            
            <p className="text-sm text-[var(--text-secondary)] mb-3">
              {template.criteria.length} criterios • Umbral: {template.passThreshold}%
            </p>
            
            <div className="flex flex-wrap gap-1">
              {template.productTypes.map((type) => (
                <Badge key={type} className="text-xs bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
                  {type === 'pan' && 'Pan'}
                  {type === 'bolleria' && 'Bollería'}
                  {type === 'reposteria' && 'Repostería'}
                </Badge>
              ))}
            </div>

            {template.criticalPoints.length > 0 && (
              <p className="text-xs text-[var(--color-primary)] mt-2">
                {template.criticalPoints.length} puntos críticos
              </p>
            )}
          </Card>
        ))}
      </div>

      {/* Quality Checks Table */}
      <Card className="p-6">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold">Controles de calidad recientes</h3>
          
          <div className="flex gap-2">
            <Select className="w-40">
              <option value="all">Todos los estados</option>
              <option value={QualityCheckStatus.SCHEDULED}>Programados</option>
              <option value={QualityCheckStatus.IN_PROGRESS}>En progreso</option>
              <option value={QualityCheckStatus.PASSED}>Aprobados</option>
              <option value={QualityCheckStatus.FAILED}>Reprobados</option>
            </Select>
            
            <Button variant="outline" onClick={loadQualityChecks}>
              Actualizar
            </Button>
          </div>
        </div>

        {loading ? (
          <div className="flex justify-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
          </div>
        ) : (
          renderQualityChecksTable()
        )}
      </Card>

      {/* Quality Check Modal */}
      <Modal
        isOpen={isInspectionModalOpen}
        onClose={() => {
          setIsInspectionModalOpen(false);
          setSelectedTemplate(null);
        }}
        title={`Control de Calidad: ${selectedTemplate?.spanishName}`}
        size="lg"
      >
        {renderInspectionForm()}
        
        <div className="flex justify-end gap-2 pt-6 border-t">
          <Button
            variant="outline"
            onClick={() => {
              setIsInspectionModalOpen(false);
              setSelectedTemplate(null);
            }}
          >
            Cancelar
          </Button>
          
          <Button
            variant="primary"
            onClick={completeQualityCheck}
            disabled={!selectedTemplate || Object.keys(inspectionResults).length === 0}
          >
            Completar inspección
          </Button>
        </div>
      </Modal>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-[var(--text-secondary)]">Tasa de aprobación</p>
              <p className="text-2xl font-bold text-[var(--color-success)]">94.2%</p>
            </div>
            <span className="text-2xl">✅</span>
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-[var(--text-secondary)]">Controles pendientes</p>
              <p className="text-2xl font-bold text-[var(--color-primary)]">7</p>
            </div>
            <span className="text-2xl">⏳</span>
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-[var(--text-secondary)]">Fallas críticas</p>
              <p className="text-2xl font-bold text-[var(--color-error)]">2</p>
            </div>
            <span className="text-2xl">🚨</span>
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-[var(--text-secondary)]">Controles hoy</p>
              <p className="text-2xl font-bold text-[var(--color-info)]">23</p>
            </div>
            <span className="text-2xl">📋</span>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default QualityControl;