import React from 'react';
import { ShoppingCart, TrendingUp, Clock, AlertTriangle, Brain } from 'lucide-react';
import { Input, SettingSection, SettingRow } from '../../../../../components/ui';
import type { ProcurementSettings } from '../../../../../api/types/settings';
import { useTranslation } from 'react-i18next';

interface ProcurementSettingsCardProps {
  settings: ProcurementSettings;
  onChange: (settings: ProcurementSettings) => void;
  disabled?: boolean;
}

const ProcurementSettingsCard: React.FC<ProcurementSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const { t } = useTranslation('ajustes');

  const handleChange = (field: keyof ProcurementSettings) => (
    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 ProcurementSettings) => (checked: boolean) => {
    onChange({ ...settings, [field]: checked });
  };

  return (
    <SettingSection
      title={t('procurement.title')}
      description="Configure automatic approval rules, planning parameters, and smart procurement options"
      icon={<ShoppingCart className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* Auto-Approval Settings */}
        <div className="divide-y divide-[var(--border-primary)]">
          <SettingRow
            label={t('procurement.auto_approve_enabled')}
            description="Automatically approve purchase orders that meet criteria"
            icon={<TrendingUp className="w-4 h-4" />}
            type="toggle"
            checked={settings.auto_approve_enabled}
            onToggle={handleToggleChange('auto_approve_enabled')}
            disabled={disabled}
            helpText="When enabled, POs below threshold with good suppliers are auto-approved"
          />

          {settings.auto_approve_enabled && (
            <>
              <div className="p-4 sm:p-6 bg-[var(--bg-secondary)]">
                <h5 className="text-sm font-medium text-[var(--text-secondary)] mb-4">
                  Auto-Approval Thresholds
                </h5>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Input
                    type="number"
                    label={t('procurement.auto_approve_threshold')}
                    value={settings.auto_approve_threshold_eur}
                    onChange={handleChange('auto_approve_threshold_eur')}
                    disabled={disabled}
                    min={0}
                    max={10000}
                    step={50}
                    placeholder="500.0"
                  />

                  <Input
                    type="number"
                    label={t('procurement.min_supplier_score')}
                    value={settings.auto_approve_min_supplier_score}
                    onChange={handleChange('auto_approve_min_supplier_score')}
                    disabled={disabled}
                    min={0}
                    max={1}
                    step={0.01}
                    placeholder="0.80"
                  />
                </div>
              </div>

              <SettingRow
                label={t('procurement.require_approval_new_suppliers')}
                description="Always require manual approval for new suppliers"
                type="toggle"
                checked={settings.require_approval_new_suppliers}
                onToggle={handleToggleChange('require_approval_new_suppliers')}
                disabled={disabled}
              />

              <SettingRow
                label={t('procurement.require_approval_critical_items')}
                description="Always require manual approval for critical items"
                type="toggle"
                checked={settings.require_approval_critical_items}
                onToggle={handleToggleChange('require_approval_critical_items')}
                disabled={disabled}
              />
            </>
          )}
        </div>

        {/* Planning & Forecasting */}
        <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" />
            {t('procurement.planning')}
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <Input
              type="number"
              label={t('procurement.lead_time_days')}
              value={settings.procurement_lead_time_days}
              onChange={handleChange('procurement_lead_time_days')}
              disabled={disabled}
              min={1}
              max={30}
              step={1}
              placeholder="3"
            />

            <Input
              type="number"
              label={t('procurement.demand_forecast_days')}
              value={settings.demand_forecast_days}
              onChange={handleChange('demand_forecast_days')}
              disabled={disabled}
              min={1}
              max={90}
              step={1}
              placeholder="14"
            />

            <Input
              type="number"
              label={t('procurement.safety_stock_percentage')}
              value={settings.safety_stock_percentage}
              onChange={handleChange('safety_stock_percentage')}
              disabled={disabled}
              min={0}
              max={100}
              step={5}
              placeholder="20.0"
            />
          </div>
        </div>

        {/* Approval Workflow */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <AlertTriangle className="w-4 h-4 mr-2" />
            {t('procurement.workflow')}
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input
              type="number"
              label={t('procurement.approval_reminder_hours')}
              value={settings.po_approval_reminder_hours}
              onChange={handleChange('po_approval_reminder_hours')}
              disabled={disabled}
              min={1}
              max={168}
              step={1}
              placeholder="24"
            />

            <Input
              type="number"
              label={t('procurement.critical_escalation_hours')}
              value={settings.po_critical_escalation_hours}
              onChange={handleChange('po_critical_escalation_hours')}
              disabled={disabled}
              min={1}
              max={72}
              step={1}
              placeholder="12"
            />
          </div>
        </div>

        {/* Smart Procurement Options */}
        <div className="divide-y divide-[var(--border-primary)]">
          <div className="p-4 sm:p-6">
            <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-2 flex items-center">
              <Brain className="w-4 h-4 mr-2" />
              {t('procurement.smart_procurement')}
            </h4>
            <p className="text-xs text-[var(--text-tertiary)] mb-4">
              Intelligent rules for optimizing procurement decisions
            </p>
          </div>

          <SettingRow
            label={t('procurement.use_reorder_rules')}
            description={t('procurement.use_reorder_rules_desc')}
            type="toggle"
            checked={settings.use_reorder_rules}
            onToggle={handleToggleChange('use_reorder_rules')}
            disabled={disabled}
            helpText="Automatically calculate when to reorder based on usage patterns"
          />

          <SettingRow
            label={t('procurement.economic_rounding')}
            description={t('procurement.economic_rounding_desc')}
            type="toggle"
            checked={settings.economic_rounding}
            onToggle={handleToggleChange('economic_rounding')}
            disabled={disabled}
            helpText="Round order quantities to economical batch sizes"
          />

          <SettingRow
            label={t('procurement.respect_storage_limits')}
            description={t('procurement.respect_storage_limits_desc')}
            type="toggle"
            checked={settings.respect_storage_limits}
            onToggle={handleToggleChange('respect_storage_limits')}
            disabled={disabled}
            helpText="Ensure orders don't exceed available storage capacity"
          />

          <SettingRow
            label={t('procurement.use_supplier_minimums')}
            description={t('procurement.use_supplier_minimums_desc')}
            type="toggle"
            checked={settings.use_supplier_minimums}
            onToggle={handleToggleChange('use_supplier_minimums')}
            disabled={disabled}
            helpText="Respect minimum order quantities set by suppliers"
          />

          <SettingRow
            label={t('procurement.optimize_price_tiers')}
            description={t('procurement.optimize_price_tiers_desc')}
            type="toggle"
            checked={settings.optimize_price_tiers}
            onToggle={handleToggleChange('optimize_price_tiers')}
            disabled={disabled}
            helpText="Automatically optimize order quantities to get best price tiers"
          />
        </div>
      </div>
    </SettingSection>
  );
};

export default ProcurementSettingsCard;
