import React, { useState } from 'react';
import { ArrowLeft, Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';

type SecuritySetting = {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  enabled: boolean;
};

const SecurityPrivacySettings = () => {
  const navigate = useNavigate();
  const { toast } = useToast();
  
  const [settings, setSettings] = useState<SecuritySetting[]>([
    {
      id: 'twoFactor',
      title: '2단계 인증',
      description: '로그인 시 추가 인증을 요구합니다.',
      icon: <Shield size={20} />,
      enabled: false,
    },
    {
      id: 'loginNotifications',
      title: '로그인 알림',
      description: '새로운 기기에서 로그인할 때 알림을 받습니다.',
      icon: <Lock size={20} />,
      enabled: true,
    },
    {
      id: 'biometricLogin',
      title: '생체 인증 로그인',
      description: '지문이나 얼굴 인식을 통해 로그인합니다.',
      icon: <Fingerprint size={20} />,
      enabled: false,
    },
    {
      id: 'dataEncryption',
      title: '데이터 암호화',
      description: '모든 개인 데이터를 암호화합니다.',
      icon: <Key size={20} />,
      enabled: true,
    },
    {
      id: 'sessionTimeout',
      title: '세션 자동 종료',
      description: '일정 시간 후 자동으로 로그아웃합니다.',
      icon: <Eye size={20} />,
      enabled: true,
    },
    {
      id: 'privacyMode',
      title: '개인정보 보호 모드',
      description: '타인이 거래 내역을 볼 수 없도록 합니다.',
      icon: <EyeOff size={20} />,
      enabled: false,
    },
    {
      id: 'dataDeletion',
      title: '계정 삭제 요청',
      description: '모든 개인정보와 데이터를 영구 삭제합니다.',
      icon: <UserX size={20} />,
      enabled: false,
    },
  ]);

  const handleToggle = (id: string) => {
    setSettings(
      settings.map((setting) =>
        setting.id === id ? { ...setting, enabled: !setting.enabled } : setting
      )
    );
    
    // 토스트 메시지로 상태 변경 알림
    const setting = settings.find(s => s.id === id);
    if (setting) {
      const newState = !setting.enabled;
      toast({
        title: `${setting.title}이(가) ${newState ? '활성화' : '비활성화'}되었습니다.`,
        description: newState 
          ? "보안 설정이 변경되었습니다." 
          : "보안 설정이 변경되었습니다.",
      });
    }
  };

  const saveSettings = () => {
    // 여기에 설정 저장 로직 추가
    toast({
      title: "보안 설정이 저장되었습니다.",
      description: "변경사항이 성공적으로 적용되었습니다.",
    });
    navigate('/settings');
  };

  return (
    <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
        <header className="py-8">
          <div className="flex items-center mb-6">
            <Button 
              variant="ghost" 
              size="icon" 
              onClick={() => navigate('/settings')}
              className="mr-2"
            >
              <ArrowLeft size={20} />
            </Button>
            <h1 className="text-2xl font-bold neuro-text">보안 및 개인정보</h1>
          </div>
        </header>
        
        {/* Security Settings */}
        <div className="space-y-6 neuro-flat p-6 mb-8">
          {settings.map((setting) => (
            <div key={setting.id} className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <div className="neuro-pressed p-3 rounded-full text-neuro-income">
                  {setting.icon}
                </div>
                <div>
                  <h3 className="font-medium">{setting.title}</h3>
                  <p className="text-xs text-gray-500">{setting.description}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id={`${setting.id}-switch`}
                  checked={setting.enabled}
                  onCheckedChange={() => handleToggle(setting.id)}
                  className="data-[state=checked]:bg-neuro-income"
                />
                <Label
                  htmlFor={`${setting.id}-switch`}
                  className="sr-only"
                >
                  {setting.title}
                </Label>
              </div>
            </div>
          ))}
        </div>

        {/* Save Button */}
        <div className="px-6">
          <Button 
            onClick={saveSettings}
            className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
          >
            저장하기
          </Button>
        </div>
      </div>
    </div>
  );
};

export default SecurityPrivacySettings;