import React, { useState } from 'react';
import { ArrowLeft, Bell, BellOff, MessageCircle, Mail, Shield, Volume2 } 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 NotificationSetting = {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  enabled: boolean;
};

const NotificationSettings = () => {
  const navigate = useNavigate();
  const { toast } = useToast();
  
  const [settings, setSettings] = useState<NotificationSetting[]>([
    {
      id: 'transactions',
      title: '거래 알림',
      description: '입금 및 출금 시 알림을 받습니다.',
      icon: <Bell size={20} />,
      enabled: true,
    },
    {
      id: 'budget',
      title: '예산 알림',
      description: '예산 초과 시 알림을 받습니다.',
      icon: <BellOff size={20} />,
      enabled: true,
    },
    {
      id: 'messages',
      title: '메시지 알림',
      description: '새로운 메시지가 있을 때 알림을 받습니다.',
      icon: <MessageCircle size={20} />,
      enabled: false,
    },
    {
      id: 'emails',
      title: '이메일 알림',
      description: '주요 업데이트 및 소식을 이메일로 받습니다.',
      icon: <Mail size={20} />,
      enabled: true,
    },
    {
      id: 'security',
      title: '보안 알림',
      description: '계정 로그인 및 중요 변경사항에 대한 알림을 받습니다.',
      icon: <Shield size={20} />,
      enabled: true,
    },
    {
      id: 'sound',
      title: '알림 소리',
      description: '알림 발생 시 소리를 재생합니다.',
      icon: <Volume2 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>
        
        {/* Notification 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 NotificationSettings;