'use client'

import { useRouter } from 'next/navigation'
import { useState } from 'react'
import { SettingsSection, SettingSelect } from '@/components/settings'
// Import actions directly
import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
import { updateUserSettings as updateUser } from '@/app/actions/user-settings'

interface AppearanceSettingsFormProps {
    initialTheme: string
    initialFontSize: string
}

export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
    const router = useRouter()
    const [theme, setTheme] = useState(initialTheme)
    const [fontSize, setFontSize] = useState(initialFontSize)

    const handleThemeChange = async (value: string) => {
        setTheme(value)
        localStorage.setItem('theme-preference', value)

        // Instant visual update
        const root = document.documentElement
        root.removeAttribute('data-theme')
        root.classList.remove('dark')

        if (value === 'auto') {
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
        } else if (value === 'dark') {
            root.classList.add('dark')
        } else {
            root.setAttribute('data-theme', value)
            if (['midnight'].includes(value)) root.classList.add('dark')
        }

        // Save to DB (no need for router.refresh - localStorage handles immediate visuals)
        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' })
    }

    const handleFontSizeChange = async (value: string) => {
        setFontSize(value)

        // Instant visual update
        const fontSizeMap: Record<string, string> = {
            'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
        }
        const root = document.documentElement
        root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')

        await updateAI({ fontSize: value as any })
    }

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold mb-2">Appearance</h1>
                <p className="text-gray-600 dark:text-gray-400">
                    Customize look and feel of application
                </p>
            </div>

            <SettingsSection
                title="Theme"
                icon={<span className="text-2xl">🎨</span>}
                description="Choose your preferred color scheme"
            >
                <SettingSelect
                    label="Color Scheme"
                    description="Select app's visual theme"
                    value={theme}
                    options={[
                        { value: 'light', label: 'Light' },
                        { value: 'dark', label: 'Dark' },
                        { value: 'sepia', label: 'Sepia' },
                        { value: 'midnight', label: 'Midnight' },
                        { value: 'auto', label: 'Auto (system)' },
                    ]}
                    onChange={handleThemeChange}
                />
            </SettingsSection>

            <SettingsSection
                title="Typography"
                icon={<span className="text-2xl">📝</span>}
                description="Adjust text size for better readability"
            >
                <SettingSelect
                    label="Font Size"
                    description="Adjust size of text throughout app"
                    value={fontSize}
                    options={[
                        { value: 'small', label: 'Small' },
                        { value: 'medium', label: 'Medium' },
                        { value: 'large', label: 'Large' },
                    ]}
                    onChange={handleFontSizeChange}
                />
            </SettingsSection>
        </div>
    )
}
