import { CheckCircleFillIcon } from '@primer/octicons-react'
import { useQueryClient } from '@tanstack/react-query'
import { useCallback, useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAudioStorageContext } from '../context/AudioStorageContext/AudioStorageContext'
import { useDownloadContext } from '../context/DownloadContext/DownloadContext'
import { useJellyfinContext } from '../context/JellyfinContext/JellyfinContext'
import { usePlaybackContext } from '../context/PlaybackContext/PlaybackContext'
import { useThemeContext } from '../context/ThemeContext/ThemeContext'
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext'
import { persister } from '../queryClient'
import { formatFileSize } from '../utils/formatFileSize'
import './Settings.css'

export const Settings = ({ onLogout }: { onLogout: () => void }) => {
    const { setPageTitle } = usePageTitle()
    const navigate = useNavigate()
    const api = useJellyfinContext()
    const audioStorage = useAudioStorageContext()

    const { theme, toggleTheme } = useThemeContext()

    const [lastLogin, setLastLogin] = useState<string | null>(null)
    const [clientIp, setClientIp] = useState<string | null>(null)
    const [latency, setLatency] = useState<number | null>(null)
    const { sessionPlayCount, resetSessionCount, bitrate, setBitrate } = usePlaybackContext()
    const playback = usePlaybackContext()
    const queryClient = useQueryClient()
    const { storageStats, refreshStorageStats, queueCount, clearQueue } = useDownloadContext()

    const [clearing, setClearing] = useState(false)
    
    useEffect(() => {
        setPageTitle('Settings')
    }, [setPageTitle])

    useEffect(() => {
        const fetchData = async () => {
            try {
                const [user, clientIp, latencyMs] = await Promise.all([
                    api.fetchUserInfo(),
                    api.fetchClientIp(),
                    api.measureLatency(),
                ])

                if (user.LastLoginDate) {
                    const date = new Date(user.LastLoginDate)
                    const formatted = date
                        .toLocaleString('en-US', {
                            weekday: 'short',
                            month: 'short',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            year: 'numeric',
                            hour12: true,
                        })
                        .replace(/,/, '')
                    setLastLogin(formatted)
                } else {
                    setLastLogin(null)
                }

                setClientIp(clientIp)
                setLatency(latencyMs)
            } catch (error) {
                console.error('Error fetching data:', error)
            }
        }

        fetchData()
    }, [api])

    const handleLogout = () => {
        playback.audioRef.current.pause()
        playback.crossfadeRef.current.pause()
        resetSessionCount()
        onLogout()
        navigate('/login')
    }

    const handleClearAll = useCallback(async () => {
        if (!confirm('Are you sure you want to clear all downloads? This cannot be undone.')) {
            return
        }

        try {
            setClearing(true)
            await audioStorage.clearAllDownloads()
            queryClient.clear()
            await persister.removeClient()
            clearQueue()
            await refreshStorageStats()
        } catch (error) {
            console.error('Failed to clear downloads:', error)
        } finally {
            setClearing(false)
        }
    }, [audioStorage, clearQueue, queryClient, refreshStorageStats])

    return (
        <div className="settings-page">
            <div className="section appearance">
                <div className="title">Appearance</div>
                <div className="options noSelect">
                    <div
                        className={`option light ${theme === 'light' ? 'active' : ''}`}
                        onClick={() => toggleTheme('light')}
                    >
                        <div className="visual light-theme">
                            <svg className="theme-icon" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
                            </svg>
                        </div>
                        <div className="desc">Light</div>
                    </div>
                    <div
                        className={`option dark ${theme === 'dark' ? 'active' : ''}`}
                        onClick={() => toggleTheme('dark')}
                    >
                        <div className="visual dark-theme">
                            <svg className="theme-icon" viewBox="0 0 24 24" fill="currentColor">
                                <path fillRule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clipRule="evenodd"/>
                            </svg>
                        </div>
                        <div className="desc">Dark</div>
                    </div>
                    <div
                        className={`option system ${theme === 'system' ? 'active' : ''}`}
                        onClick={() => toggleTheme('system')}
                    >
                        <div className="visual system-theme">
                            <svg className="theme-icon" viewBox="0 0 24 24" fill="currentColor">
                                <path fillRule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v12a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3.97.97a.75.75 0 011.06 0l2.25 2.25a.75.75 0 010 1.06l-2.25 2.25a.75.75 0 01-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 010-1.06zm4.28 4.28a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" clipRule="evenodd"/>
                            </svg>
                        </div>
                        <div className="desc">System</div>
                    </div>
                </div>
            </div>
            <div className="section quality">
                <div className="title">Audio Quality</div>
                <div className="subtitle">Streaming & Offline Sync</div>
                <div className="subdesc">
                    Adjusting audio quality enables server-side transcoding, converting to a compatible format with a
                    lower bitrate for smoother streaming or efficient offline syncing
                </div>
                <div className="container">
                    <div className="options noSelect">
                        <div className={'option source' + (!bitrate ? ' active' : '')} onClick={() => setBitrate(0)}>
                            <div className="status">
                                <CheckCircleFillIcon size={16} />
                            </div>
                            <div className="details">
                                <div className="title">Source</div>
                                <div className="desc">
                                    Direct playback of the original audio source without modifications
                                </div>
                            </div>
                        </div>
                        <div
                            className={'option high' + (bitrate === 320000 ? ' active' : '')}
                            onClick={() => setBitrate(320000)}
                        >
                            <div className="status">
                                <CheckCircleFillIcon size={16} />
                            </div>
                            <div className="details">
                                <div className="title">
                                    High <span className="bitrate">320 kbps</span>
                                </div>
                                <div className="desc">
                                    Superior sound quality, perfect for immersive listening with moderate data usage
                                </div>
                            </div>
                        </div>
                        <div
                            className={'option medium' + (bitrate === 256000 ? ' active' : '')}
                            onClick={() => setBitrate(256000)}
                        >
                            <div className="status">
                                <CheckCircleFillIcon size={16} />
                            </div>
                            <div className="details">
                                <div className="title">
                                    Medium <span className="bitrate">256 kbps</span>
                                </div>
                                <div className="desc">
                                    Crisp audio with a balanced blend of quality and data efficiency
                                </div>
                            </div>
                        </div>
                        <div
                            className={'option low' + (bitrate === 192000 ? ' active' : '')}
                            onClick={() => setBitrate(192000)}
                        >
                            <div className="status">
                                <CheckCircleFillIcon size={16} />
                            </div>
                            <div className="details">
                                <div className="title">
                                    Low <span className="bitrate">192 kbps</span>
                                </div>
                                <div className="desc">Solid quality tailored for streaming with reduced bandwidth</div>
                            </div>
                        </div>
                        <div
                            className={'option minimal' + (bitrate === 128000 ? ' active' : '')}
                            onClick={() => setBitrate(128000)}
                        >
                            <div className="status">
                                <CheckCircleFillIcon size={16} />
                            </div>
                            <div className="details">
                                <div className="title">
                                    Minimal <span className="bitrate">128 kbps</span>
                                </div>
                                <div className="desc">
                                    Essential audio quality optimized for the lowest data consumption
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="section offline-sync">
                <div className="title">Offline Sync</div>
                <div className="subtitle">
                    Synced Music - <span className="number">{storageStats.trackCount}</span> Track{storageStats.trackCount === 1 ? '' : 's'} / <span className="number">{formatFileSize(storageStats.trackCount === 0 ? 0 : storageStats?.indexedDB || 0)}</span> Used
                </div>
                <div className="subdesc">
                    Cache your music library for seamless offline playback, with new tracks auto-syncing to saved
                    playlists, albums, or artists. <Link to="/synced" className="textlink">Browse music library</Link>, available once tracks are synced
                </div>
                {(storageStats.trackCount > 0 || queueCount > 0) && (
                    <div className="actions">
                        <button className="btn clear" onClick={handleClearAll} disabled={clearing}>
                            {clearing ? 'Clearing...' : 'Clear All'}
                        </button>
                    </div>
                )}
            </div>
            <div className="section crossfade">
                <div className="title">Crossfade</div>
                <div className="subtitle">{playback.crossfadeDuration}s</div>
                <div className="subdesc">
                    Smoothly transition between tracks by gradually fading out the current song while simultaneously
                    fading in the next, creating a seamless and immersive listening experience
                </div>
                <div className="crossfade-controls">
                    <div className="slider-container">
                        <input
                            type="range"
                            id="crossfade"
                            name="crossfade"
                            min="1"
                            max="12"
                            step="1"
                            value={playback.crossfadeDuration}
                            onChange={e => playback.setCrossfadeDuration(Number(e.target.value))}
                            disabled={!playback.isCrossfadeActive}
                        />
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.isCrossfadeActive}
                            onChange={e => playback.setIsCrossfadeActive(e.target.checked)}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
            </div>
            <div className="section lyrics">
                <div className="title">Lyrics</div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Timestamps</div>
                        <div className="subdesc">Show timestamps with the synchronized lyrics</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.lyricsTimestamps}
                            onChange={e => playback.setLyricsTimestamps(e.target.checked)}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Alignment</div>
                        <div className="subdesc">
                            Center lyrics for a different look, overriding the default left alignment
                        </div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.centeredLyrics}
                            onChange={e => playback.setCenteredLyrics(e.target.checked)}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
            </div>
            <div className="section interface">
                <div className="title">Interface</div>
                <div className="subtitle">Playback & Navigation</div>
                <div className="subdesc">
                    Customize your music experience with personalized playback preferences and interface behaviors
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Filter state</div>
                        <div className="subdesc">Remember selected filters across sessions for a consistent experience</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.rememberFilters}
                            onChange={e => playback.setRememberFilters(e.target.checked)}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Queue protection</div>
                        <div className="subdesc">Warn before overwriting the active queue if it includes manually added tracks</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.warnBeforeOverwriteQueue}
                            onChange={e => playback.setWarnBeforeOverwriteQueue(e.target.checked)}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Shuffle mode</div>
                        <div className="subdesc">Enable shuffle by default when playing albums or playlists</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.shuffle}
                            onChange={e => playback.toggleShuffle()}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Repeat mode</div>
                        <div className="subdesc">Set default repeat behavior for playback</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={playback.repeat !== 'off'}
                            onChange={e => playback.toggleRepeat()}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
            </div>
            <div className="section performance">
                <div className="title">Performance</div>
                <div className="subtitle">Optimization & Caching</div>
                <div className="subdesc">
                    Fine-tune performance settings to optimize your listening experience based on your device and network
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Preload next track</div>
                        <div className="subdesc">Buffer the next song in advance for seamless playback transitions</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={true}
                            onChange={e => {}}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="setting-row">
                    <div className="setting-info">
                        <div className="subtitle">Background sync</div>
                        <div className="subdesc">Continue downloading tracks when the app is in the background</div>
                    </div>
                    <label className="switch">
                        <input
                            type="checkbox"
                            checked={true}
                            onChange={e => {}}
                        />
                        <span className="slider"></span>
                    </label>
                </div>
            </div>
            <div className="section about">
                <div className="title">About</div>
                <div className="subtitle">Jelly Music App - Version {__VERSION__}</div>
                <div className="subdesc">
                    An open source music player for Jellyfin
                </div>
                <div className="description">
                    Carefully crafted with great attention to detail, aiming to reduce noise and distractions with a
                    minimalistic & lightweight interface: <em>"the quieter you become, the more you are able to hear"</em>
                </div>
                <div className="links">
                    Source code is freely available on{' '}
                    <a
                        target="_blank"
                        rel="noopener noreferrer"
                        className="textlink"
                        href="https://github.com/Stannnnn/jelly-app"
                    >
                        GitHub
                    </a>{' '}
                    and is licensed under the MIT license
                </div>
            </div>
            <div className="section session">
                <div className="title">Session</div>
                <div className="desc">
                    <p>
                        Currently connected to{' '}
                        <a target="_blank" rel="noopener noreferrer" className="textlink" href={api.auth.serverUrl}>
                            {api.auth.serverUrl}
                        </a>{' '}
                        {latency !== null && (
                            <span>
                                <span>with {latency}ms latency</span>
                            </span>
                        )}
                    </p>
                    <p>
                        Last login: {lastLogin} {clientIp ? ` from ${clientIp}` : ''}
                    </p>
                    <p>
                        Played{' '}
                        {sessionPlayCount !== null && (
                            <span>
                                {sessionPlayCount} {sessionPlayCount === 1 ? 'track' : 'tracks'}
                            </span>
                        )}{' '}
                        since login
                    </p>
                </div>
                <div className="actions noSelect">
                    <button onClick={handleLogout} className="btn logout">
                        Logout
                    </button>

                    <button
                        onClick={async () => {
                            queryClient.clear()
                            await persister.removeClient()
                            window.location.reload()
                        }}
                        className="btn reload"
                        title="Reloading can help with issues like outdated cache or version conflicts."
                    >
                        Reload App
                    </button>
                </div>
            </div>
        </div>
    )
}