import React from 'react';
import { useTranslation } from 'react-i18next';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { Wrench } from 'lucide-react';

const EquipmentDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const data = dataRef?.current || {};

  const handleFieldChange = (field: string, value: any) => {
    onDataChange?.({ ...data, [field]: value });
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Wrench className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('equipment.equipmentDetails')}</h3>
      </div>

      <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-[var(--text-secondary)] mb-2">{t('equipment.fields.name')} *</label>
          <input
            type="text"
            value={data.name || ''}
            onChange={(e) => handleFieldChange('name', e.target.value)}
            placeholder={t('equipment.fields.namePlaceholder')}
            className="w-full px-3 py-2 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-secondary)] mb-2">{t('equipment.fields.type')} *</label>
          <select
            value={data.type || 'oven'}
            onChange={(e) => handleFieldChange('type', e.target.value)}
            className="w-full px-3 py-2 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="oven">{t('equipment.types.oven')}</option>
            <option value="mixer">{t('equipment.types.mixer')}</option>
            <option value="proofer">{t('equipment.types.proofer')}</option>
            <option value="freezer">{t('equipment.types.freezer')}</option>
            <option value="packaging">{t('equipment.types.packaging')}</option>
            <option value="other">{t('equipment.types.other')}</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('equipment.fields.model')}</label>
          <input
            type="text"
            value={data.model || ''}
            onChange={(e) => handleFieldChange('model', e.target.value)}
            placeholder={t('equipment.fields.modelPlaceholder')}
            className="w-full px-3 py-2 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-secondary)] mb-2">{t('equipment.fields.location')}</label>
          <input
            type="text"
            value={data.location || ''}
            onChange={(e) => handleFieldChange('location', e.target.value)}
            placeholder={t('equipment.fields.locationPlaceholder')}
            className="w-full px-3 py-2 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-secondary)] mb-2">{t('equipment.fields.installDate')}</label>
          <input
            type="date"
            value={data.installDate || ''}
            onChange={(e) => handleFieldChange('installDate', e.target.value)}
            className="w-full px-3 py-2 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="md:col-span-2">
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('equipment.fields.supportContactEmail')}</label>
          <input
            type="email"
            value={data.support_contact?.email || ''}
            onChange={(e) => handleFieldChange('support_contact', { ...data.support_contact, email: e.target.value })}
            placeholder={t('equipment.fields.supportContactEmailPlaceholder')}
            className="w-full px-3 py-2 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>
  );
};

export const EquipmentWizardSteps = (dataRef: React.MutableRefObject<Record<string, any>>, setData: (data: Record<string, any>) => void): WizardStep[] => {
  // Wizard steps only handle UI and validation
  // API submission is handled centrally in UnifiedAddWizard.handleWizardComplete
  return [
    {
      id: 'equipment-details',
      title: 'wizards:equipment.steps.equipmentDetails',
      description: 'wizards:equipment.steps.equipmentDetailsDescription',
      component: EquipmentDetailsStep,
      validate: () => {
        const data = dataRef.current;
        // Name and type are required
        return !!(data.name && data.name.trim().length >= 2 && data.type);
      },
    },
  ];
};
