"use client";

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

import { MediaKind } from "@prisma/client";
import { FileText, ImageIcon, Search, Type } from "lucide-react";
import { useState } from "react";

import { MediaFieldPicker, type MediaFieldState } from "@/components/root/media-field-picker";
import { AppCard } from "@/components/ui/app-card";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  PAGE_TITLE_TOKEN,
  SITE_NAME_TOKEN,
  type SiteSettings,
  type SiteSettingsMediaBindings,
} from "@/lib/site-settings";
import type { AppLocale } from "@/lib/locale";
import type { MediaOption } from "@/lib/media";

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

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,
      isCleared: false,
    };
  }

  if (url) {
    return {
      mode: "external",
      assetId: "",
      url,
      label,
      kind: MediaKind.IMAGE,
      isCleared: false,
    };
  }

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

function getMediaPreviewUrl(
  value: MediaFieldState,
  options: MediaOption[],
  fallbackUrl: string | null | undefined,
) {
  if (value.isCleared) {
    return "";
  }

  if (value.mode === "external") {
    return value.url || fallbackUrl || "";
  }

  if (value.mode === "library") {
    return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
  }

  return fallbackUrl ?? "";
}

export function SiteSettingsForm({
  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 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,
  );

  return (
    <form id="site-settings-form" action={action} className="space-y-6">
      <div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(320px,1fr)]">
        <div className="space-y-6">
          <AppCard>
            <CardHeader>
              <CardTitle>SEO Basics</CardTitle>
              <CardDescription>
                Diese Einstellungen bilden die globale Basis fuer Seitentitel, Description und Vorschau in Suchmaschinen.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <p className="text-sm text-muted-foreground">
                Nutze
                {" "}
                <code>{PAGE_TITLE_TOKEN}</code>
                {" "}
                fuer den aktuellen Seitentitel.
                und
                {" "}
                <code>{SITE_NAME_TOKEN}</code>
                {" "}
                fuer den Namen der aktuellen Sprache.
              </p>
              <p className="text-sm text-muted-foreground">
                Beispiel:
                {" "}
                <code>{PAGE_TITLE_TOKEN} | {SITE_NAME_TOKEN}</code>
              </p>
            </CardContent>
          </AppCard>

          <AppCard>
            <CardHeader>
              <CardTitle>Localized Titles And Copy</CardTitle>
              <CardDescription>
                Diese Werte gelten als globale Standards pro Sprache und werden verwendet, wenn eine Seite keinen eigenen Fallback hat.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4 lg:grid-cols-3">
              {localeFields.map((locale) => (
                <div key={locale.key} className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
                  <div>
                    <p className="text-sm font-medium text-foreground">{locale.label}</p>
                    <p className="mt-1 text-xs text-muted-foreground">Globale Standardwerte fuer diese Sprache.</p>
                  </div>

                  <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-4 w-4 -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-9"
                      />
                    </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-4 w-4 -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-9"
                      />
                    </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-4 w-4 -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-9"
                      />
                    </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-4 w-4 -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-9"
                      />
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </AppCard>

          <AppCard>
            <CardHeader>
              <CardTitle>Brand And Preview Images</CardTitle>
              <CardDescription>
                Logo erscheint im Header. Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-6 xl:grid-cols-2">
              <MediaFieldPicker
                title="Site Logo Light"
                value={siteLogoLight}
                onChange={setSiteLogoLight}
                options={mediaOptions}
                hasInitialValue={Boolean(initialBindings.siteLogoLight?.assetId || initialBindings.siteLogoLight?.url)}
                inputName="siteLogoLightMedia"
                fileFieldName="siteLogoLightFile"
                fileLabel="Upload Light Logo"
                libraryLabel="Light Logo Library"
                accept="image/*,.svg"
                allowExternal={false}
                allowClear
                clearLabel="Remove Light Logo"
                emptyValue={{
                  mode: "upload",
                  assetId: "",
                  url: "",
                }}
              />

              <MediaFieldPicker
                title="Site Logo Dark"
                value={siteLogoDark}
                onChange={setSiteLogoDark}
                options={mediaOptions}
                hasInitialValue={Boolean(initialBindings.siteLogoDark?.assetId || initialBindings.siteLogoDark?.url)}
                inputName="siteLogoDarkMedia"
                fileFieldName="siteLogoDarkFile"
                fileLabel="Upload Dark Logo"
                libraryLabel="Dark Logo Library"
                accept="image/*,.svg"
                allowExternal={false}
                allowClear
                clearLabel="Remove Dark Logo"
                emptyValue={{
                  mode: "upload",
                  assetId: "",
                  url: "",
                }}
              />

              <MediaFieldPicker
                title="Favicon"
                value={favicon}
                onChange={setFavicon}
                options={mediaOptions}
                hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
                inputName="faviconMedia"
                fileFieldName="faviconFile"
                fileLabel="Upload Favicon"
                libraryLabel="Favicon Library"
                accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
                allowExternal={false}
                allowClear
                clearLabel="Remove Favicon"
                emptyValue={{
                  mode: "upload",
                  assetId: "",
                  url: "",
                }}
              />

              <MediaFieldPicker
                title="Default OG Image"
                value={defaultOgImage}
                onChange={setDefaultOgImage}
                options={mediaOptions}
                hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
                inputName="defaultOgImageMedia"
                fileFieldName="defaultOgImageFile"
                fileLabel="Upload OG Image"
                libraryLabel="OG Image Library"
                accept="image/*,.svg"
                allowExternal={false}
                allowClear
                clearLabel="Remove OG Image"
                emptyValue={{
                  mode: "upload",
                  assetId: "",
                  url: "",
                }}
              />
            </CardContent>
          </AppCard>
        </div>

        <div className="xl:sticky xl:top-6 xl:self-start">
          <AppCard>
            <CardHeader>
              <CardTitle>Preview</CardTitle>
              <CardDescription>Suchmaschine und Social Sharing Vorschau.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4 text-sm">
                {localeFields.map((locale) => {
                  const localeSettings = settings.locales[locale.key];
                  const previewTitle = localeSettings.titleTemplate.includes(PAGE_TITLE_TOKEN)
                    ? localeSettings.titleTemplate
                        .replace(PAGE_TITLE_TOKEN, locale.sampleTitle)
                        .replaceAll(SITE_NAME_TOKEN, localeSettings.siteName)
                    : `${locale.sampleTitle} | ${localeSettings.siteName}`;

                  return (
                    <div key={locale.key} className="rounded-md border bg-card p-3">
                      <p className="font-medium text-foreground">{locale.label}</p>
                      <p className="mt-2 text-xs text-muted-foreground">
                        Example page title: {locale.sampleTitle}
                      </p>
                      <p className="mt-2 text-sm text-foreground">{previewTitle}</p>
                      <p className="mt-1 text-sm text-muted-foreground">
                        {localeSettings.siteDescription || "No description"}
                      </p>
                      <p className="mt-2 text-xs text-muted-foreground">
                        {localeSettings.subhead || "No subhead"}
                      </p>
                    </div>
                  );
                })}
              </div>

              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                <ImageIcon className="h-4 w-4 text-brand-primary" />
                Header Logo Preview
              </div>
              <div className="grid gap-3">
                <div className="rounded-md border bg-card p-4">
                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
                    Light
                  </p>
                  {siteLogoLightPreviewUrl ? (
                    <img
                      src={siteLogoLightPreviewUrl}
                      alt="Site Logo Light"
                      className="h-10 w-auto max-w-full object-contain"
                    />
                  ) : (
                    <div className="flex h-10 items-center text-sm text-muted-foreground">
                      Default light logo will be used
                    </div>
                  )}
                </div>
                <div className="rounded-md border border-border/70 bg-slate-950 p-4">
                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
                    Dark
                  </p>
                  {siteLogoDarkPreviewUrl ? (
                    <img
                      src={siteLogoDarkPreviewUrl}
                      alt="Site Logo Dark"
                      className="h-10 w-auto max-w-full object-contain"
                    />
                  ) : (
                    <div className="flex h-10 items-center text-sm text-white/60">
                      Default dark logo will be used
                    </div>
                  )}
                </div>
              </div>

              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                <Search className="h-4 w-4 text-brand-primary" />
                Search Preview
              </div>
              <div className="rounded-md border bg-card p-4">
                <div className="flex items-center gap-3">
                  {faviconPreviewUrl ? (
                    <img src={faviconPreviewUrl} alt="Favicon" className="h-5 w-5 rounded-sm" />
                  ) : (
                    <div className="flex h-5 w-5 items-center justify-center rounded-sm border bg-muted/40">
                      <Type className="h-3.5 w-3.5 text-muted-foreground" />
                    </div>
                  )}
                  <p className="text-sm font-medium text-brand-primary">
                    {settings.locales.de.titleTemplate.includes(PAGE_TITLE_TOKEN)
                      ? settings.locales.de.titleTemplate
                          .replace(PAGE_TITLE_TOKEN, "About")
                          .replaceAll(SITE_NAME_TOKEN, settings.locales.de.siteName)
                      : `About | ${settings.locales.de.siteName}`}
                  </p>
                </div>
                <p className="mt-2 text-xs text-muted-foreground">
                  {settings.locales.de.siteDescription || "No description"}
                </p>
                <p className="mt-2 text-xs text-muted-foreground/80">
                  {settings.locales.de.subhead || "No subhead"}
                </p>
              </div>

              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                <ImageIcon className="h-4 w-4 text-brand-secondary" />
                Social Preview
              </div>
              <div className="overflow-hidden rounded-md border bg-card">
                {defaultOgImagePreviewUrl ? (
                  <img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
                ) : (
                  <div className="flex h-32 items-center justify-center bg-muted/40 text-sm text-muted-foreground">
                    No OG image selected
                  </div>
                )}
                <div className="space-y-2 p-4">
                  <p className="text-sm font-medium text-foreground">
                    {settings.locales.en.titleTemplate.includes(PAGE_TITLE_TOKEN)
                      ? settings.locales.en.titleTemplate
                          .replace(PAGE_TITLE_TOKEN, "Portfolio")
                          .replaceAll(SITE_NAME_TOKEN, settings.locales.en.siteName)
                      : `Portfolio | ${settings.locales.en.siteName}`}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {settings.locales.en.siteDescription || "No description"}
                  </p>
                </div>
              </div>
            </CardContent>
          </AppCard>
        </div>
      </div>
    </form>
  );
}