/**
 * @file CompanyInfoStep.jsx
 * @description Company information step of the onboarding wizard.
 */

window.CompanyInfoStep = function CompanyInfoStep({ data, onChange, onNext }) {
  const [validating, setValidating] = React.useState(false);
  const [domainError, setDomainError] = React.useState('');
  const [fieldErrors, setFieldErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});

  // Validation rules matching backend
  const validateField = (field, value) => {
    switch (field) {
      case 'companyName':
        if (!value || value.length < 2) return 'Company name must be at least 2 characters';
        if (value.length > 200) return 'Company name must be 200 characters or less';
        return null;
      case 'companyWebsite':
        if (!value) return 'Company website is required';
        try {
          const url = new URL(value.startsWith('http') ? value : `https://${value}`);
          if (url.protocol !== 'https:' && url.protocol !== 'http:') return 'Website must be a valid URL';
        } catch {
          return 'Please enter a valid website URL (e.g., https://example.com)';
        }
        return null;
      case 'street':
        if (!value || value.length < 5) return 'Street address must be at least 5 characters';
        return null;
      case 'city':
        if (!value || value.length < 2) return 'City must be at least 2 characters';
        return null;
      case 'state':
        if (!value || value.length < 2) return 'State/Province must be at least 2 characters';
        return null;
      case 'postalCode':
        if (!value || value.length < 3) return 'Postal code must be at least 3 characters';
        return null;
      case 'country':
        if (!value || value.length !== 2) return 'Please select a country';
        return null;
      case 'partnerCategoryType':
        if (!value) return 'Please select a business category';
        if (!['adult_content', 'alcohol', 'gambling', 'cannabis', 'general'].includes(value)) {
          return 'Please select a valid business category';
        }
        return null;
      default:
        return null;
    }
  };

  const validateAllFields = () => {
    const errors = {};
    errors.companyName = validateField('companyName', data.companyName);
    errors.partnerCategoryType = validateField('partnerCategoryType', data.partnerCategoryType);
    errors.companyWebsite = validateField('companyWebsite', data.companyWebsite);
    errors.street = validateField('street', data.companyAddress?.street);
    errors.city = validateField('city', data.companyAddress?.city);
    errors.state = validateField('state', data.companyAddress?.state);
    errors.postalCode = validateField('postalCode', data.companyAddress?.postalCode);
    errors.country = validateField('country', data.companyAddress?.country);

    // Filter out null values
    const filteredErrors = {};
    Object.keys(errors).forEach(key => {
      if (errors[key]) filteredErrors[key] = errors[key];
    });
    return filteredErrors;
  };

  const handleChange = (field, value) => {
    onChange({ ...data, [field]: value });
    if (field === 'companyWebsite') {
      setDomainError('');
    }
    // Clear error when user starts typing
    if (touched[field]) {
      const error = validateField(field, value);
      setFieldErrors(prev => ({ ...prev, [field]: error }));
    }
  };

  const handleAddressChange = (field, value) => {
    onChange({
      ...data,
      companyAddress: { ...data.companyAddress, [field]: value }
    });
    // Clear error when user starts typing
    if (touched[field]) {
      const error = validateField(field, value);
      setFieldErrors(prev => ({ ...prev, [field]: error }));
    }
  };

  const handleBlur = (field, value) => {
    setTouched(prev => ({ ...prev, [field]: true }));
    const error = validateField(field, value);
    setFieldErrors(prev => ({ ...prev, [field]: error }));
  };

  const validateAndProceed = async () => {
    // Mark all fields as touched
    setTouched({
      companyName: true,
      partnerCategoryType: true,
      companyWebsite: true,
      street: true,
      city: true,
      state: true,
      postalCode: true,
      country: true
    });

    // Validate all fields
    const errors = validateAllFields();
    setFieldErrors(errors);

    if (Object.keys(errors).length > 0) {
      return; // Don't proceed if there are validation errors
    }

    setValidating(true);
    setDomainError('');

    try {
      await API.validateCompany(data.companyWebsite);
      onNext();
    } catch (error) {
      setDomainError(error.message);
    } finally {
      setValidating(false);
    }
  };

  const hasErrors = Object.values(fieldErrors).some(e => e);

  return (
    <div className="fade-in">
      <h2 className="text-2xl font-bold text-gray-900 mb-6">Company Information</h2>
      <p className="text-gray-600 mb-8">Tell us about your organization.</p>

      {/* GDPR Transparency Notice */}
      <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div className="flex items-start">
          <svg className="w-5 h-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div>
            <p className="text-blue-800 font-medium text-sm">User Transparency Notice</p>
            <p className="text-blue-700 text-sm mt-1">
              Your company name, website, and business address will be visible to users in their:
            </p>
            <ul className="text-blue-700 text-sm mt-1 list-disc list-inside ml-2">
              <li>Consent history (when they grant or revoke access)</li>
              <li>GDPR data exports (required for data portability compliance)</li>
              <li>OAuth consent screens during authentication</li>
            </ul>
            <p className="text-blue-600 text-xs mt-2">
              This information helps users identify and manage which organizations have access to their data.
            </p>
          </div>
        </div>
      </div>

      <div className="space-y-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Company Name <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={data.companyName || ''}
            onChange={(e) => handleChange('companyName', e.target.value)}
            onBlur={(e) => handleBlur('companyName', e.target.value)}
            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
              fieldErrors.companyName && touched.companyName ? 'border-red-500 bg-red-50' : 'border-gray-300'
            }`}
            placeholder="Acme Corporation"
          />
          {fieldErrors.companyName && touched.companyName && (
            <p className="text-red-500 text-sm mt-1">{fieldErrors.companyName}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Legal Name (if different)
          </label>
          <input
            type="text"
            value={data.companyLegalName || ''}
            onChange={(e) => handleChange('companyLegalName', e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="Acme Corporation, Inc."
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Business Category <span className="text-red-500">*</span>
          </label>
          <select
            value={data.partnerCategoryType || ''}
            onChange={(e) => handleChange('partnerCategoryType', e.target.value)}
            onBlur={(e) => handleBlur('partnerCategoryType', e.target.value)}
            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
              fieldErrors.partnerCategoryType && touched.partnerCategoryType ? 'border-red-500 bg-red-50' : 'border-gray-300'
            }`}
          >
            <option value="">Select business category</option>
            <option value="adult_content">Adult Content - Adult entertainment, dating, or mature content</option>
            <option value="alcohol">Alcohol - Alcohol sales, bars, breweries, or related services</option>
            <option value="gambling">Gambling - Casinos, sports betting, or gaming services</option>
            <option value="cannabis">Cannabis - Cannabis dispensaries or related products</option>
            <option value="general">General - General age-restricted services</option>
          </select>
          {fieldErrors.partnerCategoryType && touched.partnerCategoryType && (
            <p className="text-red-500 text-sm mt-1">{fieldErrors.partnerCategoryType}</p>
          )}
          <p className="text-gray-500 text-xs mt-1">
            This determines which user preference categories your service can access.
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Company Website <span className="text-red-500">*</span>
          </label>
          <input
            type="url"
            value={data.companyWebsite || ''}
            onChange={(e) => handleChange('companyWebsite', e.target.value)}
            onBlur={(e) => handleBlur('companyWebsite', e.target.value)}
            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
              (fieldErrors.companyWebsite && touched.companyWebsite) || domainError ? 'border-red-500 bg-red-50' : 'border-gray-300'
            }`}
            placeholder="https://example.com"
          />
          {fieldErrors.companyWebsite && touched.companyWebsite && (
            <p className="text-red-500 text-sm mt-1">{fieldErrors.companyWebsite}</p>
          )}
          {domainError && <p className="text-red-500 text-sm mt-1">{domainError}</p>}
        </div>

        <div className="border-t pt-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Business Address</h3>
          <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-gray-700 mb-1">
                Street Address <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={data.companyAddress?.street || ''}
                onChange={(e) => handleAddressChange('street', e.target.value)}
                onBlur={(e) => handleBlur('street', e.target.value)}
                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  fieldErrors.street && touched.street ? 'border-red-500 bg-red-50' : 'border-gray-300'
                }`}
                placeholder="123 Main Street, Suite 100"
              />
              {fieldErrors.street && touched.street && (
                <p className="text-red-500 text-sm mt-1">{fieldErrors.street}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                City <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={data.companyAddress?.city || ''}
                onChange={(e) => handleAddressChange('city', e.target.value)}
                onBlur={(e) => handleBlur('city', e.target.value)}
                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  fieldErrors.city && touched.city ? 'border-red-500 bg-red-50' : 'border-gray-300'
                }`}
                placeholder="San Francisco"
              />
              {fieldErrors.city && touched.city && (
                <p className="text-red-500 text-sm mt-1">{fieldErrors.city}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                State/Province <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={data.companyAddress?.state || ''}
                onChange={(e) => handleAddressChange('state', e.target.value)}
                onBlur={(e) => handleBlur('state', e.target.value)}
                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  fieldErrors.state && touched.state ? 'border-red-500 bg-red-50' : 'border-gray-300'
                }`}
                placeholder="CA"
              />
              {fieldErrors.state && touched.state && (
                <p className="text-red-500 text-sm mt-1">{fieldErrors.state}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Postal Code <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={data.companyAddress?.postalCode || ''}
                onChange={(e) => handleAddressChange('postalCode', e.target.value)}
                onBlur={(e) => handleBlur('postalCode', e.target.value)}
                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  fieldErrors.postalCode && touched.postalCode ? 'border-red-500 bg-red-50' : 'border-gray-300'
                }`}
                placeholder="94102"
              />
              {fieldErrors.postalCode && touched.postalCode && (
                <p className="text-red-500 text-sm mt-1">{fieldErrors.postalCode}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Country <span className="text-red-500">*</span>
              </label>
              <select
                value={data.companyAddress?.country || ''}
                onChange={(e) => handleAddressChange('country', e.target.value)}
                onBlur={(e) => handleBlur('country', e.target.value)}
                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                  fieldErrors.country && touched.country ? 'border-red-500 bg-red-50' : 'border-gray-300'
                }`}
              >
                <option value="">Select country</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="GB">United Kingdom</option>
                <option value="DE">Germany</option>
                <option value="FR">France</option>
                <option value="AU">Australia</option>
              </select>
              {fieldErrors.country && touched.country && (
                <p className="text-red-500 text-sm mt-1">{fieldErrors.country}</p>
              )}
            </div>
          </div>
        </div>
      </div>

      {hasErrors && (
        <div className="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <div className="flex items-start">
            <svg className="w-5 h-5 text-red-600 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <p className="text-red-700 font-medium">Please fix the following errors:</p>
              <ul className="text-red-600 text-sm mt-1 list-disc list-inside">
                {Object.values(fieldErrors).filter(e => e).map((error, i) => (
                  <li key={i}>{error}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      )}

      <div className="flex justify-end mt-8">
        <button
          onClick={validateAndProceed}
          disabled={validating}
          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center"
        >
          {validating && (
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full loading-spinner mr-2" />
          )}
          Continue
        </button>
      </div>
    </div>
  );
};