'use client'
import React, {ChangeEvent, useCallback, useEffect, useMemo} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faEye, faFont, faIndent, faPalette, faTextHeight, faTextWidth} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from "next-intl";
import SelectBox from "@/components/form/SelectBox";

interface UserEditorSettingsProps {
    settings: EditorDisplaySettings;
    onSettingsChange: (settings: EditorDisplaySettings) => void;
}

export interface EditorDisplaySettings {
    zoomLevel: number;
    indent: number;
    lineHeight: number;
    theme: 'clair' | 'sombre' | 'sépia';
    fontFamily: 'lora' | 'serif' | 'sans-serif' | 'monospace';
    maxWidth: number;
    focusMode: boolean;
}

const ZOOM_LABELS = ['Très petit', 'Petit', 'Normal', 'Grand', 'Très grand'] as const;
const FONT_SIZES = [14, 16, 18, 20, 22] as const;
const THEMES = ['clair', 'sombre', 'sépia'] as const;

const DEFAULT_SETTINGS: EditorDisplaySettings = {
    zoomLevel: 3,
    indent: 30,
    lineHeight: 1.5,
    theme: 'sombre',
    fontFamily: 'lora',
    maxWidth: 768,
    focusMode: false
};

export default function UserEditorSettings({settings, onSettingsChange}: UserEditorSettingsProps) {
    const t = useTranslations();
    
    const handleSettingChange = useCallback(<K extends keyof EditorDisplaySettings>(
        key: K,
        value: EditorDisplaySettings[K]
    ) => {
        onSettingsChange({...settings, [key]: value});
    }, [settings, onSettingsChange]);
    
    const resetToDefaults = useCallback(() => {
        onSettingsChange(DEFAULT_SETTINGS);
    }, [onSettingsChange]);
    
    const zoomOptions = useMemo(() =>
            ZOOM_LABELS.map((label, index) => ({
                value: (index + 1).toString(),
                label: `${t(`userEditorSettings.zoom.${label}`)} (${FONT_SIZES[index]}px)`
            }))
        , [t]);
    
    const themeButtons = useMemo(() =>
            THEMES.map(theme => ({
                key: theme,
                isActive: settings.theme === theme,
                className: `p-2.5 rounded-xl border capitalize transition-all duration-200 font-medium ${
                    settings.theme === theme
                        ? 'bg-primary text-text-primary border-primary shadow-md scale-105'
                        : 'bg-secondary/50 border-secondary/50 text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary hover:scale-102'
                }`
            }))
        , [settings.theme]);
    
    useEffect((): void => {
        try {
            const savedSettings: string | null = localStorage.getItem('userEditorSettings');
            if (savedSettings) {
                const parsed = JSON.parse(savedSettings);
                if (parsed && typeof parsed === 'object') {
                    onSettingsChange({...DEFAULT_SETTINGS, ...parsed});
                }
            }
        } catch (e: unknown) {
            onSettingsChange(DEFAULT_SETTINGS);
        }
    }, [onSettingsChange]);
    
    useEffect((): () => void => {
        const timeoutId = setTimeout((): void => {
            try {
                localStorage.setItem('userEditorSettings', JSON.stringify(settings));
            } catch (error) {
                console.error('Erreur lors de la sauvegarde des settings:', error);
            }
        }, 100);
        
        return (): void => clearTimeout(timeoutId);
    }, [settings]);
    
    return (
        <div
            className="p-5 bg-secondary/30 backdrop-blur-sm border-l border-secondary/50 h-full overflow-y-auto shadow-inner">
            <div className="flex items-center gap-3 mb-8 pb-4 border-b border-secondary/50">
                <FontAwesomeIcon icon={faEye} className="text-primary w-6 h-6"/>
                <h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("userEditorSettings.displayPreferences")}</h3>
            </div>
            
            <div className="space-y-6">
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faTextHeight} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.textSize")}
                    </label>
                    <SelectBox
                        defaultValue={settings.zoomLevel.toString()}
                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => {
                            handleSettingChange('zoomLevel', Number(e.target.value))
                        }}
                        data={zoomOptions}
                    />
                </div>
                
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faIndent} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.indent")}
                    </label>
                    <div className="space-y-2">
                        <input
                            type="range"
                            min={0}
                            max={50}
                            step={5}
                            value={settings.indent}
                            onChange={(e) => handleSettingChange('indent', Number(e.target.value))}
                            className="w-full accent-primary"
                        />
                        <div className="flex justify-between text-sm text-muted">
                            <span>{t("userEditorSettings.indentNone")}</span>
                            <span className="text-text-primary font-medium">{settings.indent}px</span>
                            <span>{t("userEditorSettings.indentMax")}</span>
                        </div>
                    </div>
                </div>
                
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.lineHeight")}
                    </label>
                    <SelectBox
                        defaultValue={settings.lineHeight.toString()}
                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('lineHeight', Number(e.target.value))}
                        data={[
                            {value: "1.2", label: t("userEditorSettings.lineHeightCompact")},
                            {value: "1.5", label: t("userEditorSettings.lineHeightNormal")},
                            {value: "1.75", label: t("userEditorSettings.lineHeightSpaced")},
                            {value: "2", label: t("userEditorSettings.lineHeightDouble")}
                        ]}
                    />
                </div>
                
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faFont} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.fontFamily")}
                    </label>
                    <SelectBox
                        defaultValue={settings.fontFamily}
                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('fontFamily', e.target.value as EditorDisplaySettings['fontFamily'])}
                        data={[
                            {value: "lora", label: t("userEditorSettings.fontLora")},
                            {value: "serif", label: t("userEditorSettings.fontSerif")},
                            {value: "sans-serif", label: t("userEditorSettings.fontSansSerif")},
                            {value: "monospace", label: t("userEditorSettings.fontMonospace")}
                        ]}
                    />
                </div>
                
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.maxWidth")}
                    </label>
                    <div className="space-y-2">
                        <input
                            type="range"
                            min={600}
                            max={1200}
                            step={50}
                            value={settings.maxWidth}
                            onChange={(e) => handleSettingChange('maxWidth', Number(e.target.value))}
                            className="w-full accent-primary"
                        />
                        <div className="flex justify-between text-sm text-muted">
                            <span>{t("userEditorSettings.maxWidthNarrow")}</span>
                            <span className="text-text-primary font-medium">{settings.maxWidth}px</span>
                            <span>{t("userEditorSettings.maxWidthWide")}</span>
                        </div>
                    </div>
                </div>
                
                <div>
                    <label className="flex items-center gap-2 mb-2 text-text-primary">
                        <FontAwesomeIcon icon={faPalette} className="text-muted w-5 h-5"/>
                        {t("userEditorSettings.theme")}
                    </label>
                    <div className="grid grid-cols-3 gap-2">
                        {themeButtons.map((themeBtn) => (
                            <button
                                key={themeBtn.key}
                                onClick={() => handleSettingChange('theme', themeBtn.key)}
                                className={themeBtn.className}
                            >
                                {t(`userEditorSettings.themeOption.${themeBtn.key}`)}
                            </button>
                        ))}
                    </div>
                </div>
                
                <div>
                    <label className="flex items-center gap-2 cursor-pointer">
                        <input
                            type="checkbox"
                            checked={settings.focusMode}
                            onChange={(e) => handleSettingChange('focusMode', e.target.checked)}
                            className="w-4 h-4 accent-primary"
                        />
                        <span className="text-text-primary">{t("userEditorSettings.focusMode")}</span>
                    </label>
                </div>
                
                <div className="pt-6 border-t border-secondary/50">
                    <button
                        onClick={resetToDefaults}
                        className="w-full py-2.5 bg-secondary/50 border border-secondary/50 rounded-xl text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md font-medium"
                    >
                        {t("userEditorSettings.reset")}
                    </button>
                </div>
            </div>
        </div>
    );
}