

export function Settings() {
    const handleClean = async () => {
        try {
            await window.electronAPI.cleanSystem();
            alert('System cleaned!');
        } catch (e) {
            console.error(e);
        }
    };

    const handleDisableUpdates = async () => {
        try {
            await window.electronAPI.disableUpdates();
            alert('Updates disabled!');
        } catch (e) {
            console.error(e);
        }
    };

    return (
        <div className="p-8">
            <header className="mb-8">
                <h2 className="text-2xl font-semibold text-white">Stasis Field & Force</h2>
                <p className="text-neutral-400 mt-1">Configure system protections and enforcement policies.</p>
            </header>

            <div className="space-y-6 max-w-3xl">
                <Section title="The pnpm Force" description="Enforce strict package manager usage to save disk space.">
                    <Toggle label="Monitor Active Projects" description="Scan for package-lock.json creation in real-time" defaultChecked />
                    <Toggle label="Auto-Delete Illegal Lockfiles" description="Immediately remove npm/yarn lockfiles without warning" color="peer-checked:bg-red-600" />
                    <Toggle label="Shell Alias Injection" description="Inject 'npm install -> pnpm install' alias into .zshrc" defaultChecked />
                </Section>

                <Section title="Stasis Field" description="Prevent macOS from updating automatically.">
                    <div className="flex items-center justify-between">
                        <Toggle label="Disable Auto-Update Check" description="Prevent system from checking for new macOS versions" defaultChecked />
                        <button onClick={handleDisableUpdates} className="px-3 py-1 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded text-xs font-medium border border-red-600/20">Apply Block</button>
                    </div>
                    <Toggle label="Suppress System Badge" description="Hide the red notification badge on System Settings" />
                    <Toggle label="Ignore Major Version Updates" description="Block macOS Sequoia/Sonoma upgrades" defaultChecked />
                </Section>

                <Section title="Trash Compactor" description="System sanitation settings.">
                    <Toggle label="Force Empty Trash" description="Bypass 'File in Use' errors when emptying trash" />
                    <div className="flex items-center justify-between pt-2">
                        <span className="text-sm font-medium text-neutral-200">System Caches</span>
                        <button onClick={handleClean} className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 rounded text-sm text-white transition-colors">Clean Now</button>
                    </div>
                </Section>
            </div>
        </div>
    );
}

function Section({ title, description, children }: any) {
    return (
        <div className="bg-neutral-800/30 border border-neutral-700/50 rounded-xl p-6">
            <h3 className="text-lg font-medium text-white mb-1">{title}</h3>
            <p className="text-sm text-neutral-500 mb-6">{description}</p>
            <div className="space-y-5">
                {children}
            </div>
        </div>
    );
}

function Toggle({ label, description, defaultChecked, color = "peer-checked:bg-indigo-600" }: any) {
    return (
        <label className="flex items-start cursor-pointer group">
            <div className="relative flex items-center">
                <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
                <div className={`w-11 h-6 bg-neutral-700 peer-focus:outline-none rounded-full peer ${color} peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600`}></div>
            </div>
            <div className="ml-3">
                <span className="block text-sm font-medium text-neutral-200 group-hover:text-white transition-colors">{label}</span>
                {description && <span className="block text-xs text-neutral-500">{description}</span>}
            </div>
        </label>
    );
}
