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

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

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

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

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

      {/* Required Fields */}
      <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('customer.fields.name')} *
            </label>
            <input
              type="text"
              value={data.name || ''}
              onChange={(e) => handleFieldChange('name', e.target.value)}
              placeholder={t('customer.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('customer.fields.customerCode')} *
              <Tooltip content={t('customer.tooltips.customerCode')}>
                <span />
              </Tooltip>
            </label>
            <input
              type="text"
              value={data.customerCode}
              onChange={(e) => handleFieldChange('customerCode', e.target.value)}
              placeholder={t('customer.fields.customerCodePlaceholder')}
              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>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customer.fields.customerType')} *
            </label>
            <select
              value={data.customerType}
              onChange={(e) => handleFieldChange('customerType', 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="individual">{t('customer.customerTypes.individual')}</option>
              <option value="business">{t('customer.customerTypes.business')}</option>
              <option value="central_bakery">{t('customer.customerTypes.central_bakery')}</option>
              <option value="RETAIL">{t('customer.customerTypes.retail')}</option>
              <option value="WHOLESALE">{t('customer.customerTypes.wholesale')}</option>
              <option value="RESTAURANT">{t('customer.customerTypes.restaurant')}</option>
              <option value="HOTEL">{t('customer.customerTypes.hotel')}</option>
              <option value="ENTERPRISE">{t('customer.customerTypes.enterprise')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customer.fields.country')} *
            </label>
            <input
              type="text"
              value={data.country}
              onChange={(e) => handleFieldChange('country', e.target.value)}
              placeholder={t('customer.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>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            {t('customer.fields.businessName')}
          </label>
          <input
            type="text"
            value={data.businessName}
            onChange={(e) => handleFieldChange('businessName', e.target.value)}
            placeholder={t('customer.fields.businessNamePlaceholder')}
            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="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('customer.fields.email')}
            </label>
            <input
              type="email"
              value={data.email}
              onChange={(e) => handleFieldChange('email', e.target.value)}
              placeholder={t('customer.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('customer.fields.phone')}
            </label>
            <input
              type="tel"
              value={data.phone}
              onChange={(e) => handleFieldChange('phone', e.target.value)}
              placeholder={t('customer.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('customer.advancedOptionsTitle')}
        description={t('customer.advancedOptionsDescription')}
      >
        <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('customer.fields.addressLine1')}
              </label>
              <input
                type="text"
                value={data.addressLine1}
                onChange={(e) => handleFieldChange('addressLine1', e.target.value)}
                placeholder={t('customer.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('customer.fields.addressLine2')}
              </label>
              <input
                type="text"
                value={data.addressLine2}
                onChange={(e) => handleFieldChange('addressLine2', e.target.value)}
                placeholder={t('customer.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('customer.fields.city')}
              </label>
              <input
                type="text"
                value={data.city}
                onChange={(e) => handleFieldChange('city', e.target.value)}
                placeholder={t('customer.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('customer.fields.state')}
              </label>
              <input
                type="text"
                value={data.state}
                onChange={(e) => handleFieldChange('state', e.target.value)}
                placeholder={t('customer.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('customer.fields.postalCode')}
              </label>
              <input
                type="text"
                value={data.postalCode}
                onChange={(e) => handleFieldChange('postalCode', e.target.value)}
                placeholder={t('customer.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('customer.fields.taxId')}
              </label>
              <input
                type="text"
                value={data.taxId}
                onChange={(e) => handleFieldChange('taxId', e.target.value)}
                placeholder={t('customer.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('customer.fields.businessLicense')}
              </label>
              <input
                type="text"
                value={data.businessLicense}
                onChange={(e) => handleFieldChange('businessLicense', e.target.value)}
                placeholder={t('customer.fields.businessLicensePlaceholder')}
                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('customer.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="immediate">{t('customer.paymentTerms.immediate')}</option>
                <option value="net_30">{t('customer.paymentTerms.net_30')}</option>
                <option value="net_60">{t('customer.paymentTerms.net_60')}</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customer.fields.creditLimit')}
              </label>
              <input
                type="number"
                value={data.creditLimit}
                onChange={(e) => handleFieldChange('creditLimit', e.target.value)}
                placeholder={t('customer.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('customer.fields.discountPercentage')}
              </label>
              <input
                type="number"
                value={data.discountPercentage}
                onChange={(e) => handleFieldChange('discountPercentage', parseFloat(e.target.value) || 0)}
                placeholder={t('customer.fields.discountPercentagePlaceholder')}
                min="0"
                max="100"
                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('customer.fields.customerSegment')}
              </label>
              <select
                value={data.customerSegment}
                onChange={(e) => handleFieldChange('customerSegment', 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="vip">{t('customer.segments.vip')}</option>
                <option value="regular">{t('customer.segments.regular')}</option>
                <option value="wholesale">{t('customer.segments.wholesale')}</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customer.fields.priorityLevel')}
              </label>
              <select
                value={data.priorityLevel}
                onChange={(e) => handleFieldChange('priorityLevel', 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="high">{t('customer.priorities.high')}</option>
                <option value="normal">{t('customer.priorities.normal')}</option>
                <option value="low">{t('customer.priorities.low')}</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customer.fields.preferredDeliveryMethod')}
              </label>
              <select
                value={data.preferredDeliveryMethod}
                onChange={(e) => handleFieldChange('preferredDeliveryMethod', 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="delivery">{t('customer.deliveryMethods.delivery')}</option>
                <option value="pickup">{t('customer.deliveryMethods.pickup')}</option>
                <option value="shipping">{t('customer.deliveryMethods.shipping')}</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customer.fields.specialInstructions')}
            </label>
            <textarea
              value={data.specialInstructions}
              onChange={(e) => handleFieldChange('specialInstructions', e.target.value)}
              placeholder={t('customer.fields.specialInstructionsPlaceholder')}
              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 CustomerWizardSteps = (
  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: 'customer-details',
      title: 'wizards:customer.steps.customerDetails',
      description: 'wizards:customer.steps.customerDetailsDescription',
      component: CustomerDetailsStep,
      validate: () => {
        const data = dataRef.current;
        // Basic validation - name is required
        if (!data.name || data.name.trim().length < 1) {
          return false;
        }
        return true;
      },
    },
  ];
};
