"use client";

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

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

const EMPTY_BRANDS: { id: string; name: string }[] = [];

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 = EMPTY_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;

  // Load settings for the active brand. The inner form's `key`
  // remount discards its ~30 useState slots on brand change, so the
  // effect only needs to fetch and toggle the loading flag.
  useEffect(() => {
    let cancelled = false;
    // Defer the loading reset to a microtask so the setState doesn't
    // fire synchronously inside the effect body (which trips
    // `react-hooks/set-state-in-effect`). The reset still happens
    // before the fetch's first await resolves.
    queueMicrotask(() => {
      if (cancelled) return;
      setLoadData({ settings: null, loading: true });
    });
    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>
  );
}

// ── Body: reducer + form layout ──────────────────────────────────────────────

type FormState = {
  activeBrandName: string;
  legalBusinessName: string;
  phone: string;
  email: string;
  websiteUrl: string;
  streetAddress: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  logoUrl: string;
  logoUrlDark: string;
  olatheSweetLogoUrl: string;
  olatheSweetLogoUrlDark: string;
  defaultEmailSignature: string;
  invoiceFooterNotes: string;
  heroTagline: string;
  aboutHeadline: string;
  aboutSubheadline: string;
  customFooterText: string;
  showWholesaleLink: boolean;
  showZipSearch: boolean;
  showSchedulePdf: boolean;
  showTextAlerts: boolean;
  schedulePdfNotes: string;
  heroImageUrl: string;
  brandPrimaryColor: string;
  brandSecondaryColor: string;
  brandBgColor: string;
  brandTextColor: string;
  collectSalesTax: boolean;
  nexusStates: string[];
  saving: boolean;
  saved: boolean;
  error: string | null;
};

type FormAction =
  | { type: "SET_FIELD"; field: keyof FormState; value: FormState[keyof FormState] }
  | { type: "START_SAVE" }
  | { type: "SAVE_SUCCESS" }
  | { type: "SAVE_FAIL"; error: string }
  | { type: "CLEAR_SAVED" };

function buildInitialFormState(settings: BrandSettings | null, brandName: string): FormState {
  return {
    activeBrandName: brandName,
    legalBusinessName: settings?.legal_business_name ?? "",
    phone: settings?.phone ?? "",
    email: settings?.email ?? "",
    websiteUrl: settings?.website_url ?? "",
    streetAddress: settings?.street_address ?? "",
    city: settings?.city ?? "",
    state: settings?.state ?? "",
    postalCode: settings?.postal_code ?? "",
    country: settings?.country ?? "US",
    logoUrl: settings?.logo_url ?? "",
    logoUrlDark: settings?.logo_url_dark ?? "",
    olatheSweetLogoUrl: settings?.olathe_sweet_logo_url ?? "",
    olatheSweetLogoUrlDark: settings?.olathe_sweet_logo_url_dark ?? "",
    defaultEmailSignature: settings?.default_email_signature ?? "",
    invoiceFooterNotes: settings?.invoice_footer_notes ?? "",
    heroTagline: settings?.hero_tagline ?? "",
    aboutHeadline: settings?.about_headline ?? "",
    aboutSubheadline: settings?.about_subheadline ?? "",
    customFooterText: settings?.custom_footer_text ?? "",
    showWholesaleLink: settings?.show_wholesale_link ?? true,
    showZipSearch: settings?.show_zip_search ?? true,
    showSchedulePdf: settings?.show_schedule_pdf ?? true,
    showTextAlerts: settings?.show_text_alerts ?? false,
    schedulePdfNotes: settings?.schedule_pdf_notes ?? "",
    heroImageUrl: settings?.hero_image_url ?? "",
    brandPrimaryColor: settings?.brand_primary_color ?? "#16a34a",
    brandSecondaryColor: settings?.brand_secondary_color ?? "#f5f5f4",
    brandBgColor: settings?.brand_bg_color ?? "#fafaf9",
    brandTextColor: settings?.brand_text_color ?? "#1c1917",
    collectSalesTax: settings?.collect_sales_tax ?? false,
    nexusStates: settings?.nexus_states ?? ["CO"],
    saving: false,
    saved: false,
    error: null,
  };
}

