export type ThemeMode = 'light' | 'dark'

export interface ThemeDef {
    id: string
    label: string
    mode: ThemeMode
    // رنگ‌های نمونه برای نمایش در انتخابگر تم
    swatch: { bg: string; surface: string; accent: string }
}

export const THEMES: ThemeDef[] = [
    {
        id: 'light',
        label: 'روشن',
        mode: 'light',
        swatch: { bg: '#f4f5f7', surface: '#ffffff', accent: '#ce571e' },
    },
    {
        id: 'sky',
        label: 'آبی روشن',
        mode: 'light',
        swatch: { bg: '#eaf1fb', surface: '#ffffff', accent: '#2f6bff' },
    },
    {
        id: 'dark',
        label: 'تیره',
        mode: 'dark',
        swatch: { bg: '#15171c', surface: '#1e2128', accent: '#ce571e' },
    },
    {
        id: 'midnight',
        label: 'نیلی',
        mode: 'dark',
        swatch: { bg: '#0e1322', surface: '#161d33', accent: '#7c8cff' },
    },
]

export const useTheme = () => {
    const cookie = useCookie<string>('theme', {
        maxAge: 60 * 60 * 24 * 365,
        default: () => 'light',
    })

    const theme = useState<string>('theme', () => cookie.value || 'light')

    const current = computed<ThemeDef>(
        () => THEMES.find((t) => t.id === theme.value) || THEMES[0]
    )

    const mode = computed<ThemeMode>(() => current.value.mode)

    const setTheme = (id: string) => {
        if (!THEMES.some((t) => t.id === id)) return
        theme.value = id
        cookie.value = id
    }

    return { theme, current, mode, themes: THEMES, setTheme }
}