import React, { useState, useEffect } from 'react';
import { Save, FolderOpen, Lock, Upload, Download, Eye, EyeOff, Mail, FileText, ScrollText } from 'lucide-react';
import { save, open } from '@tauri-apps/plugin-dialog';
// Removed writeTextFile as we use invoke 'save_text_file'
import { invoke } from '@tauri-apps/api/core';
import { encryptData, decryptData } from '../utils/backup';
import EmailTemplateEditor from './EmailTemplateEditor';
import logo from '../assets/logo.png';

import { PromptTemplate, EmailTemplate } from '../App';

interface SettingsProps {
    apiKey: string;
    productId: string;
    savePath: string;
    prompts: PromptTemplate[];
    emailTemplates: EmailTemplate[];
    smtpConfig: SmtpConfig;
    azureConfig: AzureConfig;
    onSave: (
        apiKey: string,
        productId: string,
        prompts: PromptTemplate[],
        savePath: string,
        smtp: SmtpConfig,
        azure: AzureConfig,
        emailTemplates: EmailTemplate[]
    ) => void;
    onClose: () => void;
}

export interface SmtpConfig {
    host: string;
    port: string;
    user: string;
    pass: string;
    sender: string;
    senderName: string;
}

export interface AzureConfig {
    clientId: string;
    tenantId: string;
}

