import React, { useState, useEffect } from 'react';
import { 
  Heart, 
  Plus, 
  Calendar, 
  Trash2, 
  ChevronLeft, 
  Smile, 
  Frown, 
  Meh, 
  Zap, 
  CloudRain, 
  Coffee,
  Search,
  BookOpen
} from 'lucide-react';

// 감정 데이터 정의
const EMOTIONS = [
  { id: 'happy', label: '행복해요', icon: Smile, color: 'text-yellow-500', bg: 'bg-yellow-50' },
  { id: 'sad', label: '슬퍼요', icon: Frown, color: 'text-blue-500', bg: 'bg-blue-50' },
  { id: 'neutral', label: '평온해요', icon: Meh, color: 'text-gray-500', bg: 'bg-gray-50' },
  { id: 'excited', label: '설레요', icon: Zap, color: 'text-purple-500', bg: 'bg-purple-50' },
  { id: 'depressed', label: '우울해요', icon: CloudRain, color: 'text-indigo-600', bg: 'bg-indigo-50' },
  { id: 'tired', label: '피곤해요', icon: Coffee, color: 'text-orange-600', bg: 'bg-orange-50' },
];

const App = () => {
  // 상태 관리
  const [entries, setEntries] = useState([]);
  const [isAdding, setIsAdding] = useState(false);
  const [currentEntry, setCurrentEntry] = useState({
    content: '',
    emotion: 'neutral',
    date: new Date().toISOString().split('T')[0]
  });
  const [searchTerm, setSearchTerm] = useState('');

  // 초기 샘플 데이터
  useEffect(() => {
    const sampleData = [
      {
        id: 1,
        date: '2024-05-15',
        emotion: 'happy',
        content: '오늘 친구들과 오랜만에 만나서 맛있는 점심을 먹었다. 날씨도 너무 좋아서 행복한 하루였다.'
      },
      {
        id: 2,
        date: '2024-05-14',
        emotion: 'tired',
        content: '업무가 너무 많아서 퇴근이 늦어졌다. 집에 오자마자 침대에 눕고 싶었다.'
      }
    ];
    setEntries(sampleData);
  }, []);

  // 새 일기 저장
  const handleSaveEntry = () => {
    if (!currentEntry.content.trim()) return;
    
    const newEntry = {
      ...currentEntry,
      id: Date.now(),
    };
    
    setEntries([newEntry, ...entries]);
    setIsAdding(false);
    setCurrentEntry({
      content: '',
      emotion: 'neutral',
      date: new Date().toISOString().split('T')[0]
    });
  };

  // 일기 삭제
  const handleDeleteEntry = (id) => {
    setEntries(entries.filter(entry => entry.id !== id));
  };

  // 필터링된 엔트리
  const filteredEntries = entries.filter(entry => 
    entry.content.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
      <div className="max-w-2xl mx-auto">
        
        {/* 헤더 */}
        <header className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2 text-indigo-600">
              <Heart className="fill-current" />
              마음 기록
            </h1>
            <p className="text-slate-500 text-sm">오늘 당신의 마음은 어떤가요?</p>
          </div>
          {!isAdding && (
            <button 
              onClick={() => setIsAdding(true)}
              className="bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition-all flex items-center gap-2"
            >
              <Plus size={20} />
              <span className="hidden sm:inline pr-1">일기 쓰기</span>
            </button>
          )}
        </header>

        {isAdding ? (
          /* 작성 폼 */
          <div className="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 animate-in fade-in slide-in-from-bottom-4 duration-300">
            <button 
              onClick={() => setIsAdding(false)}
              className="flex items-center text-slate-400 hover:text-slate-600 mb-6 transition-colors"
            >
              <ChevronLeft size={20} />
              <span>돌아가기</span>
            </button>

            <h2 className="text-xl font-semibold mb-6">오늘의 일기 작성</h2>

            <div className="space-y-6">
              {/* 날짜 선택 */}
              <div>
                <label className="block text-sm font-medium text-slate-500 mb-2">날짜</label>
                <div className="relative">
                  <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
                  <input 
                    type="date"
                    value={currentEntry.date}
                    onChange={(e) => setCurrentEntry({...currentEntry, date: e.target.value})}
                    className="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                  />
                </div>
              </div>

              {/* 감정 선택 */}
              <div>
                <label className="block text-sm font-medium text-slate-500 mb-3">지금 느끼는 감정</label>
                <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
                  {EMOTIONS.map((emo) => {
                    const Icon = emo.icon;
                    const isSelected = currentEntry.emotion === emo.id;
                    return (
                      <button
                        key={emo.id}
                        onClick={() => setCurrentEntry({...currentEntry, emotion: emo.id})}
                        className={`flex flex-col items-center p-3 rounded-xl transition-all border-2 ${
                          isSelected 
                            ? `border-indigo-500 ${emo.bg}` 
                            : 'border-transparent bg-slate-50 hover:bg-slate-100'
                        }`}
                      >
                        <Icon className={`${emo.color} mb-1`} size={24} />
                        <span className="text-xs font-medium">{emo.label}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* 본문 작성 */}
              <div>
                <label className="block text-sm font-medium text-slate-500 mb-2">내용</label>
                <textarea 
                  rows={6}
                  placeholder="무슨 일이 있었나요? 어떤 기분이 들었나요?"
                  value={currentEntry.content}
                  onChange={(e) => setCurrentEntry({...currentEntry, content: e.target.value})}
                  className="w-full p-4 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none resize-none"
                />
              </div>

              <button 
                onClick={handleSaveEntry}
                disabled={!currentEntry.content.trim()}
                className="w-full py-4 bg-indigo-600 text-white font-semibold rounded-xl shadow-md hover:bg-indigo-700 disabled:bg-slate-300 disabled:cursor-not-allowed transition-all"
              >
                기록하기
              </button>
            </div>
          </div>
        ) : (
          /* 리스트 뷰 */
          <div className="space-y-6">
            {/* 검색창 */}
            <div className="relative group">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={18} />
              <input 
                type="text"
                placeholder="일기 내용 검색..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all"
              />
            </div>

            {/* 일기 목록 */}
            <div className="space-y-4">
              {filteredEntries.length > 0 ? (
                filteredEntries.map((entry) => {
                  const emotionInfo = EMOTIONS.find(e => e.id === entry.emotion) || EMOTIONS[2];
                  const EmotionIcon = emotionInfo.icon;
                  
                  return (
                    <div 
                      key={entry.id}
                      className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col gap-3 hover:shadow-md transition-shadow group"
                    >
                      <div className="flex justify-between items-start">
                        <div className="flex items-center gap-3">
                          <div className={`p-2 rounded-full ${emotionInfo.bg}`}>
                            <EmotionIcon className={emotionInfo.color} size={20} />
                          </div>
                          <div>
                            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">{entry.date}</span>
                            <h3 className="font-bold text-slate-700">{emotionInfo.label}</h3>
                          </div>
                        </div>
                        <button 
                          onClick={() => handleDeleteEntry(entry.id)}
                          className="text-slate-300 hover:text-red-500 p-1 opacity-0 group-hover:opacity-100 transition-all"
                        >
                          <Trash2 size={18} />
                        </button>
                      </div>
                      <p className="text-slate-600 leading-relaxed whitespace-pre-wrap">
                        {entry.content}
                      </p>
                    </div>
                  );
                })
              ) : (
                <div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
                  <div className="bg-slate-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <BookOpen className="text-slate-300" size={32} />
                  </div>
                  <h3 className="text-lg font-medium text-slate-800">아직 작성된 일기가 없어요.</h3>
                  <p className="text-slate-400 mt-2">오늘의 감정을 첫 번째로 기록해 보세요!</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 푸터 문구 */}
        <footer className="mt-12 text-center text-slate-400 text-sm">
          <p>© 2024 마음 기록. 당신의 모든 감정은 소중합니다.</p>
        </footer>
      </div>
    </div>
  );
};

export default App;