function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case "SET_FIELD":
      return { ...state, [action.field]: action.value } as FormState;
    case "START_SAVE":
      return { ...state, saving: true, error: null, saved: false };
    case "SAVE_SUCCESS":
      return { ...state, saving: false, saved: true };
    case "SAVE_FAIL":
      return { ...state, saving: false, error: action.error };
    case "CLEAR_SAVED":
      return { ...state, saved: false };
  }
}

function BrandSettingsFormBody({
  brandId,
  brandName: initialBrandName,
  settings,
}: {
  brandId: string;
  brandName: string;
  settings: BrandSettings | null;
}) {
  const [state, dispatch] = useReducer(formReducer, null, () => buildInitialFormState(settings, initialBrandName));

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    dispatch({ type: "START_SAVE" });

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

    if (!result.success) {
      dispatch({ type: "SAVE_FAIL", error: result.error ?? "Failed to save" });
    } else {
      dispatch({ type: "SAVE_SUCCESS" });
      setTimeout(() => dispatch({ type: "CLEAR_SAVED" }), 3000);
    }
  }

  function setField<K extends keyof FormState>(field: K, value: FormState[K]) {
    dispatch({ type: "SET_FIELD", field, value });
  }

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

      <CompanyInfoSection
        legalBusinessName={state.legalBusinessName}
        phone={state.phone}
        email={state.email}
        websiteUrl={state.websiteUrl}
        setField={setField}
      />

      <AddressSection
        streetAddress={state.streetAddress}
        city={state.city}
        state={state.state}
        postalCode={state.postalCode}
        country={state.country}
        setField={setField}
      />

      <BrandLogosSection
        logoUrl={state.logoUrl}
        logoUrlDark={state.logoUrlDark}
        olatheSweetLogoUrl={state.olatheSweetLogoUrl}
        olatheSweetLogoUrlDark={state.olatheSweetLogoUrlDark}
        brandId={brandId}
        setField={setField}
      />

      <EmailInvoiceSection
        defaultEmailSignature={state.defaultEmailSignature}
        invoiceFooterNotes={state.invoiceFooterNotes}
        setField={setField}
      />

      <StorefrontSection
        heroTagline={state.heroTagline}
        heroImageUrl={state.heroImageUrl}
        aboutHeadline={state.aboutHeadline}
        aboutSubheadline={state.aboutSubheadline}
        customFooterText={state.customFooterText}
        setField={setField}
      />

      <BrandColorsSection
        brandPrimaryColor={state.brandPrimaryColor}
        brandSecondaryColor={state.brandSecondaryColor}
        brandBgColor={state.brandBgColor}
        brandTextColor={state.brandTextColor}
        setField={setField}
      />

      <TaxSettingsSection
        collectSalesTax={state.collectSalesTax}
        nexusStates={state.nexusStates}
        setField={setField}
      />

      <FeatureTogglesSection
        toggles={{
          showWholesaleLink: state.showWholesaleLink,
          showZipSearch: state.showZipSearch,
          showSchedulePdf: state.showSchedulePdf,
          showTextAlerts: state.showTextAlerts,
        }}
        schedulePdfNotes={state.schedulePdfNotes}
        setField={setField}
      />

      {state.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={state.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"
        >
          {state.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"
        aria-label={`Toggle ${label}`}
        aria-pressed={checked}
        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>
  );
}

// ── Section subcomponents ────────────────────────────────────────────────────

type SetField = <K extends keyof FormState>(field: K, value: FormState[K]) => void;

function CompanyInfoSection({
  legalBusinessName,
  phone,
  email,
  websiteUrl,
  setField,
}: {
  legalBusinessName: string;
  phone: string;
  email: string;
  websiteUrl: string;
  setField: SetField;
}) {
  return (
    <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) => setField("legalBusinessName", e.target.value)}
            placeholder="Tuxedo Corn LLC"
          />
        </AdminInput>
        <AdminInput label="Phone">
          <AdminTextInput
            type="tel"
            value={phone}
            onChange={(e) => setField("phone", e.target.value)}
            placeholder="(772) 555-0100"
          />
        </AdminInput>
        <AdminInput label="Email">
          <AdminTextInput
            type="email"
            value={email}
            onChange={(e) => setField("email", e.target.value)}
            placeholder="orders@tuxedocorn.com"
          />
        </AdminInput>
        <AdminInput label="Website">
          <AdminTextInput
            type="url"
            value={websiteUrl}
            onChange={(e) => setField("websiteUrl", e.target.value)}
            placeholder="https://tuxedocorn.com"
          />
        </AdminInput>
      </div>
    </div>
  );
}