const Settings: React.FC<SettingsProps> = ({ apiKey, productId, prompts, savePath, onSave, onClose, ...props }) => {
    const [localApiKey, setLocalApiKey] = useState(apiKey);
    const [localProductId, setLocalProductId] = useState(productId);
    const [localSavePath, setLocalSavePath] = useState(savePath);

    const [localPrompts, setLocalPrompts] = useState<PromptTemplate[]>(prompts);
    const [localEmailTemplates, setLocalEmailTemplates] = useState<EmailTemplate[]>(props.emailTemplates); // New state
    const [localSmtp, setLocalSmtp] = useState<SmtpConfig>(props.smtpConfig);
    const [localAzure, setLocalAzure] = useState<AzureConfig>(props.azureConfig);
    const [statusIdx, setStatusIdx] = useState<string | null>(null);

    // Backup & Restore State
    const [backupPassword, setBackupPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const [isImportModalOpen, setIsImportModalOpen] = useState(false);
    const [importFileContent, setImportFileContent] = useState<string | null>(null);

    // Email Template Editor State
    const [editingTemplate, setEditingTemplate] = useState<EmailTemplate | null>(null);
    const [isEmailEditorOpen, setIsEmailEditorOpen] = useState(false);

    const [activeTab, setActiveTab] = useState<'general' | 'prompts' | 'email' | 'backup' | 'logs'>('general');
    const [logs, setLogs] = useState<string>('Loading logs...');

    useEffect(() => {
        if (activeTab === 'logs') {
            loadLogs();
        }
    }, [activeTab]);

    const loadLogs = async () => {
        try {
            const content = await invoke<string>('read_log_file');
            setLogs(content);
        } catch (e) {
            setLogs(`Failed to load logs: ${e}`);
        }
    };

    const handleSaveLogs = async () => {
        try {
            const filePath = await save({
                defaultPath: `hearbit_logs_${new Date().toISOString().slice(0, 10)}.log`,
                filters: [{
                    name: 'Log File',
                    extensions: ['log', 'txt']
                }]
            });

            if (filePath) {
                await invoke('save_text_file', { path: filePath, content: logs });
                setStatusIdx(`Logs exported to: ${filePath}`);
            }
        } catch (e) {
            console.error(e);
            setStatusIdx(`Failed to export logs: ${e}`);
        }
    };

    const handlePromptChange = (id: string, field: 'name' | 'content', value: string) => {
        setLocalPrompts(localPrompts.map(p => p.id === id ? { ...p, [field]: value } : p));
    };

    const addPrompt = () => {
        setLocalPrompts([...localPrompts, { id: Date.now().toString(), name: 'New Prompt', content: '' }]);
    };

    const removePrompt = (id: string) => {
        setLocalPrompts(localPrompts.filter(p => p.id !== id));
    };

    const handleSaveEmailTemplate = (template: EmailTemplate) => {
        const exists = localEmailTemplates.find(t => t.id === template.id);
        if (exists) {
            setLocalEmailTemplates(localEmailTemplates.map(t => t.id === template.id ? template : t));
        } else {
            setLocalEmailTemplates([...localEmailTemplates, template]);
        }
    };

    const openEmailEditor = (template: EmailTemplate | null) => {
        setEditingTemplate(template);
        setIsEmailEditorOpen(true);
    };

    const removeEmailTemplate = (id: string) => {
        setLocalEmailTemplates(localEmailTemplates.filter(t => t.id !== id));
    };

    const handleSave = () => {
        onSave(localApiKey, localProductId, localPrompts, localSavePath, localSmtp, localAzure, localEmailTemplates);
        onClose();
    };

    const handleSelectFolder = async () => {
        try {
            const selected = await open({
                directory: true,
                multiple: false,
                defaultPath: localSavePath || undefined,
            });
            if (selected && typeof selected === 'string') {
                setLocalSavePath(selected);
            }
        } catch (e) {
            console.error("Failed to open directory picker", e);
            setStatusIdx('Error: Failed to open directory picker.');
        }
    };

    const handleExport = async () => {
        if (!backupPassword) {
            setStatusIdx('Error: Password required to encrypt backup.');
            return;
        }
        try {
            const data = {
                apiKey: localApiKey,
                productId: localProductId,
                prompts: localPrompts,
                savePath: localSavePath,
                smtp: localSmtp,
                azure: localAzure
            };
            const encrypted = await encryptData(data, backupPassword);

            const filePath = await save({
                defaultPath: `hearbit_backup_${new Date().toISOString().slice(0, 10)}.conf`,
                filters: [{
                    name: 'Hearbit Config',
                    extensions: ['conf']
                }]
            });

            if (filePath) {
                // Use backend invoke to write file (bypasses fs scope issues)
                await invoke('save_text_file', { path: filePath, content: encrypted });
                setStatusIdx(`Configuration exported to: ${filePath}`);
            }
        } catch (e) {
            console.error(e);
            setStatusIdx(`Export failed: ${e}`);
        }
    };

    const triggerImport = () => {
        document.getElementById('import-file-input')?.click();
    };

    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (event) => {
            if (event.target?.result) {
                setImportFileContent(event.target.result as string);
                setIsImportModalOpen(true);
                setBackupPassword('');
            }
        };
        reader.readAsText(file);
        e.target.value = '';
    };

    const confirmImport = async () => {
        if (!backupPassword) {
            setStatusIdx('Error: Password required to decrypt.');
            return;
        }
        if (!importFileContent) return;

        try {
            const data = await decryptData(importFileContent, backupPassword);
            if (data.apiKey) setLocalApiKey(data.apiKey);
            if (data.productId) setLocalProductId(data.productId);

            if (data.prompts) setLocalPrompts(data.prompts);
            if (data.emailTemplates) setLocalEmailTemplates(data.emailTemplates);
            if (data.savePath) setLocalSavePath(data.savePath);
            if (data.smtp) setLocalSmtp(data.smtp);
            if (data.azure) setLocalAzure(data.azure);

            setStatusIdx('Configuration imported! Click Save to apply.');
            setIsImportModalOpen(false);
            setImportFileContent(null);
        } catch (e) {
            console.error(e);
            setStatusIdx('Import failed: Wrong password or corrupted file.');
        }
    };

    const handleCreateDevice = async () => {
        try {
            setStatusIdx('Creating Hearbit Audio device...');
            await invoke('create_hearbit_audio_device');
            setStatusIdx('Success! "Hearbit Audio" device created.');
        } catch (e) {
            console.error(e);
            setStatusIdx(`Error: ${e}`);
        }
    };

    const tabs = [
        { id: 'general', label: 'General', icon: <Save size={14} /> },
        { id: 'prompts', label: 'Prompts', icon: <FileText size={14} /> },
        { id: 'email', label: 'Email', icon: <Mail size={14} /> },
        { id: 'backup', label: 'Backup', icon: <Lock size={14} /> },
        { id: 'logs', label: 'Logs', icon: <ScrollText size={14} /> },
    ] as const;

    return (
        <div className="flex flex-col h-full bg-background font-mono text-sm relative">
            {/* Import Password Modal */}
            {isImportModalOpen && (
                <div className="absolute inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
                    <div className="bg-background border border-border rounded-lg shadow-xl p-6 w-full max-w-sm space-y-4">
                        <div className="flex items-center gap-2 text-foreground font-semibold">
                            <Lock size={16} /> Import Configuration
                        </div>
                        <p className="text-muted-foreground text-xs">
                            Enter the password used to encrypt this backup file.
                        </p>
                        <div className="relative">
                            <input
                                type={showPassword ? "text" : "password"}
                                value={backupPassword}
                                onChange={(e) => setBackupPassword(e.target.value)}
                                placeholder="Backup Password"
                                className="w-full p-2 pr-8 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none"
                            />
                            <button
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-2 top-2.5 text-muted-foreground hover:text-foreground"
                            >
                                {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
                            </button>
                        </div>
                        <div className="flex justify-end gap-2 pt-2">
                            <button
                                onClick={() => setIsImportModalOpen(false)}
                                className="px-3 py-1.5 text-xs font-medium rounded border border-border hover:bg-secondary text-foreground transition-colors"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={confirmImport}
                                disabled={!backupPassword}
                                className="px-3 py-1.5 text-xs font-medium rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
                            >
                                Decrypt & Import
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* Email Template Editor Modal */}
            <EmailTemplateEditor
                isOpen={isEmailEditorOpen}
                onClose={() => setIsEmailEditorOpen(false)}
                template={editingTemplate}
                onSave={handleSaveEmailTemplate}
                smtpConfig={localSmtp}
                addToast={(msg, type) => setStatusIdx(`${type === 'error' ? 'Error' : 'Success'}: ${msg}`)}
            />

            <div className="flex flex-col border-b border-border/40 bg-secondary/10">
                <div className="p-4 flex justify-between items-center">
                    <h2 className="text-lg font-semibold tracking-tight">Settings</h2>
                    <button onClick={handleSave} className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded font-semibold hover:bg-primary/90 transition-all active:scale-95 text-xs">
                        <Save size={16} /> Save Changes
                    </button>
                </div>

                {/* Tabs */}
                <div className="flex px-4 gap-2">
                    {tabs.map(tab => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors flex items-center gap-2 ${activeTab === tab.id ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
                        >
                            {tab.icon} {tab.label}
                        </button>
                    ))}
                </div>
            </div>

            <div className="flex-1 overflow-y-auto p-6">
                {activeTab === 'general' && (
                    <div className="space-y-6 max-w-2xl">
                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">Application Keys</h3>
                            <div>
                                <label htmlFor="apiKey" className="block text-sm font-medium mb-1 text-foreground">API Key</label>
                                <input
                                    id="apiKey"
                                    type="password"
                                    value={localApiKey}
                                    onChange={(e) => setLocalApiKey(e.target.value)}
                                    className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                />
                            </div>
                            <div>
                                <label htmlFor="productId" className="block text-sm font-medium mb-1 text-foreground">Product ID</label>
                                <input
                                    id="productId"
                                    type="text"
                                    value={localProductId}
                                    onChange={(e) => setLocalProductId(e.target.value)}
                                    className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                />
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">Storage</h3>
                            <div>
                                <label htmlFor="savePath" className="block text-sm font-medium mb-1 text-foreground">Custom Recordings Folder</label>
                                <div className="flex gap-2">
                                    <input
                                        id="savePath"
                                        type="text"
                                        value={localSavePath}
                                        onChange={(e) => setLocalSavePath(e.target.value)}
                                        placeholder="/Users/username/Desktop/Recordings"
                                        className="flex-1 p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                    />
                                    <button
                                        onClick={handleSelectFolder}
                                        className="p-2 aspect-square flex items-center justify-center bg-secondary hover:bg-secondary/80 border border-border rounded text-foreground transition-all active:scale-95"
                                        title="Pick Folder"
                                    >
                                        <FolderOpen size={16} />
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">📸 Branding</h3>
                            <div className="p-4 bg-secondary/20 rounded border border-border/50">
                                <div className="mb-3">
                                    <div className="font-medium text-sm mb-2">Custom Logo</div>
                                    <div className="text-xs text-muted-foreground mb-3">Upload your company logo to replace the default Livtec branding throughout the app.</div>
                                </div>

                                {/* Logo Preview */}
                                <div className="flex items-center gap-4 mb-3">
                                    <div className="w-20 h-20 bg-background border border-border rounded flex items-center justify-center overflow-hidden">
                                        <img
                                            src={localStorage.getItem('customLogo') || logo}
                                            alt="Logo Preview"
                                            className="max-w-full max-h-full object-contain"
                                        />
                                    </div>
                                    <div className="flex-1">
                                        <button
                                            onClick={async () => {
                                                try {
                                                    const selected = await open({
                                                        filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'svg'] }]
                                                    });
                                                    if (selected && typeof selected === 'string') {
                                                        const dataUrl = await invoke<string>('read_image_as_base64', { filePath: selected });
                                                        localStorage.setItem('customLogo', dataUrl);
                                                        setStatusIdx('Logo uploaded! Save settings to apply.');
                                                        // Force re-render
                                                        window.dispatchEvent(new Event('storage'));
                                                    }
                                                } catch (e) {
                                                    setStatusIdx(`Logo upload failed: ${e}`);
                                                }
                                            }}
                                            className="bg-secondary hover:bg-secondary/80 text-xs px-3 py-2 rounded border border-border transition-all flex items-center gap-2"
                                        >
                                            <Upload size={14} /> Upload Logo
                                        </button>
                                        <button
                                            onClick={() => {
                                                localStorage.removeItem('customLogo');
                                                setStatusIdx('Logo reset to default. Save to apply.');
                                                window.dispatchEvent(new Event('storage'));
                                            }}
                                            className="mt-2 bg-secondary hover:bg-secondary/80 text-xs px-3 py-2 rounded border border-border transition-all text-muted-foreground"
                                        >
                                            Reset to Default
                                        </button>
                                    </div>
                                </div>
                                <p className="text-[10px] text-muted-foreground">Supported: PNG, JPG, SVG. Recommended: Square format, transparent background.</p>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">System Intergration</h3>
                            <div className="flex items-center justify-between p-4 bg-secondary/20 rounded border border-border/50">
                                <div>
                                    <div className="font-medium text-sm">Hearbit Audio Device</div>
                                    <div className="text-xs text-muted-foreground">Required for recording system audio (Teams, Zoom, etc.)</div>
                                </div>
                                <button
                                    onClick={handleCreateDevice}
                                    className="bg-secondary hover:bg-secondary/80 text-xs px-3 py-2 rounded border border-border transition-all active:scale-95 flex items-center gap-2"
                                >
                                    <span>🪄</span> Create / Repair
                                </button>
                            </div>
                        </div>
                    </div>
                )}

                {activeTab === 'prompts' && (
                    <div className="space-y-4 max-w-3xl">
                        <div className="flex justify-between items-center border-b border-border pb-2">
                            <h3 className="text-foreground font-semibold">AI Prompts</h3>
                            <button onClick={addPrompt} className="text-xs bg-primary text-primary-foreground px-3 py-1.5 rounded hover:bg-primary/90 transition-all active:scale-95">
                                + Add Prompt
                            </button>
                        </div>
                        <div className="grid gap-4">
                            {localPrompts.map((prompt) => (
                                <div key={prompt.id} className="space-y-2 p-4 bg-secondary/10 rounded border border-border/50 relative group">
                                    <button
                                        onClick={() => removePrompt(prompt.id)}
                                        className="absolute top-2 right-2 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity text-xs flex items-center gap-1"
                                    >
                                        <EyeOff size={14} /> Remove
                                    </button>
                                    <input
                                        type="text"
                                        value={prompt.name}
                                        onChange={(e) => handlePromptChange(prompt.id, 'name', e.target.value)}
                                        className="w-full p-1 bg-transparent border-b border-border/50 focus:border-primary outline-none font-semibold text-sm"
                                        placeholder="Prompt Name"
                                    />
                                    <textarea
                                        value={prompt.content}
                                        onChange={(e) => handlePromptChange(prompt.id, 'content', e.target.value)}
                                        className="w-full p-2 bg-secondary/50 rounded border border-border/30 focus:border-primary outline-none text-xs resize-y min-h-[100px] font-mono"
                                        placeholder="Prompt Content"
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {activeTab === 'email' && (
                    <div className="space-y-8 max-w-2xl">
                        <div className="space-y-4">
                            <div className="flex justify-between items-center border-b border-border pb-2">
                                <h3 className="text-foreground font-semibold">Email Templates</h3>
                                <button
                                    onClick={() => openEmailEditor(null)}
                                    className="text-xs bg-primary text-primary-foreground px-3 py-1.5 rounded hover:bg-primary/90 transition-all active:scale-95"
                                >
                                    + Add Template
                                </button>
                            </div>

                            <div className="space-y-2">
                                {localEmailTemplates.map((template) => (
                                    <div key={template.id} className="flex justify-between items-center p-4 bg-secondary/10 rounded border border-border/50 group hover:border-border/80 transition-colors">
                                        <div className="flex-1 min-w-0 pr-4">
                                            <div className="font-semibold text-sm truncate">{template.name}</div>
                                            <div className="text-xs text-muted-foreground truncate">{template.subject}</div>
                                        </div>
                                        <div className="flex gap-2 shrink-0">
                                            <button
                                                onClick={() => openEmailEditor(template)}
                                                className="px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10 rounded transition-colors"
                                            >
                                                Edit
                                            </button>
                                            <button
                                                onClick={() => removeEmailTemplate(template.id)}
                                                className="px-2 py-1 text-xs font-medium text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
                                            >
                                                Remove
                                            </button>
                                        </div>
                                    </div>
                                ))}
                                {localEmailTemplates.length === 0 && (
                                    <div className="text-center p-8 text-muted-foreground text-xs italic border border-dashed border-border rounded">
                                        No templates created yet.
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">SMTP Configuration</h3>
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium mb-1 text-foreground">SMTP Host</label>
                                    <input
                                        type="text"
                                        value={localSmtp.host}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, host: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                        placeholder="smtp.office365.com"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium mb-1 text-foreground">Port</label>
                                    <input
                                        type="text"
                                        value={localSmtp.port}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, port: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                        placeholder="587"
                                    />
                                </div>
                                <div className="col-span-2">
                                    <label className="block text-sm font-medium mb-1 text-foreground">Sender Email</label>
                                    <input
                                        type="text"
                                        value={localSmtp.sender}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, sender: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                        placeholder="you@company.com"
                                    />
                                </div>
                                <div className="col-span-2">
                                    <label className="block text-sm font-medium mb-1 text-foreground">Sender Name (Optional)</label>
                                    <input
                                        type="text"
                                        value={localSmtp.senderName}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, senderName: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                        placeholder="Hearbit Assistant"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium mb-1 text-foreground">Username</label>
                                    <input
                                        type="text"
                                        value={localSmtp.user}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, user: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium mb-1 text-foreground">Password</label>
                                    <input
                                        type="password"
                                        value={localSmtp.pass}
                                        onChange={(e) => setLocalSmtp({ ...localSmtp, pass: e.target.value })}
                                        className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                    />
                                </div>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">Microsoft 365 (Azure AD)</h3>
                            <p className="text-xs text-muted-foreground">Optional configuration for advanced MS Graph integrations.</p>
                            <div>
                                <label className="block text-sm font-medium mb-1 text-foreground">Client ID</label>
                                <input
                                    type="text"
                                    value={localAzure.clientId}
                                    onChange={(e) => setLocalAzure({ ...localAzure, clientId: e.target.value })}
                                    className="w-full p-2 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none font-mono text-sm"
                                    placeholder="Application (client) ID"
                                />
                            </div>
                        </div>
                    </div>
                )}

                {activeTab === 'backup' && (
                    <div className="space-y-6 max-w-xl">
                        <div className="space-y-4">
                            <h3 className="text-foreground font-semibold border-b border-border pb-2">Configuration Backup</h3>
                            <p className="text-xs text-muted-foreground">
                                Securely export your settings, including API keys and prompts. You must set a password to encrypt the backup file.
                            </p>

                            <div className="relative">
                                <label className="block text-xs font-semibold text-muted-foreground mb-1 uppercase tracking-wide">
                                    Encryption Password
                                </label>
                                <input
                                    type={showPassword ? "text" : "password"}
                                    value={backupPassword}
                                    onChange={(e) => setBackupPassword(e.target.value)}
                                    placeholder="Enter a strong password"
                                    className="w-full p-2 pr-8 rounded border border-border bg-secondary text-foreground focus:ring-2 focus:ring-primary outline-none text-sm"
                                />
                                <button
                                    onClick={() => setShowPassword(!showPassword)}
                                    className="absolute right-2 top-8 text-muted-foreground hover:text-foreground"
                                >
                                    {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
                                </button>
                            </div>

                            <div className="flex gap-4 pt-2">
                                <button
                                    onClick={handleExport}
                                    className="flex-1 flex items-center justify-center gap-2 py-3 px-4 rounded-lg bg-secondary hover:bg-secondary/80 border border-border text-foreground transition-all font-semibold active:scale-95"
                                >
                                    <Download size={18} /> Export Config
                                </button>
                                <button
                                    onClick={triggerImport}
                                    className="flex-1 flex items-center justify-center gap-2 py-3 px-4 rounded-lg bg-secondary hover:bg-secondary/80 border border-border text-foreground transition-all font-semibold active:scale-95"
                                >
                                    <Upload size={18} /> Import Config
                                </button>
                                <input
                                    type="file"
                                    id="import-file-input"
                                    accept=".conf"
                                    className="hidden"
                                    onChange={handleFileSelect}
                                />
                            </div>
                        </div>
                    </div>
                )}

                {activeTab === 'logs' && (
                    <div className="space-y-4 max-w-4xl h-full flex flex-col">
                        <div className="flex justify-between items-center border-b border-border pb-2">
                            <h3 className="text-foreground font-semibold">Application Logs</h3>
                            <div className="flex gap-2">
                                <button
                                    onClick={handleSaveLogs}
                                    className="text-xs bg-secondary hover:bg-secondary/80 px-2 py-1 rounded border border-border transition-all active:scale-95 flex items-center gap-1"
                                >
                                    <Download size={12} /> Export Logs
                                </button>
                                <button
                                    onClick={loadLogs}
                                    className="text-xs bg-secondary hover:bg-secondary/80 px-2 py-1 rounded border border-border transition-all active:scale-95"
                                >
                                    Refresh Logs
                                </button>
                            </div>
                        </div>
                        <div className="flex-1 bg-black text-white p-4 rounded font-mono text-xs overflow-auto whitespace-pre-wrap leading-relaxed shadow-inner">
                            {logs}
                        </div>
                    </div>
                )}
            </div>

            {
                statusIdx && (
                    <div className={`p-2 text-xs text-center border-t ${statusIdx.includes('Error') || statusIdx.includes('failed') ? 'bg-destructive/10 border-destructive text-destructive' : 'bg-green-500/10 border-green-500 text-green-500'}`}>
                        {statusIdx}
                    </div>
                )
            }
        </div >
    );
};

export default Settings;
