import React from 'react';
import { Factory, Calendar, TrendingUp, Clock, DollarSign } from 'lucide-react';
import { Input, SettingSection, SettingRow } 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 });
  };

  const handleToggleChange = (field: keyof ProductionSettings) => (checked: boolean) => {
    onChange({ ...settings, [field]: checked });
  };

  return (
    <SettingSection
      title="Producción"
      description="Configure production planning, batch sizes, quality control, and cost settings"
      icon={<Factory className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* Planning & Batch Size */}
        <div className="p-4 sm:p-6">
          <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">
            <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>
        </div>

        {/* Schedule Optimization */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label="Optimización de Horarios"
            description="Enable intelligent schedule optimization for production batches"
            type="toggle"
            checked={settings.schedule_optimization_enabled}
            onToggle={handleToggleChange('schedule_optimization_enabled')}
            disabled={disabled}
            helpText="Uses AI to optimize production schedules based on capacity and demand"
          />
        </div>

        {/* Capacity & Working Hours */}
        <div className="p-4 sm:p-6">
          <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-4 gap-4">
            <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 className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label="Verificación de Calidad"
            description="Enable quality checks for production batches"
            icon={<TrendingUp className="w-4 h-4" />}
            type="toggle"
            checked={settings.quality_check_enabled}
            onToggle={handleToggleChange('quality_check_enabled')}
            disabled={disabled}
            helpText="When enabled, production batches require quality verification"
          />

          {settings.quality_check_enabled && (
            <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
              <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                Parámetros de Calidad
              </h5>
              <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}
                  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}
                  min={0}
                  max={10}
                  step={0.1}
                  placeholder="8.0"
                />
              </div>
            </div>
          )}
        </div>

        {/* Time Buffers */}
        <div className="p-4 sm:p-6">
          <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">
            <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 className="p-4 sm:p-6">
          <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">
            <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>
    </SettingSection>
  );
};

export default ProductionSettingsCard;
