import React from 'react';
import { Input, Select, Badge } from '../../ui';
import type { OnboardingStepProps } from './OnboardingWizard';

interface CompanyInfo {
  name: string;
  type: 'artisan' | 'industrial' | 'chain' | 'mixed';
  size: 'small' | 'medium' | 'large';
  locations: number;
  specialties: string[];
  address: {
    street: string;
    city: string;
    state: string;
    postal_code: string;
    country: string;
  };
  contact: {
    phone: string;
    email: string;
    website?: string;
  };
  established_year?: number;
  tax_id?: string;
}

const BAKERY_TYPES = [
  { value: 'artisan', label: 'Artesanal', description: 'Producción tradicional y manual' },
  { value: 'industrial', label: 'Industrial', description: 'Producción automatizada a gran escala' },
  { value: 'chain', label: 'Cadena', description: 'Múltiples ubicaciones con procesos estandarizados' },
  { value: 'mixed', label: 'Mixta', description: 'Combinación de métodos artesanales e industriales' },
];

const BAKERY_SIZES = [
  { value: 'small', label: 'Pequeña', description: '1-10 empleados' },
  { value: 'medium', label: 'Mediana', description: '11-50 empleados' },
  { value: 'large', label: 'Grande', description: '50+ empleados' },
];

const COMMON_SPECIALTIES = [
  'Pan tradicional',
  'Bollería',
  'Repostería',
  'Pan integral',
  'Pasteles',
  'Productos sin gluten',
  'Productos veganos',
  'Pan artesanal',
  'Productos de temporada',
  'Catering',
];

