'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import * as Accordion from '@radix-ui/react-accordion';
import ChevronIcon from '../components/ChevronIcon';
import RegistrationLogoBar from '../components/RegistrationLogoBar';
import MigrationCheckModal from './MigrationCheckModal';
import type { PotentialMigrationMatch } from '@/lib/migration-dealer-lookup';
import '@/app/styles/registration-theme.css';
import './accordion-styles.css';

interface OnboardingFormProps {
  dealerId: string;
  sessionId: string;
  subscriptionTier: string;
  defaultDomain: string;
  hasSubdomain: boolean;
  initialData: {
    subdomain: string;
    customDomain: string;
    dealerNumber: string;
    name: string;
    email: string;
    phone: string;
    address: string;
    city: string;
    state: string;
    zip: string;
  };
}

type Step = 'subdomain' | 'profile' | 'review';

export default function OnboardingForm({
  dealerId,
  sessionId,
  subscriptionTier,
  defaultDomain,
  hasSubdomain,
  initialData,
}: OnboardingFormProps) {
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState<Step>(hasSubdomain ? 'subdomain' : 'profile');

  // Determine if tier supports custom domains (Growth, Enhanced, Professional)
  const supportsCustomDomain = ['growth', 'enhanced', 'professional'].includes(
    subscriptionTier.toLowerCase()
  );

  // Domain state
  const [subdomain, setSubdomain] = useState(initialData.subdomain);
  const [customDomain, setCustomDomain] = useState(initialData.customDomain);
  const [domainPrefix, setDomainPrefix] = useState<string>('myamsoil'); // shopamsoil or myamsoil
  const domainExtension = defaultDomain === 'ca' ? '.ca' : '.com';
  const fullBaseDomain = `${domainPrefix}${domainExtension}`;
  const [subdomainStatus, setSubdomainStatus] = useState<{
    checking: boolean;
    available: boolean | null;
    message: string;
  }>({
    checking: false,
    available: hasSubdomain ? true : null,
    message: hasSubdomain ? `${initialData.subdomain}.${fullBaseDomain} is your subdomain` : '',
  });

  const [formData, setFormData] = useState(initialData);
  const [publishing, setPublishing] = useState(false);
  const [error, setError] = useState<string | string[]>('');

  // Migration check state
  const [migrationMatch, setMigrationMatch] = useState<PotentialMigrationMatch | null>(null);
  const [showMigrationModal, setShowMigrationModal] = useState(false);
  const [checkingMigration, setCheckingMigration] = useState(false);

  const handleContinueToSubdomain = async () => {
    setError('');

    // ZO number gets its own message: a missing one silently blocks the
    // dealer's AMSOIL commissions, so it must be unmistakable why we stopped
    // (issue #852 / docs/ZO_NUMBER_COMPLIANCE.md). Server-side validation in
    // validateRegistrationData is the actual enforcement; this is the UX hint.
    if (!formData.dealerNumber || !formData.dealerNumber.trim()) {
      setError('Your ZO (dealer) number is required — without it you will not receive AMSOIL commissions.');
      return;
    }

    // Validate the remaining required fields
    if (
      !formData.email ||
      !formData.phone ||
      !formData.address ||
      !formData.city ||
      !formData.state ||
      !formData.zip
    ) {
      setError('Please fill in all required fields');
      return;
    }

    // Check for migration if feature is enabled
    if (process.env.NEXT_PUBLIC_ENABLE_MIGRATION_CHECK === 'true') {
      setCheckingMigration(true);
      try {
        const response = await fetch('/api/registration/check-migration', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: formData.email,
            dealerNumber: formData.dealerNumber,
          }),
        });

        if (response.ok) {
          const data = await response.json();
          if (data.match) {
            setMigrationMatch(data.match);
            setShowMigrationModal(true);
            setCheckingMigration(false);
            return;
          }
        }
      } catch (err) {
        // Silently continue if migration check fails
        console.error('Migration check failed:', err);
      }
      setCheckingMigration(false);
    }

    // No migration match or feature disabled - proceed to subdomain step
    setCurrentStep('subdomain');
  };

  const handleMigrationConfirm = (data: {
    subdomain: string;
    customDomain: string;
    dealerNumber: string;
    email: string;
  }) => {
    // Update form data with migration data
    setFormData({
      ...formData,
      dealerNumber: data.dealerNumber,
    });
    setSubdomain(data.subdomain);
    setCustomDomain(data.customDomain);

    // Close modal and proceed to subdomain step
    setShowMigrationModal(false);
    setMigrationMatch(null);
    setCurrentStep('subdomain');
  };

  const handleMigrationSkip = () => {
    setShowMigrationModal(false);
    setMigrationMatch(null);
    setCurrentStep('subdomain');
  };

  // Check subdomain availability with debouncing
  useEffect(() => {
    // Skip if already has subdomain
    if (hasSubdomain) return;

    if (!subdomain || subdomain.length < 3) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- Clearing state on early return is intentional
      setSubdomainStatus({ checking: false, available: null, message: '' });
      return;
    }

    const timer = setTimeout(async () => {
      setSubdomainStatus({ checking: true, available: null, message: '' });

      try {
        const domain = defaultDomain === 'ca' ? 'ca' : 'com';
        const response = await fetch(
          `/api/check-subdomain?name=${encodeURIComponent(subdomain)}&domainPrefix=${domainPrefix}&domain=${domain}`
        );
        const data = await response.json();

        if (data.available) {
          setSubdomainStatus({
            checking: false,
            available: true,
            message: `${subdomain}.${fullBaseDomain} is available!`,
          });
        } else {
          setSubdomainStatus({
            checking: false,
            available: false,
            message: data.reason || 'Subdomain not available',
          });
        }
      } catch (_err) {
        setSubdomainStatus({
          checking: false,
          available: false,
          message: 'Error checking availability',
        });
      }
    }, 500);

    return () => clearTimeout(timer);
  }, [subdomain, fullBaseDomain, hasSubdomain, defaultDomain, domainPrefix]);

  const handleCompleteSetup = async () => {
    setError('');
    setPublishing(true);

    try {
      // Save all registration data to database (no publishing yet)
      // Publishing will be done from the dashboard when the dealer is ready
      const saveResponse = await fetch('/api/register/complete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          dealerId,
          sessionId,
          subdomain,
          domainPrefix,
          customDomain,
          dealerNumber: formData.dealerNumber,
          name: formData.name,
          phone: formData.phone,
          address: formData.address,
          city: formData.city,
          state: formData.state,
          zip: formData.zip,
        }),
      });

      const saveData = await saveResponse.json();

      if (!saveData.success) {
        setError(saveData.errors || saveData.error || 'Failed to save profile');
        setPublishing(false);
        return;
      }

      // Redirect to dashboard with setup_complete flag
      // The dealer can preview and publish from there when ready
      router.push('/dashboard?setup=complete');
    } catch (_err) {
      setError('Failed to complete registration. Please try again.');
      setPublishing(false);
    }
  };

  return (
    <div className="onboarding-page-root">
      {/* Logo Bar - Shared Component */}
      <RegistrationLogoBar />

      {/* Page Heading */}
      <h1 className="onboarding-main-heading">Let&apos;s get your site set up.</h1>

      <Accordion.Root
        type="single"
        value={currentStep}
        onValueChange={(value) => value && setCurrentStep(value as Step)}
        collapsible={false}
        className="registration-accordion onboarding-accordion-root"
      >
        {/* Step 1: Business Profile */}
        <Accordion.Item value="profile" className="accordion-item onboarding-step-profile">
          <Accordion.Header className="accordion-header onboarding-step-header">
            <Accordion.Trigger className="accordion-trigger onboarding-step-trigger">
              <div className="number-badge onboarding-number-badge">1.</div>
              <div className="trigger-content onboarding-trigger-content">
                <div className="step-indicator onboarding-step-indicator">Step 1 of 3:</div>
                <h2 className="section-title onboarding-section-title">Business Profile</h2>
                <p className="section-description onboarding-section-description">
                  Confirm your contact information. This will be displayed on your dealer site.
                </p>
              </div>
              <div className="chevron-container onboarding-chevron-container">
                <ChevronIcon />
              </div>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content className="accordion-content onboarding-step-content">
            {/* Contact Information */}
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 onboarding-contact-form">
              <div className="sm:col-span-2">
                <label className="block text-sm font-medium text-white mb-1">Business Name</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
              </div>

              <div className="sm:col-span-2">
                <label htmlFor="dealerNumber" className="block text-sm font-medium text-white mb-1">
                  ZO Account Number *
                </label>
                <input
                  type="text"
                  id="dealerNumber"
                  value={formData.dealerNumber}
                  onChange={(e) => setFormData({ ...formData, dealerNumber: e.target.value })}
                  placeholder="Your AMSOIL dealer number"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
                <p className="mt-1 text-xs text-white/70">
                  Enter the dealer number provided to you by AMSOIL
                </p>
              </div>

              <div className="sm:col-span-2">
                <label htmlFor="contactEmail" className="block text-sm font-medium text-white mb-1">
                  Contact Email *
                </label>
                <input
                  type="email"
                  id="contactEmail"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="your@email.com"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
                <p className="mt-1 text-xs text-white/70">
                  This is the email that will appear on your public dealer page. May be different
                  from the email you used to register.
                </p>
              </div>

              <div className="sm:col-span-2">
                <label htmlFor="phone" className="block text-sm font-medium text-white mb-1">
                  Phone *
                </label>
                <input
                  type="tel"
                  id="phone"
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  placeholder="(555) 123-4567"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
                <p className="mt-1 text-xs text-white/70">Enter your business phone number</p>
              </div>

              <div className="sm:col-span-2">
                <label htmlFor="address" className="block text-sm font-medium text-white mb-1">
                  Street Address *
                </label>
                <input
                  type="text"
                  id="address"
                  value={formData.address}
                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
              </div>

              <div>
                <label htmlFor="city" className="block text-sm font-medium text-white mb-1">
                  City *
                </label>
                <input
                  type="text"
                  id="city"
                  value={formData.city}
                  onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
              </div>

              <div>
                <label htmlFor="state" className="block text-sm font-medium text-white mb-1">
                  State/Province *
                </label>
                <input
                  type="text"
                  id="state"
                  value={formData.state}
                  onChange={(e) =>
                    setFormData({ ...formData, state: e.target.value.toUpperCase() })
                  }
                  placeholder="MN or ON"
                  maxLength={2}
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
                <p className="mt-1 text-xs text-white/70">
                  2-letter code (e.g., MN for Minnesota, ON for Ontario)
                </p>
              </div>

              <div className="sm:col-span-2">
                <label htmlFor="zip" className="block text-sm font-medium text-white mb-1">
                  ZIP/Postal Code *
                </label>
                <input
                  type="text"
                  id="zip"
                  value={formData.zip}
                  onChange={(e) => setFormData({ ...formData, zip: e.target.value })}
                  placeholder="12345 or K1A 0B1"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400"
                />
                <p className="mt-1 text-xs text-white/70">
                  US ZIP code (12345) or Canadian postal code (K1A 0B1)
                </p>
              </div>
            </div>

            {/* Error Message */}
            {error && (
              <div className="bg-red-50 border border-red-200 rounded-md p-4 onboarding-error-message">
                <div className="flex">
                  <svg
                    className="w-5 h-5 text-red-400 mr-2 flex-shrink-0"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <div>
                    <h3 className="text-sm font-medium text-red-800">
                      Please fix the following errors:
                    </h3>
                    <div className="mt-2 text-sm text-red-700">
                      {typeof error === 'string' && <p>{error}</p>}
                      {Array.isArray(error) && (
                        <ul className="list-disc list-inside space-y-1">
                          {error.map((err, idx) => (
                            <li key={idx}>{err}</li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Navigation Buttons */}
            <div className="flex justify-end pt-4 onboarding-nav-buttons">
              <button
                onClick={handleContinueToSubdomain}
                disabled={
                  checkingMigration ||
                  !formData.dealerNumber ||
                  !formData.email ||
                  !formData.phone ||
                  !formData.address ||
                  !formData.city ||
                  !formData.state ||
                  !formData.zip
                }
                className="btn-primary onboarding-continue-button"
              >
                {checkingMigration ? 'Checking...' : 'Continue to Domain'}
              </button>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        {/* Step 2: Subdomain Selection */}
        <Accordion.Item value="subdomain" className="accordion-item onboarding-step-subdomain">
          <Accordion.Header className="accordion-header onboarding-step-header">
            <Accordion.Trigger className="accordion-trigger onboarding-step-trigger">
              <div className="number-badge onboarding-number-badge">2.</div>
              <div className="trigger-content onboarding-trigger-content">
                <div className="step-indicator onboarding-step-indicator">Step 2 of 3:</div>
                <h2 className="section-title onboarding-section-title">Choose Your Domain</h2>
                <p className="section-description onboarding-section-description">
                  {supportsCustomDomain
                    ? 'Choose your subdomain and optionally add a custom domain.'
                    : 'This will be your unique web address for your AMSOIL dealer site.'}
                </p>
              </div>
              <div className="chevron-container onboarding-chevron-container">
                <ChevronIcon />
              </div>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content className="accordion-content onboarding-step-content">
            {/* Subdomain Input - Required for all tiers */}
            <div>
              <label
                htmlFor="subdomain"
                className="block text-sm font-medium text-white mb-2 onboarding-subdomain-label"
              >
                Your Subdomain
              </label>

              <div className="flex items-end onboarding-subdomain-input-group">
                <input
                  type="text"
                  id="subdomain"
                  value={subdomain}
                  onChange={(e) => setSubdomain(e.target.value.toLowerCase())}
                  placeholder="yourname"
                  required
                  minLength={3}
                  maxLength={63}
                  pattern="[a-z0-9][a-z0-9\-]*[a-z0-9]"
                  className="flex-1 px-4 py-3 border border-gray-300 rounded-l-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400 text-lg onboarding-subdomain-input"
                />
                <span
                  className="text-lg font-extrabold text-gray-600"
                  style={{ paddingLeft: '8px', paddingRight: '8px' }}
                >
                  .
                </span>
                <select
                  id="domainPrefix"
                  value={domainPrefix}
                  onChange={(e) => setDomainPrefix(e.target.value)}
                  className="onboarding-domain-suffix"
                  style={{
                    fontSize: '16px',
                    padding: '12px',
                    borderRadius: '5px',
                    backgroundColor: 'white',
                    color: 'black',
                    border: '1px solid #d1d5db',
                  }}
                >
                  <option value="shopamsoil">shopamsoil{domainExtension}</option>
                  <option value="myamsoil">myamsoil{domainExtension}</option>
                </select>
              </div>

              {/* Subdomain Example */}
              <p className="mt-2 text-sm text-white/70">
                Example:{' '}
                <span
                  style={{
                    color: '#38bdf8',
                    textDecoration: 'underline',
                    textDecorationColor: '#38bdf8',
                  }}
                >
                  jsmith
                </span>
                {' → '}
                <span
                  style={{
                    color: '#38bdf8',
                    textDecoration: 'underline',
                    textDecorationColor: '#38bdf8',
                  }}
                >
                  jsmith
                </span>
                <span className="text-white/70">.{fullBaseDomain}</span>
              </p>

              {/* Subdomain Status */}
              <div className="onboarding-subdomain-status">
                {subdomainStatus.checking && (
                  <p className="mt-2 text-sm text-white/70">Checking availability...</p>
                )}
                {subdomainStatus.available === true && (
                  <p className="mt-2 text-sm text-green-600 flex items-center">
                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clipRule="evenodd"
                      />
                    </svg>
                    {subdomainStatus.message}
                  </p>
                )}
                {subdomainStatus.available === false && (
                  <p className="mt-2 text-sm text-red-600 flex items-center">
                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                        clipRule="evenodd"
                      />
                    </svg>
                    {subdomainStatus.message}
                  </p>
                )}
                <div className="mt-3 text-sm text-white/70 space-y-2">
                  <p>
                    <strong>Current/Previous Users:</strong> If you have an existing myamsoil or
                    shopamsoil URL, please enter it here.
                  </p>
                  <p>
                    <strong>New Users:</strong> Please choose a new subdomain. This can be any value
                    you like. If you are using a custom domain, this subdomain will be reserved and
                    connected automatically.
                  </p>
                  <p>Lowercase letters, numbers, and hyphens only (max 63 characters).</p>
                </div>
              </div>
            </div>

            {/* Custom Domain Input - Optional for Growth+ tiers */}
            {supportsCustomDomain && (
              <div className="mt-6">
                <label htmlFor="customDomain" className="block text-sm font-medium text-white mb-2">
                  Custom Domain (Optional)
                </label>
                <input
                  type="text"
                  id="customDomain"
                  value={customDomain}
                  onChange={(e) => setCustomDomain(e.target.value.toLowerCase())}
                  placeholder="yourdomain.com"
                  className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-sky-400 focus:border-sky-400 text-lg"
                />

                {customDomain && (
                  <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
                    <p className="text-sm font-medium text-blue-800">DNS Setup Required</p>
                    <p className="text-sm text-blue-700 mt-1">
                      After registration, you&apos;ll need to add a few A records at your domain
                      registrar. We&apos;ll provide the exact details in your dashboard.
                    </p>
                  </div>
                )}

                {!customDomain && (
                  <p className="mt-2 text-sm text-white/70">
                    You can add a custom domain later from your dashboard settings.
                  </p>
                )}
              </div>
            )}

            <div className="flex justify-between pt-4 onboarding-button-wrapper">
              <button onClick={() => setCurrentStep('profile')} className="btn-secondary">
                Back
              </button>
              <button
                onClick={() => {
                  setFormData({ ...formData, subdomain, customDomain });
                  setCurrentStep('review');
                }}
                disabled={
                  !subdomain || subdomainStatus.available !== true || subdomainStatus.checking
                }
                className="btn-primary onboarding-continue-button"
              >
                Continue to Review
              </button>
            </div>
          </Accordion.Content>
        </Accordion.Item>

        {/* Step 3: Review & Continue */}
        <Accordion.Item value="review" className="accordion-item onboarding-step-review">
          <Accordion.Header className="accordion-header onboarding-step-header">
            <Accordion.Trigger className="accordion-trigger onboarding-step-trigger">
              <div className="number-badge onboarding-number-badge">3.</div>
              <div className="trigger-content onboarding-trigger-content">
                <div className="step-indicator onboarding-step-indicator">Step 3 of 3:</div>
                <h2 className="section-title onboarding-section-title">Review & Continue</h2>
                <p className="section-description onboarding-section-description">
                  Review your information. You can preview and publish your site from the dashboard.
                </p>
              </div>
              <div className="chevron-container onboarding-chevron-container">
                <ChevronIcon />
              </div>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content className="accordion-content onboarding-step-content">
            {/* Site URL */}
            <div className="bg-blue-50 rounded-lg p-6 onboarding-site-url-display">
              <p className="text-sm text-gray-600 mb-2">Your dealer site URL (after publishing):</p>
              <p className="text-2xl font-bold text-blue-900">
                {subdomain}.{fullBaseDomain}
              </p>
              <p className="text-sm text-gray-500 mt-2">
                You can preview your site and publish when you&apos;re ready from the dashboard.
              </p>
            </div>

            {/* Business Info Summary */}
            <div className="bg-gray-50 rounded-lg p-6 onboarding-business-summary">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Business Information</h3>
              <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <dt className="text-sm font-medium text-gray-500">Business Name</dt>
                  <dd className="mt-1 text-sm text-gray-900">{formData.name || 'Not provided'}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">ZO Account Number</dt>
                  <dd className="mt-1 text-sm text-gray-900">
                    {formData.dealerNumber || 'Not provided'}
                  </dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">Email</dt>
                  <dd className="mt-1 text-sm text-gray-900">{formData.email}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">Phone</dt>
                  <dd className="mt-1 text-sm text-gray-900">{formData.phone}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">Location</dt>
                  <dd className="mt-1 text-sm text-gray-900">
                    {formData.address}, {formData.city}, {formData.state} {formData.zip}
                  </dd>
                </div>
              </dl>
            </div>

            {/* Error Message */}
            {error && (
              <div className="bg-red-50 border border-red-200 rounded-md p-4 onboarding-error-message">
                <div className="flex">
                  <svg
                    className="w-5 h-5 text-red-400 mr-2 flex-shrink-0"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <div>
                    <h3 className="text-sm font-medium text-red-800">
                      Please fix the following errors:
                    </h3>
                    <div className="mt-2 text-sm text-red-700">
                      {typeof error === 'string' && <p>{error}</p>}
                      {Array.isArray(error) && (
                        <ul className="list-disc list-inside space-y-1">
                          {error.map((err, idx) => (
                            <li key={idx}>{err}</li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Navigation Buttons */}
            <div className="flex justify-between pt-4 onboarding-final-buttons">
              <button
                onClick={() => setCurrentStep('subdomain')}
                className="btn-secondary"
                disabled={publishing}
              >
                Back to Edit
              </button>
              <button
                onClick={handleCompleteSetup}
                disabled={publishing}
                className={`px-8 py-3 text-lg font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg onboarding-publish-button transition-colors ${
                  ['enhanced', 'professional'].includes(subscriptionTier.toLowerCase())
                    ? 'bg-sky-400 hover:bg-sky-500 text-slate-900 focus:ring-sky-400'
                    : 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500'
                }`}
              >
                {publishing ? 'Saving...' : 'Continue to Dashboard'}
              </button>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>

      {/* Migration Check Modal */}
      {showMigrationModal && migrationMatch && (
        <MigrationCheckModal
          match={migrationMatch}
          onConfirm={handleMigrationConfirm}
          onSkip={handleMigrationSkip}
          domainExtension={domainExtension}
        />
      )}
    </div>
  );
}