"use client";

import { useEffect, useState } from "react";

export type DisplayMode = "dark" | "light";

export function DisplayToggle() {

  const [mode, setMode] = useState<DisplayMode>("dark");

  const [mounted, setMounted] = useState(false);

  useEffect(() => {

    setMounted(true);

    const stored = localStorage.getItem("docket-display");

    const valid: DisplayMode = stored === "light" ? "light" : "dark";

    setMode(valid);

  }, []);

  function apply(next: DisplayMode) {

    setMode(next);

    localStorage.setItem("docket-display", next);

    const el = document.documentElement;

    el.classList.remove("dark", "light", "plain");

    if (next !== "dark") el.classList.add(next);

    el.dataset.display = next;

  }

  const isDark = mode === "dark";

  const ariaLabel = isDark ? "Switch to light mode" : "Switch to dark mode";

  return (

    <button

      type="button"

      onClick={() => apply(isDark ? "light" : "dark")}

      aria-label={ariaLabel}

      title={ariaLabel}

      className="focus-ring"

      style={{

        display: "inline-flex",

        alignItems: "center",

        justifyContent: "center",

        width: "44px",

        height: "44px",

        border: "1px solid var(--dk-line)",

        borderRadius: "8px",

        background: "transparent",

        color: "var(--dk-ash)",

        cursor: "pointer",

        transition: "color 0.2s, border-color 0.2s",

        flexShrink: 0,

        opacity: mounted ? 1 : 0,

      }}

    >

      {isDark ? <MoonIcon /> : <SunIcon />}

    </button>

  );

}

function MoonIcon() {

  return (

    <svg

      aria-hidden="true"

      width="18"

      height="18"

      viewBox="0 0 24 24"

      fill="none"

      stroke="currentColor"

      strokeWidth="1.75"

      strokeLinecap="round"

      strokeLinejoin="round"

    >

      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />

    </svg>

  );

}

function SunIcon() {

  return (

    <svg

      aria-hidden="true"

      width="18"

      height="18"

      viewBox="0 0 24 24"

      fill="none"

      stroke="currentColor"

      strokeWidth="1.75"

      strokeLinecap="round"

      strokeLinejoin="round"

    >

      <circle cx="12" cy="12" r="5" />

      <line x1="12" y1="1" x2="12" y2="3" />

      <line x1="12" y1="21" x2="12" y2="23" />

      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />

      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />

      <line x1="1" y1="12" x2="3" y2="12" />

      <line x1="21" y1="12" x2="23" y2="12" />

      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />

      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />

    </svg>

  );

}