import React from 'react';
import { Users } from 'lucide-react';
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import type { SupplierCreate, SupplierType, SupplierStatus, PaymentTerms } from '../../../../api/types/suppliers';

interface SupplierBasicStepProps extends WizardStepProps {
  supplierData: Partial<SupplierCreate>;
  onUpdate: (data: Partial<SupplierCreate>) => void;
}

export const SupplierBasicStep: React.FC<SupplierBasicStepProps> = ({
  supplierData,
  onUpdate,
  onNext
}) => {
  const handleFieldChange = (field: keyof SupplierCreate, value: any) => {
    onUpdate({ ...supplierData, [field]: value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onNext();
  };

  const isValid = supplierData.name && supplierData.name.trim().length >= 1 && supplierData.supplier_type;

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Header */}
      <div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
        <div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
          <Users className="w-6 h-6 text-[var(--color-primary)]" />
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
            Información Básica
          </h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Configura los datos esenciales del proveedor
          </p>
        </div>
      </div>

      {/* Form Fields */}
      <div className="space-y-5">
        {/* Supplier Name */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Nombre del Proveedor <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={supplierData.name || ''}
            onChange={(e) => handleFieldChange('name', e.target.value)}
            placeholder="Ej: Molinos La Victoria"
            className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            required
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          {/* Supplier Type */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Tipo de Proveedor <span className="text-red-500">*</span>
            </label>
            <select
              value={supplierData.supplier_type || ''}
              onChange={(e) => handleFieldChange('supplier_type', e.target.value as SupplierType)}
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              required
            >
              <option value="">Seleccionar...</option>
              <option value="ingredients">Ingredientes</option>
              <option value="packaging">Empaque</option>
              <option value="equipment">Equipo</option>
              <option value="utilities">Servicios Públicos</option>
              <option value="services">Servicios</option>
              <option value="logistics">Logística</option>
              <option value="other">Otro</option>
            </select>
          </div>

          {/* Status */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Estado <span className="text-red-500">*</span>
            </label>
            <select
              value={supplierData.status || 'pending_approval'}
              onChange={(e) => handleFieldChange('status', e.target.value as SupplierStatus)}
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="pending_approval">Pendiente de Aprobación</option>
              <option value="active">Activo</option>
              <option value="inactive">Inactivo</option>
              <option value="suspended">Suspendido</option>
              <option value="terminated">Terminado</option>
              <option value="evaluation">En Evaluación</option>
            </select>
          </div>
        </div>

        {/* Contact Information */}
        <div className="grid grid-cols-1 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Persona de Contacto
            </label>
            <input
              type="text"
              value={supplierData.contact_person || ''}
              onChange={(e) => handleFieldChange('contact_person', e.target.value)}
              placeholder="Nombre del representante"
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Email
              </label>
              <input
                type="email"
                value={supplierData.email || ''}
                onChange={(e) => handleFieldChange('email', e.target.value)}
                placeholder="correo@ejemplo.com"
                className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Teléfono
              </label>
              <input
                type="tel"
                value={supplierData.phone || ''}
                onChange={(e) => handleFieldChange('phone', e.target.value)}
                placeholder="+34 600 000 000"
                className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Tax & Registration */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              NIF/CIF (Opcional)
            </label>
            <input
              type="text"
              value={supplierData.tax_id || ''}
              onChange={(e) => handleFieldChange('tax_id', e.target.value)}
              placeholder="Ej: B12345678"
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Número de Registro (Opcional)
            </label>
            <input
              type="text"
              value={supplierData.registration_number || ''}
              onChange={(e) => handleFieldChange('registration_number', e.target.value)}
              placeholder="Número de registro oficial"
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>
        </div>
      </div>

      {/* Validation Message */}
      {!isValid && (
        <div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
          <p className="text-sm text-[var(--text-primary)]">
            <span className="font-medium">⚠️ Campos requeridos:</span> Asegúrate de completar el nombre y tipo de proveedor.
          </p>
        </div>
      )}

      {/* Hidden submit button for form handling */}
      <button type="submit" className="hidden" disabled={!isValid} />
    </form>
  );
};