import { useTheme } from "@xtablo/shared/contexts/ThemeContext";
import { Button } from "@xtablo/ui/components/button";
import { ButtonGroup } from "@xtablo/ui/components/button-group";
import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";

const translation = {
  light: "Clair",
  dark: "Sombre",
  system: "Système",
};

export function ThemeSwitcher({ isCollapsed = false }: { isCollapsed?: boolean }) {
  const { theme, setTheme } = useTheme();

  const getThemeIcon = () => {
    switch (theme) {
      case "light":
        return <SunIcon className="w-5 h-5" />;
      case "dark":
        return <MoonIcon className="w-5 h-5" />;
      case "system":
        return <MonitorIcon className="w-5 h-5" />;
    }
  };

  const cycleTheme = () => {
    const themes: Array<"light" | "dark" | "system"> = ["light", "system", "dark"];
    const currentIndex = themes.indexOf(theme);
    const nextIndex = (currentIndex + 1) % themes.length;
    setTheme(themes[nextIndex]);
  };

  if (isCollapsed) {
    return (
      <Button
        variant="ghost"
        size="icon"
        onClick={cycleTheme}
        aria-label={`Thème actuel: ${translation[theme]}`}
        className="hover:bg-navbar-darker w-full h-auto px-2 py-1.5 text-gray-300/90"
      >
        {getThemeIcon()}
      </Button>
    );
  }

  return (
    <ButtonGroup orientation="horizontal" className="w-fit">
      <Button
        variant={theme === "light" ? "default" : "outline"}
        size="icon-sm"
        onClick={() => setTheme("light")}
        aria-label="Mode clair"
        className="flex-1 border"
      >
        <SunIcon className="w-4 h-4 color-foreground" />
      </Button>
      <Button
        variant={theme === "system" ? "default" : "outline"}
        size="icon-sm"
        onClick={() => setTheme("system")}
        aria-label="Mode système"
        className="flex-1"
      >
        <MonitorIcon className="w-4 h-4 color-foreground" />
      </Button>
      <Button
        variant={theme === "dark" ? "default" : "outline"}
        size="icon-sm"
        onClick={() => setTheme("dark")}
        aria-label="Mode sombre"
        className="flex-1"
      >
        <MoonIcon className="w-4 h-4 color-foreground" />
      </Button>
    </ButtonGroup>
  );
}
