"use client";

import { useEffect, useId, useSyncExternalStore } from "react";
import { Sun } from "lucide-react";
import { toast } from "sonner";
import { useAppearance } from "@/lib/appearance/appearance";
import { Button } from "@/components/ui/button";

/** Remembered per device (spec 15.4): the notice is shown until it is closed or tried once. */
export const SUN_NOTICE_KEY = "apicore.notice.sun";
const SEEN = "seen";
const CHANGE_EVENT = "apicore:notice";

/** Closed in this visit; covers blocked storage (private mode). */
let seenThisVisit = false;

function isSeen(): boolean {
  if (seenThisVisit) return true;
  try {
    return window.localStorage.getItem(SUN_NOTICE_KEY) === SEEN;
  } catch {
    return false;
  }
}

function markSeen(): void {
  seenThisVisit = true;
  try {
    window.localStorage.setItem(SUN_NOTICE_KEY, SEEN);
  } catch {
    // Not persisted - gone for this visit only.
  }
  window.dispatchEvent(new Event(CHANGE_EVENT));
}

function subscribe(onChange: () => void): () => void {
  window.addEventListener(CHANGE_EVENT, onChange);
  window.addEventListener("storage", onChange);
  return () => {
    window.removeEventListener(CHANGE_EVENT, onChange);
    window.removeEventListener("storage", onChange);
  };
}

/**
 * The notice unmounts on close; focus inside it would drop to <body> (WCAG 2.4.3). It goes to
 * the page heading (h1 with tabIndex -1) instead.
 */
function keepFocus(): void {
  const heading = document.querySelector<HTMLElement>("main h1, h1");
  heading?.focus();
}

const TEXT = "Neu: Sonnenmodus für draußen – im Benutzermenü.";

/** One-time hint on the start page: try the sun mode or close the hint. */
export function AppearanceNotice() {
  const textId = useId();
  const { sunActive, setContrast } = useAppearance();
  // The server never shows it, so a device that has seen it gets no flash after hydration.
  const seen = useSyncExternalStore(subscribe, isSeen, () => true);
  // Sun switched on elsewhere (user menu, device setting) means the hint has done its job.
  useEffect(() => {
    if (sunActive && !seen) markSeen();
  }, [sunActive, seen]);
  if (seen || sunActive) return null;

  return (
    <aside
      aria-labelledby={textId}
      className="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-card p-3"
    >
      <Sun className="size-5 shrink-0 text-primary-ink" aria-hidden />
      <p id={textId} className="min-w-0 flex-1 text-base">
        {TEXT}
      </p>
      <div className="flex flex-wrap gap-2">
        <Button
          size="touch"
          variant="outline"
          onClick={() => {
            keepFocus();
            setContrast("sun");
            markSeen();
            toast.success("Sonnenmodus an");
          }}
        >
          Ausprobieren
        </Button>
        <Button
          size="touch"
          variant="ghost"
          onClick={() => {
            keepFocus();
            markSeen();
          }}
        >
          Schließen
        </Button>
      </div>
    </aside>
  );
}