import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  Settings, 
  X, 
  Plus,
  Check,
  ChevronLeft, 
  ChevronRight, 
  Sparkles, 
  Star,
  BrainCircuit,
  Type,
  Maximize,
  Layout,
  Calendar as CalendarIcon,
  Edit2,
  Trash2,
  Quote,
  Lightbulb,
  PlusCircle,
  Users
} from 'lucide-react';

const App = () => {
  const apiKey = ""; // Gemini API Key

  // --- Character Definitions ---
  const CHARACTERS = {
    cat: {
      id: 'cat',
      name: '치즈냥이',
      render: () => (
        <svg viewBox="0 0 512 512" className="w-full h-auto">
          <path fill="#333" d="M256 420 C150 420 120 320 160 250 L180 120 C190 80 230 80 250 120 L256 140 L262 120 C282 80 322 80 332 120 L352 250 C392 320 362 420 256 420 Z" />
          <ellipse cx="210" cy="270" rx="40" ry="50" fill="#f4b942"/><ellipse cx="210" cy="270" rx="15" ry="30" fill="#333"/>
          <ellipse cx="302" cy="270" rx="40" ry="50" fill="#f4b942"/><ellipse cx="302" cy="270" rx="15" ry="30" fill="#333"/>
          <circle cx="256" cy="320" r="8" fill="#FFB6C1" /><path d="M236 340 Q256 360 276 340" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round" />
        </svg>
      )
    },
    fox_code: {
      id: 'fox_code',
      name: '강아지', // '미니 여우'에서 '강아지'로 명칭 변경
      render: () => (
        <svg viewBox="0 0 1024 1024" className="w-full h-auto">
          <path fill="#e6e6e6" d="M210 470 C210 360, 260 300, 350 290 L350 240 C350 200, 380 180, 420 180 L580 180 C620 180, 650 210, 650 250 L650 290 C760 320, 820 420, 830 520 C835 580, 800 620, 740 630 L420 630 C320 630, 260 600, 240 540 C230 520, 230 500, 230 480 L230 470 C220 470, 215 470, 210 470 Z"/>
          <path fill="#e6e6e6" d="M170 450 C170 390, 210 360, 260 360 C300 360, 320 380, 330 410 L330 500 C310 530, 270 540, 220 520 C190 500, 170 480, 170 450 Z"/>
          <path fill="#333" d="M600 180 C700 180, 740 250, 740 320 C740 390, 700 420, 650 420 C610 420, 590 380, 590 320 C590 250, 600 180, 600 180 Z"/>
          <path fill="#333" d="M780 520 C880 500, 920 580, 880 650 C840 700, 740 690, 730 640 C720 600, 740 540, 780 520 Z"/>
          <circle cx="190" cy="430" r="35" fill="#000"/>
          <rect x="420" y="380" width="18" height="36" rx="9" fill="#000"/>
          <rect x="480" y="380" width="18" height="36" rx="9" fill="#000"/>
          <path fill="#e6e6e6" d="M380 630 C380 600, 410 590, 440 590 C470 590, 500 600, 500 630 C500 660, 470 680, 440 680 C410 680, 380 660, 380 630 Z"/>
        </svg>
      )
    },
    rabbit: {
      id: 'rabbit',
      name: '검은 토끼',
      render: () => (
        <svg viewBox="0 0 600 400" className="w-full h-auto">
          <path fill="#2f3742" d="M260 325 C240 325, 220 320, 210 305 C200 290, 198 270, 200 255 C202 235, 210 220, 225 210 L225 155 C215 135, 200 110, 190 90 C180 70, 180 50, 195 45 C210 40, 235 65, 245 95 C250 110, 255 130, 260 150 L265 210 L285 210 L290 150 C295 130, 300 110, 305 95 C315 65, 340 40, 355 45 C370 50, 370 70, 360 90 C350 110, 335 135, 325 155 L325 210 C340 220, 350 235, 352 255 C354 275, 350 295, 340 305 C330 320, 310 325, 290 325 Z"/>
          <circle cx="240" cy="255" r="3" fill="white" />
          <circle cx="310" cy="255" r="3" fill="white" />
        </svg>
      )
    },
    fox_head: {
      id: 'fox_head',
      name: '여우 얼굴',
      render: () => (
        <div className="w-full h-auto p-4 flex justify-center">
           <img 
             src="https://raw.githubusercontent.com/logoyogo/logoyogo.github.io/master/assets/images/fox-face.png" 
             alt="Fox Face" 
             className="w-full h-auto object-contain"
             onError={(e) => {
               // Fallback if image fails - Use a simplified SVG Fox Face
               e.target.style.display = 'none';
               e.target.parentNode.innerHTML = `
                 <svg viewBox="0 0 512 512" class="w-full h-auto">
                   <path fill="#f26522" d="M256 460L100 220 C80 180 120 100 180 120 L256 180 L332 120 C392 100 432 180 412 220Z" />
                   <path fill="white" d="M256 460L150 300 C150 300 200 350 256 350 C312 350 362 300 362 300Z" />
                   <circle cx="210" cy="280" r="15" fill="black" />
                   <circle cx="302" cy="280" r="15" fill="black" />
                   <circle cx="256" cy="380" r="10" fill="black" />
                 </svg>
               `;
             }}
           />
        </div>
      )
    }
  };

  // --- Animalese Voice Logic ---
  const audioCtx = useRef(null);
  const playAnimalese = (text) => {
    if (!text || typeof window === 'undefined') return;
    if (!audioCtx.current) {
      audioCtx.current = new (window.AudioContext || window.webkitAudioContext)();
    }
    const ctx = audioCtx.current;
    const charDelay = 0.05; 
    text.split('').forEach((char, i) => {
      if (char === ' ' || char === '\n') return;
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      const code = char.charCodeAt(0);
      const freq = 400 + (code % 600); 
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(freq, ctx.currentTime + i * charDelay);
      gain.gain.setValueAtTime(0, ctx.currentTime + i * charDelay);
      gain.gain.linearRampToValueAtTime(0.06, ctx.currentTime + i * charDelay + 0.01);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * charDelay + charDelay);
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start(ctx.currentTime + i * charDelay);
      osc.stop(ctx.currentTime + i * charDelay + charDelay);
    });
  };

  // --- Constants ---
  const CATEGORY_COLORS = [
    { id: 'red', hex: '#FF5F5F', label: '긴급' },
    { id: 'blue', hex: '#5EA9FF', label: '업무' },
    { id: 'green', hex: '#66D19E', label: '일상' },
    { id: 'purple', hex: '#B388FF', label: '약속' },
    { id: 'orange', hex: '#FFB347', label: '학습' }
  ];

  const FONT_OPTIONS = [
    { id: 'Pretendard', name: '기본 고딕' },
    { id: 'Nanum Myeongjo', name: '나눔 명조' },
    { id: 'Gaegu', name: '개구쟁이체' }
  ];

  // --- State Management ---
  const [tasks, setTasks] = useState([
    { id: 1, title: '디자인 시스템 검토', category: 'blue', time: '오전 10:00', date: new Date().toISOString().split('T')[0], memo: '전체적인 컬러 팔레트 수정 필요', completed: false, showMemo: false, important: true },
    { id: 2, title: '친구와 저녁 식사', category: 'purple', time: '오후 07:00', date: new Date().toISOString().split('T')[0], memo: '맛있는 파스타를 먹기로 함', completed: false, showMemo: false, important: false },
  ]);
  
  const [displayMessage, setDisplayMessage] = useState('무슨 일을 도와줄까옹? 오늘 할 일을 확인해봐냥!');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('tasks');
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [viewDate, setViewDate] = useState(new Date());
  
  // Customization Settings
  const [catScale, setCatScale] = useState(1); 
  const [uiScale, setUiScale] = useState(1); 
  const [fontFamily, setFontFamily] = useState('Pretendard'); 
  const [activeChar, setActiveChar] = useState('cat');
  const [position, setPosition] = useState({ x: 50, y: 150 });
  const [isDragging, setIsDragging] = useState(false);
  const [hasMoved, setHasMoved] = useState(false); 
  
  const [aiAnalysis, setAiAnalysis] = useState(null);
  const [isAiLoading, setIsAiLoading] = useState(false);
  const [aiRecommendation, setAiRecommendation] = useState(null);
  const [isRecLoading, setIsRecLoading] = useState(false);

  // Task Form State
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [editingTaskId, setEditingTaskId] = useState(null);
  const [formTitle, setFormTitle] = useState('');
  const [formCategory, setFormCategory] = useState('blue');
  const [isPM, setIsPM] = useState(false);
  const [hour, setHour] = useState(12);
  const [minute, setMinute] = useState(0);

  const dragOffset = useRef({ x: 0, y: 0 });

  // --- AI Logic (Gemini API) ---
  const analyzeTasksWithAI = async () => {
    setIsAiLoading(true);
    const todayTasksData = tasks
      .filter(t => t.date === selectedDate)
      .map(t => `- [${t.time}] ${t.title}${t.memo ? ` (메모: ${t.memo})` : ''} [상태: ${t.completed ? '완료' : '미완료'}]`)
      .join('\n');
    
    const systemPrompt = `
      당신은 사용자의 일정을 관리하는 귀여운 비서입니다. 
      사용자가 작성한 할 일 제목과 메모 내용을 바탕으로 '하루 요약'을 수행하세요.
      JSON 형식으로만 응답하세요:
      { 
        "summary": "전체적인 하루 분위기를 담은 귀여운 말투의 요약", 
        "recommendation": "메모 내용을 참고하여 사용자에게 해줄 따뜻한 격려나 조언", 
        "mood": "분석된 사용자의 기분이나 태도 (열정적, 여유로움 등)"
      }
    `;
    const userQuery = `날짜: ${selectedDate}\n기록:\n${todayTasksData || '일정 없음'}`;

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: userQuery }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] },
          generationConfig: { responseMimeType: "application/json" }
        })
      });
      const data = await response.json();
      const result = JSON.parse(data.candidates[0].content.parts[0].text);
      setAiAnalysis(result);
      setDisplayMessage(result.summary);
    } catch (error) {
      setDisplayMessage("분석하다가 졸음이 왔다옹... 다시 시도해줘냥!");
    } finally {
      setIsAiLoading(false);
    }
  };

  const getTaskRecommendation = async () => {
    setIsRecLoading(true);
    const taskList = tasks.filter(t => t.date === selectedDate).map(t => t.title).join(', ');
    
    const systemPrompt = `
      사용자의 오늘 할 일을 보고, 추가로 하면 좋을 만한 활동 하나를 추천하세요.
      JSON 형식으로 응답하세요:
      {
        "suggestion": "추천할 활동 내용",
        "reason": "왜 이 활동을 추천하는지 이유",
        "category": "red, blue, green, purple, orange 중 하나 선택"
      }
    `;
    const userQuery = `현재 할 일: ${taskList || '없음'}. 오늘 더 하면 좋을 게 있을까?`;

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: userQuery }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] },
          generationConfig: { responseMimeType: "application/json" }
        })
      });
      const data = await response.json();
      const result = JSON.parse(data.candidates[0].content.parts[0].text);
      setAiRecommendation(result);
    } catch (error) {
      console.error(error);
    } finally {
      setIsRecLoading(false);
    }
  };

  // --- Actions ---
  const addTaskFromAi = () => {
    if (!aiRecommendation) return;
    const now = new Date();
    const isPMNow = now.getHours() >= 12;
    const currentHour = now.getHours() % 12 || 12;
    const currentMinute = Math.ceil(now.getMinutes() / 5) * 5;

    const newTask = {
      id: Date.now(),
      title: aiRecommendation.suggestion.trim(),
      category: aiRecommendation.category || 'green',
      time: `${isPMNow ? '오후' : '오전'} ${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}`,
      date: selectedDate,
      memo: `AI 추천 사유: ${aiRecommendation.reason}`,
      completed: false,
      showMemo: false,
      important: false
    };

    setTasks([newTask, ...tasks]);
    setAiRecommendation(null); 
    setDisplayMessage(`AI 추천 일정을 추가했다옹!`);
  };

  const openAddForm = () => {
    setEditingTaskId(null);
    setFormTitle('');
    setFormCategory('blue');
    setIsPM(false);
    setHour(12);
    setMinute(0);
    setIsFormOpen(true);
  };

  const openEditForm = (task) => {
    setEditingTaskId(task.id);
    setFormTitle(task.title);
    setFormCategory(task.category || 'blue');
    const [ampm, time] = task.time.split(' ');
    const [h, m] = time.split(':');
    setIsPM(ampm === '오후');
    setHour(parseInt(h));
    setMinute(parseInt(m));
    setIsFormOpen(true);
  };

  const handleSaveTask = () => {
    if (!formTitle.trim()) return;
    const taskData = {
      title: formTitle,
      category: formCategory,
      time: `${isPM ? '오후' : '오전'} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
      date: selectedDate,
    };

    if (editingTaskId) {
      setTasks(tasks.map(t => t.id === editingTaskId ? { ...t, ...taskData } : t));
      setDisplayMessage(`수정 완료했다옹!`);
    } else {
      const newTask = { ...taskData, id: Date.now(), memo: '', completed: false, showMemo: false, important: false };
      setTasks([newTask, ...tasks]);
      setDisplayMessage(`${formTitle} 등록 완료냥!`);
    }
    setIsFormOpen(false);
  };

  const toggleComplete = (id) => setTasks(tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t));
  const toggleImportant = (id) => setTasks(tasks.map(t => t.id === id ? { ...t, important: !t.important } : t));
  const toggleMemo = (id) => setTasks(tasks.map(t => t.id === id ? { ...t, showMemo: !t.showMemo } : t));
  const updateMemo = (id, memo) => setTasks(tasks.map(t => t.id === id ? { ...t, memo } : t));
  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
    setDisplayMessage("삭제 완료했다옹!");
  };

  useEffect(() => { if (displayMessage) playAnimalese(displayMessage); }, [displayMessage]);

  // --- Interaction Logic ---
  const handleMouseDown = (e) => {
    if (e.target.closest('button')) return;
    setIsDragging(true);
    setHasMoved(false); 
    dragOffset.current = { x: e.clientX - position.x, y: e.clientY - position.y };
  };

  const handleMouseUp = () => {
    if (isDragging && !hasMoved) {
      setIsMenuOpen(prev => !prev);
    }
    setIsDragging(false);
  };

  useEffect(() => {
    const handleMove = (e) => { 
      if (isDragging) {
        setHasMoved(true); 
        setPosition({ x: e.clientX - dragOffset.current.x, y: e.clientY - dragOffset.current.y }); 
      }
    };
    window.addEventListener('mousemove', handleMove);
    window.addEventListener('mouseup', handleMouseUp);
    return () => { 
      window.removeEventListener('mousemove', handleMove); 
      window.removeEventListener('mouseup', handleMouseUp); 
    };
  }, [isDragging, hasMoved]);

  const handleMonthChange = (offset) => {
    const next = new Date(viewDate);
    next.setMonth(viewDate.getMonth() + offset);
    setViewDate(next);
  };

  const VerticalDragValue = ({ label, value, min, max, onChange, step = 1 }) => {
    const isDraggingValue = useRef(false);
    const startY = useRef(0);
    const startValue = useRef(0);
    const handleStart = (e) => { isDraggingValue.current = true; startY.current = e.clientY; startValue.current = value; document.body.style.cursor = 'ns-resize'; };
    useEffect(() => {
      const handleMove = (e) => {
        if (!isDraggingValue.current) return;
        const diff = Math.round((startY.current - e.clientY) / 10) * step;
        let newValue = startValue.current + diff;
        if (newValue < min) newValue = min;
        if (newValue > max) newValue = max;
        onChange(newValue);
      };
      const handleEnd = () => { isDraggingValue.current = false; document.body.style.cursor = 'default'; };
      window.addEventListener('mousemove', handleMove);
      window.addEventListener('mouseup', handleEnd);
      return () => { window.removeEventListener('mousemove', handleMove); window.removeEventListener('mouseup', handleEnd); };
    }, [value, min, max, onChange, step]);
    return (
      <div onMouseDown={handleStart} className="flex flex-col items-center bg-gray-100 px-4 py-2 rounded-2xl cursor-ns-resize hover:bg-gray-200 transition-colors border-2 border-transparent active:border-black">
        <span className="text-[8px] font-black text-gray-400 uppercase mb-1">{label}</span>
        <span className="text-sm font-black">{value.toString().padStart(2, '0')}</span>
      </div>
    );
  };

  const menuStyles = useMemo(() => {
    const baseWidth = 460;
    const baseHeight = 720;
    const menuWidth = baseWidth * uiScale;
    const menuHeight = baseHeight * uiScale;
    let menuX = position.x + (200 * catScale) + 20; 
    let menuY = position.y - 50; 
    if (menuX + menuWidth > window.innerWidth) menuX = position.x - menuWidth - 20;
    if (menuY < 20) menuY = 20;
    if (menuY + menuHeight > window.innerHeight - 20) menuY = window.innerHeight - menuHeight - 20;
    return { left: menuX, top: menuY, width: baseWidth, height: baseHeight, transform: `scale(${uiScale})`, transformOrigin: 'top left' };
  }, [position, catScale, uiScale]);

  return (
    <div className={`fixed inset-0 bg-[#f8f9fa] overflow-hidden`} style={{ fontFamily: fontFamily }}>
      
      {/* Character Container */}
      <div 
        onMouseDown={handleMouseDown}
        className="absolute z-[60] cursor-grab active:cursor-grabbing flex flex-col items-center group"
        style={{ left: position.x, top: position.y, width: 200, transform: `scale(${catScale})`, transformOrigin: 'top left' }}
      >
        {/* Bubble Message */}
        <div className="mb-4 w-full flex justify-center pointer-events-none bubble">
          <div 
            className="bg-black text-white p-4 rounded-[2rem] shadow-2xl relative pointer-events-auto cursor-pointer border-2 border-white/20 text-center animate-pop group-hover:scale-105 transition-transform"
            style={{ maxWidth: 240, padding: `14px 18px`, borderRadius: `24px` }}
          >
            <p className="font-black leading-tight whitespace-pre-wrap text-[11px]">{displayMessage}</p>
            <div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black"></div>
          </div>
        </div>

        {/* Selected Character Render */}
        <div className="w-full h-auto drop-shadow-2xl hover:scale-105 transition-transform">
          {CHARACTERS[activeChar].render()}
        </div>
      </div>

      {/* Main Menu UI */}
      {isMenuOpen && (
        <div className="absolute bg-white rounded-[3.5rem] shadow-2xl z-[50] border-4 border-black flex flex-col overflow-hidden animate-pop" style={menuStyles}>
          <div className="p-8 border-b-4 border-black bg-yellow-50">
            <div className="flex justify-between items-center mb-5">
              <div>
                <h2 className="text-2xl font-black italic tracking-tighter leading-none">AI POCKET SECRETARY</h2>
                <p className="text-[10px] font-bold text-gray-400 uppercase mt-1">{selectedDate}</p>
              </div>
              <button onClick={(e) => { e.stopPropagation(); setIsMenuOpen(false); }} className="p-3 bg-white hover:bg-red-500 hover:text-white rounded-full border-2 border-black transition-all shadow-md"><X size={16} /></button>
            </div>
            
            <div className="flex bg-gray-200/50 p-1.5 rounded-2xl">
              {[ {id: 'tasks', icon: <Plus size={10}/>, label: 'TASKS'}, {id: 'calendar', icon: <CalendarIcon size={10}/>, label: 'CALENDAR'}, {id: 'settings', icon: <Settings size={10}/>, label: 'SETTINGS'} ].map(tab => (
                <button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`relative flex-1 py-2.5 text-[10px] font-black z-10 flex items-center justify-center gap-2 transition-all ${activeTab === tab.id ? 'text-black' : 'text-gray-400 hover:text-gray-600'}`}>
                  {tab.label}
                  {activeTab === tab.id && <div className="absolute inset-0 bg-white rounded-xl shadow-sm -z-10 animate-pop" />}
                </button>
              ))}
            </div>
          </div>

          <div className="flex-1 overflow-y-auto p-8 bg-gray-50/40 custom-scrollbar">
            {activeTab === 'tasks' && (
              <div className="space-y-5 pb-24">
                <div className="bg-white border-2 border-black p-5 rounded-[2.5rem] shadow-[4px_4px_0px_0px_rgba(16,185,129,1)] group relative overflow-hidden">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <div className="p-1.5 bg-green-100 text-green-600 rounded-lg"><Lightbulb size={14}/></div>
                      <span className="text-[10px] font-black uppercase italic text-gray-400 tracking-wider">AI Suggestion</span>
                    </div>
                    <button onClick={(e) => { e.stopPropagation(); getTaskRecommendation(); }} disabled={isRecLoading} className="p-1.5 bg-black text-white rounded-full hover:rotate-12 transition-transform disabled:opacity-50"><Sparkles size={12}/></button>
                  </div>
                  {isRecLoading ? (
                    <div className="py-2 animate-pulse flex flex-col gap-1">
                      <div className="h-3 bg-gray-100 rounded w-3/4"></div>
                      <div className="h-2 bg-gray-50 rounded w-1/2"></div>
                    </div>
                  ) : aiRecommendation ? (
                    <div className="animate-fade-in flex items-center gap-4">
                      <div className="flex-1">
                        <p className="text-sm font-black mb-1">{aiRecommendation.suggestion}</p>
                        <p className="text-[10px] font-bold text-gray-400 leading-tight">{aiRecommendation.reason}</p>
                      </div>
                      <button onClick={(e) => { e.stopPropagation(); addTaskFromAi(); }} className="p-3 bg-green-500 text-white rounded-2xl hover:scale-105 active:scale-95 transition-all shadow-lg border-2 border-black"><PlusCircle size={20} /></button>
                    </div>
                  ) : (
                    <p className="text-[11px] font-bold text-gray-300 italic">버튼을 눌러 AI의 추천을 받아보라냥!</p>
                  )}
                </div>

                {isFormOpen ? (
                  <div className="bg-white p-8 rounded-[3rem] border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] animate-pop">
                    <div className="flex justify-between items-center mb-6">
                        <span className="text-[11px] font-black text-gray-400 uppercase tracking-tighter">{editingTaskId ? 'Edit Task' : 'Create Task'}</span>
                        <button onClick={() => setIsFormOpen(false)} className="text-gray-400 hover:text-black"><X size={18}/></button>
                    </div>
                    <input autoFocus type="text" value={formTitle} onChange={(e) => setFormTitle(e.target.value)} placeholder="무슨 일인가옹?" className="w-full border-b-2 border-black pb-3 mb-8 text-lg font-black focus:outline-none" />
                    <div className="mb-8">
                      <p className="text-[9px] font-black text-gray-400 uppercase mb-3 italic">Category</p>
                      <div className="flex gap-3">
                        {CATEGORY_COLORS.map(color => (
                          <button key={color.id} onClick={() => setFormCategory(color.id)} className={`w-9 h-9 rounded-full border-2 transition-all ${formCategory === color.id ? 'border-black scale-110 shadow-lg' : 'border-transparent opacity-40 hover:opacity-100'}`} style={{ backgroundColor: color.hex }} />
                        ))}
                      </div>
                    </div>
                    <div className="mb-4">
                      <p className="text-[9px] font-black text-gray-400 uppercase mb-3 italic">Time</p>
                      <div className="flex gap-3 items-center">
                        <div className="flex bg-gray-100 p-1.5 rounded-2xl">
                          <button onClick={() => setIsPM(false)} className={`px-3 py-1.5 rounded-xl text-[10px] font-black ${!isPM ? 'bg-white shadow-md' : 'text-gray-400'}`}>AM</button>
                          <button onClick={() => setIsPM(true)} className={`px-3 py-1.5 rounded-xl text-[10px] font-black ${isPM ? 'bg-white shadow-md' : 'text-gray-400'}`}>PM</button>
                        </div>
                        <div className="flex flex-1 gap-2">
                          <VerticalDragValue label="Hour" value={hour} min={1} max={12} onChange={setHour} />
                          <VerticalDragValue label="Min" value={minute} min={0} max={59} onChange={setMinute} />
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-3 mt-8">
                      {editingTaskId && <button onClick={() => deleteTask(editingTaskId)} className="p-4 bg-red-50 text-red-500 border-2 border-red-100 rounded-[1.5rem]"><Trash2 size={20}/></button>}
                      <button onClick={handleSaveTask} className="flex-1 py-4 bg-black text-white rounded-[1.5rem] font-black text-sm shadow-xl">{editingTaskId ? '수정 완료' : '등록 하기'}</button>
                    </div>
                  </div>
                ) : (
                  tasks.filter(t => t.date === selectedDate).map(t => (
                    <div key={t.id} className={`p-5 rounded-[2rem] border-2 border-black flex flex-col gap-3 transition-all ${t.completed ? 'bg-gray-100 opacity-60' : 'bg-white shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]'}`} style={{ borderLeftWidth: '12px', borderLeftColor: CATEGORY_COLORS.find(c => c.id === t.category)?.hex }}>
                      <div className="flex items-center gap-4">
                        <button onClick={(e) => { e.stopPropagation(); toggleComplete(t.id); }} className={`w-10 h-10 rounded-2xl border-2 border-black flex items-center justify-center ${t.completed ? 'bg-green-400 text-white' : 'bg-white'}`}><Check size={18} strokeWidth={4} /></button>
                        <div className="flex-1 cursor-pointer" onClick={(e) => { e.stopPropagation(); toggleMemo(t.id); }}>
                          <p className="text-[9px] font-black text-gray-400 uppercase italic">{t.time}</p>
                          <p className={`font-black text-base ${t.completed ? 'line-through' : ''}`}>{t.title}</p>
                        </div>
                        <div className="flex items-center gap-2">
                          <button onClick={(e) => { e.stopPropagation(); openEditForm(t); }} className="text-gray-300 hover:text-black p-1.5"><Edit2 size={16}/></button>
                          <button onClick={(e) => { e.stopPropagation(); toggleImportant(t.id); }} className={`${t.important ? 'text-yellow-400' : 'text-gray-200'}`}><Star size={18} fill={t.important ? "currentColor" : "none"}/></button>
                        </div>
                      </div>
                      {t.showMemo && (
                        <div className="pt-3 border-t-2 border-dashed border-gray-200" onClick={e => e.stopPropagation()}>
                          <textarea className="w-full bg-gray-50/50 p-4 rounded-2xl text-[11px] font-medium focus:outline-none min-h-[80px] resize-none" value={t.memo} onChange={(e) => updateMemo(t.id, e.target.value)} placeholder="메모를 입력하라냥..." />
                        </div>
                      )}
                    </div>
                  ))
                )}
              </div>
            )}

            {activeTab === 'calendar' && (
              <div className="animate-fade-in space-y-6">
                <div className="flex justify-between items-center px-4">
                  <button onClick={() => handleMonthChange(-1)} className="p-3 bg-white rounded-full border-2 border-black shadow-sm"><ChevronLeft size={16}/></button>
                  <h3 className="font-black text-lg italic">{viewDate.getFullYear()}. {(viewDate.getMonth() + 1).toString().padStart(2, '0')}</h3>
                  <button onClick={() => handleMonthChange(1)} className="p-3 bg-white rounded-full border-2 border-black shadow-sm"><ChevronRight size={16}/></button>
                </div>
                <div className="grid grid-cols-7 gap-2">
                  {['SUN','MON','TUE','WED','THU','FRI','SAT'].map(d => <div key={d} className="text-center text-[9px] font-black text-gray-400 mb-2">{d}</div>)}
                  {Array.from({ length: new Date(viewDate.getFullYear(), viewDate.getMonth(), 1).getDay() }).map((_, i) => <div key={i} />)}
                  {Array.from({ length: new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0).getDate() }).map((_, i) => {
                    const dateStr = `${viewDate.getFullYear()}-${(viewDate.getMonth() + 1).toString().padStart(2, '0')}-${(i + 1).toString().padStart(2, '0')}`;
                    const hasTasks = tasks.some(t => t.date === dateStr);
                    return (
                      <button key={dateStr} onClick={() => { setSelectedDate(dateStr); setActiveTab('tasks'); }} className={`aspect-square rounded-2xl flex flex-col items-center justify-center font-black text-xs transition-all ${selectedDate === dateStr ? 'bg-black text-white scale-105 shadow-lg' : 'hover:bg-gray-100 text-gray-700'}`}>
                        {i + 1}
                        {hasTasks && <div className="mt-1 w-1 h-1 rounded-full bg-red-400" />}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {activeTab === 'settings' && (
              <div className="space-y-6 animate-fade-in pb-12">
                <div className="bg-white border-2 border-black p-8 rounded-[3rem] shadow-[6px_6px_0px_0px_rgba(59,130,246,1)] mb-8 relative overflow-hidden group">
                   <div className="flex items-center justify-between mb-4 relative z-10">
                     <div className="flex items-center gap-3">
                       <div className={`p-2.5 rounded-xl ${isAiLoading ? 'bg-blue-100 animate-pulse' : 'bg-blue-600 text-white'}`}><BrainCircuit size={18} /></div>
                       <div>
                         <p className="text-[10px] font-black text-gray-400 uppercase italic leading-none">Daily Deep Analysis</p>
                         <h4 className="font-black text-sm">하루 요약 분석</h4>
                       </div>
                     </div>
                     <button onClick={analyzeTasksWithAI} disabled={isAiLoading} className="px-6 py-2 bg-black text-white rounded-xl text-[10px] font-black hover:scale-105 disabled:opacity-50 transition-all">START</button>
                   </div>
                   {aiAnalysis ? (
                     <div className="animate-fade-in relative z-10 pt-4 border-t-2 border-gray-100">
                        <div className="flex items-center gap-2 mb-3">
                           <span className="text-[9px] font-black bg-blue-600 text-white px-2.5 py-0.5 rounded-full uppercase italic tracking-widest">{aiAnalysis.mood}</span>
                        </div>
                        <p className="text-xs font-bold leading-relaxed text-gray-800 italic mb-4">"{aiAnalysis.recommendation}"</p>
                        <div className="bg-blue-50/50 p-4 rounded-2xl text-[11px] font-bold text-blue-900 leading-snug">{aiAnalysis.summary}</div>
                     </div>
                   ) : (
                     <p className="text-xs font-bold text-gray-300 italic pt-4 border-t-2 border-gray-100">오늘의 할 일을 분석해 피드백을 드릴게요!</p>
                   )}
                </div>

                <div className="bg-white p-8 rounded-[3rem] border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] space-y-8">
                  {/* Character Selection */}
                  <div className="space-y-5">
                    <p className="text-[11px] font-black text-gray-400 uppercase flex items-center gap-3 tracking-widest"><Users size={16}/> Characters</p>
                    <div className="grid grid-cols-2 gap-3">
                      {Object.values(CHARACTERS).map(char => (
                        <button key={char.id} onClick={() => setActiveChar(char.id)} className={`p-4 rounded-3xl border-2 flex flex-col items-center gap-3 transition-all ${activeChar === char.id ? 'border-black bg-yellow-50 shadow-md' : 'border-gray-100 bg-gray-50 opacity-50 grayscale hover:opacity-100 hover:grayscale-0'}`}>
                          <div className="w-12 h-12 flex items-center justify-center">{char.render()}</div>
                          <span className="text-[10px] font-black">{char.name}</span>
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="space-y-5">
                    <p className="text-[11px] font-black text-gray-400 uppercase flex items-center gap-3 tracking-widest"><Type size={16}/> Typography</p>
                    <div className="grid grid-cols-1 gap-2">
                      {FONT_OPTIONS.map(font => (
                        <button key={font.id} onClick={() => setFontFamily(font.id)} className={`w-full py-3 px-4 rounded-2xl border-2 font-black text-xs transition-all flex justify-between items-center ${fontFamily === font.id ? 'border-black bg-black text-white' : 'border-gray-100 bg-gray-50 text-gray-400'}`} style={{ fontFamily: font.id }}>
                          {font.name} {fontFamily === font.id && <Check size={14} />}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className="space-y-5">
                    <p className="text-[11px] font-black text-gray-400 uppercase flex items-center gap-3 tracking-widest"><Maximize size={16}/> Character Size</p>
                    <input type="range" min="0.5" max="1.5" step="0.1" value={catScale} onChange={(e) => setCatScale(parseFloat(e.target.value))} className="w-full accent-black h-2 bg-gray-100 rounded-full appearance-none cursor-pointer" />
                  </div>
                </div>
              </div>
            )}
          </div>

          {!isFormOpen && activeTab === 'tasks' && (
            <div className="absolute bottom-0 left-0 right-0 p-8 border-t-2 border-black bg-white/80 backdrop-blur-md">
              <button onClick={(e) => { e.stopPropagation(); openAddForm(); }} className="w-full py-5 bg-black text-white rounded-[2rem] font-black flex items-center justify-center gap-3 text-sm shadow-xl"><Plus size={20} strokeWidth={3} /> 새로운 할 일 적기</button>
            </div>
          )}
        </div>
      )}

      <style dangerouslySetInnerHTML={{ __html: `
        @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700;800&family=Gaegu:wght@400;700&display=swap');
        .custom-scrollbar::-webkit-scrollbar { width: 0; }
        .animate-pop { animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .animate-fade-in { animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #000; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
      `}} />
    </div>
  );
};

export default App;