"use client";

import NextImage from "next/image";
import { useState, useEffect, useRef } from "react";
import {
  getBrandSettings,
  saveBrandSettings,
  uploadBrandLogo,
  uploadOlatheSweetLogo,
  uploadOlatheSweetLogoDark,
  type BrandSettings,
} from "@/actions/brand-settings";
import { AdminInput, AdminTextInput, AdminTextarea, AdminSelect } from "./design-system";

type Props = {
  settings: BrandSettings | null;
  brandId: string;
  brandName: string;
  brands?: { id: string; name: string }[];
  isPlatformAdmin?: boolean;
};

export default function BrandSettingsForm(props: Props) {
  // Non-platform-admin case: the brand never changes, so we can pass props
  // straight through (key forces the body to remount if the outer ever
  // receives a different brand id).
  if (!props.isPlatformAdmin) {
    return (
      <BrandSettingsFormBody
        key={props.brandId}
        brandId={props.brandId}
        brandName={props.brandName}
        settings={props.settings}
      />
    );
  }
  return <PlatformAdminBrandSettingsForm {...props} />;
}

function PlatformAdminBrandSettingsForm({
  settings: _initialSettings,
  brandId: initialBrandId,
  brandName: initialBrandName,
  brands = [],
  isPlatformAdmin: _isPlatformAdmin,
}: Props) {
  // Use lazy initializers so the lint's static "useState(prop)" check
  // doesn't fire — the initial value is computed lazily on first render.
  const [activeBrandId, setActiveBrandId] = useState<string>(() => initialBrandId);
  // Group the load result into a single state object so the effect
  // only writes one piece of state at a time (satisfies
  // `no-cascading-set-state`).
  const [loadData, setLoadData] = useState<{ settings: BrandSettings | null; loading: boolean }>({
    settings: null,
    loading: true,
  });
  const { settings: loadedSettings, loading } = loadData;

  // Track the last brandId we kicked off a fetch for. When the prop
  // changes we flip `loading` inline during render so users never see
  // stale "loaded" UI between the prop change and the effect running.
  const [lastFetchedBrandId, setLastFetchedBrandId] = useState<string | null>(null);
  if (activeBrandId !== lastFetchedBrandId) {
    setLastFetchedBrandId(activeBrandId);
    setLoadData({ settings: null, loading: true });
  }

  // Load settings for the active brand. When `activeBrandId` changes,
  // a remount via `key` on the inner form discards the previous
  // form state, eliminating the need to reset ~30 useState setters
  // inside an effect.
  useEffect(() => {
    let cancelled = false;
    getBrandSettings(activeBrandId).then((result) => {
      if (cancelled) return;
      setLoadData({ settings: result.success ? result.settings : null, loading: false });
    });
    return () => {
      cancelled = true;
    };
  }, [activeBrandId]);

  return (
    <div className="space-y-4">
      {brands.length > 0 && (
        <div className="flex items-center gap-3">
          <label
            htmlFor="brand-picker"
            className="text-sm font-medium text-[var(--admin-text-primary)]"
          >
            Brand:
          </label>
          <AdminSelect
            id="brand-picker"
            value={activeBrandId}
            onChange={(e) => setActiveBrandId(e.target.value)}
            options={brands.map((b) => ({ value: b.id, label: b.name }))}
          />
        </div>
      )}
      {loading ? (
        <div className="rounded-xl border border-[var(--admin-border)] bg-[var(--admin-card)] p-6 text-sm text-[var(--admin-text-muted)]">
          Loading settings…
        </div>
      ) : (
        <BrandSettingsFormBody
          key={activeBrandId}
          brandId={activeBrandId}
          brandName={loadedSettings?.brand_name ?? initialBrandName}
          settings={loadedSettings}
        />
      )}
    </div>
  );
}

