"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { useTheme } from "next-themes";
import { Settings, Sun, Moon, Monitor } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useSyncExternalStore } from "react";

const emptySubscribe = () => () => {};

function useMounted() {
  return useSyncExternalStore(
    emptySubscribe,
    () => true,
    () => false,
  );
}

type LightPalette = "aged-parchment" | "tulasi-garden" | "yamuna-mist";
type DarkPalette = "ancient-manuscript" | "nilamani" | "vraja-twilight";

type ReadingPrefs = {
  serifFont: boolean;
  fontSize: string;
  justified: boolean;
  lightPalette: LightPalette;
  darkPalette: DarkPalette;
};

const DEFAULT_PREFS: ReadingPrefs = {
  serifFont: false,
  fontSize: "base",
  justified: false,
  lightPalette: "aged-parchment",
  darkPalette: "ancient-manuscript",
};

// Preview swatches use approximations of each palette's background
// and primary colours — the real colours come from the CSS variables.
const LIGHT_PALETTES: {
  id: LightPalette;
  name: string;
  bg: string;
  primary: string;
}[] = [
  // Warm cream + saffron — the original
  {
    id: "aged-parchment",
    name: "Aged Parchment",
    bg: "#f5ecd7",
    primary: "#b88940",
  },
  // Sage green background + deep emerald — distinctly GREEN
  {
    id: "tulasi-garden",
    name: "Tulasī Garden",
    bg: "#c4dcc1",
    primary: "#207537",
  },
  // Soft blue background + cerulean — distinctly BLUE
  {
    id: "yamuna-mist",
    name: "Yamunā Mist",
    bg: "#c2d7ec",
    primary: "#1f6fd6",
  },
];

const DARK_PALETTES: {
  id: DarkPalette;
  name: string;
  bg: string;
  primary: string;
}[] = [
  // Warm brown + saffron — the original
  {
    id: "ancient-manuscript",
    name: "Ancient Manuscript",
    bg: "#2a2519",
    primary: "#d0a04e",
  },
  // Deep navy + sky-blue — distinctly BLUE
  {
    id: "nilamani",
    name: "Nīlamaṇi",
    bg: "#101a36",
    primary: "#4a9fff",
  },
  // Deep wine + rose-red — distinctly RED/WARM
  {
    id: "vraja-twilight",
    name: "Vraja Twilight",
    bg: "#2b1217",
    primary: "#e07252",
  },
];

const LIGHT_PALETTE_IDS = LIGHT_PALETTES.map((p) => p.id);
const DARK_PALETTE_IDS = DARK_PALETTES.map((p) => p.id);

const FONT_SIZES = [
  { value: "xs", label: "XS" },
  { value: "sm", label: "S" },
  { value: "base", label: "M" },
  { value: "lg", label: "L" },
  { value: "xl", label: "XL" },
  { value: "2xl", label: "XXL" },
] as const;

const STORAGE_KEY = "spsays_reading_prefs";

function loadPrefs(): ReadingPrefs {
  if (typeof window === "undefined") return DEFAULT_PREFS;
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return DEFAULT_PREFS;
    const parsed = JSON.parse(raw);
    return {
      serifFont:
        typeof parsed.serifFont === "boolean"
          ? parsed.serifFont
          : DEFAULT_PREFS.serifFont,
      fontSize: FONT_SIZES.some((f) => f.value === parsed.fontSize)
        ? parsed.fontSize
        : DEFAULT_PREFS.fontSize,
      justified:
        typeof parsed.justified === "boolean"
          ? parsed.justified
          : DEFAULT_PREFS.justified,
      lightPalette: LIGHT_PALETTE_IDS.includes(parsed.lightPalette)
        ? parsed.lightPalette
        : DEFAULT_PREFS.lightPalette,
      darkPalette: DARK_PALETTE_IDS.includes(parsed.darkPalette)
        ? parsed.darkPalette
        : DEFAULT_PREFS.darkPalette,
    };
  } catch {
    return DEFAULT_PREFS;
  }
}