function AddressSection({
  streetAddress,
  city,
  state,
  postalCode,
  country,
  setField,
}: {
  streetAddress: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  setField: SetField;
}) {
  return (
    <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) => setField("streetAddress", 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) => setField("city", e.target.value)}
                placeholder="Stuart"
              />
            </AdminInput>
          </div>
          <AdminInput label="State">
            <AdminTextInput
              value={state}
              onChange={(e) => setField("state", e.target.value)}
              placeholder="FL"
              maxLength={2}
            />
          </AdminInput>
          <AdminInput label="ZIP / Postal Code">
            <AdminTextInput
              value={postalCode}
              onChange={(e) => setField("postalCode", e.target.value)}
              placeholder="34994"
            />
          </AdminInput>
        </div>
        <AdminInput label="Country">
          <AdminSelect
            value={country}
            onChange={(e) => setField("country", e.target.value)}
            options={[
              { value: "US", label: "United States" },
              { value: "CA", label: "Canada" },
            ]}
          />
        </AdminInput>
      </div>
    </div>
  );
}

function BrandLogosSection({
  logoUrl,
  logoUrlDark,
  olatheSweetLogoUrl,
  olatheSweetLogoUrlDark,
  brandId,
  setField,
}: {
  logoUrl: string;
  logoUrlDark: string;
  olatheSweetLogoUrl: string;
  olatheSweetLogoUrlDark: string;
  brandId: string;
  setField: SetField;
}) {
  return (
    <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) => setField("logoUrl", 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) => setField("logoUrlDark", 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) => setField("olatheSweetLogoUrl", 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) => setField("olatheSweetLogoUrlDark", url)}
            isOlatheSweetDark
          />
        </div>
      </div>
    </div>
  );
}

function EmailInvoiceSection({
  defaultEmailSignature,
  invoiceFooterNotes,
  setField,
}: {
  defaultEmailSignature: string;
  invoiceFooterNotes: string;
  setField: SetField;
}) {
  return (
    <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) => setField("defaultEmailSignature", 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) => setField("invoiceFooterNotes", 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>
  );
}

function StorefrontSection({
  heroTagline,
  heroImageUrl,
  aboutHeadline,
  aboutSubheadline,
  customFooterText,
  setField,
}: {
  heroTagline: string;
  heroImageUrl: string;
  aboutHeadline: string;
  aboutSubheadline: string;
  customFooterText: string;
  setField: SetField;
}) {
  return (
    <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) => setField("heroTagline", 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) => setField("heroImageUrl", 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) => setField("aboutHeadline", e.target.value)}
          placeholder="Our Story"
        />
      </AdminInput>

      <AdminInput label="About Page Subheadline">
        <AdminTextInput
          value={aboutSubheadline}
          onChange={(e) => setField("aboutSubheadline", 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) => setField("customFooterText", e.target.value)}
          rows={2}
          placeholder="Fresh from Florida — Ships Sept through May"
        />
      </AdminInput>
    </div>
  );
}