function BrandSettingsFormBody({
  brandId,
  brandName: initialBrandName,
  settings,
}: {
  brandId: string;
  brandName: string;
  settings: BrandSettings | null;
}) {
  const [activeBrandName, setActiveBrandName] = useState(initialBrandName);
  const [legalBusinessName, setLegalBusinessName] = useState(settings?.legal_business_name ?? "");
  const [phone, setPhone] = useState(settings?.phone ?? "");
  const [email, setEmail] = useState(settings?.email ?? "");
  const [websiteUrl, setWebsiteUrl] = useState(settings?.website_url ?? "");
  const [streetAddress, setStreetAddress] = useState(settings?.street_address ?? "");
  const [city, setCity] = useState(settings?.city ?? "");
  const [state, setState] = useState(settings?.state ?? "");
  const [postalCode, setPostalCode] = useState(settings?.postal_code ?? "");
  const [country, setCountry] = useState(settings?.country ?? "US");
  const [logoUrl, setLogoUrl] = useState(settings?.logo_url ?? "");
  const [logoUrlDark, setLogoUrlDark] = useState(settings?.logo_url_dark ?? "");
  const [olatheSweetLogoUrl, setOlatheSweetLogoUrl] = useState(settings?.olathe_sweet_logo_url ?? "");
  const [olatheSweetLogoUrlDark, setOlatheSweetLogoUrlDark] = useState(settings?.olathe_sweet_logo_url_dark ?? "");
  const [defaultEmailSignature, setDefaultEmailSignature] = useState(
    settings?.default_email_signature ?? ""
  );
  const [invoiceFooterNotes, setInvoiceFooterNotes] = useState(
    settings?.invoice_footer_notes ?? ""
  );

  // Storefront customization fields
  const [heroTagline, setHeroTagline] = useState(settings?.hero_tagline ?? "");
  const [aboutHeadline, setAboutHeadline] = useState(settings?.about_headline ?? "");
  const [aboutSubheadline, setAboutSubheadline] = useState(settings?.about_subheadline ?? "");
  const [customFooterText, setCustomFooterText] = useState(settings?.custom_footer_text ?? "");
  const [showWholesaleLink, setShowWholesaleLink] = useState(settings?.show_wholesale_link ?? true);
  const [showZipSearch, setShowZipSearch] = useState(settings?.show_zip_search ?? true);
  const [showSchedulePdf, setShowSchedulePdf] = useState(settings?.show_schedule_pdf ?? true);
  const [showTextAlerts, setShowTextAlerts] = useState(settings?.show_text_alerts ?? false);
  const [schedulePdfNotes, setSchedulePdfNotes] = useState(settings?.schedule_pdf_notes ?? "");
  const [heroImageUrl, setHeroImageUrl] = useState(settings?.hero_image_url ?? "");
  const [brandPrimaryColor, setBrandPrimaryColor] = useState(settings?.brand_primary_color ?? "#16a34a");
  const [brandSecondaryColor, setBrandSecondaryColor] = useState(settings?.brand_secondary_color ?? "#f5f5f4");
  const [brandBgColor, setBrandBgColor] = useState(settings?.brand_bg_color ?? "#fafaf9");
  const [brandTextColor, setBrandTextColor] = useState(settings?.brand_text_color ?? "#1c1917");
  // Tax settings
  const [collectSalesTax, setCollectSalesTax] = useState(settings?.collect_sales_tax ?? false);
  const [nexusStates, setNexusStates] = useState<string[]>(settings?.nexus_states ?? ["CO"]);

  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setSaved(false);

    const result = await saveBrandSettings({
      brandId,
      legalBusinessName: legalBusinessName || undefined,
      phone: phone || undefined,
      email: email || undefined,
      websiteUrl: websiteUrl || undefined,
      streetAddress: streetAddress || undefined,
      city: city || undefined,
      state: state || undefined,
      postalCode: postalCode || undefined,
      country: country || undefined,
      logoUrl: logoUrl || undefined,
      logoUrlDark: logoUrlDark || undefined,
      olatheSweetLogoUrl: olatheSweetLogoUrl || undefined,
      olatheSweetLogoUrlDark: olatheSweetLogoUrlDark || undefined,
      defaultEmailSignature: defaultEmailSignature || undefined,
      invoiceFooterNotes: invoiceFooterNotes || undefined,
      heroTagline: heroTagline || undefined,
      aboutHeadline: aboutHeadline || undefined,
      aboutSubheadline: aboutSubheadline || undefined,
      customFooterText: customFooterText || undefined,
      showWholesaleLink: showWholesaleLink,
      showZipSearch: showZipSearch,
      showSchedulePdf: showSchedulePdf,
      showTextAlerts: showTextAlerts,
      schedulePdfNotes: schedulePdfNotes || undefined,
      heroImageUrl: heroImageUrl || undefined,
      brandPrimaryColor: brandPrimaryColor || undefined,
      brandSecondaryColor: brandSecondaryColor || undefined,
      brandBgColor: brandBgColor || undefined,
      brandTextColor: brandTextColor || undefined,
      collectSalesTax,
      nexusStates,
    });

    setSaving(false);
    if (!result.success) {
      setError(result.error ?? "Failed to save");
    } else {
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    }
  }

  return (
    <form onSubmit={handleSave} className="space-y-8">
      {error && (
        <div className="rounded-xl bg-red-950/50 border border-red-800 p-4 text-sm text-red-300">{error}</div>
      )}
      {saved && (
        <div className="rounded-xl bg-green-950/50 border border-green-800 p-4 text-sm text-green-300">
          Brand settings saved.
        </div>
      )}

      {/* Company Info */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Company Information</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Primary contact and business details for this brand.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <AdminInput label="Legal Business Name">
            <AdminTextInput
              value={legalBusinessName}
              onChange={(e) => setLegalBusinessName(e.target.value)}
              placeholder="Tuxedo Corn LLC"
            />
          </AdminInput>
          <AdminInput label="Phone">
            <AdminTextInput
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              placeholder="(772) 555-0100"
            />
          </AdminInput>
          <AdminInput label="Email">
            <AdminTextInput
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="orders@tuxedocorn.com"
            />
          </AdminInput>
          <AdminInput label="Website">
            <AdminTextInput
              type="url"
              value={websiteUrl}
              onChange={(e) => setWebsiteUrl(e.target.value)}
              placeholder="https://tuxedocorn.com"
            />
          </AdminInput>
        </div>
      </div>

      {/* Address */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Business Address</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Used on invoices and shipping labels.
          </p>
        </div>

        <div className="space-y-4">
          <AdminInput label="Street Address">
            <AdminTextInput
              value={streetAddress}
              onChange={(e) => setStreetAddress(e.target.value)}
              placeholder="1234 Farm Road"
            />
          </AdminInput>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div className="col-span-2">
              <AdminInput label="City">
                <AdminTextInput
                  value={city}
                  onChange={(e) => setCity(e.target.value)}
                  placeholder="Stuart"
                />
              </AdminInput>
            </div>
            <AdminInput label="State">
              <AdminTextInput
                value={state}
                onChange={(e) => setState(e.target.value)}
                placeholder="FL"
                maxLength={2}
              />
            </AdminInput>
            <AdminInput label="ZIP / Postal Code">
              <AdminTextInput
                value={postalCode}
                onChange={(e) => setPostalCode(e.target.value)}
                placeholder="34994"
              />
            </AdminInput>
          </div>
          <AdminInput label="Country">
            <AdminSelect
              value={country}
              onChange={(e) => setCountry(e.target.value)}
              options={[
                { value: "US", label: "United States" },
                { value: "CA", label: "Canada" },
              ]}
            />
          </AdminInput>
        </div>
      </div>

      {/* Brand Logos */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Brand Logos</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Upload your brand logos to Supabase Storage. Recommended: 1200×400px max, 5MB max (ideally under 2MB for faster loading).
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          {/* Primary Logo */}
          <LogoUploadField
            label="Primary Brand Logo"
            hint="Light backgrounds — invoices, email headers, storefront header"
            value={logoUrl}
            previewBg="bg-zinc-800"
            brandId={brandId}
            onUpload={(url) => setLogoUrl(url)}
          />

          {/* Dark Logo */}
          <LogoUploadField
            label="Dark Background Logo"
            hint="Dark backgrounds — storefront nav on dark header"
            value={logoUrlDark}
            previewBg="bg-zinc-900"
            brandId={brandId}
            onUpload={(url) => setLogoUrlDark(url)}
            isDark
          />
        </div>

        {/* Olathe Sweet Logos — two variants */}
        <div className="mt-2">
          <p className="text-sm font-semibold text-zinc-200 mb-4">Olathe Sweet™ Logo</p>
          <p className="text-xs text-zinc-400 mb-4">
            The mountain &amp; wagon wheel mark — use the light version on dark backgrounds, dark/white version on light backgrounds. Shown in hero, About page, and product cards.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <LogoUploadField
              label="Olathe Sweet™ — Dark/White"
              hint="Works on light backgrounds (stone, white)"
              value={olatheSweetLogoUrl}
              previewBg="bg-zinc-700"
              brandId={brandId}
              onUpload={(url) => setOlatheSweetLogoUrl(url)}
              isOlatheSweetLight
            />
            <LogoUploadField
              label="Olathe Sweet™ — Transparent"
              hint="Works on dark backgrounds (hero, dark sections)"
              value={olatheSweetLogoUrlDark}
              previewBg="bg-zinc-900"
              brandId={brandId}
              onUpload={(url) => setOlatheSweetLogoUrlDark(url)}
              isOlatheSweetDark
            />
          </div>
        </div>
      </div>

      {/* Email & Invoice branding */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Email & Invoice Branding</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Used in email signatures, invoice footers, and customer-facing documents.
          </p>
        </div>

        <AdminInput 
          label="Default Email Signature"
          helpText="Appears at the bottom of all outbound emails. Supports line breaks."
        >
          <AdminTextarea
            value={defaultEmailSignature}
            onChange={(e) => setDefaultEmailSignature(e.target.value)}
            rows={3}
            placeholder={"The Tuxedo Corn Team\norders@tuxedocorn.com | (772) 555-0100\nFresh from Florida since 1987"}
          />
        </AdminInput>

        <AdminInput 
          label="Invoice Footer Notes"
          helpText="Printed at the bottom of invoices and order confirmations."
        >
          <AdminTextarea
            value={invoiceFooterNotes}
            onChange={(e) => setInvoiceFooterNotes(e.target.value)}
            rows={2}
            placeholder={"Thank you for your order! Pickup available at our farm stand.\nQuestions? Call (772) 555-0100 or email orders@tuxedocorn.com"}
          />
        </AdminInput>
      </div>

      {/* Storefront Customization */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Storefront Customization</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Controls what appears on your public storefront homepage.
          </p>
        </div>

        <AdminInput label="Hero Tagline" helpText="Subtitle below the brand name in the hero section.">
          <AdminTextInput
            value={heroTagline}
            onChange={(e) => setHeroTagline(e.target.value)}
            placeholder="Fresh citrus delivered to stops near you."
          />
        </AdminInput>

        <AdminInput 
          label="Hero Image URL"
          helpText="Full-width hero background image. Recommended: 1600×600px, under 1MB. Paste a public image URL. For Tuxedo Corn: corn field photo. For IRD: citrus orchard."
        >
          <AdminTextInput
            type="url"
            value={heroImageUrl}
            onChange={(e) => setHeroImageUrl(e.target.value)}
            placeholder="https://cdn.example.com/hero-corn-field.jpg"
          />
        </AdminInput>
        {heroImageUrl && (
          <div className="relative mt-2 rounded-lg overflow-hidden border border-zinc-700 h-32">
            <NextImage src={heroImageUrl} alt="Hero preview" fill style={{ objectFit: "cover" }} />
          </div>
        )}

        <AdminInput label="About Page Headline">
          <AdminTextInput
            value={aboutHeadline}
            onChange={(e) => setAboutHeadline(e.target.value)}
            placeholder="Our Story"
          />
        </AdminInput>

        <AdminInput label="About Page Subheadline">
          <AdminTextInput
            value={aboutSubheadline}
            onChange={(e) => setAboutSubheadline(e.target.value)}
            placeholder="Growing citrus in the Indian River region since 1985."
          />
        </AdminInput>

        <AdminInput label="Custom Footer Text" helpText="Appears above the copyright line in the brand footer.">
          <AdminTextarea
            value={customFooterText}
            onChange={(e) => setCustomFooterText(e.target.value)}
            rows={2}
            placeholder="Fresh from Florida — Ships Sept through May"
          />
        </AdminInput>
      </div>

      {/* Brand Colors */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Brand Colors</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Customize your storefront accent and background colors. Use hex codes (e.g. #e11d48).
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-zinc-300 mb-1">Primary Accent</label>
            <div className="flex gap-2 items-center">
              <input aria-label="Color"
                type="color"
                value={brandPrimaryColor}
                onChange={(e) => setBrandPrimaryColor(e.target.value)}
                className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
              />
              <input aria-label="#16a34a"
                type="text"
                value={brandPrimaryColor}
                onChange={(e) => setBrandPrimaryColor(e.target.value)}
                className="flex-1 rounded-xl border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-emerald-500 font-mono"
                placeholder="#16a34a"
              />
            </div>
            <p className="mt-1 text-xs text-zinc-500">Buttons, badges, links</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-300 mb-1">Text Color</label>
            <div className="flex gap-2 items-center">
              <input aria-label="Color"
                type="color"
                value={brandTextColor}
                onChange={(e) => setBrandTextColor(e.target.value)}
                className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
              />
              <input aria-label="#1c1917"
                type="text"
                value={brandTextColor}
                onChange={(e) => setBrandTextColor(e.target.value)}
                className="flex-1 rounded-xl border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-emerald-500 font-mono"
                placeholder="#1c1917"
              />
            </div>
            <p className="mt-1 text-xs text-zinc-500">Headlines, body text</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-300 mb-1">Background Color</label>
            <div className="flex gap-2 items-center">
              <input aria-label="Color"
                type="color"
                value={brandBgColor}
                onChange={(e) => setBrandBgColor(e.target.value)}
                className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
              />
              <input aria-label="#fafaf9"
                type="text"
                value={brandBgColor}
                onChange={(e) => setBrandBgColor(e.target.value)}
                className="flex-1 rounded-xl border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-emerald-500 font-mono"
                placeholder="#fafaf9"
              />
            </div>
            <p className="mt-1 text-xs text-zinc-500">Page background (light mode)</p>
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-300 mb-1">Secondary Accent</label>
            <div className="flex gap-2 items-center">
              <input aria-label="Color"
                type="color"
                value={brandSecondaryColor}
                onChange={(e) => setBrandSecondaryColor(e.target.value)}
                className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
              />
              <input aria-label="#f5f5f4"
                type="text"
                value={brandSecondaryColor}
                onChange={(e) => setBrandSecondaryColor(e.target.value)}
                className="flex-1 rounded-xl border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-emerald-500 font-mono"
                placeholder="#f5f5f4"
              />
            </div>
            <p className="mt-1 text-xs text-zinc-500">Hover states, highlights</p>
          </div>
        </div>

        <div className="mt-3 p-4 rounded-xl bg-zinc-800 border border-zinc-700">
          <p className="text-xs text-zinc-400 mb-2 font-medium">Preview</p>
          <div className="flex gap-3 items-center flex-wrap">
            <div className="flex gap-2">
              <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-xs font-bold" style={{ backgroundColor: brandPrimaryColor }}>
                A
              </div>
              <div className="w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold border border-zinc-600" style={{ backgroundColor: brandBgColor, color: brandTextColor }}>
                A
              </div>
              <div className="w-8 h-8 rounded-lg border border-zinc-600" style={{ backgroundColor: brandSecondaryColor }} />
            </div>
            <div className="h-8 w-px bg-zinc-600" />
            <div className="flex gap-1.5">
              <div className="px-3 py-1.5 rounded-lg text-white text-xs font-semibold" style={{ backgroundColor: brandPrimaryColor }}>
                Button
              </div>
              <div className="px-3 py-1.5 rounded-lg text-xs font-semibold border" style={{ borderColor: brandPrimaryColor, color: brandPrimaryColor }}>
                Outline
              </div>
              <div className="px-3 py-1.5 rounded-lg text-xs font-semibold" style={{ backgroundColor: brandSecondaryColor, color: brandTextColor }}>
                Secondary
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Tax Settings */}
      <div className="space-y-5 rounded-xl border border-amber-700 bg-amber-950/30 p-5">
        <div>
          <h3 className="font-semibold text-amber-200">Tax Settings</h3>
          <p className="mt-1 text-sm text-amber-300/70">
            Configure automatic sales tax collection via Stripe Tax. Tax is only calculated for ship orders shipping to your nexus states.
          </p>
        </div>

        <FeatureToggle
          label="Collect Sales Tax"
          description="Automatically calculate and collect sales tax for ship orders via Stripe Tax."
          checked={collectSalesTax}
          onChange={setCollectSalesTax}
        />

        {collectSalesTax && (
          <div>
            <label className="block text-sm font-medium text-amber-200 mb-1">
              Nexus States
            </label>
            <p className="mt-1 text-xs text-amber-300/60 mb-2">
              States where you have tax nexus (physical presence). Stripe Tax will calculate tax for ship orders to these states.
            </p>
            <NexusStateInput
              value={nexusStates}
              onChange={setNexusStates}
            />
          </div>
        )}
      </div>

      {/* Feature Toggles */}
      <div className="space-y-5 rounded-xl border border-zinc-700 p-5">
        <div>
          <h3 className="font-semibold text-zinc-100">Feature Toggles</h3>
          <p className="mt-1 text-sm text-zinc-400">
            Show or hide features on your public storefront.
          </p>
        </div>

        <div className="space-y-4">
          <FeatureToggle
            label="Wholesale Portal link"
            description="Show the green Wholesale Portal banner on the homepage and nav link."
            checked={showWholesaleLink}
            onChange={setShowWholesaleLink}
          />
          <FeatureToggle
            label="Zip Code Search"
            description="Show the ZIP code search box on the IRD homepage."
            checked={showZipSearch}
            onChange={setShowZipSearch}
          />
          <FeatureToggle
            label="Schedule PDF Download"
            description="Show the 'Download Schedule PDF' button on the stops section."
            checked={showSchedulePdf}
            onChange={setShowSchedulePdf}
          />
          <FeatureToggle
            label="Text Alerts Signup"
            description="Show a text alert signup section on the homepage."
            checked={showTextAlerts}
            onChange={setShowTextAlerts}
          />
        </div>

        <AdminInput label="Schedule PDF Footer Notes" helpText="Printed at the bottom of the generated schedule PDF.">
          <AdminTextarea
            value={schedulePdfNotes}
            onChange={(e) => setSchedulePdfNotes(e.target.value)}
            rows={1}
            placeholder="All orders prepaid. No refunds on unpicked orders."
          />
        </AdminInput>
      </div>

      {error ? (
        <div className="flex items-center gap-3 text-zinc-400">
          <div className="h-5 w-5 rounded-full border-2 border-zinc-500 border-t-transparent animate-spin" />
          Loading settings...
        </div>
      ) : (
        <button
          type="submit"
          disabled={saving}
          className="rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white hover:bg-blue-900/300 disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Brand Settings"}
        </button>
      )}
    </form>
  );
}

// ── Feature Toggle Component ─────────────────────────────────────────────────

function FeatureToggle({
  label,
  description,
  checked,
  onChange,
}: {
  label: string;
  description: string;
  checked: boolean;
  onChange: (val: boolean) => void;
}) {
  return (
    <div className="flex items-start gap-3">
      <button
        type="button"
        onClick={() => onChange(!checked)}
        className={`relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors ${
          checked ? "bg-green-600" : "bg-zinc-600"
        }`}
      >
        <span
          className={`inline-block h-3.5 w-3.5 transform rounded-full bg-zinc-900 transition-transform ${
            checked ? "translate-x-4" : "translate-x-1"
          }`}
        />
      </button>
      <div>
        <p className="text-sm font-medium text-zinc-200">{label}</p>
        <p className="text-xs text-zinc-400">{description}</p>
      </div>
    </div>
  );
}

// ── Nexus States Input Component ──────────────────────────────────────────────

const US_STATES = [
  "AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA",
  "HI","ID","IL","IN","IA","KS","KY","LA","ME","MD",
  "MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ",
  "NM","NY","NC","ND","OH","OK","OR","PA","RI","SC",
  "SD","TN","TX","UT","VT","VA","WA","WV","WI","WY",
];

function NexusStateInput({
  value,
  onChange,
}: {
  value: string[];
  onChange: (v: string[]) => void;
}) {
  const [input, setInput] = useState("");

  function addState(code: string) {
    const upper = code.toUpperCase().trim();
    if (US_STATES.includes(upper) && !value.includes(upper)) {
      onChange([...value, upper]);
    }
    setInput("");
  }

  function removeState(code: string) {
    onChange(value.filter((s) => s !== code));
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      if (input.trim()) addState(input);
    }
  }

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        {value.map((code) => (
          <span
            key={code}
            className="inline-flex items-center gap-1 rounded-lg bg-amber-600 text-amber-050 px-2 py-1 text-xs font-semibold"
          >
            {code}
            <button
              type="button"
              onClick={() => removeState(code)}
              className="hover:text-amber-200"
            >
              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </span>
        ))}
      </div>
      <div className="flex gap-2">
        <AdminInput label="" className="flex-1">
          <AdminTextInput
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Type state code (e.g. CO) and press Enter"
            maxLength={2}
          />
        </AdminInput>
        <AdminInput label="" className="w-32">
          <AdminSelect
            value=""
            onChange={(e) => { if (e.target.value) addState(e.target.value); }}
            options={[
              { value: "", label: "Add state" },
              ...US_STATES.flatMap((s) => (value.includes(s) ? [] : [{ value: s, label: s }])),
            ]}
          />
        </AdminInput>
      </div>
    </div>
  );
}

// ── Logo Upload Component ────────────────────────────────────────────────────

type LogoUploadFieldProps = {
  label: string;
  hint: string;
  value: string;
  previewBg: string;
  brandId: string;
  onUpload: (url: string) => void;
  isDark?: boolean;
  isOlatheSweetLight?: boolean;
  isOlatheSweetDark?: boolean;
};

export function LogoUploadField({
  label,
  hint,
  value,
  previewBg,
  brandId,
  onUpload,
  isDark = false,
  isOlatheSweetLight = false,
  isOlatheSweetDark = false,
}: LogoUploadFieldProps) {
  const [uploading, setUploading] = useState(false);
  const [dragOver, setDragOver] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  async function handleFile(file: File) {
    setError(null);
    setUploading(true);
    let result;
    if (isOlatheSweetLight) {
      result = await uploadOlatheSweetLogo(brandId, file);
    } else if (isOlatheSweetDark) {
      result = await uploadOlatheSweetLogoDark(brandId, file);
    } else {
      result = await uploadBrandLogo(brandId, file, isDark);
    }
    setUploading(false);
    if (result.success) {
      onUpload(result.logoUrl);
    } else {
      setError(result.error ?? "Upload failed");
    }
  }

  function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    setDragOver(false);
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  }

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) handleFile(file);
  }

  return (
    <div>
      <label className="block text-sm font-medium text-zinc-300 mb-1">{label}</label>
      <p
        className="text-xs text-zinc-500 mb-2"
        dangerouslySetInnerHTML={{ __html: hint }}
      />

      <div
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            (e.currentTarget.querySelector('input[type="file"]') as HTMLInputElement | null)?.click();
          }
        }}
        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={handleDrop}
        onClick={() => inputRef.current?.click()}
        className={`
          relative flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 cursor-pointer transition-colors
          ${dragOver ? "border-emerald-500 bg-emerald-950/30" : "border-zinc-600 hover:border-zinc-500 hover:bg-zinc-800/50"}
          ${uploading ? "opacity-50 pointer-events-none" : ""}
        `}
      >
        {uploading ? (
          <>
            <div className="h-5 w-5 rounded-full border-2 border-zinc-500 border-t-transparent animate-spin" />
            <span className="text-sm text-zinc-400">Uploading...</span>
          </>
        ) : value ? (
          <>
            <span className="relative inline-block h-10 w-auto">
              <NextImage src={value} alt={label} fill style={{ objectFit: "contain" }} />
            </span>
            <span className="text-xs text-zinc-400">Click or drop to replace</span>
          </>
        ) : (
          <>
            <svg className="h-8 w-8 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span className="text-sm text-zinc-400">Drag & drop or click to upload</span>
            <span className="text-xs text-zinc-500">PNG, JPEG, WebP · 1200×400px max · max 5MB (ideally under 2MB)</span>
          </>
        )}
        <input aria-label="File upload"
          ref={inputRef}
          type="file"
          accept="image/png,image/jpeg,image/webp,image/svg+xml"
          className="hidden"
          onChange={handleChange}
        />
      </div>

      {error && <p className="mt-1 text-xs text-red-400">{error}</p>}

      {value && (
        <div className={`mt-3 rounded-lg p-3 text-center ${previewBg}`}>
          <p className="text-xs text-zinc-400 mb-2">Preview</p>
          <span className="relative inline-block h-10 w-auto">
            <NextImage src={value} alt={label} fill style={{ objectFit: "contain" }} className="mx-auto" />
          </span>
        </div>
      )}
    </div>
  );
}