import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
    Settings, Shield, ChevronRight, Sun, Moon, Globe, Type,
    Eye, Volume2, Bell, Minimize2, RotateCcw, Monitor, Users,
    ClipboardList, Layers, FileText
} from 'lucide-react';
import { usePreferences } from '../context/PreferencesContext';
import { PageHeader } from '../components/ui/LinearPrimitives';

export default function SettingsPage() {
    const navigate = useNavigate();
    const { t } = useTranslation();
    const { preferences, setPreference, resetPreferences } = usePreferences();

    const adminSections = [
        {
            label: 'Walkthrough Config',
            description: 'Configure daily walkthrough questions',
            icon: ClipboardList,
            action: () => navigate('/settings/walkthrough')
        },
        {
            label: 'Roles & Permissions',
            description: 'Manage staff access levels',
            icon: Shield,
            action: () => navigate('/roles')
        },
        {
            label: 'Task Templates',
            description: 'Create reusable task templates',
            icon: FileText,
            action: () => navigate('/tasks/templates')
        },
        {
            label: 'Layout Designer',
            description: 'Design facility floor layouts',
            icon: Layers,
            action: () => navigate('/layout-designer')
        }
    ];

    // Toggle switch component
    const Toggle = ({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
        <button
            role="switch"
            aria-checked={checked}
            onClick={onChange}
            className={`
                relative w-10 h-6 rounded-full transition-colors duration-fast
                ${checked ? 'bg-accent' : 'bg-tertiary'}
            `}
        >
            <span
                className={`
                    absolute top-1 left-1 w-4 h-4 bg-white rounded-full
                    transition-transform duration-fast
                    ${checked ? 'translate-x-4' : ''}
                `}
            />
        </button>
    );

    return (
        <div className="max-w-2xl mx-auto pb-20 space-y-6 animate-in">
            <PageHeader title="Settings" subtitle="Customize your experience" />

            {/* Theme Selection */}
            <section className="card p-4">
                <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider mb-4">
                    {t('settings.theme')}
                </h2>
                <div className="grid grid-cols-3 gap-2">
                    {(['light', 'dark', 'system'] as const).map(theme => (
                        <button
                            key={theme}
                            onClick={() => setPreference('theme', theme)}
                            className={`
                                flex flex-col items-center gap-2 p-4 rounded-md border transition-all duration-fast
                                ${preferences.theme === theme
                                    ? 'border-accent bg-accent-muted'
                                    : 'border-default hover:border-strong'
                                }
                            `}
                            aria-pressed={preferences.theme === theme}
                        >
                            {theme === 'light' && <Sun className="text-warning" size={20} />}
                            {theme === 'dark' && <Moon className="text-accent" size={20} />}
                            {theme === 'system' && <Monitor className="text-secondary" size={20} />}
                            <span className="text-xs font-medium text-primary capitalize">
                                {t(`settings.themes.${theme}`)}
                            </span>
                        </button>
                    ))}
                </div>
            </section>

            {/* Language Selection */}
            <section className="card p-4">
                <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider mb-4">
                    {t('settings.language')}
                </h2>
                <div className="flex items-center gap-3">
                    <Globe className="text-tertiary" size={18} />
                    <select
                        value={preferences.language}
                        onChange={(e) => setPreference('language', e.target.value as 'en' | 'es')}
                        className="input flex-1"
                        aria-label={t('settings.language')}
                    >
                        <option value="en">English</option>
                        <option value="es">Español</option>
                    </select>
                </div>
            </section>

            {/* Accessibility Options */}
            <section className="card divide-y divide-subtle">
                <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider p-4">
                    {t('settings.accessibility')}
                </h2>

                {/* Font Size */}
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Type className="text-tertiary" size={18} />
                        <div>
                            <div className="text-sm font-medium text-primary">Font Size</div>
                            <div className="text-xs text-tertiary">Adjust text size</div>
                        </div>
                    </div>
                    <select
                        value={preferences.fontSize}
                        onChange={(e) => setPreference('fontSize', e.target.value as any)}
                        className="input w-32 h-9 text-sm"
                        aria-label="Font size"
                    >
                        <option value="normal">Normal</option>
                        <option value="large">Large</option>
                        <option value="xlarge">Extra Large</option>
                    </select>
                </div>

                {/* High Contrast */}
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Eye className="text-tertiary" size={18} />
                        <div>
                            <div className="text-sm font-medium text-primary">High Contrast</div>
                            <div className="text-xs text-tertiary">Increase color contrast</div>
                        </div>
                    </div>
                    <Toggle
                        checked={preferences.highContrast}
                        onChange={() => setPreference('highContrast', !preferences.highContrast)}
                    />
                </div>

                {/* Reduced Motion */}
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Minimize2 className="text-tertiary" size={18} />
                        <div>
                            <div className="text-sm font-medium text-primary">Reduced Motion</div>
                            <div className="text-xs text-tertiary">Minimize animations</div>
                        </div>
                    </div>
                    <Toggle
                        checked={preferences.reducedMotion}
                        onChange={() => setPreference('reducedMotion', !preferences.reducedMotion)}
                    />
                </div>

                {/* Sound Effects */}
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Volume2 className="text-tertiary" size={18} />
                        <div>
                            <div className="text-sm font-medium text-primary">Sound Effects</div>
                            <div className="text-xs text-tertiary">Play notification sounds</div>
                        </div>
                    </div>
                    <Toggle
                        checked={preferences.soundEnabled}
                        onChange={() => setPreference('soundEnabled', !preferences.soundEnabled)}
                    />
                </div>
            </section>

            {/* Notifications */}
            <section className="card p-4">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Bell className="text-tertiary" size={18} />
                        <div>
                            <div className="text-sm font-medium text-primary">Push Notifications</div>
                            <div className="text-xs text-tertiary">Receive alerts for updates</div>
                        </div>
                    </div>
                    <Toggle
                        checked={preferences.notificationsEnabled}
                        onChange={() => setPreference('notificationsEnabled', !preferences.notificationsEnabled)}
                    />
                </div>
            </section>

            {/* Admin Section */}
            <section className="card overflow-hidden">
                <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider p-4 border-b border-subtle">
                    Admin
                </h2>
                {adminSections.map((item, idx) => {
                    const Icon = item.icon;
                    return (
                        <button
                            key={idx}
                            onClick={item.action}
                            className={`
                                w-full flex items-center gap-4 p-4 hover:bg-tertiary transition-colors duration-fast text-left
                                ${idx !== adminSections.length - 1 ? 'border-b border-subtle' : ''}
                            `}
                        >
                            <div className="w-9 h-9 rounded-md bg-accent-muted flex items-center justify-center text-accent">
                                <Icon size={18} />
                            </div>
                            <div className="flex-1">
                                <div className="text-sm font-medium text-primary">{item.label}</div>
                                <div className="text-xs text-tertiary">{item.description}</div>
                            </div>
                            <ChevronRight size={16} className="text-tertiary" />
                        </button>
                    );
                })}
            </section>

            {/* Reset Button */}
            <button
                onClick={resetPreferences}
                className="w-full flex items-center justify-center gap-2 p-4 text-destructive hover:bg-destructive-muted rounded-md border border-destructive/20 transition-colors duration-fast"
            >
                <RotateCcw size={16} />
                <span className="text-sm font-medium">Reset to Defaults</span>
            </button>
        </div>
    );
}
