Planning Phase

import React, { useState, useCallback } from 'react';
import { Modal, Tabs, Input, Select, Button, Checkbox, Upload, message } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquareCaretDown, faSquare } from '@fortawesome/free-regular-svg-icons';
import Icon from '@ant-design/icons';
import AvatarPlaceholderIcon from '../Icons/avatar-placeholder.svg';
import USFlagIcon from '../Icons/us-flag.svg';
import { CustomerModalStep, Language, CountryCode } from '../../types/enums';
import { CustomerFormData, CustomerModalProps } from '../../types/schema';
import { formatPhoneNumber, formatLanguageDisplay } from '../../utils/stringFormatters';
import styles from './CustomerModal.module.less';
import type { UploadProps } from 'antd';

const { TextArea } = Input;
const { Option } = Select;

interface FormErrors {
  firstName?: string;
  lastName?: string;
  language?: string;
  phoneNumber?: string;
  country?: string;
  region?: string;
  apartment?: string;
  city?: string;
  zipCode?: string;
}

const CustomerModal: React.FC<CustomerModalProps> = ({
  isOpen,
  onClose,
  onSave,
  initialStep = CustomerModalStep.OVERVIEW,
  initialData = {}
}) => {
  const [currentStep, setCurrentStep] = useState<CustomerModalStep>(initialStep);
  const [formData, setFormData] = useState<CustomerFormData>({
    firstName: initialData.firstName || 'Jon',
    lastName: initialData.lastName || 'Snow',
    language: initialData.language || Language.ENGLISH,
    countryCode: initialData.countryCode || CountryCode.US,
    phoneNumber: initialData.phoneNumber || '5550199',
    marketingEmails: initialData.marketingEmails || false,
    marketingSMS: initialData.marketingSMS || false,
    country: initialData.country || '',
    region: initialData.region || '',
    apartment: initialData.apartment || '',
    city: initialData.city || '',
    zipCode: initialData.zipCode || '',
    notes: initialData.notes || '',
    avatar: initialData.avatar
  });
  const [errors, setErrors] = useState<FormErrors>({});

  const validateStep = useCallback((step: CustomerModalStep): boolean => {
    const newErrors: FormErrors = {};

    switch (step) {
      case CustomerModalStep.OVERVIEW:
        if (!formData.firstName.trim()) newErrors.firstName = 'First name is required';
        if (!formData.lastName.trim()) newErrors.lastName = 'Last name is required';
        if (!formData.phoneNumber.trim()) newErrors.phoneNumber = 'Phone number is required';
        break;
      case CustomerModalStep.ADDRESS:
        if (!formData.country.trim()) newErrors.country = 'Country is required';
        if (!formData.region.trim()) newErrors.region = 'Region is required';
        if (!formData.apartment.trim()) newErrors.apartment = 'Apartment is required';
        if (!formData.city.trim()) newErrors.city = 'City is required';
        if (!formData.zipCode.trim()) newErrors.zipCode = 'Zip code is required';
        break;
      case CustomerModalStep.NOTES:
        // Notes are optional
        break;
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [formData]);

  const handleFieldChange = (field: keyof CustomerFormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // Clear error when user starts typing
    if (errors[field as keyof FormErrors]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
  };

  const handleTabChange = (key: string) => {
    setCurrentStep(key as CustomerModalStep);
  };

  const handleSaveAsDraft = () => {
    onSave(formData);
  };

  const handleSaveAndNext = () => {
    if (!validateStep(currentStep)) {
      return;
    }

    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
        setCurrentStep(CustomerModalStep.ADDRESS);
        break;
      case CustomerModalStep.ADDRESS:
        setCurrentStep(CustomerModalStep.NOTES);
        break;
      case CustomerModalStep.NOTES:
        onSave(formData);
        break;
    }
  };

  const renderSectionHeader = (step: CustomerModalStep) => {
    const tagClass = `${styles.sectionTag} ${styles[step]}`;
    const titles = {
      [CustomerModalStep.OVERVIEW]: 'Customer Overview',
      [CustomerModalStep.ADDRESS]: 'Address',
      [CustomerModalStep.NOTES]: 'Notes'
    };

    return (
      <div className={styles.modalHeader}>
        <div className={tagClass} />
        <h2 className={styles.sectionTitle}>{titles[step]}</h2>
      </div>
    );
  };

  const renderOverviewForm = () => (
    <div className={styles.formSection}>
      {/* Avatar Section */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Avatar</label>
        <div className={styles.avatarUpload}>
          <Icon component={AvatarPlaceholderIcon} style={{ fontSize: 40 }} />
          <div className={styles.avatarInfo}>
            <span className={styles.avatarChooseText}>Choose</span>
            <span className={styles.avatarHelpText}>JPG, GIF or PNG. 1MB Max.</span>
          </div>
        </div>
      </div>

      {/* Name Fields */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            First Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.firstName}
            onChange={(e) => handleFieldChange('firstName', e.target.value)}
            placeholder="Jon"
            status={errors.firstName ? 'error' : undefined}
          />
          {errors.firstName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.firstName}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Last Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.lastName}
            onChange={(e) => handleFieldChange('lastName', e.target.value)}
            placeholder="Snow"
            status={errors.lastName ? 'error' : undefined}
          />
          {errors.lastName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.lastName}</span>}
        </div>
      </div>

      {/* Language Field */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Language
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Select
          value={formData.language}
          onChange={(value) => handleFieldChange('language', value)}
          suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
        >
          <Option value={Language.ENGLISH}>English (Default)</Option>
          <Option value={Language.SPANISH}>Spanish</Option>
          <Option value={Language.FRENCH}>French</Option>
        </Select>
      </div>

      {/* Phone Number */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
        {errors.phoneNumber && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.phoneNumber}</span>}
      </div>

      {/* Marketing Preferences */}
      <div className={styles.marketingPreferences}>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingEmails}
            onChange={(e) => handleFieldChange('marketingEmails', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive marketing emails.</span>
        </div>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingSMS}
            onChange={(e) => handleFieldChange('marketingSMS', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive SMS marketing text messages.</span>
        </div>
      </div>
    </div>
  );

  const renderAddressForm = () => (
    <div className={styles.formSection}>
      {/* Country and Region */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Country
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.country}
            onChange={(value) => handleFieldChange('country', value)}
            placeholder="Select a country"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.country ? 'error' : undefined}
          >
            <Option value="US">United States</Option>
            <Option value="CA">Canada</Option>
            <Option value="UK">United Kingdom</Option>
          </Select>
          {errors.country && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.country}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Region
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.region}
            onChange={(value) => handleFieldChange('region', value)}
            placeholder="Select your region"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.region ? 'error' : undefined}
          >
            <Option value="CA">California</Option>
            <Option value="NY">New York</Option>
            <Option value="TX">Texas</Option>
          </Select>
          {errors.region && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.region}</span>}
        </div>
      </div>

      {/* Apartment */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Apartments, suite, etc
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Input
          value={formData.apartment}
          onChange={(e) => handleFieldChange('apartment', e.target.value)}
          placeholder="Enter your apartments, suite, etc"
          status={errors.apartment ? 'error' : undefined}
        />
        {errors.apartment && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.apartment}</span>}
      </div>

      {/* City and Zip Code */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            City
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.city}
            onChange={(e) => handleFieldChange('city', e.target.value)}
            placeholder="Enter your City"
            status={errors.city ? 'error' : undefined}
          />
          {errors.city && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.city}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Zip Code
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.zipCode}
            onChange={(e) => handleFieldChange('zipCode', e.target.value)}
            placeholder="Enter zip code"
            status={errors.zipCode ? 'error' : undefined}
          />
          {errors.zipCode && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.zipCode}</span>}
        </div>
      </div>

      {/* Phone Number (duplicate from overview) */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
      </div>
    </div>
  );

  const renderNotesForm = () => (
    <div className={styles.formSection}>
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Note</label>
        <TextArea
          value={formData.notes}
          onChange={(e) => handleFieldChange('notes', e.target.value)}
          placeholder="A short and clear note for your customer..."
          className={styles.notesTextarea}
          rows={8}
        />
        <div className={styles.notesHelpText}>Add personal note for your customer</div>
      </div>
    </div>
  );

  const getButtonText = () => {
    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
      case CustomerModalStep.ADDRESS:
        return 'Save and Next';
      case CustomerModalStep.NOTES:
        return 'Done';
      default:
        return 'Save and Next';
    }
  };

  const tabItems = [
    {
      key: CustomerModalStep.OVERVIEW,
      label: 'Overview',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.OVERVIEW)}
          {renderOverviewForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.ADDRESS,
      label: 'Address',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.ADDRESS)}
          {renderAddressForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.NOTES,
      label: 'Notes',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.NOTES)}
          {renderNotesForm()}
        </>
      )
    }
  ];

  return (
    <Modal
      open={isOpen}
      onCancel={onClose}
      footer={null}
      width={600}
      className={styles.customerModal}
      destroyOnClose
    >
      <Tabs
        activeKey={currentStep}
        onChange={handleTabChange}
        items={tabItems}
        className={styles.customTabs}
      />
      
      <div className={styles.modalActions}>
        <Button
          onClick={handleSaveAsDraft}
          className={styles.draftButton}
        >
          Save as Draft
        </Button>
        <Button
          type="primary"
          onClick={handleSaveAndNext}
          className={styles.primaryButton}
        >
          {getButtonText()}
        </Button>
      </div>
    </Modal>
  );
};

