import React from 'react';
import { FileText, CheckCircle2, Users, Truck, Award } from 'lucide-react';
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import type { SupplierCreate } from '../../../../api/types/suppliers';
import { useTenantCurrency } from '../../../../hooks/useTenantCurrency';

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

export const SupplierReviewStep: React.FC<SupplierReviewStepProps> = ({
  supplierData,
  onUpdate,
  onNext,
  onBack
}) => {
  const { currencySymbol } = useTenantCurrency();

  const handleFieldChange = (field: keyof SupplierCreate, value: any) => {
    onUpdate({ ...supplierData, [field]: value });
  };

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

  const getSupplierTypeLabel = (type?: string) => {
    const labels: Record<string, string> = {
      'ingredients': 'Ingredientes',
      'packaging': 'Empaque',
      'equipment': 'Equipo',
      'utilities': 'Servicios Públicos',
      'services': 'Servicios',
      'logistics': 'Logística',
      'other': 'Otro'
    };
    return labels[type || ''] || type || 'No especificado';
  };

  const getPaymentTermsLabel = (terms?: string) => {
    const labels: Record<string, string> = {
      'immediate': 'Inmediato',
      'net_7': 'Neto 7 días',
      'net_15': 'Neto 15 días',
      'net_30': 'Neto 30 días',
      'net_60': 'Neto 60 días',
      'net_90': 'Neto 90 días',
      'cod': 'Contra reembolso',
      'cia': 'Efectivo por adelantado'
    };
    return labels[terms || ''] || terms || 'No especificado';
  };

  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">
          <FileText 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">
            Detalles Adicionales y Revisión
          </h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Completa información adicional y revisa el proveedor
          </p>
        </div>
      </div>

      {/* Supplier Summary */}
      <div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border border-[var(--color-primary)]/20 rounded-lg">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
          <CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
          Resumen del Proveedor
        </h4>

        <div className="grid grid-cols-2 gap-4">
          {/* Basic Info */}
          <div className="space-y-2">
            <div className="flex items-start gap-2">
              <Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
              <div>
                <p className="text-xs text-[var(--text-tertiary)]">Proveedor</p>
                <p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.name || 'Sin nombre'}</p>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
              <div>
                <p className="text-xs text-[var(--text-tertiary)]">Tipo</p>
                <p className="text-sm font-medium text-[var(--text-primary)]">
                  {getSupplierTypeLabel(supplierData.supplier_type)}
                </p>
              </div>
            </div>
            {supplierData.contact_person && (
              <div className="flex items-start gap-2">
                <Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-xs text-[var(--text-tertiary)]">Contacto</p>
                  <p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.contact_person}</p>
                </div>
              </div>
            )}
          </div>

          {/* Delivery Info */}
          <div className="space-y-2">
            <div className="flex items-start gap-2">
              <Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
              <div>
                <p className="text-xs text-[var(--text-tertiary)]">Términos de Pago</p>
                <p className="text-sm font-medium text-[var(--text-primary)]">
                  {getPaymentTermsLabel(supplierData.payment_terms)}
                </p>
              </div>
            </div>
            {supplierData.lead_time_days && (
              <div className="flex items-start gap-2">
                <Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-xs text-[var(--text-tertiary)]">Tiempo de Entrega</p>
                  <p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.lead_time_days} días</p>
                </div>
              </div>
            )}
            {supplierData.minimum_order_value && (
              <div className="flex items-start gap-2">
                <Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
                <div>
                  <p className="text-xs text-[var(--text-tertiary)]">Pedido Mínimo</p>
                  <p className="text-sm font-medium text-[var(--text-primary)]">{currencySymbol}{supplierData.minimum_order_value}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Additional Details */}
      <div className="space-y-4">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
          <Award className="w-4 h-4" />
          Información Adicional (Opcional)
        </h4>

        {/* Certifications */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Certificaciones
          </label>
          <input
            type="text"
            value={
              supplierData.certifications
                ? typeof supplierData.certifications === 'string'
                  ? supplierData.certifications
                  : JSON.stringify(supplierData.certifications)
                : ''
            }
            onChange={(e) => {
              const value = e.target.value;
              handleFieldChange('certifications', value ? { certs: value.split(',').map(c => c.trim()) } : null);
            }}
            placeholder="Ej: ISO 9001, HACCP, Orgánico"
            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)]"
          />
          <p className="mt-1 text-xs text-[var(--text-tertiary)]">
            Separar con comas
          </p>
        </div>

        {/* Sustainability Practices */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Prácticas de Sostenibilidad
          </label>
          <textarea
            value={
              supplierData.sustainability_practices
                ? typeof supplierData.sustainability_practices === 'string'
                  ? supplierData.sustainability_practices
                  : JSON.stringify(supplierData.sustainability_practices)
                : ''
            }
            onChange={(e) => {
              const value = e.target.value;
              handleFieldChange('sustainability_practices', value ? { practices: value } : null);
            }}
            placeholder="Describe las prácticas sostenibles del proveedor..."
            rows={2}
            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)] resize-none"
          />
        </div>

        {/* Notes */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Notas
          </label>
          <textarea
            value={supplierData.notes || ''}
            onChange={(e) => handleFieldChange('notes', e.target.value)}
            placeholder="Notas adicionales sobre el proveedor..."
            rows={3}
            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)] resize-none"
          />
        </div>
      </div>

      {/* Ready to Save Message */}
      <div className="p-4 bg-[var(--color-success)]/10 border border-[var(--color-success)]/30 rounded-lg">
        <p className="text-sm text-[var(--text-primary)] flex items-center gap-2">
          <CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
          <span>
            <span className="font-medium">¡Listo para guardar!</span> Revisa la información y haz clic en "Completar" para crear el proveedor.
          </span>
        </p>
      </div>

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