import React from 'react';
import { ShoppingCart, TrendingUp, Clock, AlertTriangle, Brain } from 'lucide-react';
import { Card, Input } 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 });
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
        <ShoppingCart className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
        {t('procurement.title')}
      </h3>

      <div className="space-y-6">
        {/* Auto-Approval Settings */}
        <div>
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <TrendingUp className="w-4 h-4 mr-2" />
            {t('procurement.auto_approval')}
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
            <div className="flex items-center gap-2 md:col-span-2 xl:col-span-3">
              <input
                type="checkbox"
                id="auto_approve_enabled"
                checked={settings.auto_approve_enabled}
                onChange={handleChange('auto_approve_enabled')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="auto_approve_enabled" className="text-sm text-[var(--text-secondary)]">
                {t('procurement.auto_approve_enabled')}
              </label>
            </div>

            <Input
              type="number"
              label={t('procurement.auto_approve_threshold')}
              value={settings.auto_approve_threshold_eur}
              onChange={handleChange('auto_approve_threshold_eur')}
              disabled={disabled || !settings.auto_approve_enabled}
              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 || !settings.auto_approve_enabled}
              min={0}
              max={1}
              step={0.01}
              placeholder="0.80"
            />

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="require_approval_new_suppliers"
                checked={settings.require_approval_new_suppliers}
                onChange={handleChange('require_approval_new_suppliers')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="require_approval_new_suppliers" className="text-sm text-[var(--text-secondary)]">
                {t('procurement.require_approval_new_suppliers')}
              </label>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="require_approval_critical_items"
                checked={settings.require_approval_critical_items}
                onChange={handleChange('require_approval_critical_items')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="require_approval_critical_items" className="text-sm text-[var(--text-secondary)]">
                {t('procurement.require_approval_critical_items')}
              </label>
            </div>
          </div>
        </div>

        {/* Planning & Forecasting */}
        <div>
          <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 pl-6">
            <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>
          <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 pl-6">
            <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 Calculation */}
        <div className="border-t border-[var(--border-primary)] pt-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Brain className="w-4 h-4 mr-2" />
            {t('procurement.smart_procurement')}
          </h4>
          <div className="space-y-3 pl-6">
            <div className="flex items-start gap-2">
              <input
                type="checkbox"
                id="use_reorder_rules"
                checked={settings.use_reorder_rules}
                onChange={handleChange('use_reorder_rules')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)] mt-0.5"
              />
              <div className="flex flex-col">
                <label htmlFor="use_reorder_rules" className="text-sm font-medium text-[var(--text-secondary)]">
                  {t('procurement.use_reorder_rules')}
                </label>
                <span className="text-xs text-[var(--text-tertiary)] mt-0.5">
                  {t('procurement.use_reorder_rules_desc')}
                </span>
              </div>
            </div>

            <div className="flex items-start gap-2">
              <input
                type="checkbox"
                id="economic_rounding"
                checked={settings.economic_rounding}
                onChange={handleChange('economic_rounding')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)] mt-0.5"
              />
              <div className="flex flex-col">
                <label htmlFor="economic_rounding" className="text-sm font-medium text-[var(--text-secondary)]">
                  {t('procurement.economic_rounding')}
                </label>
                <span className="text-xs text-[var(--text-tertiary)] mt-0.5">
                  {t('procurement.economic_rounding_desc')}
                </span>
              </div>
            </div>

            <div className="flex items-start gap-2">
              <input
                type="checkbox"
                id="respect_storage_limits"
                checked={settings.respect_storage_limits}
                onChange={handleChange('respect_storage_limits')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)] mt-0.5"
              />
              <div className="flex flex-col">
                <label htmlFor="respect_storage_limits" className="text-sm font-medium text-[var(--text-secondary)]">
                  {t('procurement.respect_storage_limits')}
                </label>
                <span className="text-xs text-[var(--text-tertiary)] mt-0.5">
                  {t('procurement.respect_storage_limits_desc')}
                </span>
              </div>
            </div>

            <div className="flex items-start gap-2">
              <input
                type="checkbox"
                id="use_supplier_minimums"
                checked={settings.use_supplier_minimums}
                onChange={handleChange('use_supplier_minimums')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)] mt-0.5"
              />
              <div className="flex flex-col">
                <label htmlFor="use_supplier_minimums" className="text-sm font-medium text-[var(--text-secondary)]">
                  {t('procurement.use_supplier_minimums')}
                </label>
                <span className="text-xs text-[var(--text-tertiary)] mt-0.5">
                  {t('procurement.use_supplier_minimums_desc')}
                </span>
              </div>
            </div>

            <div className="flex items-start gap-2">
              <input
                type="checkbox"
                id="optimize_price_tiers"
                checked={settings.optimize_price_tiers}
                onChange={handleChange('optimize_price_tiers')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)] mt-0.5"
              />
              <div className="flex flex-col">
                <label htmlFor="optimize_price_tiers" className="text-sm font-medium text-[var(--text-secondary)]">
                  {t('procurement.optimize_price_tiers')}
                </label>
                <span className="text-xs text-[var(--text-tertiary)] mt-0.5">
                  {t('procurement.optimize_price_tiers_desc')}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default ProcurementSettingsCard;
