import React from 'react';
import { Factory, Calendar, TrendingUp, Clock, DollarSign } from 'lucide-react';
import { Card, Input } from '../../../../../components/ui';
import type { ProductionSettings } from '../../../../../api/types/settings';

interface ProductionSettingsCardProps {
  settings: ProductionSettings;
  onChange: (settings: ProductionSettings) => void;
  disabled?: boolean;
}

const ProductionSettingsCard: React.FC<ProductionSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const handleChange = (field: keyof ProductionSettings) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const value = e.target.type === 'checkbox' ? e.target.checked :
                  e.target.type === 'number' ? parseFloat(e.target.value) :
                  e.target.value;
    onChange({ ...settings, [field]: value });
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
        <Factory className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
        Producción
      </h3>

      <div className="space-y-6">
        {/* Planning & Batch Size */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Calendar className="w-4 h-4 mr-2" />
            Planificación y Lotes
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
            <Input
              type="number"
              label="Horizonte de Planificación (días)"
              value={settings.planning_horizon_days}
              onChange={handleChange('planning_horizon_days')}
              disabled={disabled}
              min={1}
              max={30}
              step={1}
              placeholder="7"
            />

            <Input
              type="number"
              label="Tamaño Mínimo de Lote"
              value={settings.minimum_batch_size}
              onChange={handleChange('minimum_batch_size')}
              disabled={disabled}
              min={0.1}
              max={100}
              step={0.1}
              placeholder="1.0"
            />

            <Input
              type="number"
              label="Tamaño Máximo de Lote"
              value={settings.maximum_batch_size}
              onChange={handleChange('maximum_batch_size')}
              disabled={disabled}
              min={1}
              max={1000}
              step={1}
              placeholder="100.0"
            />

            <Input
              type="number"
              label="Buffer de Producción (%)"
              value={settings.production_buffer_percentage}
              onChange={handleChange('production_buffer_percentage')}
              disabled={disabled}
              min={0}
              max={50}
              step={1}
              placeholder="10.0"
            />

            <div className="flex items-center gap-2 md:col-span-2 xl:col-span-2">
              <input
                type="checkbox"
                id="schedule_optimization_enabled"
                checked={settings.schedule_optimization_enabled}
                onChange={handleChange('schedule_optimization_enabled')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="schedule_optimization_enabled" className="text-sm text-[var(--text-secondary)]">
                Habilitar optimización de horarios
              </label>
            </div>
          </div>
        </div>

        {/* Capacity & Working Hours */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Clock className="w-4 h-4 mr-2" />
            Capacidad y Jornada Laboral
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
            <Input
              type="number"
              label="Horas de Trabajo por Día"
              value={settings.working_hours_per_day}
              onChange={handleChange('working_hours_per_day')}
              disabled={disabled}
              min={1}
              max={24}
              step={1}
              placeholder="12"
            />

            <Input
              type="number"
              label="Máximo Horas Extra"
              value={settings.max_overtime_hours}
              onChange={handleChange('max_overtime_hours')}
              disabled={disabled}
              min={0}
              max={12}
              step={1}
              placeholder="4"
            />

            <Input
              type="number"
              label="Objetivo Utilización Capacidad"
              value={settings.capacity_utilization_target}
              onChange={handleChange('capacity_utilization_target')}
              disabled={disabled}
              min={0.5}
              max={1}
              step={0.01}
              placeholder="0.85"
            />

            <Input
              type="number"
              label="Umbral de Alerta de Capacidad"
              value={settings.capacity_warning_threshold}
              onChange={handleChange('capacity_warning_threshold')}
              disabled={disabled}
              min={0.7}
              max={1}
              step={0.01}
              placeholder="0.95"
            />
          </div>
        </div>

        {/* Quality Control */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <TrendingUp className="w-4 h-4 mr-2" />
            Control de Calidad
          </h4>
          <div className="space-y-4 pl-6">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="quality_check_enabled"
                checked={settings.quality_check_enabled}
                onChange={handleChange('quality_check_enabled')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="quality_check_enabled" className="text-sm text-[var(--text-secondary)]">
                Habilitar verificación de calidad
              </label>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Input
                type="number"
                label="Rendimiento Mínimo (%)"
                value={settings.minimum_yield_percentage}
                onChange={handleChange('minimum_yield_percentage')}
                disabled={disabled || !settings.quality_check_enabled}
                min={50}
                max={100}
                step={1}
                placeholder="85.0"
              />

              <Input
                type="number"
                label="Umbral de Puntuación de Calidad (0-10)"
                value={settings.quality_score_threshold}
                onChange={handleChange('quality_score_threshold')}
                disabled={disabled || !settings.quality_check_enabled}
                min={0}
                max={10}
                step={0.1}
                placeholder="8.0"
              />
            </div>
          </div>
        </div>

        {/* Time Buffers */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Clock className="w-4 h-4 mr-2" />
            Tiempos de Preparación
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
            <Input
              type="number"
              label="Tiempo de Preparación (minutos)"
              value={settings.prep_time_buffer_minutes}
              onChange={handleChange('prep_time_buffer_minutes')}
              disabled={disabled}
              min={0}
              max={120}
              step={5}
              placeholder="30"
            />

            <Input
              type="number"
              label="Tiempo de Limpieza (minutos)"
              value={settings.cleanup_time_buffer_minutes}
              onChange={handleChange('cleanup_time_buffer_minutes')}
              disabled={disabled}
              min={0}
              max={120}
              step={5}
              placeholder="15"
            />
          </div>
        </div>

        {/* Cost Settings */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <DollarSign className="w-4 h-4 mr-2" />
            Costes
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
            <Input
              type="number"
              label="Coste Laboral por Hora (EUR)"
              value={settings.labor_cost_per_hour_eur}
              onChange={handleChange('labor_cost_per_hour_eur')}
              disabled={disabled}
              min={5}
              max={100}
              step={0.5}
              placeholder="15.0"
            />

            <Input
              type="number"
              label="Porcentaje de Gastos Generales (%)"
              value={settings.overhead_cost_percentage}
              onChange={handleChange('overhead_cost_percentage')}
              disabled={disabled}
              min={0}
              max={50}
              step={1}
              placeholder="20.0"
            />
          </div>
        </div>
      </div>
    </Card>
  );
};

export default ProductionSettingsCard;
