"use client";

import { Monitor, Moon, Sun } from "lucide-react";
import { useTheme } from "./ThemeProvider";
import { nextBase, type ThemeBase } from "./themeConfig";
import { cn } from "../lib/utils";

// The theme control: cycles the base, system → light → dark → system
// (themeConfig THEME_BASES). The icon shows the base in force, the label names
// the next one ("Switch to …" — the e2e specs find it by /switch to/i). There
// is no accent control: each site shows its own. Must be rendered inside a
// <ThemeProvider/>.
const ICON = { system: Monitor, light: Sun, dark: Moon } as const;
const LABEL: Record<ThemeBase, string> = {
  system: "system",
  light: "light",
  dark: "dark",
};

// `variant="bare"` (the homepage): dressed as a social link's key
// (SocialLinks.tsx) — a 36 px box (44 px under a coarse pointer), no border, the
// muted foreground and the faint hover square, a 20 px glyph, the ring
// colour's 2 px focus ring and, in forced colours, the browser's own outline —
// so it reads as the last key of the row it follows. The default is unchanged.
const BARE =
  "inline-flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring not-forced-colors:focus-visible:outline-none pointer-coarse:size-11";

export function ThemeToggle({
  className,
  variant = "default",
}: {
  className?: string;
  variant?: "default" | "bare";
}) {
  const { base, cycleBase } = useTheme();
  const Icon = ICON[base];

  return (
    <button
      type="button"
      onClick={cycleBase}
      aria-label={`Switch to ${LABEL[nextBase(base)]}`}
      title={`Theme: ${LABEL[base]}`}
      data-theme-base={base}
      className={cn(
        variant === "bare"
          ? BARE
          : "inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--border)] text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:border-[var(--border-strong,var(--border))]",
        className,
      )}
    >
      <Icon className={variant === "bare" ? "size-5" : "h-4 w-4"} aria-hidden="true" />
    </button>
  );
}