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

interface SystemConfig {
  timezone: string;
  currency: string;
  language: string;
  date_format: string;
  number_format: string;
  working_hours: {
    start: string;
    end: string;
    days: number[];
  };
  notifications: {
    email_enabled: boolean;
    sms_enabled: boolean;
    push_enabled: boolean;
    alert_preferences: string[];
  };
  integrations: {
    pos_system?: string;
    accounting_software?: string;
    payment_provider?: string;
  };
  features: {
    inventory_management: boolean;
    production_planning: boolean;
    sales_analytics: boolean;
    customer_management: boolean;
    financial_reporting: boolean;
    quality_control: boolean;
  };
}

const TIMEZONES = [
  { value: 'Europe/Madrid', label: 'Madrid (GMT+1)' },
  { value: 'Europe/London', label: 'London (GMT+0)' },
  { value: 'Europe/Paris', label: 'Paris (GMT+1)' },
  { value: 'America/New_York', label: 'New York (GMT-5)' },
  { value: 'America/Los_Angeles', label: 'Los Angeles (GMT-8)' },
  { value: 'America/Mexico_City', label: 'Mexico City (GMT-6)' },
  { value: 'America/Buenos_Aires', label: 'Buenos Aires (GMT-3)' },
];

const CURRENCIES = [
  { value: 'EUR', label: 'Euro (€)', symbol: '€' },
  { value: 'USD', label: 'US Dollar ($)', symbol: '$' },
  { value: 'GBP', label: 'British Pound (£)', symbol: '£' },
  { value: 'MXN', label: 'Mexican Peso ($)', symbol: '$' },
  { value: 'ARS', label: 'Argentine Peso ($)', symbol: '$' },
  { value: 'COP', label: 'Colombian Peso ($)', symbol: '$' },
];

const LANGUAGES = [
  { value: 'es', label: 'Español' },
  { value: 'en', label: 'English' },
  { value: 'fr', label: 'Français' },
  { value: 'pt', label: 'Português' },
  { value: 'it', label: 'Italiano' },
];

const DAYS_OF_WEEK = [
  { value: 1, label: 'Lunes', short: 'L' },
  { value: 2, label: 'Martes', short: 'M' },
  { value: 3, label: 'Miércoles', short: 'X' },
  { value: 4, label: 'Jueves', short: 'J' },
  { value: 5, label: 'Viernes', short: 'V' },
  { value: 6, label: 'Sábado', short: 'S' },
  { value: 0, label: 'Domingo', short: 'D' },
];

const ALERT_TYPES = [
  { value: 'low_stock', label: 'Stock bajo', description: 'Cuando los ingredientes están por debajo del mínimo' },
  { value: 'production_delays', label: 'Retrasos de producción', description: 'Cuando los lotes se retrasan' },
  { value: 'quality_issues', label: 'Problemas de calidad', description: 'Cuando se detectan problemas de calidad' },
  { value: 'financial_targets', label: 'Objetivos financieros', description: 'Cuando se alcanzan o no se cumplen objetivos' },
  { value: 'equipment_maintenance', label: 'Mantenimiento de equipos', description: 'Recordatorios de mantenimiento' },
  { value: 'food_safety', label: 'Seguridad alimentaria', description: 'Alertas relacionadas con seguridad alimentaria' },
];

const FEATURES = [
  {
    key: 'inventory_management',
    title: 'Gestión de inventario',
    description: 'Control de stock, ingredientes y materias primas',
    recommended: true,
  },
  {
    key: 'production_planning',
    title: 'Planificación de producción',
    description: 'Programación de lotes y gestión de recetas',
    recommended: true,
  },
  {
    key: 'sales_analytics',
    title: 'Analytics de ventas',
    description: 'Reportes y análisis de ventas y tendencias',
    recommended: true,
  },
  {
    key: 'customer_management',
    title: 'Gestión de clientes',
    description: 'Base de datos de clientes y programa de fidelización',
    recommended: false,
  },
  {
    key: 'financial_reporting',
    title: 'Reportes financieros',
    description: 'Análisis de costos, márgenes y rentabilidad',
    recommended: true,
  },
  {
    key: 'quality_control',
    title: 'Control de calidad',
    description: 'Seguimiento de calidad y estándares',
    recommended: true,
  },
];

