
import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { ArrowRight, Wallet, PieChart, LineChart } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { toast } from "sonner";

interface WelcomeDialogProps {
  open: boolean;
  onClose: (dontShowAgain: boolean) => void;
}

const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
  const [dontShowAgain, setDontShowAgain] = useState(false);

  // 다이얼로그 열릴 때 localStorage 값 확인
  useEffect(() => {
    if (open) {
      try {
        const savedValue = localStorage.getItem('dontShowWelcome');
        console.log('WelcomeDialog - 저장된 dontShowWelcome 값:', savedValue);
        setDontShowAgain(savedValue === 'true');
      } catch (error) {
        console.error('WelcomeDialog - localStorage 읽기 오류:', error);
      }
    }
  }, [open]);

  const handleClose = () => {
    try {
      // 체크박스가 체크되어 있으면 localStorage에 저장
      if (dontShowAgain) {
        // 세션 스토리지와 로컬 스토리지 모두에 저장 (이중 보호)
        localStorage.setItem('dontShowWelcome', 'true');
        sessionStorage.setItem('dontShowWelcome', 'true');
        console.log('WelcomeDialog - dontShowWelcome 값이 true로 저장되었습니다');
        
        // 확인을 위한 즉시 재확인
        const savedValue = localStorage.getItem('dontShowWelcome');
        console.log('WelcomeDialog - 저장 직후 확인된 값:', savedValue);
        
        // 토스트 메시지로 사용자에게 알림
        toast.success('환영 메시지가 다시 표시되지 않도록 설정되었습니다');
      } else {
        // 체크 해제 시 명시적 'false' 저장
        localStorage.setItem('dontShowWelcome', 'false');
        sessionStorage.setItem('dontShowWelcome', 'false');
        console.log('WelcomeDialog - dontShowWelcome 값이 false로 저장되었습니다');
      }
    } catch (error) {
      console.error('WelcomeDialog - localStorage 저장 중 오류 발생:', error);
    }
    
    // 부모 컴포넌트에 상태 전달
    onClose(dontShowAgain);
  };

  return (
    <Dialog open={open} onOpenChange={(isOpen) => {
      if (!isOpen) handleClose();
    }}>
      <DialogContent className="w-[90%] max-w-sm mx-auto">
        <DialogHeader>
          <DialogTitle className="text-center text-2xl text-neuro-income mb-2">
            젤리의 적자탈출에 오신 것을 환영합니다!
          </DialogTitle>
          <DialogDescription className="text-center">
            매달 예산을 계획하고 지출을 관리하여 적자 없는 생활을 시작해보세요.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 my-2">
          <div className="flex items-start gap-3">
            <div className="bg-neuro-background p-2 rounded-full">
              <Wallet className="h-5 w-5 text-neuro-income" />
            </div>
            <div>
              <h3 className="font-medium">예산 설정하기</h3>
              <p className="text-sm text-gray-500">
                생활비, 식비 등 카테고리별 월간 예산을 설정하세요.
              </p>
            </div>
          </div>

          <Separator />

          <div className="flex items-start gap-3">
            <div className="bg-neuro-background p-2 rounded-full">
              <PieChart className="h-5 w-5 text-neuro-income" />
            </div>
            <div>
              <h3 className="font-medium">지출 기록하기</h3>
              <p className="text-sm text-gray-500">
                일상 속 지출을 간편하게 기록하고 카테고리별로 관리하세요.
              </p>
            </div>
          </div>

          <Separator />

          <div className="flex items-start gap-3">
            <div className="bg-neuro-background p-2 rounded-full">
              <LineChart className="h-5 w-5 text-neuro-income" />
            </div>
            <div>
              <h3 className="font-medium">적자 탈출하기</h3>
              <p className="text-sm text-gray-500">
                데이터를 분석하고 지출 패턴을 파악하여 효율적인 자산 관리를 시작하세요.
              </p>
            </div>
          </div>
        </div>

        <div className="flex items-center space-x-2 mt-4">
          <Checkbox 
            id="dont-show-again" 
            checked={dontShowAgain} 
            onCheckedChange={(checked) => setDontShowAgain(checked === true)}
            className="focus:outline-none focus:ring-0 focus:ring-offset-0"
          />
          <label
            htmlFor="dont-show-again"
            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
          >
            더 이상 보지 않기
          </label>
        </div>

        <DialogFooter className="sm:justify-center">
          <Button 
            className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0"
            onClick={handleClose}
          >
            시작하기 <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default WelcomeDialog;
