import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { Building2 } from 'lucide-react';
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
import Tooltip from '../../../ui/Tooltip/Tooltip';

const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
  const { t } = useTranslation('wizards');
  // New architecture: access data from dataRef.current
  const data = dataRef?.current || {};

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

  useEffect(() => {
    if (!data.supplierCode && data.name) {
      const code = `SUP-${data.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
      onDataChange?.({ ...data, supplierCode: code });
    }
  }, [data.name]);

  // API submission is handled centrally in UnifiedAddWizard.handleWizardComplete

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Building2 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('supplier.supplierDetails')}</h3>
        <p className="text-sm text-[var(--text-secondary)]">{t('supplier.subtitle')}</p>
      </div>

      {/* Required Fields */}
      <div className="space-y-4">
        <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('supplier.fields.name')} *
            </label>
            <input
              type="text"
              value={data.name}
              onChange={(e) => handleFieldChange('name', e.target.value)}
              placeholder={t('supplier.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 inline-flex items-center gap-2">
              {t('supplier.fields.supplierType')} *
              <Tooltip content={t('supplier.fields.supplierTypeTooltip')}>
                <span />
              </Tooltip>
            </label>
            <select
              value={data.supplierType}
              onChange={(e) => handleFieldChange('supplierType', 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="ingredients">{t('supplier.supplierTypes.ingredients')}</option>
              <option value="packaging">{t('supplier.supplierTypes.packaging')}</option>
              <option value="equipment">{t('supplier.supplierTypes.equipment')}</option>
              <option value="services">{t('supplier.supplierTypes.services')}</option>
              <option value="utilities">{t('supplier.supplierTypes.utilities')}</option>
              <option value="multi">{t('supplier.supplierTypes.multi')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('supplier.fields.status')} *
            </label>
            <select
              value={data.status}
              onChange={(e) => handleFieldChange('status', 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="active">{t('supplier.statuses.active')}</option>
              <option value="inactive">{t('supplier.statuses.inactive')}</option>
              <option value="pending_approval">{t('supplier.statuses.pending_approval')}</option>
              <option value="suspended">{t('supplier.statuses.suspended')}</option>
              <option value="blacklisted">{t('supplier.statuses.blacklisted')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('supplier.fields.paymentTerms')} *
            </label>
            <select
              value={data.paymentTerms}
              onChange={(e) => handleFieldChange('paymentTerms', 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="cod">{t('supplier.paymentTerms.cod')}</option>
              <option value="net_15">{t('supplier.paymentTerms.net_15')}</option>
              <option value="net_30">{t('supplier.paymentTerms.net_30')}</option>
              <option value="net_45">{t('supplier.paymentTerms.net_45')}</option>
              <option value="net_60">{t('supplier.paymentTerms.net_60')}</option>
              <option value="prepaid">{t('supplier.paymentTerms.prepaid')}</option>
              <option value="credit_terms">{t('supplier.paymentTerms.credit_terms')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('supplier.fields.currency')} *
            </label>
            <input
              type="text"
              value={data.currency}
              onChange={(e) => handleFieldChange('currency', e.target.value)}
              placeholder={t('supplier.fields.currencyPlaceholder')}
              maxLength={3}
              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 inline-flex items-center gap-2">
              {t('supplier.fields.leadTime')} *
              <Tooltip content={t('supplier.fields.leadTimeTooltip')}>
                <span />
              </Tooltip>
            </label>
            <input
              type="number"
              value={data.standardLeadTime}
              onChange={(e) => handleFieldChange('standardLeadTime', parseInt(e.target.value) || 0)}
              placeholder="3"
              min="0"
              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 className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('supplier.fields.contactPerson')}
            </label>
            <input
              type="text"
              value={data.contactPerson}
              onChange={(e) => handleFieldChange('contactPerson', e.target.value)}
              placeholder={t('supplier.fields.contactPersonPlaceholder')}
              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('supplier.fields.email')}
            </label>
            <input
              type="email"
              value={data.email}
              onChange={(e) => handleFieldChange('email', e.target.value)}
              placeholder={t('supplier.fields.emailPlaceholder')}
              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('supplier.fields.phone')}
            </label>
            <input
              type="tel"
              value={data.phone}
              onChange={(e) => handleFieldChange('phone', e.target.value)}
              placeholder={t('supplier.fields.phonePlaceholder')}
              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>

      {/* Advanced Options */}
      <AdvancedOptionsSection
        title={t('supplier.advancedOptionsTitle')}
        description={t('supplier.advancedOptionsDescription')}
      >
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('supplier.fields.supplierCode')}
              </label>
              <input
                type="text"
                value={data.supplierCode}
                onChange={(e) => handleFieldChange('supplierCode', e.target.value)}
                placeholder={t('supplier.fields.supplierCodePlaceholder')}
                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('supplier.fields.mobile')}
              </label>
              <input
                type="tel"
                value={data.mobile}
                onChange={(e) => handleFieldChange('mobile', e.target.value)}
                placeholder={t('supplier.fields.mobilePlaceholder')}
                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('supplier.fields.taxId')}
              </label>
              <input
                type="text"
                value={data.taxId}
                onChange={(e) => handleFieldChange('taxId', e.target.value)}
                placeholder={t('supplier.fields.taxIdPlaceholder')}
                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('supplier.fields.registrationNumber')}
              </label>
              <input
                type="text"
                value={data.registrationNumber}
                onChange={(e) => handleFieldChange('registrationNumber', e.target.value)}
                placeholder={t('supplier.fields.registrationNumberPlaceholder')}
                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('supplier.fields.website')}
              </label>
              <input
                type="url"
                value={data.website}
                onChange={(e) => handleFieldChange('website', e.target.value)}
                placeholder={t('supplier.fields.websitePlaceholder')}
                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('supplier.fields.addressLine1')}
              </label>
              <input
                type="text"
                value={data.addressLine1}
                onChange={(e) => handleFieldChange('addressLine1', e.target.value)}
                placeholder={t('supplier.fields.addressLine1Placeholder')}
                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('supplier.fields.addressLine2')}
              </label>
              <input
                type="text"
                value={data.addressLine2}
                onChange={(e) => handleFieldChange('addressLine2', e.target.value)}
                placeholder={t('supplier.fields.addressLine2Placeholder')}
                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('supplier.fields.city')}
              </label>
              <input
                type="text"
                value={data.city}
                onChange={(e) => handleFieldChange('city', e.target.value)}
                placeholder={t('supplier.fields.cityPlaceholder')}
                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('supplier.fields.state')}
              </label>
              <input
                type="text"
                value={data.stateProvince}
                onChange={(e) => handleFieldChange('stateProvince', e.target.value)}
                placeholder={t('supplier.fields.statePlaceholder')}
                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('supplier.fields.postalCode')}
              </label>
              <input
                type="text"
                value={data.postalCode}
                onChange={(e) => handleFieldChange('postalCode', e.target.value)}
                placeholder={t('supplier.fields.postalCodePlaceholder')}
                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('supplier.fields.country')}
              </label>
              <input
                type="text"
                value={data.country}
                onChange={(e) => handleFieldChange('country', e.target.value)}
                placeholder={t('supplier.fields.countryPlaceholder')}
                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('supplier.fields.creditLimit')}
              </label>
              <input
                type="number"
                value={data.creditLimit}
                onChange={(e) => handleFieldChange('creditLimit', e.target.value)}
                placeholder={t('supplier.fields.creditLimitPlaceholder')}
                min="0"
                step="0.01"
                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('supplier.fields.minOrderAmount')}
              </label>
              <input
                type="number"
                value={data.minimumOrderAmount}
                onChange={(e) => handleFieldChange('minimumOrderAmount', e.target.value)}
                placeholder={t('supplier.fields.minOrderAmountPlaceholder')}
                min="0"
                step="0.01"
                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('supplier.fields.deliveryArea')}
              </label>
              <input
                type="text"
                value={data.deliveryArea}
                onChange={(e) => handleFieldChange('deliveryArea', e.target.value)}
                placeholder={t('supplier.fields.deliveryAreaPlaceholder')}
                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 className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="isPreferredSupplier"
                checked={data.isPreferredSupplier}
                onChange={(e) => handleFieldChange('isPreferredSupplier', e.target.checked)}
                className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
              />
              <label htmlFor="isPreferredSupplier" className="text-sm font-medium text-[var(--text-secondary)]">
                {t('supplier.fields.preferredSupplier')}
              </label>
            </div>

            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="autoApproveEnabled"
                checked={data.autoApproveEnabled}
                onChange={(e) => handleFieldChange('autoApproveEnabled', e.target.checked)}
                className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
              />
              <label htmlFor="autoApproveEnabled" className="text-sm font-medium text-[var(--text-secondary)]">
                {t('supplier.fields.autoApproveOrders')}
              </label>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('supplier.fields.certifications')}
            </label>
            <input
              type="text"
              value={data.certifications}
              onChange={(e) => handleFieldChange('certifications', e.target.value)}
              placeholder={t('supplier.fields.certificationsPlaceholder')}
              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('supplier.fields.specializations')}
            </label>
            <input
              type="text"
              value={data.specializations}
              onChange={(e) => handleFieldChange('specializations', e.target.value)}
              placeholder={t('supplier.fields.specializationsPlaceholder')}
              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('supplier.fields.notes')}
            </label>
            <textarea
              value={data.notes}
              onChange={(e) => handleFieldChange('notes', e.target.value)}
              placeholder={t('supplier.fields.notesPlaceholder')}
              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)]"
              rows={3}
            />
          </div>
        </div>
      </AdvancedOptionsSection>

    </div>
  );
};

export const SupplierWizardSteps = (
  dataRef: React.MutableRefObject<Record<string, any>>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => {
  // New architecture: return direct component reference instead of arrow function
  // dataRef and onDataChange are now passed through WizardModal props
  return [
    {
      id: 'supplier-details',
      title: 'wizards:supplier.steps.supplierDetails',
      description: 'wizards:supplier.steps.supplierDetailsDescription',
      component: SupplierDetailsStep,
    },
  ];
};