export default CustomerModal;

import React, { useState, useCallback } from 'react';
import { Modal, Tabs, Input, Select, Button, Checkbox, Upload, message } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquareCaretDown, faSquare } from '@fortawesome/free-regular-svg-icons';
import Icon from '@ant-design/icons';
import AvatarPlaceholderIcon from '../Icons/avatar-placeholder.svg';
import USFlagIcon from '../Icons/us-flag.svg';
import { CustomerModalStep, Language, CountryCode } from '../../types/enums';
import { CustomerFormData, CustomerModalProps } from '../../types/schema';
import { formatPhoneNumber, formatLanguageDisplay } from '../../utils/stringFormatters';
import styles from './CustomerModal.module.less';
import type { UploadProps } from 'antd';

const { TextArea } = Input;
const { Option } = Select;

interface FormErrors {
  firstName?: string;
  lastName?: string;
  language?: string;
  phoneNumber?: string;
  country?: string;
  region?: string;
  apartment?: string;
  city?: string;
  zipCode?: string;
}

const CustomerModal: React.FC<CustomerModalProps> = ({
  isOpen,
  onClose,
  onSave,
  initialStep = CustomerModalStep.OVERVIEW,
  initialData = {}
}) => {
  const [currentStep, setCurrentStep] = useState<CustomerModalStep>(initialStep);
  const [formData, setFormData] = useState<CustomerFormData>({
    firstName: initialData.firstName || 'Jon',
    lastName: initialData.lastName || 'Snow',
    language: initialData.language || Language.ENGLISH,
    countryCode: initialData.countryCode || CountryCode.US,
    phoneNumber: initialData.phoneNumber || '5550199',
    marketingEmails: initialData.marketingEmails || false,
    marketingSMS: initialData.marketingSMS || false,
    country: initialData.country || '',
    region: initialData.region || '',
    apartment: initialData.apartment || '',
    city: initialData.city || '',
    zipCode: initialData.zipCode || '',
    notes: initialData.notes || '',
    avatar: initialData.avatar
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const [avatarUrl, setAvatarUrl] = useState<string>('');

  const validateStep = useCallback((step: CustomerModalStep): boolean => {
    const newErrors: FormErrors = {};

    switch (step) {
      case CustomerModalStep.OVERVIEW:
        if (!formData.firstName.trim()) newErrors.firstName = 'First name is required';
        if (!formData.lastName.trim()) newErrors.lastName = 'Last name is required';
        if (!formData.phoneNumber.trim()) newErrors.phoneNumber = 'Phone number is required';
        break;
      case CustomerModalStep.ADDRESS:
        if (!formData.country.trim()) newErrors.country = 'Country is required';
        if (!formData.region.trim()) newErrors.region = 'Region is required';
        if (!formData.apartment.trim()) newErrors.apartment = 'Apartment is required';
        if (!formData.city.trim()) newErrors.city = 'City is required';
        if (!formData.zipCode.trim()) newErrors.zipCode = 'Zip code is required';
        break;
      case CustomerModalStep.NOTES:
        // Notes are optional
        break;
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [formData]);

  const handleFieldChange = (field: keyof CustomerFormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // Clear error when user starts typing
    if (errors[field as keyof FormErrors]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
  };

  const handleTabChange = (key: string) => {
    setCurrentStep(key as CustomerModalStep);
  };

  const handleSaveAsDraft = () => {
    onSave(formData);
  };

  const handleSaveAndNext = () => {
    if (!validateStep(currentStep)) {
      return;
    }

    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
        setCurrentStep(CustomerModalStep.ADDRESS);
        break;
      case CustomerModalStep.ADDRESS:
        setCurrentStep(CustomerModalStep.NOTES);
        break;
      case CustomerModalStep.NOTES:
        onSave(formData);
        break;
    }
  };

  const renderSectionHeader = (step: CustomerModalStep) => {
    const tagClass = `${styles.sectionTag} ${styles[step]}`;
    const titles = {
      [CustomerModalStep.OVERVIEW]: 'Customer Overview',
      [CustomerModalStep.ADDRESS]: 'Address',
      [CustomerModalStep.NOTES]: 'Notes'
    };

    return (
      <div className={styles.modalHeader}>
        <div className={tagClass} />
        <h2 className={styles.sectionTitle}>{titles[step]}</h2>
      </div>
    );
  };

  const renderOverviewForm = () => (
    <div className={styles.formSection}>
      {/* Avatar Section */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Avatar</label>
        <div className={styles.avatarUpload}>
          <Icon component={AvatarPlaceholderIcon} style={{ fontSize: 40 }} />
          <div className={styles.avatarInfo}>
            <span className={styles.avatarChooseText}>Choose</span>
            <span className={styles.avatarHelpText}>JPG, GIF or PNG. 1MB Max.</span>
          </div>
        </div>
      </div>

      {/* Name Fields */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            First Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.firstName}
            onChange={(e) => handleFieldChange('firstName', e.target.value)}
            placeholder="Jon"
            status={errors.firstName ? 'error' : undefined}
          />
          {errors.firstName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.firstName}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Last Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.lastName}
            onChange={(e) => handleFieldChange('lastName', e.target.value)}
            placeholder="Snow"
            status={errors.lastName ? 'error' : undefined}
          />
          {errors.lastName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.lastName}</span>}
        </div>
      </div>

      {/* Language Field */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Language
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Select
          value={formData.language}
          onChange={(value) => handleFieldChange('language', value)}
          suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
        >
          <Option value={Language.ENGLISH}>English (Default)</Option>
          <Option value={Language.SPANISH}>Spanish</Option>
          <Option value={Language.FRENCH}>French</Option>
        </Select>
      </div>

      {/* Phone Number */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
        {errors.phoneNumber && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.phoneNumber}</span>}
      </div>

      {/* Marketing Preferences */}
      <div className={styles.marketingPreferences}>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingEmails}
            onChange={(e) => handleFieldChange('marketingEmails', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive marketing emails.</span>
        </div>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingSMS}
            onChange={(e) => handleFieldChange('marketingSMS', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive SMS marketing text messages.</span>
        </div>
      </div>
    </div>
  );

  const renderAddressForm = () => (
    <div className={styles.formSection}>
      {/* Country and Region */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Country
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.country}
            onChange={(value) => handleFieldChange('country', value)}
            placeholder="Select a country"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.country ? 'error' : undefined}
          >
            <Option value="US">United States</Option>
            <Option value="CA">Canada</Option>
            <Option value="UK">United Kingdom</Option>
          </Select>
          {errors.country && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.country}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Region
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.region}
            onChange={(value) => handleFieldChange('region', value)}
            placeholder="Select your region"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.region ? 'error' : undefined}
          >
            <Option value="CA">California</Option>
            <Option value="NY">New York</Option>
            <Option value="TX">Texas</Option>
          </Select>
          {errors.region && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.region}</span>}
        </div>
      </div>

      {/* Apartment */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Apartments, suite, etc
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Input
          value={formData.apartment}
          onChange={(e) => handleFieldChange('apartment', e.target.value)}
          placeholder="Enter your apartments, suite, etc"
          status={errors.apartment ? 'error' : undefined}
        />
        {errors.apartment && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.apartment}</span>}
      </div>

      {/* City and Zip Code */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            City
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.city}
            onChange={(e) => handleFieldChange('city', e.target.value)}
            placeholder="Enter your City"
            status={errors.city ? 'error' : undefined}
          />
          {errors.city && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.city}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Zip Code
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.zipCode}
            onChange={(e) => handleFieldChange('zipCode', e.target.value)}
            placeholder="Enter zip code"
            status={errors.zipCode ? 'error' : undefined}
          />
          {errors.zipCode && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.zipCode}</span>}
        </div>
      </div>

      {/* Phone Number (duplicate from overview) */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
      </div>
    </div>
  );

  const renderNotesForm = () => (
    <div className={styles.formSection}>
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Note</label>
        <TextArea
          value={formData.notes}
          onChange={(e) => handleFieldChange('notes', e.target.value)}
          placeholder="A short and clear note for your customer..."
          className={styles.notesTextarea}
          rows={8}
        />
        <div className={styles.notesHelpText}>Add personal note for your customer</div>
      </div>
    </div>
  );

  const getButtonText = () => {
    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
      case CustomerModalStep.ADDRESS:
        return 'Save and Next';
      case CustomerModalStep.NOTES:
        return 'Done';
      default:
        return 'Save and Next';
    }
  };

  const tabItems = [
    {
      key: CustomerModalStep.OVERVIEW,
      label: 'Overview',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.OVERVIEW)}
          {renderOverviewForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.ADDRESS,
      label: 'Address',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.ADDRESS)}
          {renderAddressForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.NOTES,
      label: 'Notes',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.NOTES)}
          {renderNotesForm()}
        </>
      )
    }
  ];

  return (
    <Modal
      open={isOpen}
      onCancel={onClose}
      footer={null}
      width={600}
      className={styles.customerModal}
      destroyOnClose
    >
      <Tabs
        activeKey={currentStep}
        onChange={handleTabChange}
        items={tabItems}
        className={styles.customTabs}
      />
      
      <div className={styles.modalActions}>
        <Button
          onClick={handleSaveAsDraft}
          className={styles.draftButton}
        >
          Save as Draft
        </Button>
        <Button
          type="primary"
          onClick={handleSaveAndNext}
          className={styles.primaryButton}
        >
          {getButtonText()}
        </Button>
      </div>
    </Modal>
  );
};