function BrandColorsSection({
  brandPrimaryColor,
  brandSecondaryColor,
  brandBgColor,
  brandTextColor,
  setField,
}: {
  brandPrimaryColor: string;
  brandSecondaryColor: string;
  brandBgColor: string;
  brandTextColor: string;
  setField: SetField;
}) {
  return (
    <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 htmlFor="fld-1-primary-accent-color"  className="block text-sm font-medium text-zinc-300 mb-1">Primary Accent</label>
          <div className="flex gap-2 items-center">
            <input id="fld-1-primary-accent-color"  aria-label="Color"
              type="color"
              value={brandPrimaryColor}
              onChange={(e) => setField("brandPrimaryColor", e.target.value)}
              className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
            />
            <input id="fld-1-primary-accent-color-text"  aria-label="#16a34a"
              type="text"
              value={brandPrimaryColor}
              onChange={(e) => setField("brandPrimaryColor", 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 htmlFor="fld-2-text-color"  className="block text-sm font-medium text-zinc-300 mb-1">Text Color</label>
          <div className="flex gap-2 items-center">
            <input id="fld-2-text-color"  aria-label="Color"
              type="color"
              value={brandTextColor}
              onChange={(e) => setField("brandTextColor", e.target.value)}
              className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
            />
            <input id="fld-2-text-color-text"  aria-label="#1c1917"
              type="text"
              value={brandTextColor}
              onChange={(e) => setField("brandTextColor", 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 htmlFor="fld-3-background-color"  className="block text-sm font-medium text-zinc-300 mb-1">Background Color</label>
          <div className="flex gap-2 items-center">
            <input id="fld-3-background-color"  aria-label="Color"
              type="color"
              value={brandBgColor}
              onChange={(e) => setField("brandBgColor", e.target.value)}
              className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
            />
            <input id="fld-3-background-color-text"  aria-label="#fafaf9"
              type="text"
              value={brandBgColor}
              onChange={(e) => setField("brandBgColor", 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 htmlFor="fld-4-secondary-accent-color"  className="block text-sm font-medium text-zinc-300 mb-1">Secondary Accent</label>
          <div className="flex gap-2 items-center">
            <input id="fld-4-secondary-accent-color"  aria-label="Color"
              type="color"
              value={brandSecondaryColor}
              onChange={(e) => setField("brandSecondaryColor", e.target.value)}
              className="w-10 h-10 rounded-lg border border-zinc-600 cursor-pointer"
            />
            <input id="fld-4-secondary-accent-color-text"  aria-label="#f5f5f4"
              type="text"
              value={brandSecondaryColor}
              onChange={(e) => setField("brandSecondaryColor", 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>
  );
}

function TaxSettingsSection({
  collectSalesTax,
  nexusStates,
  setField,
}: {
  collectSalesTax: boolean;
  nexusStates: string[];
  setField: SetField;
}) {
  return (
    <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={(v) => setField("collectSalesTax", v)}
      />

      {collectSalesTax && (
        <div>
          <div className="block text-sm font-medium text-amber-200 mb-1">
            Nexus States
          </div>
          <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={(v) => setField("nexusStates", v)}
          />
        </div>
      )}
    </div>
  );
}

type FeatureToggles = {
  showWholesaleLink: boolean;
  showZipSearch: boolean;
  showSchedulePdf: boolean;
  showTextAlerts: boolean;
};

function FeatureTogglesSection({
  toggles,
  schedulePdfNotes,
  setField,
}: {
  toggles: FeatureToggles;
  schedulePdfNotes: string;
  setField: SetField;
}) {
  return (
    <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={toggles.showWholesaleLink}
          onChange={(v) => setField("showWholesaleLink", v)}
        />
        <FeatureToggle
          label="Zip Code Search"
          description="Show the ZIP code search box on the IRD homepage."
          checked={toggles.showZipSearch}
          onChange={(v) => setField("showZipSearch", v)}
        />
        <FeatureToggle
          label="Schedule PDF Download"
          description="Show the 'Download Schedule PDF' button on the stops section."
          checked={toggles.showSchedulePdf}
          onChange={(v) => setField("showSchedulePdf", v)}
        />
        <FeatureToggle
          label="Text Alerts Signup"
          description="Show a text alert signup section on the homepage."
          checked={toggles.showTextAlerts}
          onChange={(v) => setField("showTextAlerts", v)}
        />
      </div>

      <AdminInput label="Schedule PDF Footer Notes" helpText="Printed at the bottom of the generated schedule PDF.">
        <AdminTextarea
          value={schedulePdfNotes}
          onChange={(e) => setField("schedulePdfNotes", e.target.value)}
          rows={1}
          placeholder="All orders prepaid. No refunds on unpicked orders."
        />
      </AdminInput>
    </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<string>("");

  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"
             aria-label="Close">
              <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;
};

function LogoUploadField({
  label,
  hint,
  value,
  previewBg,
  brandId,
  onUpload,
  isDark = false,
  isOlatheSweetLight = false,
  isOlatheSweetDark = false,
}: LogoUploadFieldProps) {
  const [uploading, setUploading] = useState<boolean>(false);
  const [dragOver, setDragOver] = useState<boolean>(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 }}
      />

      <label
        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={handleDrop}
        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="sr-only"
          onChange={handleChange}
        />
      </label>

      {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>
  );
}
