"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { useSound } from "@/components/sound-provider";
import { Button, type ButtonProps } from "@/components/ui/button";
import { toast } from "@/lib/toast";
import { cn } from "@/lib/utils";

type ThemeToggleProps = {
  ariaLabel?: string;
  label?: string;
  lightToastLabel?: string;
  darkToastLabel?: string;
  variant?: ButtonProps["variant"];
  className?: string;
  iconClassName?: string;
};

export function ThemeToggle({
  ariaLabel = "Toggle theme",
  label,
  lightToastLabel = "Light mode enabled",
  darkToastLabel = "Dark mode enabled",
  variant = "outline",
  className,
  iconClassName,
}: ThemeToggleProps) {
  const { setTheme, theme, resolvedTheme } = useTheme();
  const { playSound } = useSound();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <Button
        type="button"
        variant={variant}
        size={label ? "sm" : "icon"}
        aria-label={ariaLabel}
        className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
      >
        <Moon className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
        {label ? <span>{label}</span> : null}
      </Button>
    );
  }

  const activeTheme = theme === "system" ? resolvedTheme : theme;
  const isDark = activeTheme === "dark";

  const handleThemeToggle = () => {
    const nextTheme = isDark ? "light" : "dark";

    setTheme(nextTheme);
    playSound(nextTheme === "dark" ? "/audio/dark.mp3" : "/audio/light.mp3");
    toast(nextTheme === "dark" ? darkToastLabel : lightToastLabel);
  };

  return (
    <Button
      type="button"
      variant={variant}
      size={label ? "sm" : "icon"}
      onClick={handleThemeToggle}
      aria-label={ariaLabel}
      className={cn("group cursor-pointer", label ? "justify-start" : undefined, className)}
    >
      {isDark ? (
        <Sun className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
      ) : (
        <Moon className={cn("h-4 w-4 transition-transform duration-300 ease-out group-hover:scale-110", iconClassName)} />
      )}
      {label ? <span>{label}</span> : null}
    </Button>
  );
}