export default CustomerModal;

import React, { useState, useCallback } from 'react';
import { Modal, Tabs, Input, Select, Button, Checkbox, Upload, message } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquareCaretDown, faSquare } from '@fortawesome/free-regular-svg-icons';
import Icon from '@ant-design/icons';
import AvatarPlaceholderIcon from '../Icons/avatar-placeholder.svg';
import USFlagIcon from '../Icons/us-flag.svg';
import { CustomerModalStep, Language, CountryCode } from '../../types/enums';
import { CustomerFormData, CustomerModalProps } from '../../types/schema';
import { formatPhoneNumber, formatLanguageDisplay } from '../../utils/stringFormatters';
import styles from './CustomerModal.module.less';
import type { UploadProps } from 'antd';

const { TextArea } = Input;
const { Option } = Select;

interface FormErrors {
  firstName?: string;
  lastName?: string;
  language?: string;
  phoneNumber?: string;
  country?: string;
  region?: string;
  apartment?: string;
  city?: string;
  zipCode?: string;
}

const CustomerModal: React.FC<CustomerModalProps> = ({
  isOpen,
  onClose,
  onSave,
  initialStep = CustomerModalStep.OVERVIEW,
  initialData = {}
}) => {
  const [currentStep, setCurrentStep] = useState<CustomerModalStep>(initialStep);
  const [formData, setFormData] = useState<CustomerFormData>({
    firstName: initialData.firstName || 'Jon',
    lastName: initialData.lastName || 'Snow',
    language: initialData.language || Language.ENGLISH,
    countryCode: initialData.countryCode || CountryCode.US,
    phoneNumber: initialData.phoneNumber || '5550199',
    marketingEmails: initialData.marketingEmails || false,
    marketingSMS: initialData.marketingSMS || false,
    country: initialData.country || '',
    region: initialData.region || '',
    apartment: initialData.apartment || '',
    city: initialData.city || '',
    zipCode: initialData.zipCode || '',
    notes: initialData.notes || '',
    avatar: initialData.avatar
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const [avatarUrl, setAvatarUrl] = useState<string>('');

  const validateStep = useCallback((step: CustomerModalStep): boolean => {
    const newErrors: FormErrors = {};

    switch (step) {
      case CustomerModalStep.OVERVIEW:
        if (!formData.firstName.trim()) newErrors.firstName = 'First name is required';
        if (!formData.lastName.trim()) newErrors.lastName = 'Last name is required';
        if (!formData.phoneNumber.trim()) newErrors.phoneNumber = 'Phone number is required';
        break;
      case CustomerModalStep.ADDRESS:
        if (!formData.country.trim()) newErrors.country = 'Country is required';
        if (!formData.region.trim()) newErrors.region = 'Region is required';
        if (!formData.apartment.trim()) newErrors.apartment = 'Apartment is required';
        if (!formData.city.trim()) newErrors.city = 'City is required';
        if (!formData.zipCode.trim()) newErrors.zipCode = 'Zip code is required';
        break;
      case CustomerModalStep.NOTES:
        // Notes are optional
        break;
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [formData]);

  const handleFieldChange = (field: keyof CustomerFormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // Clear error when user starts typing
    if (errors[field as keyof FormErrors]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
  };

  const handleTabChange = (key: string) => {
    setCurrentStep(key as CustomerModalStep);
  };

  const handleSaveAsDraft = () => {
    onSave(formData);
  };

  const handleSaveAndNext = () => {
    if (!validateStep(currentStep)) {
      return;
    }

    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
        setCurrentStep(CustomerModalStep.ADDRESS);
        break;
      case CustomerModalStep.ADDRESS:
        setCurrentStep(CustomerModalStep.NOTES);
        break;
      case CustomerModalStep.NOTES:
        onSave(formData);
        break;
    }
  };

  const handleAvatarUpload: UploadProps['customRequest'] = (options) => {
    const { file, onSuccess, onError } = options;
    
    // Validate file type
    const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isValidType) {
      message.error('You can only upload JPG, PNG or GIF files!');
      onError?.(new Error('Invalid file type'));
      return;
    }

    // Validate file size (1MB = 1024 * 1024 bytes)
    const isValidSize = file.size / 1024 / 1024 < 1;
    if (!isValidSize) {
      message.error('Image must be smaller than 1MB!');
      onError?.(new Error('File too large'));
      return;
    }

    // Create preview URL
    const reader = new FileReader();
    reader.onload = () => {
      setAvatarUrl(reader.result as string);
      handleFieldChange('avatar', file);
      onSuccess?.(file);
    };
    reader.readAsDataURL(file as File);
  };

  const handleAvatarRemove = () => {
    setAvatarUrl('');
    handleFieldChange('avatar', undefined);
  };

  const renderSectionHeader = (step: CustomerModalStep) => {
    const tagClass = `${styles.sectionTag} ${styles[step]}`;
    const titles = {
      [CustomerModalStep.OVERVIEW]: 'Customer Overview',
      [CustomerModalStep.ADDRESS]: 'Address',
      [CustomerModalStep.NOTES]: 'Notes'
    };

    return (
      <div className={styles.modalHeader}>
        <div className={tagClass} />
        <h2 className={styles.sectionTitle}>{titles[step]}</h2>
      </div>
    );
  };

  const renderOverviewForm = () => (
    <div className={styles.formSection}>
      {/* Avatar Section */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Avatar</label>
        <div className={styles.avatarUpload}>
          <Icon component={AvatarPlaceholderIcon} style={{ fontSize: 40 }} />
          <div className={styles.avatarInfo}>
            <span className={styles.avatarChooseText}>Choose</span>
            <span className={styles.avatarHelpText}>JPG, GIF or PNG. 1MB Max.</span>
          </div>
        </div>
      </div>

      {/* Name Fields */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            First Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.firstName}
            onChange={(e) => handleFieldChange('firstName', e.target.value)}
            placeholder="Jon"
            status={errors.firstName ? 'error' : undefined}
          />
          {errors.firstName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.firstName}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Last Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.lastName}
            onChange={(e) => handleFieldChange('lastName', e.target.value)}
            placeholder="Snow"
            status={errors.lastName ? 'error' : undefined}
          />
          {errors.lastName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.lastName}</span>}
        </div>
      </div>

      {/* Language Field */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Language
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Select
          value={formData.language}
          onChange={(value) => handleFieldChange('language', value)}
          suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
        >
          <Option value={Language.ENGLISH}>English (Default)</Option>
          <Option value={Language.SPANISH}>Spanish</Option>
          <Option value={Language.FRENCH}>French</Option>
        </Select>
      </div>

      {/* Phone Number */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
        {errors.phoneNumber && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.phoneNumber}</span>}
      </div>

      {/* Marketing Preferences */}
      <div className={styles.marketingPreferences}>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingEmails}
            onChange={(e) => handleFieldChange('marketingEmails', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive marketing emails.</span>
        </div>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingSMS}
            onChange={(e) => handleFieldChange('marketingSMS', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive SMS marketing text messages.</span>
        </div>
      </div>
    </div>
  );

  const renderAddressForm = () => (
    <div className={styles.formSection}>
      {/* Country and Region */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Country
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.country}
            onChange={(value) => handleFieldChange('country', value)}
            placeholder="Select a country"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.country ? 'error' : undefined}
          >
            <Option value="US">United States</Option>
            <Option value="CA">Canada</Option>
            <Option value="UK">United Kingdom</Option>
          </Select>
          {errors.country && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.country}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Region
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.region}
            onChange={(value) => handleFieldChange('region', value)}
            placeholder="Select your region"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.region ? 'error' : undefined}
          >
            <Option value="CA">California</Option>
            <Option value="NY">New York</Option>
            <Option value="TX">Texas</Option>
          </Select>
          {errors.region && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.region}</span>}
        </div>
      </div>

      {/* Apartment */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Apartments, suite, etc
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Input
          value={formData.apartment}
          onChange={(e) => handleFieldChange('apartment', e.target.value)}
          placeholder="Enter your apartments, suite, etc"
          status={errors.apartment ? 'error' : undefined}
        />
        {errors.apartment && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.apartment}</span>}
      </div>

      {/* City and Zip Code */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            City
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.city}
            onChange={(e) => handleFieldChange('city', e.target.value)}
            placeholder="Enter your City"
            status={errors.city ? 'error' : undefined}
          />
          {errors.city && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.city}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Zip Code
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.zipCode}
            onChange={(e) => handleFieldChange('zipCode', e.target.value)}
            placeholder="Enter zip code"
            status={errors.zipCode ? 'error' : undefined}
          />
          {errors.zipCode && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.zipCode}</span>}
        </div>
      </div>

      {/* Phone Number (duplicate from overview) */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
      </div>
    </div>
  );

  const renderNotesForm = () => (
    <div className={styles.formSection}>
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Note</label>
        <TextArea
          value={formData.notes}
          onChange={(e) => handleFieldChange('notes', e.target.value)}
          placeholder="A short and clear note for your customer..."
          className={styles.notesTextarea}
          rows={8}
        />
        <div className={styles.notesHelpText}>Add personal note for your customer</div>
      </div>
    </div>
  );

  const getButtonText = () => {
    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
      case CustomerModalStep.ADDRESS:
        return 'Save and Next';
      case CustomerModalStep.NOTES:
        return 'Done';
      default:
        return 'Save and Next';
    }
  };

  const tabItems = [
    {
      key: CustomerModalStep.OVERVIEW,
      label: 'Overview',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.OVERVIEW)}
          {renderOverviewForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.ADDRESS,
      label: 'Address',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.ADDRESS)}
          {renderAddressForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.NOTES,
      label: 'Notes',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.NOTES)}
          {renderNotesForm()}
        </>
      )
    }
  ];

  return (
    <Modal
      open={isOpen}
      onCancel={onClose}
      footer={null}
      width={600}
      className={styles.customerModal}
      destroyOnClose
    >
      <Tabs
        activeKey={currentStep}
        onChange={handleTabChange}
        items={tabItems}
        className={styles.customTabs}
      />
      
      <div className={styles.modalActions}>
        <Button
          onClick={handleSaveAsDraft}
          className={styles.draftButton}
        >
          Save as Draft
        </Button>
        <Button
          type="primary"
          onClick={handleSaveAndNext}
          className={styles.primaryButton}
        >
          {getButtonText()}
        </Button>
      </div>
    </Modal>
  );
};

