"use client";

/* eslint-disable @next/next/no-img-element */

import { MediaKind } from "@/lib/db/enums";
import {
  Check,
  FileText,
  Globe2,
  ImageIcon,
  Languages,
  Palette,
  Search,
  Type,
  Upload,
} from "lucide-react";
import { useEffect, useId, useMemo, useRef, useState } from "react";

import { StatsCard } from "@/components/dashboard/stats-card";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import type { AppLocale } from "@/lib/locale";
import type { MediaOption } from "@/lib/media";
import { buildSiteThemeTokens } from "@/lib/site-theme";
import {
  PAGE_TITLE_TOKEN,
  SITE_NAME_TOKEN,
  type SiteSettings,
  type SiteSettingsMediaBindings,
} from "@/lib/site-settings";
import { cn } from "@/lib/utils";

type SiteSettingsFormProps = {
  mode: "brand" | "localization";
  action: (formData: FormData) => Promise<void>;
  initialSettings: SiteSettings;
  initialBindings: SiteSettingsMediaBindings;
  mediaOptions: MediaOption[];
};

type MediaFieldState = {
  mode: "upload" | "library";
  assetId: string;
  url: string;
  label: string;
  kind: MediaKind;
};

const localeFields: Array<{
  key: AppLocale;
  label: string;
  suffix: "Ar" | "En" | "De";
  sampleTitle: string;
}> = [
  { key: "ar", label: "Arabic", suffix: "Ar", sampleTitle: "Home" },
  { key: "en", label: "English", suffix: "En", sampleTitle: "About" },
  { key: "de", label: "Deutsch", suffix: "De", sampleTitle: "Portfolio" },
];

function createImageFieldState(
  assetId: string | null | undefined,
  url: string | null | undefined,
  label: string,
): MediaFieldState {
  if (assetId) {
    return {
      mode: "library",
      assetId,
      url: "",
      label,
      kind: MediaKind.IMAGE,
    };
  }

  return {
    mode: "upload",
    assetId: "",
    url: url ?? "",
    label,
    kind: MediaKind.IMAGE,
  };
}

function getMediaPreviewUrl(
  value: MediaFieldState,
  options: MediaOption[],
  fallbackUrl: string | null | undefined,
) {
  if (value.mode === "library") {
    return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
  }

  return fallbackUrl ?? "";
}

function buildPreviewTitle(titleTemplate: string, sampleTitle: string, siteName: string) {
  return titleTemplate.includes(PAGE_TITLE_TOKEN)
    ? titleTemplate.replace(PAGE_TITLE_TOKEN, sampleTitle).replaceAll(SITE_NAME_TOKEN, siteName)
    : `${sampleTitle} | ${siteName}`;
}

function BadgeLike({ children }: { children: string }) {
  return (
    <span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
      {children}
    </span>
  );
}

