'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { hasCustomDomainAccess, hasMediaLibraryAccess } from '@/lib/cms/types';
import Button from '@/components/ui/Button';
import LogoUpload from './LogoUpload';
import { SocialLinks } from '@/types/dealer';
import { SimpleWysiwygField } from '@/lib/cms/SimpleWysiwygField';
import '@/app/styles/registration-theme.css';

interface EditorFormProps {
  initialData: {
    dealerId: string;
    subdomain: string;
    domainPrefix: string;
    domain: string;
    customDomain: string | null;
    subscriptionTier: string;
    dealerNumber: string | null;
    businessName: string | null;
    contactName: string | null;
    address: string;
    city: string;
    state: string;
    zip: string;
    country: string;
    phone: string;
    contactEmail: string | null;
    description: string | null;
    hideAddress: boolean;
    showContactName: boolean;
    logoUrl: string | null;
    headScripts: string | null;
    bodyScripts: string | null;
    socialLinks: SocialLinks | null;
    preferredLanguage: 'en' | 'es' | 'fr';
    allowLanguageSwitch: boolean;
    amsoilLinkDomain: 'com' | 'ca' | null;
  };
}

export default function EditorForm({ initialData }: EditorFormProps) {
  // Check if subdomain can be edited (only when it's "not-set")
  // Once published, the subdomain is locked even if the user stays on the page
  const [subdomainLocked, setSubdomainLocked] = useState(false);
  const canEditSubdomain = initialData.subdomain === 'not-set' && !subdomainLocked;

  const [formData, setFormData] = useState({
    subdomain: canEditSubdomain ? '' : initialData.subdomain,
    domainPrefix: initialData.domainPrefix || 'myamsoil',
    customDomain: initialData.customDomain || '',
    dealerNumber: initialData.dealerNumber || '',
    businessName: initialData.businessName || '',
    contactName: initialData.contactName || '',
    address: initialData.address,
    city: initialData.city,
    state: initialData.state,
    zip: initialData.zip,
    country: initialData.country,
    phone: initialData.phone,
    contactEmail: initialData.contactEmail || '',
    description: initialData.description || '',
    hideAddress: initialData.hideAddress,
    showContactName: initialData.showContactName,
    logoUrl: initialData.logoUrl,
    headScripts: initialData.headScripts || '',
    bodyScripts: initialData.bodyScripts || '',
    socialLinks: {
      facebook: initialData.socialLinks?.facebook || '',
      pinterest: initialData.socialLinks?.pinterest || '',
      instagram: initialData.socialLinks?.instagram || '',
      youtube: initialData.socialLinks?.youtube || '',
      linkedin: initialData.socialLinks?.linkedin || '',
      // Consolidate twitter into x - use x if present, otherwise fallback to legacy twitter
      x: initialData.socialLinks?.x || initialData.socialLinks?.twitter || '',
    },
    preferredLanguage: initialData.preferredLanguage || 'en',
    allowLanguageSwitch: initialData.allowLanguageSwitch,
    amsoilLinkDomain: initialData.amsoilLinkDomain ?? (initialData.domain === 'ca' ? 'ca' : 'com'),
  });

  const [publishing, setPublishing] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});

  // Subdomain validation state
  const [subdomainChecking, setSubdomainChecking] = useState(false);
  const [subdomainAvailable, setSubdomainAvailable] = useState<boolean | null>(null);
  const [subdomainError, setSubdomainError] = useState<string | null>(null);

  // Show the submitted subdomain if locked, otherwise show form value or initial
  const displaySubdomain = subdomainLocked
    ? formData.subdomain
    : canEditSubdomain && formData.subdomain
      ? formData.subdomain
      : initialData.subdomain;
  // Use form's domainPrefix when editing, otherwise use initial
  const displayDomainPrefix = canEditSubdomain ? formData.domainPrefix : initialData.domainPrefix;
  const fullSubdomain = `${displaySubdomain}.${displayDomainPrefix}.${initialData.domain}`;
  const canUseCustomDomain = hasCustomDomainAccess(initialData.subscriptionTier);

  // Debounced subdomain validation
  const checkSubdomainAvailability = useCallback(
    async (subdomain: string) => {
      if (!subdomain) {
        setSubdomainAvailable(null);
        setSubdomainError(null);
        return;
      }

      setSubdomainChecking(true);
      setSubdomainError(null);

      try {
        const prefix = formData.domainPrefix || initialData.domainPrefix || 'myamsoil';
        const domain = initialData.domain;
        const response = await fetch(
          `/api/check-subdomain?name=${encodeURIComponent(subdomain)}&domainPrefix=${prefix}&domain=${domain}`
        );
        const data = await response.json();

        if (response.ok && data.available) {
          setSubdomainAvailable(true);
          setSubdomainError(null);
        } else {
          setSubdomainAvailable(false);
          setSubdomainError(data.reason || 'Subdomain is not available');
        }
      } catch {
        setSubdomainError('Failed to check subdomain availability');
        setSubdomainAvailable(null);
      } finally {
        setSubdomainChecking(false);
      }
    },
    [formData.domainPrefix, initialData.domainPrefix, initialData.domain]
  );

  // Debounce subdomain checks
  useEffect(() => {
    if (!canEditSubdomain) return;

    const timeoutId = setTimeout(() => {
      if (formData.subdomain) {
        checkSubdomainAvailability(formData.subdomain);
      }
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [formData.subdomain, canEditSubdomain, checkSubdomainAvailability]);

  const handleSubmit = async (e?: React.FormEvent) => {
    if (e) {
      e.preventDefault();
    }
    if (publishing) return; // Guard against double-clicks

    // Validate subdomain if editing
    if (canEditSubdomain) {
      if (!formData.subdomain) {
        setError('Please enter a subdomain');
        return;
      }
      if (!subdomainAvailable) {
        setError('Please choose an available subdomain');
        return;
      }
    }

    setPublishing(true);
    setSuccess(false);
    setError(null);
    setFieldErrors({});

    try {
      // Build request data - only include subdomain and domainPrefix if it can be edited
      const requestData = canEditSubdomain
        ? {
            ...formData,
            subdomain: formData.subdomain.toLowerCase(),
            domainPrefix: formData.domainPrefix,
          }
        : { ...formData, subdomain: undefined, domainPrefix: undefined };

      // Step 1: Save dealer data
      const response = await fetch('/api/dealer/update', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestData),
      });

      const data = await response.json();

      if (!response.ok) {
        if (data.fieldErrors) {
          setFieldErrors(data.fieldErrors);
        }
        throw new Error(data.error || 'Failed to save changes');
      }

      // Step 2: Publish the site
      const publishResponse = await fetch(`/api/dealers/${initialData.dealerId}/publish`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });

      if (!publishResponse.ok) {
        const publishData = await publishResponse.json();
        throw new Error(publishData.error || 'Failed to publish site');
      }

      // Lock subdomain after successful publish (if it was editable)
      if (canEditSubdomain && formData.subdomain) {
        setSubdomainLocked(true);
      }

      setSuccess(true);
      setTimeout(() => setSuccess(false), 5000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      setPublishing(false);
    }
  };

  return (
    <div
      className="p-8"
      style={{
        background: 'radial-gradient(circle at top, #1e293b, #0f172a 60%)',
        minHeight: 'calc(100vh - 120px)',
      }}
    >
      {/* Back Link - Above the card, aligned to card's left edge */}
      <div
        style={{ width: '1194px', maxWidth: '95vw', margin: '1.5rem auto 1rem', padding: '0 30px' }}
      >
        <Link
          href="/dashboard"
          style={{ color: '#38bdf8', textDecoration: 'none', fontSize: '0.875rem' }}
        >
          ← Back to Dashboard
        </Link>
      </div>

      <div
        className="editor-page-root overflow-y-auto"
        style={{ padding: '0px 30px', margin: '0 auto' }}
      >
        {/* Success Message */}
        {success && (
          <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-md">
            <p className="text-green-800 font-medium">Published successfully!</p>
          </div>
        )}

        {/* Error Message */}
        {error && (
          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
            <p className="text-red-800 font-medium">{error}</p>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Header with Save Button - Inside form for accessibility */}
          <div className="flex items-center justify-between">
            <h1 className="text-3xl font-bold text-white">Edit Dealer Information</h1>
            <Button
              type="submit"
              variant="primary"
              size="lg"
              disabled={publishing}
              isLoading={publishing}
            >
              {publishing ? 'Publishing...' : 'Publish'}
            </Button>
          </div>
          {/* Domain Settings - 2 Column Layout */}
          <div className="space-y-4">
            <h2 className="text-xl font-semibold text-white border-b border-white/10 pb-2">
              Domain Settings
            </h2>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Left Column: Domain fields */}
              <div className="space-y-4">
                {/* Subdomain - Editable only if currently "not-set" */}
                <div>
                  <label
                    htmlFor="subdomain"
                    className="block text-sm font-medium text-white/70 mb-1"
                  >
                    Subdomain {canEditSubdomain ? '*' : '(Cannot be changed)'}
                  </label>
                  {canEditSubdomain ? (
                    <>
                      <div className="flex items-center gap-2 flex-wrap">
                        <input
                          type="text"
                          id="subdomain"
                          value={formData.subdomain}
                          onChange={(e) => {
                            const value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
                            setFormData({ ...formData, subdomain: value });
                          }}
                          placeholder="your-subdomain"
                          className={`flex-1 min-w-[150px] px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                            subdomainError
                              ? 'border-red-500'
                              : subdomainAvailable
                                ? 'border-green-500'
                                : 'border-gray-600'
                          }`}
                        />
                        <span className="text-white/50 text-sm">.</span>
                        <select
                          id="domainPrefix"
                          value={formData.domainPrefix}
                          onChange={(e) =>
                            setFormData({ ...formData, domainPrefix: e.target.value })
                          }
                          className="px-3 py-2 border border-gray-600 rounded-md bg-gray-800/30 text-white focus:ring-2 focus:ring-sky-400"
                        >
                          <option value="myamsoil">myamsoil</option>
                          <option value="shopamsoil">shopamsoil</option>
                        </select>
                        <span className="text-white/50 text-sm">.{initialData.domain}</span>
                        {subdomainChecking && (
                          <span className="text-white/50 text-sm">Checking...</span>
                        )}
                        {!subdomainChecking && subdomainAvailable === true && (
                          <span className="text-green-400 text-sm">Available</span>
                        )}
                      </div>
                      {subdomainError && (
                        <p className="mt-1 text-sm text-red-400">{subdomainError}</p>
                      )}
                      {fieldErrors.subdomain && (
                        <p className="mt-1 text-sm text-red-400">{fieldErrors.subdomain}</p>
                      )}
                      <div className="mt-2 text-xs text-white/50 space-y-1">
                        <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>
                    </>
                  ) : (
                    <>
                      <input
                        type="text"
                        value={fullSubdomain}
                        disabled
                        className="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-800/50 text-gray-400 cursor-not-allowed"
                      />
                      <p className="mt-1 text-xs text-white/50">
                        Your subdomain cannot be changed after initial setup
                      </p>
                    </>
                  )}
                </div>

                {/* AMSOIL Link Destination */}
                <div>
                  <label
                    htmlFor="amsoilLinkDomain"
                    className="block text-sm font-medium text-white/70 mb-1"
                  >
                    AMSOIL Link Destination
                  </label>
                  <select
                    id="amsoilLinkDomain"
                    value={formData.amsoilLinkDomain}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        amsoilLinkDomain: e.target.value as 'com' | 'ca',
                      })
                    }
                    className="w-full px-3 py-2 border border-gray-600 rounded-md bg-gray-800/30 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                  >
                    <option value="com">amsoil.com (United States)</option>
                    <option value="ca">amsoil.ca (Canada)</option>
                  </select>
                  <p className="mt-1 text-xs text-white/50">
                    Controls where Shop Online, product, and offer links point.
                  </p>
                </div>

                {/* Custom Domain - Only shown for Growth+ tiers */}
                {canUseCustomDomain && (
                  <div>
                    <label
                      htmlFor="customDomain"
                      className="block text-sm font-medium text-white/70 mb-1"
                    >
                      Custom Domain (Optional)
                    </label>
                    <input
                      type="text"
                      id="customDomain"
                      value={formData.customDomain}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          customDomain: e.target.value.toLowerCase(),
                        })
                      }
                      placeholder="yourdomain.com"
                      className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                        fieldErrors.customDomain ? 'border-red-500' : 'border-gray-600'
                      }`}
                    />
                    {fieldErrors.customDomain && (
                      <p className="mt-1 text-sm text-red-400">{fieldErrors.customDomain}</p>
                    )}
                    <p className="mt-1 text-xs text-white/50">
                      For full domain configuration, visit{' '}
                      <Link
                        href="/dashboard/settings/domains"
                        className="text-cyan-400 hover:underline"
                      >
                        Domain Settings
                      </Link>
                    </p>
                  </div>
                )}
              </div>

              {/* Right Column: Logo Upload */}
              <div>
                <LogoUpload
                  currentLogoUrl={formData.logoUrl}
                  onLogoChange={(url) => setFormData({ ...formData, logoUrl: url })}
                />
              </div>
            </div>
          </div>

          {/* Business Information */}
          <div className="space-y-4">
            <h2 className="text-xl font-semibold text-white border-b border-white/10 pb-2">
              Business Information
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* ZO Account Number */}
              <div className="md:col-span-2">
                <label
                  htmlFor="dealerNumber"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  ZO Account Number
                </label>
                <input
                  type="text"
                  id="dealerNumber"
                  value={formData.dealerNumber}
                  onChange={(e) => setFormData({ ...formData, dealerNumber: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400"
                />
              </div>

              {/* Business Name */}
              <div className="md:col-span-2">
                <label
                  htmlFor="businessName"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Business Name
                </label>
                <input
                  type="text"
                  id="businessName"
                  value={formData.businessName}
                  onChange={(e) => setFormData({ ...formData, businessName: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.businessName ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.businessName && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.businessName}</p>
                )}
              </div>

              {/* Contact Name */}
              <div className="md:col-span-2">
                <label
                  htmlFor="contactName"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Contact Name
                </label>
                <input
                  type="text"
                  id="contactName"
                  value={formData.contactName}
                  onChange={(e) => setFormData({ ...formData, contactName: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400"
                />
              </div>

              {/* Show Contact Name Toggle */}
              <div className="md:col-span-2">
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    id="showContactName"
                    checked={formData.showContactName}
                    onChange={(e) =>
                      setFormData({ ...formData, showContactName: e.target.checked })
                    }
                    className="w-5 h-5 rounded border-gray-600 bg-gray-800/30 text-sky-400 focus:ring-2 focus:ring-sky-400 cursor-pointer"
                  />
                  <span className="text-sm font-medium text-white/70">
                    Show contact name on my page
                  </span>
                </label>
                <p className="mt-1 text-xs text-white/50 ml-8">
                  When enabled, your contact name will appear below your business name on your
                  dealer page
                </p>
              </div>

              {/* Street Address */}
              <div className="md:col-span-2">
                <label htmlFor="address" className="block text-sm font-medium text-white/70 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 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.address ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.address && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.address}</p>
                )}
              </div>

              {/* City */}
              <div>
                <label htmlFor="city" className="block text-sm font-medium text-white/70 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 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.city ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.city && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.city}</p>
                )}
              </div>

              {/* State */}
              <div>
                <label htmlFor="state" className="block text-sm font-medium text-white/70 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 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.state ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.state && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.state}</p>
                )}
                <p className="mt-1 text-xs text-white/50">
                  2-letter code (e.g., MN for Minnesota, ON for Ontario)
                </p>
              </div>

              {/* Zipcode */}
              <div>
                <label htmlFor="zip" className="block text-sm font-medium text-white/70 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 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.zip ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.zip && <p className="mt-1 text-sm text-red-400">{fieldErrors.zip}</p>}
              </div>

              {/* Country */}
              <div>
                <label htmlFor="country" className="block text-sm font-medium text-white/70 mb-1">
                  Country *
                </label>
                <input
                  type="text"
                  id="country"
                  value={formData.country}
                  onChange={(e) => setFormData({ ...formData, country: e.target.value })}
                  required
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.country ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.country && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.country}</p>
                )}
              </div>

              {/* Hide Address Toggle */}
              <div className="md:col-span-2">
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    id="hideAddress"
                    checked={formData.hideAddress}
                    onChange={(e) => setFormData({ ...formData, hideAddress: e.target.checked })}
                    className="w-5 h-5 rounded border-gray-600 bg-gray-800/30 text-sky-400 focus:ring-2 focus:ring-sky-400 cursor-pointer"
                  />
                  <span className="text-sm font-medium text-white/70">
                    Hide my address from visitors to my page
                  </span>
                </label>
                <p className="mt-1 text-xs text-white/50 ml-8">
                  When enabled, your street address will not be displayed on your public dealer page
                </p>
              </div>

              {/* Phone */}
              <div className="md:col-span-2">
                <label htmlFor="phone" className="block text-sm font-medium text-white/70 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 rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.phone ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.phone && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.phone}</p>
                )}
              </div>

              {/* Email */}
              <div className="md:col-span-2">
                <label
                  htmlFor="contactEmail"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Email
                </label>
                <input
                  type="email"
                  id="contactEmail"
                  value={formData.contactEmail}
                  onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors.contactEmail ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors.contactEmail && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.contactEmail}</p>
                )}
                <p className="mt-1 text-xs text-white/50">
                  Public contact email (displayed on your site)
                </p>
              </div>

              {/* Description */}
              <div className="md:col-span-2">
                <label
                  htmlFor="description"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Business Description
                </label>
                <SimpleWysiwygField
                  value={formData.description}
                  onChange={(value) => setFormData({ ...formData, description: value })}
                  placeholder="Tell visitors about your business..."
                  enableMediaLibrary={hasMediaLibraryAccess(initialData.subscriptionTier)}
                />
                <p className="mt-1 text-xs text-white/50">
                  This will be displayed on your dealer site
                </p>
              </div>

              {/* Default Page Language */}
              <div className="md:col-span-2">
                <label
                  htmlFor="preferredLanguage"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Default Page Language
                </label>
                <select
                  id="preferredLanguage"
                  value={formData.preferredLanguage}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      preferredLanguage: e.target.value as 'en' | 'es' | 'fr',
                    })
                  }
                  className="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-800/30 text-white focus:ring-2 focus:ring-sky-400"
                >
                  <option value="en">English</option>
                  <option value="es">Spanish (Espanol)</option>
                  <option value="fr">French (Francais)</option>
                </select>
                <p className="mt-1 text-xs text-white/50">
                  Choose the default language for your dealer page.
                </p>
              </div>

              {/* Allow Language Switch Toggle */}
              <div className="md:col-span-2">
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.allowLanguageSwitch}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        allowLanguageSwitch: e.target.checked,
                      })
                    }
                    className="w-5 h-5 rounded border-gray-600 bg-gray-800/30 text-sky-500 focus:ring-2 focus:ring-sky-400 focus:ring-offset-0"
                  />
                  <span className="text-sm font-medium text-white/70">
                    Allow visitors to choose their own language
                  </span>
                </label>
                <p className="mt-1 text-xs text-white/50 ml-8">
                  When enabled, visitors can switch between English and Spanish using a toggle on
                  your page.
                </p>
              </div>
            </div>
          </div>

          {/* Advanced Settings */}
          <div className="space-y-4">
            <h2 className="text-xl font-semibold text-white border-b border-white/10 pb-2">
              Advanced Settings
            </h2>

            {/* Important Notes */}
            <div className="p-3 bg-yellow-900/20 border border-yellow-500/50 rounded-md">
              <p className="text-yellow-200 text-xs font-semibold flex items-center gap-2">
                <span>⚠️</span>
                <span>Important Notes</span>
              </p>
              <ul className="mt-2 text-xs text-yellow-200/70 space-y-1 list-disc list-inside">
                <li>
                  Only <code className="bg-yellow-900/30 px-1 rounded">&lt;script&gt;</code> tags
                  are supported (plus{' '}
                  <code className="bg-yellow-900/30 px-1 rounded">&lt;noscript&gt;</code> in body
                  scripts)
                </li>
                <li>Meta tags, link tags, and stylesheets won&apos;t work here</li>
                <li>Only add scripts from trusted sources (Google, Facebook, etc.)</li>
                <li>Scripts execute on every visitor&apos;s browser</li>
              </ul>
            </div>

            <div className="grid grid-cols-1 gap-6">
              {/* Head Scripts */}
              <div>
                <label
                  htmlFor="headScripts"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Head Scripts
                </label>
                <p className="text-xs text-white/50 mb-2">
                  Scripts placed in the page &lt;head&gt;. Use for GTM container code (part 1 of 2).
                </p>
                <textarea
                  id="headScripts"
                  value={formData.headScripts}
                  onChange={(e) => setFormData({ ...formData, headScripts: e.target.value })}
                  rows={6}
                  maxLength={10000}
                  placeholder="<!-- Google Tag Manager - Part 1 -->&#10;<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXX');</script>"
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 font-mono text-sm ${
                    fieldErrors.headScripts ? 'border-red-500' : 'border-gray-600'
                  }`}
                  spellCheck={false}
                />
                {fieldErrors.headScripts && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.headScripts}</p>
                )}
                <div className="flex justify-end mt-1">
                  <p
                    className={`text-xs ${
                      formData.headScripts.length > 8000 ? 'text-yellow-400' : 'text-white/50'
                    }`}
                  >
                    {formData.headScripts.length.toLocaleString()} / 10,000
                  </p>
                </div>
              </div>

              {/* Body Scripts */}
              <div>
                <label
                  htmlFor="bodyScripts"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Body Scripts
                </label>
                <p className="text-xs text-white/50 mb-2">
                  Scripts placed at the start of &lt;body&gt;. Use for GTM noscript fallback (part 2
                  of 2).
                </p>
                <textarea
                  id="bodyScripts"
                  value={formData.bodyScripts}
                  onChange={(e) => setFormData({ ...formData, bodyScripts: e.target.value })}
                  rows={6}
                  maxLength={10000}
                  placeholder='<!-- Google Tag Manager (noscript) - Part 2 -->&#10;<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"></iframe></noscript>'
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 font-mono text-sm ${
                    fieldErrors.bodyScripts ? 'border-red-500' : 'border-gray-600'
                  }`}
                  spellCheck={false}
                />
                {fieldErrors.bodyScripts && (
                  <p className="mt-1 text-sm text-red-400">{fieldErrors.bodyScripts}</p>
                )}
                <div className="flex justify-end mt-1">
                  <p
                    className={`text-xs ${
                      formData.bodyScripts.length > 8000 ? 'text-yellow-400' : 'text-white/50'
                    }`}
                  >
                    {formData.bodyScripts.length.toLocaleString()} / 10,000
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Social Media Profiles */}
          <div className="space-y-4">
            <h2 className="text-xl font-semibold text-white border-b border-white/10 pb-2">
              Social Media Profiles
            </h2>
            <p className="text-sm text-white/50">
              Add links to your social media profiles. These will appear as icons in the footer of
              your dealer page.
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* Facebook */}
              <div>
                <label
                  htmlFor="socialFacebook"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Facebook
                </label>
                <input
                  type="url"
                  id="socialFacebook"
                  value={formData.socialLinks.facebook}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, facebook: e.target.value },
                    })
                  }
                  placeholder="https://facebook.com/yourpage"
                  aria-describedby={
                    fieldErrors['socialLinks.facebook'] ? 'facebook-error' : undefined
                  }
                  aria-invalid={!!fieldErrors['socialLinks.facebook']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.facebook'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.facebook'] && (
                  <p id="facebook-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.facebook']}
                  </p>
                )}
              </div>

              {/* Instagram */}
              <div>
                <label
                  htmlFor="socialInstagram"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Instagram
                </label>
                <input
                  type="url"
                  id="socialInstagram"
                  value={formData.socialLinks.instagram}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, instagram: e.target.value },
                    })
                  }
                  placeholder="https://instagram.com/yourprofile"
                  aria-describedby={
                    fieldErrors['socialLinks.instagram'] ? 'instagram-error' : undefined
                  }
                  aria-invalid={!!fieldErrors['socialLinks.instagram']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.instagram'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.instagram'] && (
                  <p id="instagram-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.instagram']}
                  </p>
                )}
              </div>

              {/* YouTube */}
              <div>
                <label
                  htmlFor="socialYoutube"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  YouTube
                </label>
                <input
                  type="url"
                  id="socialYoutube"
                  value={formData.socialLinks.youtube}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, youtube: e.target.value },
                    })
                  }
                  placeholder="https://youtube.com/@yourchannel"
                  aria-describedby={
                    fieldErrors['socialLinks.youtube'] ? 'youtube-error' : undefined
                  }
                  aria-invalid={!!fieldErrors['socialLinks.youtube']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.youtube'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.youtube'] && (
                  <p id="youtube-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.youtube']}
                  </p>
                )}
              </div>

              {/* Pinterest */}
              <div>
                <label
                  htmlFor="socialPinterest"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  Pinterest
                </label>
                <input
                  type="url"
                  id="socialPinterest"
                  value={formData.socialLinks.pinterest}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, pinterest: e.target.value },
                    })
                  }
                  placeholder="https://pinterest.com/yourprofile"
                  aria-describedby={
                    fieldErrors['socialLinks.pinterest'] ? 'pinterest-error' : undefined
                  }
                  aria-invalid={!!fieldErrors['socialLinks.pinterest']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.pinterest'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.pinterest'] && (
                  <p id="pinterest-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.pinterest']}
                  </p>
                )}
              </div>

              {/* LinkedIn */}
              <div>
                <label
                  htmlFor="socialLinkedin"
                  className="block text-sm font-medium text-white/70 mb-1"
                >
                  LinkedIn
                </label>
                <input
                  type="url"
                  id="socialLinkedin"
                  value={formData.socialLinks.linkedin}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, linkedin: e.target.value },
                    })
                  }
                  placeholder="https://linkedin.com/in/yourprofile"
                  aria-describedby={
                    fieldErrors['socialLinks.linkedin'] ? 'linkedin-error' : undefined
                  }
                  aria-invalid={!!fieldErrors['socialLinks.linkedin']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.linkedin'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.linkedin'] && (
                  <p id="linkedin-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.linkedin']}
                  </p>
                )}
              </div>

              {/* X */}
              <div>
                <label htmlFor="socialX" className="block text-sm font-medium text-white/70 mb-1">
                  X
                </label>
                <input
                  type="url"
                  id="socialX"
                  value={formData.socialLinks.x}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      socialLinks: { ...formData.socialLinks, x: e.target.value },
                    })
                  }
                  placeholder="https://x.com/yourprofile"
                  aria-describedby={fieldErrors['socialLinks.x'] ? 'x-error' : undefined}
                  aria-invalid={!!fieldErrors['socialLinks.x']}
                  className={`w-full px-4 py-2 border rounded-md bg-gray-800/30 text-white placeholder-gray-500 focus:ring-2 focus:ring-sky-400 ${
                    fieldErrors['socialLinks.x'] ? 'border-red-500' : 'border-gray-600'
                  }`}
                />
                {fieldErrors['socialLinks.x'] && (
                  <p id="x-error" role="alert" className="mt-1 text-sm text-red-400">
                    {fieldErrors['socialLinks.x']}
                  </p>
                )}
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}