function savePrefs(prefs: ReadingPrefs) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
  } catch {
    // localStorage might be unavailable
  }
}

function applyClasses(prefs: ReadingPrefs) {
  const root = document.documentElement;

  // Serif
  root.classList.toggle("reading-serif", prefs.serifFont);

  // Font size — remove all, add current
  for (const fs of FONT_SIZES) {
    root.classList.remove(`reading-fs-${fs.value}`);
  }
  root.classList.add(`reading-fs-${prefs.fontSize}`);

  // Justified
  root.classList.toggle("reading-justified", prefs.justified);

  // Palettes — always set both attributes so the appropriate one takes
  // effect when the user toggles light ↔ dark.
  root.setAttribute("data-light-palette", prefs.lightPalette);
  root.setAttribute("data-dark-palette", prefs.darkPalette);
}

function Toggle({
  checked,
  onChange,
  label,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  label: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className="flex items-center justify-between w-full py-2 cursor-pointer"
    >
      <span className="text-sm text-foreground">{label}</span>
      <div
        className={cn(
          "w-10 h-5 rounded-full transition-colors relative shrink-0 ml-3",
          checked ? "bg-primary" : "bg-muted-foreground/30",
        )}
      >
        <div
          className={cn(
            "absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm",
            checked ? "translate-x-5" : "translate-x-0.5",
          )}
        />
      </div>
    </button>
  );
}

/** Optional render-prop trigger — lets sidebar/bottom-nav variants compose
 *  their own row layout while reusing ReadingSettings' state + popover. */
type TriggerRenderer = (state: {
  open: boolean;
  toggle: () => void;
  buttonRef: React.RefObject<HTMLButtonElement | null>;
}) => React.ReactNode;

/** Where the panel renders relative to its trigger.
 *
 *   - "below-right" (default) — header-style: panel hangs below the
 *     trigger, right-aligned. Works when the trigger sits near the top.
 *   - "above-left" — sidebar-style: panel rises above the trigger and
 *     extends to the right so a bottom-of-sidebar button doesn't push
 *     the popover off the bottom of the viewport. */
type Placement = "below-right" | "above-left";