export const SystemSetupStep: React.FC<OnboardingStepProps> = ({
  data,
  onDataChange,
}) => {
  const systemData: SystemConfig = {
    timezone: 'Europe/Madrid',
    currency: 'EUR',
    language: 'es',
    date_format: 'DD/MM/YYYY',
    number_format: 'European',
    working_hours: {
      start: '06:00',
      end: '20:00',
      days: [1, 2, 3, 4, 5, 6], // Monday to Saturday
    },
    notifications: {
      email_enabled: true,
      sms_enabled: false,
      push_enabled: true,
      alert_preferences: ['low_stock', 'production_delays', 'quality_issues'],
    },
    integrations: {},
    features: {
      inventory_management: true,
      production_planning: true,
      sales_analytics: true,
      customer_management: false,
      financial_reporting: true,
      quality_control: true,
    },
    ...data,
  };

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

  const handleWorkingHoursChange = (field: string, value: any) => {
    onDataChange({
      ...systemData,
      working_hours: {
        ...systemData.working_hours,
        [field]: value,
      },
    });
  };

  const handleNotificationChange = (field: string, value: any) => {
    onDataChange({
      ...systemData,
      notifications: {
        ...systemData.notifications,
        [field]: value,
      },
    });
  };

  const handleIntegrationChange = (field: string, value: string) => {
    onDataChange({
      ...systemData,
      integrations: {
        ...systemData.integrations,
        [field]: value,
      },
    });
  };

  const handleFeatureToggle = (feature: string) => {
    onDataChange({
      ...systemData,
      features: {
        ...systemData.features,
        [feature]: !systemData.features[feature as keyof typeof systemData.features],
      },
    });
  };

  const toggleWorkingDay = (day: number) => {
    const currentDays = systemData.working_hours.days;
    const updatedDays = currentDays.includes(day)
      ? currentDays.filter(d => d !== day)
      : [...currentDays, day].sort();
    
    handleWorkingHoursChange('days', updatedDays);
  };

  const toggleAlertPreference = (alert: string) => {
    const current = systemData.notifications.alert_preferences;
    const updated = current.includes(alert)
      ? current.filter(a => a !== alert)
      : [...current, alert];
    
    handleNotificationChange('alert_preferences', updated);
  };

  return (
    <div className="space-y-8">
      {/* Regional Settings */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Configuración regional
        </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">
              Zona horaria *
            </label>
            <Select
              value={systemData.timezone}
              onChange={(e) => handleInputChange('timezone', e.target.value)}
              className="w-full"
            >
              {TIMEZONES.map((tz) => (
                <option key={tz.value} value={tz.value}>
                  {tz.label}
                </option>
              ))}
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Moneda *
            </label>
            <Select
              value={systemData.currency}
              onChange={(e) => handleInputChange('currency', e.target.value)}
              className="w-full"
            >
              {CURRENCIES.map((currency) => (
                <option key={currency.value} value={currency.value}>
                  {currency.label}
                </option>
              ))}
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Idioma *
            </label>
            <Select
              value={systemData.language}
              onChange={(e) => handleInputChange('language', e.target.value)}
              className="w-full"
            >
              {LANGUAGES.map((lang) => (
                <option key={lang.value} value={lang.value}>
                  {lang.label}
                </option>
              ))}
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Formato de fecha *
            </label>
            <Select
              value={systemData.date_format}
              onChange={(e) => handleInputChange('date_format', e.target.value)}
              className="w-full"
            >
              <option value="DD/MM/YYYY">DD/MM/YYYY</option>
              <option value="MM/DD/YYYY">MM/DD/YYYY</option>
              <option value="YYYY-MM-DD">YYYY-MM-DD</option>
            </Select>
          </div>
        </div>
      </div>

      {/* Working Hours */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Horario de trabajo
        </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">
              Hora de apertura *
            </label>
            <Input
              type="time"
              value={systemData.working_hours.start}
              onChange={(e) => handleWorkingHoursChange('start', e.target.value)}
              className="w-full"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Hora de cierre *
            </label>
            <Input
              type="time"
              value={systemData.working_hours.end}
              onChange={(e) => handleWorkingHoursChange('end', e.target.value)}
              className="w-full"
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Días de operación *
          </label>
          <div className="flex flex-wrap gap-2">
            {DAYS_OF_WEEK.map((day) => (
              <button
                key={day.value}
                onClick={() => toggleWorkingDay(day.value)}
                className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  systemData.working_hours.days.includes(day.value)
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                }`}
              >
                {day.short} - {day.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Features */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Módulos y características
        </h3>
        <p className="text-sm text-gray-600">
          Selecciona las características que quieres activar. Podrás cambiar esto más tarde.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {FEATURES.map((feature) => (
            <Card
              key={feature.key}
              className={`p-4 cursor-pointer transition-colors ${
                systemData.features[feature.key as keyof typeof systemData.features]
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-200 hover:border-gray-300'
              }`}
              onClick={() => handleFeatureToggle(feature.key)}
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h4 className="font-medium text-gray-900">{feature.title}</h4>
                    {feature.recommended && (
                      <Badge className="bg-green-100 text-green-800 text-xs">
                        Recomendado
                      </Badge>
                    )}
                  </div>
                  <p className="text-sm text-gray-600">{feature.description}</p>
                </div>
                
                <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
                  systemData.features[feature.key as keyof typeof systemData.features]
                    ? 'border-blue-500 bg-blue-500'
                    : 'border-gray-300'
                }`}>
                  {systemData.features[feature.key as keyof typeof systemData.features] && (
                    <span className="text-white text-xs">✓</span>
                  )}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Notifications */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Notificaciones
        </h3>

        <div className="space-y-4">
          <div className="flex flex-wrap gap-4">
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={systemData.notifications.email_enabled}
                onChange={(e) => handleNotificationChange('email_enabled', e.target.checked)}
                className="mr-2 rounded"
              />
              Notificaciones por email
            </label>

            <label className="flex items-center">
              <input
                type="checkbox"
                checked={systemData.notifications.push_enabled}
                onChange={(e) => handleNotificationChange('push_enabled', e.target.checked)}
                className="mr-2 rounded"
              />
              Notificaciones push
            </label>

            <label className="flex items-center">
              <input
                type="checkbox"
                checked={systemData.notifications.sms_enabled}
                onChange={(e) => handleNotificationChange('sms_enabled', e.target.checked)}
                className="mr-2 rounded"
              />
              Notificaciones por SMS
            </label>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Tipos de alertas que deseas recibir
            </label>
            <div className="space-y-2">
              {ALERT_TYPES.map((alert) => (
                <div
                  key={alert.value}
                  className={`p-3 border rounded-lg cursor-pointer transition-colors ${
                    systemData.notifications.alert_preferences.includes(alert.value)
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                  onClick={() => toggleAlertPreference(alert.value)}
                >
                  <div className="flex items-start justify-between">
                    <div>
                      <h5 className="font-medium text-gray-900">{alert.label}</h5>
                      <p className="text-sm text-gray-600">{alert.description}</p>
                    </div>
                    <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
                      systemData.notifications.alert_preferences.includes(alert.value)
                        ? 'border-blue-500 bg-blue-500'
                        : 'border-gray-300'
                    }`}>
                      {systemData.notifications.alert_preferences.includes(alert.value) && (
                        <span className="text-white text-xs">✓</span>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Integrations */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
          Integraciones (opcional)
        </h3>
        <p className="text-sm text-gray-600">
          Estas integraciones se pueden configurar más tarde desde el panel de administración.
        </p>

        <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">
              Sistema POS
            </label>
            <Select
              value={systemData.integrations.pos_system || ''}
              onChange={(e) => handleIntegrationChange('pos_system', e.target.value)}
              className="w-full"
            >
              <option value="">Seleccionar...</option>
              <option value="square">Square</option>
              <option value="shopify">Shopify POS</option>
              <option value="toast">Toast</option>
              <option value="lightspeed">Lightspeed</option>
              <option value="other">Otro</option>
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Software de contabilidad
            </label>
            <Select
              value={systemData.integrations.accounting_software || ''}
              onChange={(e) => handleIntegrationChange('accounting_software', e.target.value)}
              className="w-full"
            >
              <option value="">Seleccionar...</option>
              <option value="sage">Sage</option>
              <option value="contaplus">ContaPlus</option>
              <option value="a3">A3 Software</option>
              <option value="quickbooks">QuickBooks</option>
              <option value="other">Otro</option>
            </Select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Proveedor de pagos
            </label>
            <Select
              value={systemData.integrations.payment_provider || ''}
              onChange={(e) => handleIntegrationChange('payment_provider', e.target.value)}
              className="w-full"
            >
              <option value="">Seleccionar...</option>
              <option value="stripe">Stripe</option>
              <option value="paypal">PayPal</option>
              <option value="redsys">Redsys</option>
              <option value="bizum">Bizum</option>
              <option value="other">Otro</option>
            </Select>
          </div>
        </div>
      </div>

      {/* Summary */}
      <div className="bg-gray-50 p-4 rounded-lg">
        <h4 className="font-medium text-gray-900 mb-2">Configuración seleccionada</h4>
        <div className="text-sm text-gray-600 space-y-1">
          <p><strong>Zona horaria:</strong> {TIMEZONES.find(tz => tz.value === systemData.timezone)?.label}</p>
          <p><strong>Moneda:</strong> {CURRENCIES.find(c => c.value === systemData.currency)?.label}</p>
          <p><strong>Horario:</strong> {systemData.working_hours.start} - {systemData.working_hours.end}</p>
          <p><strong>Días operativos:</strong> {systemData.working_hours.days.length} días por semana</p>
          <p><strong>Módulos activados:</strong> {Object.values(systemData.features).filter(Boolean).length} de {Object.keys(systemData.features).length}</p>
        </div>
      </div>
    </div>
  );
};

export default SystemSetupStep;