export default CustomerModal;

import React, { useState, useCallback } from 'react';
import { Modal, Tabs, Input, Select, Button, Checkbox, Upload, message } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquareCaretDown, faSquare } from '@fortawesome/free-regular-svg-icons';
import Icon from '@ant-design/icons';
import AvatarPlaceholderIcon from '../Icons/avatar-placeholder.svg';
import USFlagIcon from '../Icons/us-flag.svg';
import { CustomerModalStep, Language, CountryCode } from '../../types/enums';
import { CustomerFormData, CustomerModalProps } from '../../types/schema';
import { formatPhoneNumber, formatLanguageDisplay } from '../../utils/stringFormatters';
import styles from './CustomerModal.module.less';
import type { UploadProps } from 'antd';

const { TextArea } = Input;
const { Option } = Select;

interface FormErrors {
  firstName?: string;
  lastName?: string;
  language?: string;
  phoneNumber?: string;
  country?: string;
  region?: string;
  apartment?: string;
  city?: string;
  zipCode?: string;
}

const CustomerModal: React.FC<CustomerModalProps> = ({
  isOpen,
  onClose,
  onSave,
  initialStep = CustomerModalStep.OVERVIEW,
  initialData = {}
}) => {
  const [currentStep, setCurrentStep] = useState<CustomerModalStep>(initialStep);
  const [formData, setFormData] = useState<CustomerFormData>({
    firstName: initialData.firstName || 'Jon',
    lastName: initialData.lastName || 'Snow',
    language: initialData.language || Language.ENGLISH,
    countryCode: initialData.countryCode || CountryCode.US,
    phoneNumber: initialData.phoneNumber || '5550199',
    marketingEmails: initialData.marketingEmails || false,
    marketingSMS: initialData.marketingSMS || false,
    country: initialData.country || '',
    region: initialData.region || '',
    apartment: initialData.apartment || '',
    city: initialData.city || '',
    zipCode: initialData.zipCode || '',
    notes: initialData.notes || '',
    avatar: initialData.avatar
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const [avatarUrl, setAvatarUrl] = useState<string>('');

  const validateStep = useCallback((step: CustomerModalStep): boolean => {
    const newErrors: FormErrors = {};

    switch (step) {
      case CustomerModalStep.OVERVIEW:
        if (!formData.firstName.trim()) newErrors.firstName = 'First name is required';
        if (!formData.lastName.trim()) newErrors.lastName = 'Last name is required';
        if (!formData.phoneNumber.trim()) newErrors.phoneNumber = 'Phone number is required';
        break;
      case CustomerModalStep.ADDRESS:
        if (!formData.country.trim()) newErrors.country = 'Country is required';
        if (!formData.region.trim()) newErrors.region = 'Region is required';
        if (!formData.apartment.trim()) newErrors.apartment = 'Apartment is required';
        if (!formData.city.trim()) newErrors.city = 'City is required';
        if (!formData.zipCode.trim()) newErrors.zipCode = 'Zip code is required';
        break;
      case CustomerModalStep.NOTES:
        // Notes are optional
        break;
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [formData]);

  const handleFieldChange = (field: keyof CustomerFormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // Clear error when user starts typing
    if (errors[field as keyof FormErrors]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
  };

  const handleTabChange = (key: string) => {
    setCurrentStep(key as CustomerModalStep);
  };

  const handleSaveAsDraft = () => {
    onSave(formData);
  };

  const handleSaveAndNext = () => {
    if (!validateStep(currentStep)) {
      return;
    }

    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
        setCurrentStep(CustomerModalStep.ADDRESS);
        break;
      case CustomerModalStep.ADDRESS:
        setCurrentStep(CustomerModalStep.NOTES);
        break;
      case CustomerModalStep.NOTES:
        onSave(formData);
        break;
    }
  };

  const handleAvatarUpload: UploadProps['customRequest'] = (options) => {
    const { file, onSuccess, onError } = options;
    
    // Validate file type
    const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isValidType) {
      message.error('You can only upload JPG, PNG or GIF files!');
      onError?.(new Error('Invalid file type'));
      return;
    }

    // Validate file size (1MB = 1024 * 1024 bytes)
    const isValidSize = file.size / 1024 / 1024 < 1;
    if (!isValidSize) {
      message.error('Image must be smaller than 1MB!');
      onError?.(new Error('File too large'));
      return;
    }

    // Create preview URL
    const reader = new FileReader();
    reader.onload = () => {
      setAvatarUrl(reader.result as string);
      handleFieldChange('avatar', file);
      onSuccess?.(file);
    };
    reader.readAsDataURL(file as File);
  };

  const handleAvatarRemove = () => {
    setAvatarUrl('');
    handleFieldChange('avatar', undefined);
  };

  const renderSectionHeader = (step: CustomerModalStep) => {
    const tagClass = `${styles.sectionTag} ${styles[step]}`;
    const titles = {
      [CustomerModalStep.OVERVIEW]: 'Customer Overview',
      [CustomerModalStep.ADDRESS]: 'Address',
      [CustomerModalStep.NOTES]: 'Notes'
    };

    return (
      <div className={styles.modalHeader}>
        <div className={tagClass} />
        <h2 className={styles.sectionTitle}>{titles[step]}</h2>
      </div>
    );
  };

  const renderOverviewForm = () => (
    <div className={styles.formSection}>
      {/* Avatar Section */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Avatar</label>
        <div className={styles.avatarUpload}>
          {avatarUrl ? (
            <img 
              src={avatarUrl} 
              alt="Avatar" 
              style={{ 
                width: 40, 
                height: 40, 
                borderRadius: '50%', 
                objectFit: 'cover' 
              }} 
            />
          ) : (
            <Icon component={AvatarPlaceholderIcon} style={{ fontSize: 40 }} />
          )}
          <Upload
            customRequest={handleAvatarUpload}
            onRemove={handleAvatarRemove}
            showUploadList={false}
            accept=".jpg,.jpeg,.png,.gif"
          >
            <div className={styles.avatarInfo} style={{ cursor: 'pointer' }}>
              <span className={styles.avatarChooseText}>Choose</span>
              <span className={styles.avatarHelpText}>JPG, GIF or PNG. 1MB Max.</span>
            </div>
          </Upload>
        </div>
      </div>

      {/* Name Fields */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            First Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.firstName}
            onChange={(e) => handleFieldChange('firstName', e.target.value)}
            placeholder="Jon"
            status={errors.firstName ? 'error' : undefined}
          />
          {errors.firstName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.firstName}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Last Name
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.lastName}
            onChange={(e) => handleFieldChange('lastName', e.target.value)}
            placeholder="Snow"
            status={errors.lastName ? 'error' : undefined}
          />
          {errors.lastName && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.lastName}</span>}
        </div>
      </div>

      {/* Language Field */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Language
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Select
          value={formData.language}
          onChange={(value) => handleFieldChange('language', value)}
          suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
        >
          <Option value={Language.ENGLISH}>English (Default)</Option>
          <Option value={Language.SPANISH}>Spanish</Option>
          <Option value={Language.FRENCH}>French</Option>
        </Select>
      </div>

      {/* Phone Number */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
        {errors.phoneNumber && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.phoneNumber}</span>}
      </div>

      {/* Marketing Preferences */}
      <div className={styles.marketingPreferences}>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingEmails}
            onChange={(e) => handleFieldChange('marketingEmails', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive marketing emails.</span>
        </div>
        <div className={styles.preferenceItem}>
          <Checkbox
            checked={formData.marketingSMS}
            onChange={(e) => handleFieldChange('marketingSMS', e.target.checked)}
          />
          <span className={styles.preferenceText}>Customer agreed to receive SMS marketing text messages.</span>
        </div>
      </div>
    </div>
  );

  const renderAddressForm = () => (
    <div className={styles.formSection}>
      {/* Country and Region */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Country
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.country}
            onChange={(value) => handleFieldChange('country', value)}
            placeholder="Select a country"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.country ? 'error' : undefined}
          >
            <Option value="US">United States</Option>
            <Option value="CA">Canada</Option>
            <Option value="UK">United Kingdom</Option>
          </Select>
          {errors.country && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.country}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Region
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Select
            value={formData.region}
            onChange={(value) => handleFieldChange('region', value)}
            placeholder="Select your region"
            suffixIcon={<FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c' }} />}
            status={errors.region ? 'error' : undefined}
          >
            <Option value="CA">California</Option>
            <Option value="NY">New York</Option>
            <Option value="TX">Texas</Option>
          </Select>
          {errors.region && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.region}</span>}
        </div>
      </div>

      {/* Apartment */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Apartments, suite, etc
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <Input
          value={formData.apartment}
          onChange={(e) => handleFieldChange('apartment', e.target.value)}
          placeholder="Enter your apartments, suite, etc"
          status={errors.apartment ? 'error' : undefined}
        />
        {errors.apartment && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.apartment}</span>}
      </div>

      {/* City and Zip Code */}
      <div className={styles.formRow}>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            City
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.city}
            onChange={(e) => handleFieldChange('city', e.target.value)}
            placeholder="Enter your City"
            status={errors.city ? 'error' : undefined}
          />
          {errors.city && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.city}</span>}
        </div>
        <div className={styles.formField}>
          <label className={styles.fieldLabel}>
            Zip Code
            <span className={styles.requiredAsterisk}>*</span>
          </label>
          <Input
            value={formData.zipCode}
            onChange={(e) => handleFieldChange('zipCode', e.target.value)}
            placeholder="Enter zip code"
            status={errors.zipCode ? 'error' : undefined}
          />
          {errors.zipCode && <span style={{ color: '#ff4d4f', fontSize: 12 }}>{errors.zipCode}</span>}
        </div>
      </div>

      {/* Phone Number (duplicate from overview) */}
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>
          Phone Number
          <span className={styles.requiredAsterisk}>*</span>
        </label>
        <div className={styles.phoneInput}>
          <div className={styles.countryCodeSelect}>
            <Icon component={USFlagIcon} className={styles.flagIcon} />
            <span className={styles.countryCodeText}>{formData.countryCode}</span>
            <FontAwesomeIcon icon={faSquareCaretDown} style={{ color: '#696f8c', fontSize: 11 }} />
          </div>
          <input
            className={styles.phoneNumberInput}
            value={formatPhoneNumber(formData.phoneNumber)}
            onChange={(e) => handleFieldChange('phoneNumber', e.target.value.replace(/[^\d]/g, ''))}
            placeholder="555‑0199"
          />
        </div>
      </div>
    </div>
  );

  const renderNotesForm = () => (
    <div className={styles.formSection}>
      <div className={styles.formField}>
        <label className={styles.fieldLabel}>Note</label>
        <TextArea
          value={formData.notes}
          onChange={(e) => handleFieldChange('notes', e.target.value)}
          placeholder="A short and clear note for your customer..."
          className={styles.notesTextarea}
          rows={8}
        />
        <div className={styles.notesHelpText}>Add personal note for your customer</div>
      </div>
    </div>
  );

  const getButtonText = () => {
    switch (currentStep) {
      case CustomerModalStep.OVERVIEW:
      case CustomerModalStep.ADDRESS:
        return 'Save and Next';
      case CustomerModalStep.NOTES:
        return 'Done';
      default:
        return 'Save and Next';
    }
  };

  const tabItems = [
    {
      key: CustomerModalStep.OVERVIEW,
      label: 'Overview',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.OVERVIEW)}
          {renderOverviewForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.ADDRESS,
      label: 'Address',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.ADDRESS)}
          {renderAddressForm()}
        </>
      )
    },
    {
      key: CustomerModalStep.NOTES,
      label: 'Notes',
      children: (
        <>
          {renderSectionHeader(CustomerModalStep.NOTES)}
          {renderNotesForm()}
        </>
      )
    }
  ];

  return (
    <Modal
      open={isOpen}
      onCancel={onClose}
      footer={null}
      width={600}
      className={styles.customerModal}
      destroyOnClose
    >
      <Tabs
        activeKey={currentStep}
        onChange={handleTabChange}
        items={tabItems}
        className={styles.customTabs}
      />
      
      <div className={styles.modalActions}>
        <Button
          onClick={handleSaveAsDraft}
          className={styles.draftButton}
        >
          Save as Draft
        </Button>
        <Button
          type="primary"
          onClick={handleSaveAndNext}
          className={styles.primaryButton}
        >
          {getButtonText()}
        </Button>
      </div>
    </Modal>
  );
};

export default CustomerModal;