src/components/SystemSettings.tsx

import React from 'react';
import { useOncologyStore } from '../store/useOncologyStore';
import { 
  Settings, 
  Trash2, 
  Download, 
  Moon, 
  Sun, 
  Monitor, 
  Database, 
  AlertTriangle,
  Activity
} from 'lucide-react';

const SystemSettings: React.FC = () => {
  const { 
    theme, 
    setTheme, 
    isToxicityModelEnabled, 
    toggleToxicityModel, 
    sessions,
    setView
  } = useOncologyStore();

  const exportVault = () => {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(sessions));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", `abyssinia_vault_${Date.now()}.json`);
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  };

  const clearVault = () => {
    if (window.confirm("CRITICAL: THIS WILL PERMANENTLY ERASE ALL CLINICAL SESSIONS. PROCEED?")) {
      localStorage.removeItem('abyssinia-v15-vault');
      window.location.reload();
    }
  };

  return (
    <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="pb-6 border-b border-slate-800">
        <div className="flex items-center gap-3">
          <Settings className="w-6 h-6 text-gemini-500" />
          <h2 className="text-2xl font-black italic uppercase tracking-tighter text-slate-100">
            System Configuration
          </h2>
        </div>
        <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-2">
          V15.0.0-STABLE / KERNEL: PRODUCTION / ARCH: x64
        </p>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Appearance Section */}
        <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
          <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
            <Monitor className="w-4 h-4" /> Visual Engine
          </h3>
          
          <div className="grid grid-cols-3 gap-2">
            {[
              { id: 'light', icon: Sun, label: 'Light' },
              { id: 'dark', icon: Moon, label: 'Dark' },
              { id: 'system', icon: Monitor, label: 'Auto' }
            ].map((t) => (
              <button
                key={t.id}
                onClick={() => setTheme(t.id as any)}
                className={`flex flex-col items-center gap-2 p-3 rounded-xl border transition-all ${
                  theme === t.id 
                    ? 'bg-gemini-500/10 border-gemini-500 text-gemini-500' 
                    : 'bg-slate-950/50 border-slate-800 text-slate-500 hover:border-slate-700'
                }`}
              >
                <t.icon className="w-5 h-5" />
                <span className="text-[10px] font-bold uppercase">{t.label}</span>
              </button>
            ))}
          </div>
        </section>

        {/* Model Configuration */}
        <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
          <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
            <Activity className="w-4 h-4" /> Predictive Analytics
          </h3>
          
          <div className="flex items-center justify-between p-4 bg-slate-950/50 border border-slate-800 rounded-xl">
            <div>
              <p className="text-xs font-bold text-slate-200 uppercase">Toxicity Forecasting</p>
              <p className="text-[10px] text-slate-500 mt-1">Pharmacological AE mapping engine</p>
            </div>
            <button 
              onClick={toggleToxicityModel}
              className={`w-12 h-6 rounded-full transition-colors relative ${
                isToxicityModelEnabled ? 'bg-gemini-500' : 'bg-slate-800'
              }`}
            >
              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${
                isToxicityModelEnabled ? 'left-7' : 'left-1'
              }`} />
            </button>
          </div>
        </section>
      </div>

      {/* Data Management Section */}
      <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
        <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
          <Database className="w-4 h-4" /> Clinical Vault Management
        </h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <button 
            onClick={exportVault}
            className="flex items-center justify-between p-4 bg-slate-950/50 border border-slate-800 hover:border-gemini-500/50 rounded-xl transition-all group"
          >
            <div className="text-left">
              <p className="text-xs font-bold text-slate-200 uppercase">Export Case History</p>
              <p className="text-[10px] text-slate-500 mt-1">Download encrypted JSON archive</p>
            </div>
            <Download className="w-5 h-5 text-slate-600 group-hover:text-gemini-500 transition-colors" />
          </button>

          <button 
            onClick={clearVault}
            className="flex items-center justify-between p-4 bg-red-500/5 border border-red-500/20 hover:bg-red-500/10 hover:border-red-500/50 rounded-xl transition-all group"
          >
            <div className="text-left">
              <p className="text-xs font-bold text-red-400 uppercase">Purge Local Vault</p>
              <p className="text-[10px] text-red-500/60 mt-1">Erase all records and signatures</p>
            </div>
            <Trash2 className="w-5 h-5 text-red-900 group-hover:text-red-500 transition-colors" />
          </button>
        </div>

        <div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl flex gap-4 items-start">
          <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
          <p className="text-[10px] text-amber-500/80 leading-relaxed uppercase font-medium">
            Note: All data is stored locally in this browser. Clearing the cache or using a 
            different workstation will result in the loss of case history unless a JSON 
            export is performed beforehand.
          </p>
        </div>
      </section>
    </div>
  );
};

export default SystemSettings;