"use client";

import Image from "next/image";
import { useEffect, useRef, useState, useTransition } from "react";
import {
  ImageIcon,
  Monitor,
  Moon,
  Palette,
  Sun,
  Trash2,
  Upload,
} from "lucide-react";
import {
  Button,
  Card,
  CardContent,
  Input,
  Label,
  RadioGroup,
  RadioGroupItem,
} from "poyraz-ui/atoms";
import { toast } from "poyraz-ui/molecules";
import { useTranslations } from "@/components/i18n/i18n-provider";
import { applyColorMode } from "@/components/theme/color-mode-sync";
import { isColorMode, type ColorMode } from "@/lib/color-mode";
import {
  removeAppearanceAssetAction,
  saveAppearanceSettingsAction,
  saveColorModeAction,
} from "./actions";

type BrandingAsset = "darkLogo" | "favicon" | "lightLogo";
type AssetState = Record<BrandingAsset, string>;

type AppearanceSettingsFormProps = {
  initial: {
    colorMode: ColorMode;
    primaryColor: string;
    urls: AssetState;
    custom: Record<BrandingAsset, boolean>;
  };
};

const themeOptions = [
  { value: "light", icon: Sun },
  { value: "dark", icon: Moon },
  { value: "system", icon: Monitor },
] as const;

