import React, { useState } from 'react';
import { 
  ChevronLeft, 
  Bell, 
  Globe, 
  FileText, 
  Info, 
  ChevronRight,
  Bot
} from 'lucide-react';

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

const Settings: React.FC<SettingsProps> = ({ onBack }) => {
  const [notifications, setNotifications] = useState({
      push: true,
      aiMsg: true
  });

  const toggleNotify = (key: keyof typeof notifications) => {
      setNotifications(prev => ({ ...prev, [key]: !prev[key] }));
  };

  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">
            
            {/* Section 1: Notifications */}
            <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">通知推送</h3>
            <div className="bg-[#1C1F26]/60 border border-white/5 rounded-xl overflow-hidden mb-6">
                <div className="p-4 flex items-center justify-between border-b border-white/5">
                    <div className="flex items-center gap-3">
                        <Bell size={18} className="text-[#E2E8F0]" />
                        <span className="text-sm text-white">允许系统推送</span>
                    </div>
                    <button 
                        onClick={() => toggleNotify('push')}
                        className={`w-10 h-5 rounded-full transition-colors relative ${notifications.push ? 'bg-[#8B5CF6]' : 'bg-[#334155]'}`}
                    >
                        <div className={`absolute top-1 w-3 h-3 rounded-full bg-white transition-all ${notifications.push ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Bot size={18} className="text-[#E2E8F0]" />
                        <div>
                            <span className="text-sm text-white">AI 唤醒提醒</span>
                            <p className="text-[10px] text-[#64748B]">当角色主动发起对话时通知</p>
                        </div>
                    </div>
                    <button 
                        onClick={() => toggleNotify('aiMsg')}
                        disabled={!notifications.push}
                        className={`w-10 h-5 rounded-full transition-colors relative ${notifications.push ? (notifications.aiMsg ? 'bg-[#8B5CF6]' : 'bg-[#334155]') : 'bg-white/5 opacity-50'}`}
                    >
                        <div className={`absolute top-1 w-3 h-3 rounded-full bg-white transition-all ${notifications.aiMsg ? 'left-6' : 'left-1'}`}></div>
                    </button>
                </div>
            </div>

            {/* Section 2: App Preferences */}
            <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">通用偏好</h3>
            <div className="bg-[#1C1F26]/60 border border-white/5 rounded-xl overflow-hidden mb-6">
                <div className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Globe size={18} className="text-[#E2E8F0]" />
                        <span className="text-sm text-white">语言 / Language</span>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs text-[#94A3B8]">简体中文</span>
                        <ChevronRight size={14} className="text-[#64748B]" />
                    </div>
                </div>
            </div>

            {/* Section 4: About */}
            <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3 ml-1">关于</h3>
            <div className="bg-[#1C1F26]/60 border border-white/5 rounded-xl overflow-hidden mb-8">
                <button className="w-full p-4 flex items-center justify-between border-b border-white/5 active:bg-white/5 transition-colors">
                    <div className="flex items-center gap-3">
                        <FileText size={18} className="text-[#E2E8F0]" />
                        <span className="text-sm text-white">用户协议</span>
                    </div>
                    <ChevronRight size={14} className="text-[#64748B]" />
                </button>
                <button className="w-full p-4 flex items-center justify-between border-b border-white/5 active:bg-white/5 transition-colors">
                    <div className="flex items-center gap-3">
                        <Info size={18} className="text-[#E2E8F0]" />
                        <span className="text-sm text-white">隐私政策</span>
                    </div>
                    <ChevronRight size={14} className="text-[#64748B]" />
                </button>
                <div className="p-4 flex items-center justify-between">
                     <div className="flex items-center gap-3">
                        <div className="w-4 h-4 rounded-full bg-[#8B5CF6] flex items-center justify-center text-[8px] font-bold text-black">V</div>
                        <span className="text-sm text-white">当前版本</span>
                    </div>
                    <span className="text-xs text-[#94A3B8]">v2.4.0 (8849)</span>
                </div>
            </div>

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

export default Settings;