function MediaLibraryModal({
  open,
  onOpenChange,
  options,
  selectedAssetId,
  onSelect,
  title,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  options: MediaOption[];
  selectedAssetId: string;
  onSelect: (option: MediaOption) => void;
  title: string;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const visibleOptions = useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase();

    if (!normalizedQuery) {
      return options;
    }

    return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
  }, [options, query]);

  useEffect(() => {
    if (!open) {
      setQuery("");
    }
  }, [open]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-4xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>Bild aus der Media Library auswaehlen.</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="relative">
            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              id={searchId}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              className="pl-9"
              placeholder="Search media"
            />
          </div>

          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {visibleOptions.length > 0 ? (
              visibleOptions.map((option) => {
                const isActive = option.id === selectedAssetId;

                return (
                  <button
                    key={option.id}
                    type="button"
                    onClick={() => {
                      onSelect(option);
                      onOpenChange(false);
                    }}
                    className={cn(
                      "overflow-hidden rounded-nested border text-left transition-colors",
                      isActive
                        ? "border-input bg-accent/30"
                        : "border-border/70 bg-background hover:bg-accent/10",
                    )}
                  >
                    <div className="aspect-[4/3] bg-muted/30">
                      {option.url ? (
                        <img src={option.url} alt={option.label} className="h-full w-full object-cover" />
                      ) : null}
                    </div>
                    <div className="flex items-center gap-3 p-3">
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-medium text-foreground">{option.label}</p>
                        <p className="truncate text-xs text-muted-foreground">{option.source}</p>
                      </div>
                      {isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
                    </div>
                  </button>
                );
              })
            ) : (
              <div className="col-span-full rounded-nested border border-dashed border-input px-4 py-8 text-sm text-muted-foreground">
                No media found.
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

function SiteSettingsMediaRow({
  title,
  value,
  onChange,
  options,
  inputName,
  fileFieldName,
  accept,
  clearLabel,
  fallbackUrl,
}: {
  title: string;
  value: MediaFieldState;
  onChange: (nextValue: MediaFieldState) => void;
  options: MediaOption[];
  inputName: string;
  fileFieldName: string;
  accept: string;
  clearLabel: string;
  fallbackUrl?: string | null;
}) {
  const [isLibraryOpen, setIsLibraryOpen] = useState(false);
  const hiddenInputRef = useRef<HTMLInputElement | null>(null);
  const fileInputId = useId();
  const previewUrl = getMediaPreviewUrl(value, options, fallbackUrl);
  const serializedValue = JSON.stringify({
    mode: value.mode,
    assetId: value.assetId,
    url: value.url,
    label: value.label,
    kind: value.kind,
  });

  useEffect(() => {
    const hiddenInput = hiddenInputRef.current;

    if (!hiddenInput) {
      return;
    }

    hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
  }, [serializedValue]);

  return (
    <>
      <AppCard level={2} layer="single" padding="sm">
        <div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
          <div className="space-y-2">
            <p className="text-sm font-semibold text-foreground">{title}</p>
            <div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-nested border border-border/70 bg-muted/30">
              {previewUrl ? (
                <img src={previewUrl} alt={title} className="h-full w-full object-contain p-2" />
              ) : (
                <ImageIcon className="h-5 w-5 text-muted-foreground" />
              )}
            </div>
          </div>

          <div className="space-y-3">
            <input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />

            <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto]">
              <div className="relative">
                <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                  value={value.label}
                  onChange={(event) => onChange({ ...value, label: event.target.value })}
                  placeholder="Label"
                  className="pl-8"
                />
              </div>

              <label
                htmlFor={fileInputId}
                className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-nested border border-input bg-background px-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
              >
                <Upload className="h-4 w-4" />
                Upload
              </label>

              <Button type="button" variant="outline" onClick={() => setIsLibraryOpen(true)}>
                <ImageIcon className="h-4 w-4" />
                Library
              </Button>
            </div>

            <input
              id={fileInputId}
              name={fileFieldName}
              type="file"
              accept={accept}
              className="hidden"
              onChange={(event) => {
                const nextLabel = event.target.files?.[0]?.name.replace(/\.[^.]+$/, "") ?? value.label;

                onChange({
                  ...value,
                  mode: "upload",
                  assetId: "",
                  label: value.label.trim() ? value.label : nextLabel,
                });
              }}
            />

            <div className="flex flex-wrap items-center gap-2">
              <BadgeLike>{value.mode === "library" && value.assetId ? "Library selected" : "Upload mode"}</BadgeLike>
              {value.assetId ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-8 px-2 text-destructive hover:bg-destructive/5 hover:text-destructive"
                  onClick={() =>
                    onChange({
                      ...value,
                      mode: "upload",
                      assetId: "",
                      url: "",
                    })
                  }
                >
                  {clearLabel}
                </Button>
              ) : null}
            </div>
          </div>
        </div>
      </AppCard>

      <MediaLibraryModal
        open={isLibraryOpen}
        onOpenChange={setIsLibraryOpen}
        options={options.filter((option) => option.kind === MediaKind.IMAGE)}
        selectedAssetId={value.assetId}
        title={title}
        onSelect={(option) =>
          onChange({
            ...value,
            mode: "library",
            assetId: option.id,
            url: "",
            label: option.label,
          })
        }
      />
    </>
  );
}

function LocalizedFieldsSection({
  settings,
  setSettings,
}: {
  settings: SiteSettings;
  setSettings: React.Dispatch<React.SetStateAction<SiteSettings>>;
}) {
  return (
    <section className="space-y-5">
      <div className="space-y-2">
        <h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
        <p className="text-sm text-muted-foreground">
          Nutze <code>{PAGE_TITLE_TOKEN}</code> und <code>{SITE_NAME_TOKEN}</code> fuer die globalen
          Titelvorlagen pro Sprache.
        </p>
      </div>

      <div className="grid gap-5 lg:grid-cols-3">
        {localeFields.map((locale) => (
          <AppCard key={locale.key} level={2} layer="single" padding="sm" className="space-y-4">
            <p className="text-sm font-semibold text-foreground">{locale.label}</p>

            <div className="space-y-2">
              <Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
              <div className="relative">
                <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id={`siteName${locale.suffix}`}
                  name={`siteName${locale.suffix}`}
                  value={settings.locales[locale.key].siteName}
                  onChange={(event) =>
                    setSettings((current) => ({
                      ...current,
                      locales: {
                        ...current.locales,
                        [locale.key]: {
                          ...current.locales[locale.key],
                          siteName: event.target.value,
                        },
                      },
                    }))
                  }
                  placeholder="Site Name"
                  className="pl-8"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
              <div className="relative">
                <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id={`titleTemplate${locale.suffix}`}
                  name={`titleTemplate${locale.suffix}`}
                  value={settings.locales[locale.key].titleTemplate}
                  onChange={(event) =>
                    setSettings((current) => ({
                      ...current,
                      locales: {
                        ...current.locales,
                        [locale.key]: {
                          ...current.locales[locale.key],
                          titleTemplate: event.target.value,
                        },
                      },
                    }))
                  }
                  placeholder="Title Template"
                  className="pl-8"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
              <div className="relative">
                <FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id={`siteDescription${locale.suffix}`}
                  name={`siteDescription${locale.suffix}`}
                  value={settings.locales[locale.key].siteDescription}
                  onChange={(event) =>
                    setSettings((current) => ({
                      ...current,
                      locales: {
                        ...current.locales,
                        [locale.key]: {
                          ...current.locales[locale.key],
                          siteDescription: event.target.value,
                        },
                      },
                    }))
                  }
                  placeholder="Site Description"
                  className="pl-8"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
              <div className="relative">
                <Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id={`subhead${locale.suffix}`}
                  name={`subhead${locale.suffix}`}
                  value={settings.locales[locale.key].subhead}
                  onChange={(event) =>
                    setSettings((current) => ({
                      ...current,
                      locales: {
                        ...current.locales,
                        [locale.key]: {
                          ...current.locales[locale.key],
                          subhead: event.target.value,
                        },
                      },
                    }))
                  }
                  placeholder="Subhead"
                  className="pl-8"
                />
              </div>
            </div>
          </AppCard>
        ))}
      </div>
    </section>
  );
}

export function SiteSettingsForm({
  mode,
  action,
  initialSettings,
  initialBindings,
  mediaOptions,
}: SiteSettingsFormProps) {
  const [settings, setSettings] = useState(initialSettings);
  const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
    createImageFieldState(initialBindings.siteLogoLight?.assetId, initialBindings.siteLogoLight?.url, "Site Logo Light"),
  );
  const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
    createImageFieldState(initialBindings.siteLogoDark?.assetId, initialBindings.siteLogoDark?.url, "Site Logo Dark"),
  );
  const [favicon, setFavicon] = useState<MediaFieldState>(
    createImageFieldState(initialBindings.favicon?.assetId, initialBindings.favicon?.url, "Favicon"),
  );
  const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
    createImageFieldState(initialBindings.defaultOgImage?.assetId, initialBindings.defaultOgImage?.url, "Default OG Image"),
  );

  const themeTokens = useMemo(() => buildSiteThemeTokens(settings.brand.primaryColor), [settings.brand.primaryColor]);
  const siteLogoLightPreviewUrl = getMediaPreviewUrl(siteLogoLight, mediaOptions, initialBindings.siteLogoLight?.url);
  const siteLogoDarkPreviewUrl = getMediaPreviewUrl(siteLogoDark, mediaOptions, initialBindings.siteLogoDark?.url);
  const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
  const defaultOgImagePreviewUrl = getMediaPreviewUrl(defaultOgImage, mediaOptions, initialBindings.defaultOgImage?.url);
  const routePreview = settings.defaultLocale === "de" ? "/about" : `/${settings.defaultLocale}/about`;
  const brandAssetsCount = [siteLogoLight, siteLogoDark].filter((item) => item.assetId).length;
  const previewAssetsCount = [favicon, defaultOgImage].filter((item) => item.assetId).length;

  return (
    <form id="site-settings-form" action={action} className="space-y-6">
      {mode === "brand" ? (
        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
          <StatsCard title="Primary" value={settings.brand.primaryColor} icon={Palette} />
          <StatsCard title="Logos" value={String(brandAssetsCount)} icon={ImageIcon} />
          <StatsCard title="Preview" value={String(previewAssetsCount)} icon={Globe2} />
        </div>
      ) : null}

      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,1fr)]">
        <div className="space-y-6">
          {mode === "brand" ? (
            <>
              <section className="space-y-5">
                <div className="space-y-2">
                  <h2 className="text-lg font-semibold text-foreground">Brand Foundation</h2>
                  <p className="text-sm text-muted-foreground">
                    Steuert die Primaerfarbe der Oberflaeche sowie die wichtigsten Brand Assets.
                  </p>
                </div>

                <AppCard level={2} layer="single" padding="sm" className="space-y-4">
                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
                    <div className="space-y-2">
                      <Label htmlFor="primaryColor" className="sr-only">Primary Color</Label>
                      <div className="flex items-center gap-3">
                        <Input
                          id="primaryColor"
                          name="primaryColor"
                          type="color"
                          value={settings.brand.primaryColor}
                          onChange={(event) =>
                            setSettings((current) => ({
                              ...current,
                              brand: {
                                ...current.brand,
                                primaryColor: event.target.value,
                              },
                            }))
                          }
                          className="h-11 w-20 rounded-nested p-1"
                        />
                        <Input
                          aria-label="Primary Color Value"
                          value={settings.brand.primaryColor}
                          onChange={(event) =>
                            setSettings((current) => ({
                              ...current,
                              brand: {
                                ...current.brand,
                                primaryColor: event.target.value,
                              },
                            }))
                          }
                          placeholder="#dc5a35"
                          className="font-mono"
                        />
                      </div>
                    </div>

                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                      <div
                        className="rounded-nested border border-border/70 p-3 text-white"
                        style={{ backgroundColor: `hsl(${themeTokens.light.primary})` }}
                      >
                        <p className="text-xs uppercase tracking-[0.14em] text-white/72">Light token</p>
                        <p className="mt-2 text-sm font-semibold">brand-primary</p>
                      </div>
                      <div
                        className="rounded-nested border border-border/70 p-3 text-white"
                        style={{ backgroundColor: `hsl(${themeTokens.dark.primary})` }}
                      >
                        <p className="text-xs uppercase tracking-[0.14em] text-white/72">Dark token</p>
                        <p className="mt-2 text-sm font-semibold">brand-primary</p>
                      </div>
                    </div>
                  </div>
                </AppCard>
              </section>

              <section className="space-y-4">
                <h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>

                <SiteSettingsMediaRow
                  title="Site Logo Light"
                  value={siteLogoLight}
                  onChange={setSiteLogoLight}
                  options={mediaOptions}
                  inputName="siteLogoLightMedia"
                  fileFieldName="siteLogoLightFile"
                  accept="image/*,.svg"
                  clearLabel="Remove"
                  fallbackUrl={initialBindings.siteLogoLight?.url}
                />

                <SiteSettingsMediaRow
                  title="Site Logo Dark"
                  value={siteLogoDark}
                  onChange={setSiteLogoDark}
                  options={mediaOptions}
                  inputName="siteLogoDarkMedia"
                  fileFieldName="siteLogoDarkFile"
                  accept="image/*,.svg"
                  clearLabel="Remove"
                  fallbackUrl={initialBindings.siteLogoDark?.url}
                />

                <SiteSettingsMediaRow
                  title="Favicon"
                  value={favicon}
                  onChange={setFavicon}
                  options={mediaOptions}
                  inputName="faviconMedia"
                  fileFieldName="faviconFile"
                  accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
                  clearLabel="Remove"
                  fallbackUrl={initialBindings.favicon?.url}
                />

                <SiteSettingsMediaRow
                  title="Default OG Image"
                  value={defaultOgImage}
                  onChange={setDefaultOgImage}
                  options={mediaOptions}
                  inputName="defaultOgImageMedia"
                  fileFieldName="defaultOgImageFile"
                  accept="image/*,.svg"
                  clearLabel="Remove"
                  fallbackUrl={initialBindings.defaultOgImage?.url}
                />
              </section>
            </>
          ) : (
            <>
              <section className="space-y-5">
                <div className="space-y-2">
                  <h2 className="text-lg font-semibold text-foreground">Visitor Language Routing</h2>
                  <p className="text-sm text-muted-foreground">
                    Waehlt die Standardsprache fuer Besucher ohne Sprach-Prefix. Das ist die neue globale Spracheinstellung.
                  </p>
                </div>

                <AppCard level={2} layer="single" padding="sm" className="space-y-4">
                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
                    <div className="space-y-2">
                      <Label htmlFor="defaultLocaleTrigger" className="sr-only">Default Locale</Label>
                      <Select
                        name="defaultLocale"
                        value={settings.defaultLocale}
                        onValueChange={(value) =>
                          setSettings((current) => ({
                            ...current,
                            defaultLocale: value as AppLocale,
                          }))
                        }
                      >
                        <SelectTrigger id="defaultLocaleTrigger">
                          <SelectValue placeholder="Select locale" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="de">Deutsch</SelectItem>
                          <SelectItem value="en">English</SelectItem>
                          <SelectItem value="ar">Arabic</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="rounded-nested border border-border/70 bg-muted/20 p-4">
                      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                        <Globe2 className="h-4 w-4 text-brand-primary" />
                        Route preview
                      </div>
                      <p className="mt-3 text-sm text-muted-foreground">
                        <code>/about</code> will open <code>{routePreview}</code>.
                      </p>
                      <p className="mt-2 text-xs text-muted-foreground">
                        Existing localized URLs stay available. Only prefix-free entry routes change.
                      </p>
                    </div>
                  </div>
                </AppCard>
              </section>

              <LocalizedFieldsSection settings={settings} setSettings={setSettings} />
            </>
          )}
        </div>

        <div className="xl:sticky xl:top-6 xl:self-start">
          <section className="space-y-4">
            {mode === "brand" ? (
              <>
                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Search Result</p>
                  <div className="rounded-nested border border-border/70 bg-background p-3">
                    <div className="flex items-center gap-3">
                      {faviconPreviewUrl ? (
                        <img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
                      ) : (
                        <div className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
                          <Palette className="h-3 w-3 text-muted-foreground" />
                        </div>
                      )}
                      <p className="text-sm font-medium" style={{ color: settings.brand.primaryColor }}>
                        {buildPreviewTitle(settings.locales.de.titleTemplate, "About", settings.locales.de.siteName)}
                      </p>
                    </div>
                    <p className="mt-2 text-xs text-muted-foreground">
                      {settings.locales.de.siteDescription || "No description"}
                    </p>
                  </div>
                </AppCard>

                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Brand Assets</p>
                  <div className="grid gap-3 sm:grid-cols-2">
                    <AppCard level={1} layer="single" padding="sm">
                      <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
                      {siteLogoLightPreviewUrl ? (
                        <img src={siteLogoLightPreviewUrl} alt="Site Logo Light" className="h-10 w-full object-contain" />
                      ) : (
                        <div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
                      )}
                    </AppCard>

                    <div className="rounded-nested border border-border/70 bg-slate-950 p-3">
                      <p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
                      {siteLogoDarkPreviewUrl ? (
                        <img src={siteLogoDarkPreviewUrl} alt="Site Logo Dark" className="h-10 w-full object-contain" />
                      ) : (
                        <div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
                      )}
                    </div>
                  </div>
                </AppCard>

                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Social Preview</p>
                  <div className="overflow-hidden rounded-nested border border-border/70 bg-background">
                    <div className="h-1.5" style={{ backgroundColor: settings.brand.primaryColor }} />
                    {defaultOgImagePreviewUrl ? (
                      <img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
                    ) : (
                      <div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
                        No OG image selected
                      </div>
                    )}
                    <div className="space-y-1.5 p-3">
                      <p className="text-sm font-medium text-foreground">
                        {buildPreviewTitle(settings.locales.en.titleTemplate, "Portfolio", settings.locales.en.siteName)}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {settings.locales.en.siteDescription || "No description"}
                      </p>
                    </div>
                  </div>
                </AppCard>
              </>
            ) : (
              <>
                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Visitor Routing</p>
                  <div className="rounded-nested border border-border/70 bg-background p-3">
                    <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                      <Languages className="h-4 w-4 text-brand-primary" />
                      Default locale: {settings.defaultLocale.toUpperCase()}
                    </div>
                    <p className="mt-3 text-sm text-muted-foreground">
                      Prefix-free URLs resolve to <code>{routePreview}</code>.
                    </p>
                  </div>
                </AppCard>

                <AppCard level={2} layer="single" padding="sm" className="space-y-2">
                  <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">Locale Summary</p>
                  <div className="rounded-nested border border-border/70 bg-background">
                    <Table>
                      <TableBody>
                        {localeFields.map((locale) => (
                          <TableRow key={locale.key}>
                            <TableCell className="w-24 font-medium">{locale.label}</TableCell>
                            <TableCell>
                              <p className="text-sm font-medium text-foreground">
                                {buildPreviewTitle(
                                  settings.locales[locale.key].titleTemplate,
                                  locale.sampleTitle,
                                  settings.locales[locale.key].siteName,
                                )}
                              </p>
                              <p className="mt-1 text-xs text-muted-foreground">
                                {settings.locales[locale.key].subhead || "No subhead"}
                              </p>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </AppCard>
              </>
            )}
          </section>
        </div>
      </div>

      <div className="flex justify-end">
        <Button type="submit">{mode === "brand" ? "Save Brand Settings" : "Save Localization Settings"}</Button>
      </div>
    </form>
  );
}
