import React from 'react';
import ConfigPanel from './ConfigPanel';
import { AppSettings, ModelConfig } from '../types';
import { X } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

interface SettingsDrawerProps {
    isOpen: boolean;
    onClose: () => void;
    settings: AppSettings;
    models: ModelConfig[];
    onSettingsChange: (newSettings: AppSettings) => void;
    onOpenSettings: () => void; // Keeps the "Full Settings" link working if needed, or we might redirect
    mode?: 'chat' | 'kb' | 'all';
}

export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
    isOpen,
    onClose,
    settings,
    models,
    onSettingsChange,
    onOpenSettings,
    mode = 'all'
}) => {
    const { t } = useLanguage();
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 overflow-hidden">
            <div className="absolute inset-0 bg-black bg-opacity-30 transition-opacity" onClick={onClose} />
            <div className="absolute inset-y-0 right-0 max-w-md w-full flex">
                <div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
                    <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                        <h2 className="text-lg font-medium text-gray-900">{t('systemConfiguration')}</h2>
                        <button
                            onClick={onClose}
                            className="text-gray-400 hover:text-gray-500 focus:outline-none"
                        >
                            <X size={24} />
                        </button>
                    </div>
                    <div className="flex-1 overflow-y-auto">
                        <ConfigPanel
                            settings={settings}
                            models={models}
                            onSettingsChange={onSettingsChange}
                            onOpenSettings={onOpenSettings}
                            mode={mode}
                        />
                    </div>
                    <div className="p-4 border-t border-gray-200 bg-gray-50">
                        <button
                            onClick={onClose}
                            className="w-full py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors shadow-sm"
                        >
                            {t('confirm')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};