import React, { useState } from 'react';
import { 
  ChevronLeft, 
  ShieldCheck, 
  Lock, 
  EyeOff, 
  Fingerprint, 
  CloudOff, 
  Trash2, 
  AlertTriangle,
  History
} from 'lucide-react';

interface PrivacySafetyProps {
  onBack: () => void;
}

const PrivacySafety: React.FC<PrivacySafetyProps> = ({ onBack }) => {
  const [settings, setSettings] = useState({
      biometric: true,
      incognito: false,
      cloudSync: false,
      analytics: false,
      blurApp: true
  });

  const toggleSetting = (key: keyof typeof settings) => {
      setSettings(prev => ({ ...prev, [key]: !prev[key] }));
  };

  const handleWipeData = () => {
      if(window.confirm("警告：此操作不可逆！\n\n将清除本地所有聊天记录、自定义剧本及偏好设置。\n确定执行吗？")) {
          alert("正在执行安全擦除...");
          setTimeout(() => {
              alert("数据已销毁。");
              onBack();
          }, 1500);
      }
  };

  return (
    <div className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-full overflow-hidden animate-in slide-in-from-right duration-300">
        {/* Header */}
        <div className="relative z-20 pt-safe-top px-4 py-3 flex items-center justify-between border-b border-white/5 bg-[#0F1014]/80 backdrop-blur-md">
            <button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white active:scale-95 transition-transform">
                <ChevronLeft size={24} />
            </button>
            <h1 className="text-base font-bold text-white tracking-wider">隐私与安全</h1>
            <div className="w-8"></div>
        </div>

        <div className="flex-1 overflow-y-auto no-scrollbar p-5 pb-20">
            
            {/* Security Status Card */}
            <div className="bg-[#1C1F26]/40 border border-[#10B981]/20 rounded-2xl p-6 mb-8 flex flex-col items-center justify-center relative overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-b from-[#10B981]/5 to-transparent"></div>
                <div className="relative z-10 w-16 h-16 rounded-full bg-[#10B981]/10 flex items-center justify-center mb-3 shadow-[0_0_20px_rgba(16,185,129,0.2)]">
                    <ShieldCheck size={32} className="text-[#10B981]" />
                </div>
                <h2 className="text-lg font-bold text-white tracking-wide">环境安全</h2>
                <p className="text-xs text-[#94A3B8] mt-1">端对端加密已启用 • 本地存储</p>
            </div>

            {/* Settings Group 1: Access Control */}
            <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">访问控制</h3>
            <div className="space-y-3 mb-8">
                {/* Biometric */}
                <div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
                    <div className="flex items-center gap-3">
                        <div className="p-2 rounded-lg bg-[#8B5CF6]/10 text-[#8B5CF6]">
                            <Fingerprint size={20} />
                        </div>
                        <div>
                            <div className="text-sm font-bold text-white">生物识别锁定</div>
                            <div className="text-[10px] text-[#94A3B8]">使用 FaceID/指纹 解锁应用</div>
                        </div>
                    </div>
                    <button 
                        onClick={() => toggleSetting('biometric')}
                        className={`w-11 h-6 rounded-full transition-colors relative ${settings.biometric ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
                    >
                        <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.biometric ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>

                {/* App Switcher Blur */}
                <div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
                    <div className="flex items-center gap-3">
                        <div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
                            <EyeOff size={20} />
                        </div>
                        <div>
                            <div className="text-sm font-bold text-white">后台模糊</div>
                            <div className="text-[10px] text-[#94A3B8]">切换应用时模糊屏幕内容</div>
                        </div>
                    </div>
                    <button 
                        onClick={() => toggleSetting('blurApp')}
                        className={`w-11 h-6 rounded-full transition-colors relative ${settings.blurApp ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
                    >
                        <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.blurApp ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>
            </div>

            {/* Settings Group 2: Data Privacy */}
            <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">数据隐私</h3>
            <div className="space-y-3 mb-8">
                 {/* Cloud Sync */}
                 <div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
                    <div className="flex items-center gap-3">
                        <div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
                            <CloudOff size={20} />
                        </div>
                        <div>
                            <div className="text-sm font-bold text-white">云端同步</div>
                            <div className="text-[10px] text-[#94A3B8]">仅在本地存储聊天与设置</div>
                        </div>
                    </div>
                    <button 
                        onClick={() => toggleSetting('cloudSync')}
                        className={`w-11 h-6 rounded-full transition-colors relative ${settings.cloudSync ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
                    >
                        <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.cloudSync ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>

                {/* Incognito Mode */}
                <div className="bg-[#1C1F26]/60 p-4 rounded-xl flex items-center justify-between border border-white/5">
                    <div className="flex items-center gap-3">
                        <div className="p-2 rounded-lg bg-white/5 text-[#94A3B8]">
                            <Lock size={20} />
                        </div>
                        <div>
                            <div className="text-sm font-bold text-white">隐身伪装模式</div>
                            <div className="text-[10px] text-[#94A3B8]">更改应用图标与通知样式</div>
                        </div>
                    </div>
                    <button 
                        onClick={() => toggleSetting('incognito')}
                        className={`w-11 h-6 rounded-full transition-colors relative ${settings.incognito ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
                    >
                        <div className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${settings.incognito ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>
            </div>

            {/* Danger Zone */}
            <div className="mt-8 border-t border-white/5 pt-6">
                <button 
                    onClick={handleWipeData}
                    className="w-full group relative overflow-hidden rounded-xl border border-[#F43F5E]/30 bg-[#F43F5E]/5 p-4 flex items-center justify-between active:bg-[#F43F5E]/10 transition-all"
                >
                     <div className="flex items-center gap-3 z-10">
                        <div className="p-2 rounded-lg bg-[#F43F5E]/10 text-[#F43F5E]">
                            <AlertTriangle size={20} />
                        </div>
                        <div className="text-left">
                            <div className="text-sm font-bold text-[#F43F5E]">紧急数据销毁</div>
                            <div className="text-[10px] text-[#F43F5E]/70">不可恢复的操作</div>
                        </div>
                    </div>
                    <Trash2 size={18} className="text-[#F43F5E] z-10" />
                </button>
                
                <div className="mt-4 flex justify-center">
                    <p className="text-[10px] text-[#475569] font-mono">ID: 884-291-00X-SECURE</p>
                </div>
            </div>

        </div>
    </div>
  );
};

export default PrivacySafety;