export const CompanyInfoStep: React.FC<OnboardingStepProps> = ({
  data,
  onDataChange,
}) => {
  const companyData: CompanyInfo = {
    name: '',
    type: 'artisan',
    size: 'small',
    locations: 1,
    specialties: [],
    address: {
      street: '',
      city: '',
      state: '',
      postal_code: '',
      country: 'España',
    },
    contact: {
      phone: '',
      email: '',
      website: '',
    },
    ...data,
  };

  const handleInputChange = (field: string, value: any) => {
    onDataChange({
      ...companyData,
      [field]: value,
    });
  };

  const handleAddressChange = (field: string, value: string) => {
    onDataChange({
      ...companyData,
      address: {
        ...companyData.address,
        [field]: value,
      },
    });
  };

  const handleContactChange = (field: string, value: string) => {
    onDataChange({
      ...companyData,
      contact: {
        ...companyData.contact,
        [field]: value,
      },
    });
  };

  const handleSpecialtyToggle = (specialty: string) => {
    const currentSpecialties = companyData.specialties || [];
    const updatedSpecialties = currentSpecialties.includes(specialty)
      ? currentSpecialties.filter(s => s !== specialty)
      : [...currentSpecialties, specialty];
    
    handleInputChange('specialties', updatedSpecialties);
  };

  return (
    <div className="space-y-8">
      {/* Basic Information */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Información básica
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Nombre de la panadería *
            </label>
            <Input
              type="text"
              value={companyData.name}
              onChange={(e) => handleInputChange('name', e.target.value)}
              placeholder="Ej: Panadería San Miguel"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Tipo de panadería *
            </label>
            <Select
              value={companyData.type}
              onChange={(e) => handleInputChange('type', e.target.value)}
              className="w-full"
            >
              {BAKERY_TYPES.map((type) => (
                <option key={type.value} value={type.value}>
                  {type.label} - {type.description}
                </option>
              ))}
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Tamaño de la empresa *
            </label>
            <Select
              value={companyData.size}
              onChange={(e) => handleInputChange('size', e.target.value)}
              className="w-full"
            >
              {BAKERY_SIZES.map((size) => (
                <option key={size.value} value={size.value}>
                  {size.label} - {size.description}
                </option>
              ))}
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Número de ubicaciones
            </label>
            <Input
              type="number"
              min="1"
              value={companyData.locations}
              onChange={(e) => handleInputChange('locations', parseInt(e.target.value) || 1)}
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Año de fundación
            </label>
            <Input
              type="number"
              min="1900"
              max={new Date().getFullYear()}
              value={companyData.established_year || ''}
              onChange={(e) => handleInputChange('established_year', parseInt(e.target.value) || undefined)}
              placeholder="Ej: 1995"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              NIF/CIF
            </label>
            <Input
              type="text"
              value={companyData.tax_id || ''}
              onChange={(e) => handleInputChange('tax_id', e.target.value)}
              placeholder="Ej: B12345678"
              className="w-full"
            />
          </div>
        </div>
      </div>

      {/* Specialties */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Especialidades
        </h3>
        <p className="text-sm text-gray-600">
          Selecciona los productos que produces habitualmente
        </p>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {COMMON_SPECIALTIES.map((specialty) => (
            <button
              key={specialty}
              onClick={() => handleSpecialtyToggle(specialty)}
              className={`p-3 text-left border rounded-lg transition-colors ${
                companyData.specialties?.includes(specialty)
                  ? 'border-blue-500 bg-blue-50 text-blue-700'
                  : 'border-gray-200 hover:border-gray-300'
              }`}
            >
              <span className="text-sm font-medium">{specialty}</span>
            </button>
          ))}
        </div>

        {companyData.specialties && companyData.specialties.length > 0 && (
          <div>
            <p className="text-sm font-medium text-gray-700 mb-2">
              Especialidades seleccionadas:
            </p>
            <div className="flex flex-wrap gap-2">
              {companyData.specialties.map((specialty) => (
                <Badge key={specialty} className="bg-blue-100 text-blue-800">
                  {specialty}
                  <button
                    onClick={() => handleSpecialtyToggle(specialty)}
                    className="ml-1 text-blue-600 hover:text-blue-800"
                  >
                    ×
                  </button>
                </Badge>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Address */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Dirección principal
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Dirección *
            </label>
            <Input
              type="text"
              value={companyData.address.street}
              onChange={(e) => handleAddressChange('street', e.target.value)}
              placeholder="Calle, número, piso, puerta"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Ciudad *
            </label>
            <Input
              type="text"
              value={companyData.address.city}
              onChange={(e) => handleAddressChange('city', e.target.value)}
              placeholder="Ej: Madrid"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Provincia/Estado *
            </label>
            <Input
              type="text"
              value={companyData.address.state}
              onChange={(e) => handleAddressChange('state', e.target.value)}
              placeholder="Ej: Madrid"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Código postal *
            </label>
            <Input
              type="text"
              value={companyData.address.postal_code}
              onChange={(e) => handleAddressChange('postal_code', e.target.value)}
              placeholder="Ej: 28001"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              País *
            </label>
            <Select
              value={companyData.address.country}
              onChange={(e) => handleAddressChange('country', e.target.value)}
              className="w-full"
            >
              <option value="España">España</option>
              <option value="Francia">Francia</option>
              <option value="Portugal">Portugal</option>
              <option value="Italia">Italia</option>
              <option value="México">México</option>
              <option value="Argentina">Argentina</option>
              <option value="Colombia">Colombia</option>
              <option value="Otro">Otro</option>
            </Select>
          </div>
        </div>
      </div>

      {/* Contact Information */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Información de contacto
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Teléfono *
            </label>
            <Input
              type="tel"
              value={companyData.contact.phone}
              onChange={(e) => handleContactChange('phone', e.target.value)}
              placeholder="Ej: +34 911 234 567"
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Email de contacto *
            </label>
            <Input
              type="email"
              value={companyData.contact.email}
              onChange={(e) => handleContactChange('email', e.target.value)}
              placeholder="contacto@panaderia.com"
              className="w-full"
            />
          </div>

          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Sitio web (opcional)
            </label>
            <Input
              type="url"
              value={companyData.contact.website || ''}
              onChange={(e) => handleContactChange('website', e.target.value)}
              placeholder="https://www.panaderia.com"
              className="w-full"
            />
          </div>
        </div>
      </div>

      {/* Summary */}
      <div className="bg-gray-50 p-4 rounded-lg">
        <h4 className="font-medium text-gray-900 mb-2">Resumen</h4>
        <div className="text-sm text-gray-600 space-y-1">
          <p><strong>Panadería:</strong> {companyData.name || 'Sin especificar'}</p>
          <p><strong>Tipo:</strong> {BAKERY_TYPES.find(t => t.value === companyData.type)?.label}</p>
          <p><strong>Tamaño:</strong> {BAKERY_SIZES.find(s => s.value === companyData.size)?.label}</p>
          <p><strong>Especialidades:</strong> {companyData.specialties?.length || 0} seleccionadas</p>
          <p><strong>Ubicaciones:</strong> {companyData.locations}</p>
        </div>
      </div>
    </div>
  );
};

export default CompanyInfoStep;