'use client';

import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';

import { Button } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export function ModeToggle() {
	const { setTheme } = useTheme();

	const handleThemeChange = async (newTheme: 'light' | 'dark' | 'system') => {
		// Update next-themes immediately for UI responsiveness
		setTheme(newTheme);

		// Sync with database in background
		try {
			await fetch('/api/users/theme', {
				method: 'PUT',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({ themePreference: newTheme }),
			});
		} catch (error) {
			console.error('Failed to sync theme preference:', error);
		}
	};

	return (
		<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant='outline' size='icon'>
					<Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
					<Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
					<span className='sr-only'>Toggle theme</span>
				</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent align='end'>
				<DropdownMenuItem onClick={() => handleThemeChange('light')}>Light</DropdownMenuItem>
				<DropdownMenuItem onClick={() => handleThemeChange('dark')}>Dark</DropdownMenuItem>
				<DropdownMenuItem onClick={() => handleThemeChange('system')}>System</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>
	);
}