"use client";

import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { motion } from "framer-motion";
import { Moon, Sun } from "lucide-react";
import { useAuth } from "@/lib/auth/auth-provider";
import { apiPost } from "@/lib/api/client";
import { cn } from "@/lib/cn";

export function ThemeToggle({ className }: { className?: string }) {
  const { resolvedTheme, setTheme } = useTheme();
  const { user } = useAuth();
  const [mounted, setMounted] = useState(false);

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

  const isDark = mounted && resolvedTheme === "dark";

  function handleToggle() {
    const next = isDark ? "light" : "dark";
    setTheme(next);
    // ThemeToggle only ever renders on already-protected pages (home,
    // settings), so `user` is always present here — but guard anyway
    // rather than assume.
    if (user) {
      apiPost("/api/auth/preferences", { themePreference: next }).catch(() => {
        // Non-critical — the local theme change already applied either way.
      });
    }
  }

  return (
    <button
      type="button"
      aria-label="Toggle dark mode"
      onClick={handleToggle}
      className={cn(
        "relative flex h-9 w-16 items-center rounded-full px-1 transition-colors",
        isDark ? "bg-ink-soft justify-end" : "bg-paper-soft justify-start",
        "border border-ink/10 dark:border-white/10",
        className
      )}
    >
      <motion.span
        layout
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
        className="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-gold-bright to-gold-dim text-ink shadow-glow-gold"
      >
        {isDark ? <Moon size={15} strokeWidth={2.5} /> : <Sun size={15} strokeWidth={2.5} />}
      </motion.span>
    </button>
  );
}