export function ReadingSettings({
  renderTrigger,
  placement = "below-right",
  onOpenChange,
}: {
  renderTrigger?: TriggerRenderer;
  placement?: Placement;
  /** Fires every time the popover opens or closes. Used by the sidebar
   *  to keep the rail expanded for as long as the popover is visible. */
  onOpenChange?: (open: boolean) => void;
} = {}) {
  const [open, setOpen] = useState(false);
  const [prefs, setPrefs] = useState<ReadingPrefs>(() => loadPrefs());
  const panelRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const { theme, setTheme, resolvedTheme } = useTheme();
  const mounted = useMounted();
  // When the panel sits next to a sidebar, we render it through a portal
  // with viewport-fixed coordinates so it (a) escapes the sidebar's
  // bounds, (b) doesn't shift when the sidebar collapses on mouseleave,
  // and (c) stays a comfortable gap to the right of the rail.
  const [portalPos, setPortalPos] = useState<{
    left: number;
    bottom: number;
  } | null>(null);

  useEffect(() => {
    if (!open || placement !== "above-left") {
      setPortalPos(null);
      return;
    }
    function recompute() {
      const btn = buttonRef.current;
      if (!btn) return;
      const rect = btn.getBoundingClientRect();
      // Anchor by `bottom` (distance from viewport bottom) so the panel
      // grows upward from the trigger. `left` clears the rail by 16px.
      const left = rect.right + 16;
      const bottom = Math.max(8, window.innerHeight - rect.bottom);
      setPortalPos({ left, bottom });
    }
    recompute();
    // The sidebar width transitions when the rail expands — observe the
    // trigger so the popover slides along with it instead of staying at
    // the collapsed-rail x-coordinate.
    const btn = buttonRef.current;
    let observer: ResizeObserver | null = null;
    if (btn && typeof ResizeObserver !== "undefined") {
      observer = new ResizeObserver(() => recompute());
      observer.observe(btn);
    }
    window.addEventListener("resize", recompute);
    return () => {
      observer?.disconnect();
      window.removeEventListener("resize", recompute);
    };
  }, [open, placement]);

  // Notify caller whenever the popover open state changes. We can't fire
  // this synchronously inside setOpen because some consumers (e.g. the
  // sidebar) feed it back into their own state — using useEffect breaks
  // the render cycle cleanly.
  useEffect(() => {
    onOpenChange?.(open);
  }, [open, onOpenChange]);

  // Apply classes on mount (prefs already loaded via lazy initializer)
  useEffect(() => {
    applyClasses(prefs);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Click outside to close
  useEffect(() => {
    if (!open) return;

    function handleClickOutside(e: MouseEvent) {
      if (
        panelRef.current &&
        !panelRef.current.contains(e.target as Node) &&
        buttonRef.current &&
        !buttonRef.current.contains(e.target as Node)
      ) {
        setOpen(false);
      }
    }

    function handleEscape(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    document.addEventListener("keydown", handleEscape);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleEscape);
    };
  }, [open]);

  const updatePrefs = useCallback((update: Partial<ReadingPrefs>) => {
    setPrefs((prev) => {
      const next = { ...prev, ...update };
      savePrefs(next);
      applyClasses(next);
      return next;
    });
  }, []);

  const fontSizeIndex = FONT_SIZES.findIndex((f) => f.value === prefs.fontSize);
  const currentFontSizeLabel = FONT_SIZES[fontSizeIndex]?.label ?? "M";

  // Show palettes matching the currently visible mode. Falls back to light if
  // resolvedTheme hasn't been determined yet (e.g. first render).
  const isDark = resolvedTheme === "dark";
  const visiblePalettes = isDark ? DARK_PALETTES : LIGHT_PALETTES;
  const activePaletteId = isDark ? prefs.darkPalette : prefs.lightPalette;
  const activePaletteName =
    visiblePalettes.find((p) => p.id === activePaletteId)?.name ?? "";

  if (!mounted) {
    return (
      <Button variant="ghost" size="icon-sm" aria-label="Reading settings">
        <Settings className="size-4" />
      </Button>
    );
  }

  const toggle = () => setOpen((v) => !v);

  return (
    <div className="relative">
      {renderTrigger ? (
        renderTrigger({ open, toggle, buttonRef })
      ) : (
        <button
          ref={buttonRef as React.Ref<HTMLButtonElement>}
          aria-label="Reading settings"
          aria-expanded={open}
          onClick={toggle}
          className={cn(
            "size-9 inline-flex items-center justify-center rounded-lg",
            "text-muted-foreground hover:text-foreground hover:bg-muted",
            "transition-colors outline-none",
            "focus-visible:ring-2 focus-visible:ring-ring",
          )}
        >
          <Settings className="size-5 md:size-4" />
        </button>
      )}

      {open && (
        <MaybePortal portal={placement === "above-left" && portalPos !== null}>
        <div
          ref={panelRef}
          style={
            placement === "above-left" && portalPos
              ? {
                  position: "fixed",
                  left: portalPos.left,
                  bottom: portalPos.bottom,
                }
              : undefined
          }
          className={cn(
            "w-72 rounded-lg border border-border bg-card shadow-lg p-4",
            "max-h-[80vh] overflow-y-auto",
            placement === "above-left" && portalPos
              ? "z-[100]"
              : placement === "above-left"
                ? "absolute bottom-full left-0 mb-2 z-50"
                : "absolute top-full right-0 mt-2 z-50",
          )}
        >
          {/* Theme selector */}
          <div className="mb-4">
            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
              Theme
            </span>
            <div className="flex gap-1 mt-2">
              {(
                [
                  { value: "light", icon: Sun, label: "Light" },
                  { value: "dark", icon: Moon, label: "Dark" },
                  { value: "system", icon: Monitor, label: "System" },
                ] as const
              ).map(({ value, icon: Icon, label }) => (
                <button
                  key={value}
                  type="button"
                  onClick={() => setTheme(value)}
                  className={cn(
                    "flex-1 flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer",
                    theme === value
                      ? "bg-primary text-primary-foreground"
                      : "bg-muted text-muted-foreground hover:text-foreground",
                  )}
                >
                  <Icon className="size-3.5" />
                  {label}
                </button>
              ))}
            </div>
          </div>

          {/* Palette selector — shows light or dark palettes depending on
              the currently resolved theme. */}
          <div className="mb-4">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                Palette
              </span>
              <span className="text-xs text-muted-foreground">
                {activePaletteName}
              </span>
            </div>
            <div className="grid grid-cols-3 gap-2 mt-2">
              {visiblePalettes.map((p) => {
                const isActive = activePaletteId === p.id;
                return (
                  <button
                    key={p.id}
                    type="button"
                    onClick={() =>
                      updatePrefs(
                        isDark
                          ? { darkPalette: p.id as DarkPalette }
                          : { lightPalette: p.id as LightPalette },
                      )
                    }
                    aria-label={`Use ${p.name} palette`}
                    aria-pressed={isActive}
                    title={p.name}
                    className={cn(
                      "group relative aspect-square rounded-md transition-all cursor-pointer overflow-hidden",
                      "border-2 outline-none focus-visible:ring-2 focus-visible:ring-ring",
                      isActive
                        ? "border-primary ring-2 ring-primary/30"
                        : "border-border hover:border-foreground/40",
                    )}
                    style={{ backgroundColor: p.bg }}
                  >
                    {/* Primary-color dot in the corner */}
                    <span
                      className="absolute bottom-1.5 right-1.5 size-3 rounded-full ring-1 ring-black/10"
                      style={{ backgroundColor: p.primary }}
                    />
                  </button>
                );
              })}
            </div>
          </div>

          <div className="border-t border-border pt-3 space-y-1">
            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
              Reading
            </span>

            {/* Serif font toggle */}
            <Toggle
              checked={prefs.serifFont}
              onChange={(v) => updatePrefs({ serifFont: v })}
              label="Serif Font"
            />

            {/* Justify text toggle */}
            <Toggle
              checked={prefs.justified}
              onChange={(v) => updatePrefs({ justified: v })}
              label="Justify Text"
            />

            {/* Font size slider */}
            <div className="pt-1 pb-1">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm text-foreground">Font Size</span>
                <span className="text-xs font-medium text-muted-foreground bg-muted px-2 py-0.5 rounded">
                  {currentFontSizeLabel}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-[10px] text-muted-foreground">A</span>
                <input
                  type="range"
                  min={0}
                  max={FONT_SIZES.length - 1}
                  step={1}
                  value={fontSizeIndex}
                  onChange={(e) => {
                    const idx = parseInt(e.target.value, 10);
                    updatePrefs({ fontSize: FONT_SIZES[idx].value });
                  }}
                  className="flex-1 h-1.5 accent-primary cursor-pointer"
                />
                <span className="text-base text-muted-foreground font-medium">
                  A
                </span>
              </div>
            </div>
          </div>
        </div>
        </MaybePortal>
      )}
    </div>
  );
}

/** Conditionally render `children` through a React portal to document.body.
 *  When `portal` is false (or SSR), children render in place. We use this
 *  to escape stacking + overflow contexts (e.g. inside the sidebar) without
 *  duplicating the panel JSX. */
function MaybePortal({
  portal,
  children,
}: {
  portal: boolean;
  children: React.ReactNode;
}) {
  if (portal && typeof document !== "undefined") {
    return createPortal(children, document.body);
  }
  return <>{children}</>;
}