export function AppearanceSettingsForm({ initial }: AppearanceSettingsFormProps) {
  const t = useTranslations();
  const [colorMode, setColorMode] = useState(initial.colorMode);
  const [savingTheme, startThemeTransition] = useTransition();
  const [savingBrand, startBrandTransition] = useTransition();
  const [primaryColor, setPrimaryColor] = useState(initial.primaryColor);
  const [pendingUrls, setPendingUrls] = useState<AssetState>({
    lightLogo: "",
    darkLogo: "",
    favicon: "",
  });
  const objectUrls = useRef<Partial<AssetState>>({});

  useEffect(() => {
    const urls = objectUrls.current;
    return () => Object.values(urls).forEach((url) => url && URL.revokeObjectURL(url));
  }, []);

  function changeColorMode(value: string) {
    if (!isColorMode(value) || value === colorMode || savingTheme) return;
    const previous = colorMode;
    setColorMode(value);
    applyColorMode(value);
    startThemeTransition(async () => {
      const result = await saveColorModeAction(value);
      if (result.errorKey) {
        setColorMode(previous);
        applyColorMode(previous);
        toast.error(t(result.errorKey));
        return;
      }
      toast.success(t("settings.appearance.messages.themeSaved"));
    });
  }

  function selectAsset(asset: BrandingAsset, file?: File) {
    const previous = objectUrls.current[asset];
    if (previous) URL.revokeObjectURL(previous);
    const url = file ? URL.createObjectURL(file) : "";
    objectUrls.current[asset] = url || undefined;
    setPendingUrls((current) => ({ ...current, [asset]: url }));
  }

  function saveBranding(formData: FormData) {
    startBrandTransition(async () => {
      const result = await saveAppearanceSettingsAction(formData);
      if (result.errorKey) {
        toast.error(t(result.errorKey));
        return;
      }
      toast.success(t("settings.appearance.messages.brandSaved"));
      window.location.reload();
    });
  }

  function removeAsset(asset: BrandingAsset) {
    startBrandTransition(async () => {
      const result = await removeAppearanceAssetAction(asset);
      if (result.errorKey) {
        toast.error(t(result.errorKey));
        return;
      }
      toast.success(t("settings.appearance.messages.assetRemoved"));
      window.location.reload();
    });
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="space-y-6 p-6 sm:p-8">
          <div className="space-y-1.5">
            <h2 className="text-xl font-semibold text-foreground">
              {t("settings.appearance.theme.title")}
            </h2>
            <p className="max-w-2xl text-sm text-muted-foreground">
              {t("settings.appearance.theme.description")}
            </p>
          </div>
          <RadioGroup
            value={colorMode}
            onValueChange={changeColorMode}
            disabled={savingTheme}
            aria-label={t("settings.appearance.theme.ariaLabel")}
            className="grid gap-3 sm:grid-cols-3"
          >
            {themeOptions.map((option) => {
              const Icon = option.icon;
              const selected = colorMode === option.value;
              return (
                <Label
                  key={option.value}
                  htmlFor={`color-mode-${option.value}`}
                  className={`flex min-h-36 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 ${
                    selected
                      ? "border-primary bg-primary/5 ring-1 ring-primary"
                      : "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    <span className="flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
                      <Icon className="h-5 w-5" aria-hidden="true" />
                    </span>
                    <RadioGroupItem
                      id={`color-mode-${option.value}`}
                      value={option.value}
                      aria-label={t(`settings.appearance.theme.${option.value}.label`)}
                    />
                  </div>
                  <span className="space-y-1">
                    <span className="block text-sm font-semibold text-foreground">
                      {t(`settings.appearance.theme.${option.value}.label`)}
                    </span>
                    <span className="block text-xs font-normal text-muted-foreground">
                      {t(`settings.appearance.theme.${option.value}.description`)}
                    </span>
                  </span>
                </Label>
              );
            })}
          </RadioGroup>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="space-y-8 p-6 sm:p-8">
          <div className="space-y-1.5">
            <h2 className="text-xl font-semibold text-foreground">
              {t("settings.appearance.brand.title")}
            </h2>
            <p className="max-w-2xl text-sm text-muted-foreground">
              {t("settings.appearance.brand.description")}
            </p>
          </div>

          <form action={saveBranding} className="space-y-8">
            <section className="space-y-4">
              <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
                <Palette className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                {t("settings.appearance.color.title")}
              </div>
              <div className="flex max-w-sm items-center gap-3">
                <Input
                  type="color"
                  value={primaryColor}
                  onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
                  aria-label={t("settings.appearance.color.picker")}
                  className="h-11 w-16 shrink-0 cursor-pointer p-1"
                />
                <Input
                  id="primaryColor"
                  name="primaryColor"
                  value={primaryColor}
                  onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
                  pattern="^#[0-9A-Fa-f]{6}$"
                  maxLength={7}
                  required
                  className="font-mono uppercase"
                />
              </div>
              <p className="text-xs text-muted-foreground">
                {t("settings.appearance.color.help")}
              </p>
            </section>

            <section className="grid gap-5 border-t border-border pt-7 lg:grid-cols-2">
              <AssetField
                asset="lightLogo"
                title={t("settings.appearance.assets.lightLogo")}
                accept="image/png,image/jpeg,image/webp,image/gif"
                currentUrl={initial.urls.lightLogo}
                pendingUrl={pendingUrls.lightLogo}
                custom={initial.custom.lightLogo}
                tone="light"
                disabled={savingBrand}
                onSelect={selectAsset}
                onRemove={removeAsset}
                removeLabel={t("settings.appearance.actions.remove")}
                previewAlt={t("settings.appearance.assets.previewAlt", {
                  asset: t("settings.appearance.assets.lightLogo"),
                })}
              />
              <AssetField
                asset="darkLogo"
                title={t("settings.appearance.assets.darkLogo")}
                accept="image/png,image/jpeg,image/webp,image/gif"
                currentUrl={initial.urls.darkLogo}
                pendingUrl={pendingUrls.darkLogo}
                custom={initial.custom.darkLogo}
                tone="dark"
                disabled={savingBrand}
                onSelect={selectAsset}
                onRemove={removeAsset}
                removeLabel={t("settings.appearance.actions.remove")}
                previewAlt={t("settings.appearance.assets.previewAlt", {
                  asset: t("settings.appearance.assets.darkLogo"),
                })}
              />
            </section>

            <section className="border-t border-border pt-7">
              <AssetField
                asset="favicon"
                title={t("settings.appearance.assets.favicon")}
                description={t("settings.appearance.assets.faviconHelp")}
                accept="image/png"
                currentUrl={initial.urls.favicon}
                pendingUrl={pendingUrls.favicon}
                custom={initial.custom.favicon}
                tone="neutral"
                disabled={savingBrand}
                onSelect={selectAsset}
                onRemove={removeAsset}
                removeLabel={t("settings.appearance.actions.remove")}
                previewAlt={t("settings.appearance.assets.previewAlt", {
                  asset: t("settings.appearance.assets.favicon"),
                })}
              />
            </section>

            <div className="flex justify-end border-t border-border pt-6">
              <Button
                type="submit"
                variant="default"
                effect="shine"
                loading={savingBrand}
                className="gap-2"
              >
                <Upload className="h-4 w-4" aria-hidden="true" />
                {t("settings.appearance.actions.save")}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

function AssetField({
  asset,
  title,
  description,
  accept,
  currentUrl,
  pendingUrl,
  custom,
  tone,
  disabled,
  onSelect,
  onRemove,
  removeLabel,
  previewAlt,
}: {
  asset: BrandingAsset;
  title: string;
  description?: string;
  accept: string;
  currentUrl: string;
  pendingUrl: string;
  custom: boolean;
  tone: "dark" | "light" | "neutral";
  disabled: boolean;
  onSelect: (asset: BrandingAsset, file?: File) => void;
  onRemove: (asset: BrandingAsset) => void;
  removeLabel: string;
  previewAlt: string;
}) {
  const previewUrl = pendingUrl || (custom ? currentUrl : "");
  const toneClass = tone === "dark"
    ? "bg-neutral-950"
    : tone === "light"
      ? "bg-white"
      : "bg-muted/40";

  return (
    <div className="grid gap-4 rounded-md border border-border p-4">
      <div className="space-y-3">
        <div className="space-y-1">
          <Label htmlFor={asset}>{title}</Label>
          {description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
        </div>
        <Input
          id={asset}
          name={asset}
          type="file"
          accept={accept}
          onChange={(event) => onSelect(asset, event.target.files?.[0])}
          className="cursor-pointer"
        />
        {custom ? (
          <Button
            type="button"
            variant="secondary"
            effect="shine"
            size="sm"
            disabled={disabled}
            onClick={() => onRemove(asset)}
            className="gap-2 text-destructive hover:text-destructive"
          >
            <Trash2 className="h-4 w-4" aria-hidden="true" />
            {removeLabel}
          </Button>
        ) : null}
      </div>
      <div className={`flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border p-4 ${toneClass}`}>
        {previewUrl ? (
          <Image
            src={previewUrl}
            alt={previewAlt}
            width={220}
            height={80}
            unoptimized
            className="max-h-20 w-auto max-w-full object-contain"
          />
        ) : (
          <ImageIcon
            className={`h-7 w-7 ${tone === "dark" ? "text-neutral-400" : "text-muted-foreground"}`}
            aria-hidden="true"
          />
        )}
      </div>
    </div>
  );
}