import React, { useState, useEffect } from 'react';
import { Edit2, Trash2, Plus, Check, X, ExternalLink, Paperclip, Heart, Image as ImageIcon, LogOut, LogIn } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, doc, setDoc, deleteDoc } from 'firebase/firestore';

// === Firebase 初始化設定 ===
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// 定義可用的便利貼顏色
const NOTE_COLORS = [
  'bg-yellow-100',
  'bg-pink-100',
  'bg-blue-100',
  'bg-green-100',
  'bg-purple-100',
  'bg-orange-100'
];

// 定義些微旋轉的角度，讓便利貼看起來更自然
const ROTATIONS = ['-rotate-2', '-rotate-1', 'rotate-0', 'rotate-1', 'rotate-2', 'rotate-3'];

export default function App() {
  const [notes, setNotes] = useState([]);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // 注入手寫字體與自訂 CSS
  useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
    return () => document.head.removeChild(link);
  }, []);

  // 1. 處理身份驗證 (Auth)
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth init error:", error);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  // 2. 處理資料庫同步 (Firestore)
  useEffect(() => {
    if (!user) return;

    setLoading(true);
    // 依據使用者 UID 建立專屬的資料路徑
    const notesRef = collection(db, 'artifacts', appId, 'users', user.uid, 'notes');
    
    const unsubscribe = onSnapshot(notesRef, 
      (snapshot) => {
        const fetchedNotes = [];
        snapshot.forEach((doc) => {
          fetchedNotes.push({ id: doc.id, ...doc.data() });
        });
        // 依照建立時間排序
        fetchedNotes.sort((a, b) => (a.createdAt || 0) - (b.createdAt || 0));
        setNotes(fetchedNotes);
        setLoading(false);
      },
      (error) => {
        console.error("Error fetching notes:", error);
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [user]);

  // Google 登入
  const handleGoogleLogin = async () => {
    const provider = new GoogleAuthProvider();
    try {
      await signInWithPopup(auth, provider);
    } catch (error) {
      console.error("Google login failed", error);
    }
  };

  // 登出
  const handleLogout = async () => {
    try {
      await signOut(auth);
      await signInAnonymously(auth); // 登出後退回訪客狀態
    } catch (error) {
      console.error("Logout failed", error);
    }
  };

  // 新增便利貼
  const addNote = async () => {
    if (!user) return;
    
    const randomColor = NOTE_COLORS[Math.floor(Math.random() * NOTE_COLORS.length)];
    const randomRotate = ROTATIONS[Math.floor(Math.random() * ROTATIONS.length)];
    const newId = Date.now().toString();
    
    const newNote = {
      title: '新便利貼',
      content: '在這裡寫下描述...',
      link: '',
      color: randomColor,
      rotate: randomRotate,
      icon: '📌',
      iconType: 'emoji', // 'emoji' 或 'image'
      createdAt: Date.now()
    };

    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'notes', newId), newNote);
    } catch (error) {
      console.error("Error adding note:", error);
    }
  };

  // 更新便利貼
  const updateNote = async (id, updatedData) => {
    if (!user) return;
    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'notes', id.toString()), updatedData, { merge: true });
    } catch (error) {
      console.error("Error updating note:", error);
    }
  };

  // 刪除便利貼
  const deleteNote = async (id) => {
    if (!user) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'notes', id.toString()));
    } catch (error) {
      console.error("Error deleting note:", error);
    }
  };

  return (
    <div className="min-h-screen relative overflow-hidden text-gray-800 notebook-bg flex">
      <style>{`
        .notebook-bg {
          background-color: #fdfcf8;
          background-image: 
            linear-gradient(90deg, transparent 79px, #ff9e9e 79px, #ff9e9e 81px, transparent 81px),
            linear-gradient(#eee 1px, transparent 1px);
          background-size: 100% 100%, 100% 2rem;
          background-position: 0 0, 0 2rem;
          font-family: 'Klee One', cursive;
        }
        
        .washi-tape {
          background-color: rgba(255, 255, 255, 0.4);
          box-shadow: 0 1px 2px rgba(0,0,0,0.05);
          backdrop-filter: blur(2px);
          mask-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0,0 L100,0 L95,100 L5,100 Z" fill="black"/></svg>');
          mask-size: 100% 100%;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #ffcece; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #ffa6a6; }
      `}</style>

      {/* 頂部導覽列 / 登入狀態 */}
      <div className="absolute top-4 right-4 z-50 flex items-center gap-3">
        {user && !user.isAnonymous ? (
          <div className="flex items-center gap-3 bg-white/80 px-4 py-2 rounded-full shadow-sm backdrop-blur-sm border border-gray-200">
            <span className="text-sm font-semibold text-gray-600">{user.email || '已登入'}</span>
            <button onClick={handleLogout} className="text-gray-400 hover:text-red-500 transition-colors" title="登出">
              <LogOut size={18} />
            </button>
          </div>
        ) : (
          <button 
            onClick={handleGoogleLogin} 
            className="flex items-center gap-2 bg-white/80 px-4 py-2 rounded-full shadow-sm backdrop-blur-sm border border-gray-200 text-gray-600 hover:text-blue-500 transition-colors"
          >
            <LogIn size={18} />
            <span className="text-sm font-semibold">Google 登入同步</span>
          </button>
        )}
      </div>

      {/* 左側筆記本線圈裝飾 */}
      <div className="hidden sm:flex flex-col justify-evenly absolute left-0 top-0 bottom-0 w-8 border-r border-gray-200 bg-[#f4f3ec] shadow-[2px_0_5px_rgba(0,0,0,0.05)] z-10">
        {[...Array(24)].map((_, i) => (
          <div key={i} className="w-6 h-3 mx-auto rounded-full border-2 border-gray-400 bg-gray-600 shadow-inner relative">
            <div className="absolute -right-2 top-0.5 w-3 h-1.5 bg-gray-300 rounded-sm border border-gray-400"></div>
          </div>
        ))}
      </div>

      {/* 主要內容區 */}
      <div className="flex-1 ml-0 sm:ml-8 pl-4 sm:pl-20 pr-4 sm:pr-8 py-10 w-full overflow-y-auto z-0 h-screen">
        
        <header className="mb-12 text-center relative mt-8">
          <div className="inline-block relative">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-700 tracking-wider flex items-center gap-3">
              <Heart className="text-pink-400 fill-pink-400" size={36} />
              我的專屬筆記本
              <Heart className="text-pink-400 fill-pink-400" size={36} />
            </h1>
            <div className="absolute -bottom-4 left-0 w-full h-1 bg-pink-300 rounded-full opacity-50"></div>
          </div>
        </header>

        {loading ? (
          <div className="flex justify-center items-center h-40 text-gray-500">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-400 mr-3"></div>
            載入筆記中...
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-8 pb-20">
            {notes.map(note => (
              <NoteCard 
                key={note.id} 
                note={note} 
                onUpdate={updateNote} 
                onDelete={deleteNote} 
              />
            ))}

            {/* 新增便利貼按鈕 */}
            <button 
              onClick={addNote}
              className="flex flex-col items-center justify-center min-h-[220px] rounded-sm border-2 border-dashed border-gray-300 text-gray-400 hover:text-pink-500 hover:border-pink-300 hover:bg-white/50 transition-all duration-300 transform hover:scale-105"
            >
              <Plus size={48} strokeWidth={1.5} />
              <span className="mt-2 text-lg font-semibold">撕一張新便利貼</span>
            </button>
          </div>
        )}

      </div>
    </div>
  );
}

// 獨立的便利貼元件
function NoteCard({ note, onUpdate, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  const [tempData, setTempData] = useState({ ...note });

  const handleEdit = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setTempData({ ...note });
    setIsEditing(true);
  };

  const handleSave = () => {
    onUpdate(note.id, tempData);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setIsEditing(false);
  };

  const handleCardClick = (e) => {
    if (isEditing) return;
    if (e.target.closest('button')) return;
    if (note.link) {
      window.open(note.link, '_blank', 'noopener,noreferrer');
    }
  };

  // 處理圖片上傳，並將其轉為縮小的 Base64 字串以節省空間
  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.onload = () => {
        // 利用 Canvas 將圖片縮小至最大 80px，避免超過資料庫大小限制
        const canvas = document.createElement('canvas');
        const MAX_SIZE = 80; 
        let width = img.width;
        let height = img.height;
        if (width > height) {
          if (width > MAX_SIZE) { height *= MAX_SIZE / width; width = MAX_SIZE; }
        } else {
          if (height > MAX_SIZE) { width *= MAX_SIZE / height; height = MAX_SIZE; }
        }
        canvas.width = width; 
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        const dataUrl = canvas.toDataURL('image/png');
        
        setTempData({ ...tempData, icon: dataUrl, iconType: 'image' });
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  };

  return (
    <div 
      className={`relative group p-5 rounded-sm shadow-[2px_4px_10px_rgba(0,0,0,0.1)] transition-transform duration-300 ${note.color} ${note.rotate} hover:scale-105 min-h-[220px] flex flex-col ${!isEditing && note.link ? 'cursor-pointer' : ''}`}
      onClick={handleCardClick}
    >
      <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-20 h-7 washi-tape rotate-1"></div>
      
      {!isEditing && (
        <div className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex gap-1 z-20">
          <button 
            onClick={handleEdit}
            className="p-2 bg-white rounded-full shadow-md text-gray-500 hover:text-blue-500 hover:bg-blue-50 transition-colors"
            title="編輯便利貼"
          >
            <Edit2 size={16} />
          </button>
          <button 
            onClick={(e) => { e.stopPropagation(); onDelete(note.id); }}
            className="p-2 bg-white rounded-full shadow-md text-gray-500 hover:text-red-500 hover:bg-red-50 transition-colors"
            title="刪除便利貼"
          >
            <Trash2 size={16} />
          </button>
        </div>
      )}

      {isEditing ? (
        <div className="flex flex-col h-full flex-1 z-10 space-y-3 mt-2" onClick={e => e.stopPropagation()}>
          
          {/* 圖示與標題編輯區塊 */}
          <div className="flex items-center border-b border-black/20 pb-1">
            <div className="flex items-center gap-1 mr-2 bg-white/40 px-2 py-1 rounded-md">
              {tempData.iconType === 'image' && tempData.icon ? (
                <img src={tempData.icon} alt="icon" className="w-6 h-6 object-cover rounded" />
              ) : (
                <span className="text-xl">{tempData.icon || '📌'}</span>
              )}
              
              {/* Emoji 輸入框 */}
              <input 
                type="text" 
                value={tempData.iconType === 'emoji' ? tempData.icon : ''}
                onChange={(e) => setTempData({...tempData, icon: e.target.value, iconType: 'emoji'})}
                className="w-7 bg-transparent text-center text-lg outline-none placeholder-gray-500"
                placeholder="😀"
                maxLength={2}
                title="輸入 Emoji"
              />
              
              <span className="text-gray-400 mx-1">|</span>
              
              {/* 圖片上傳按鈕 */}
              <label className="cursor-pointer text-gray-500 hover:text-blue-600 flex items-center" title="上傳小圖示">
                <ImageIcon size={18} />
                <input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
              </label>
            </div>

            <input 
              type="text" 
              value={tempData.title}
              onChange={(e) => setTempData({...tempData, title: e.target.value})}
              className="bg-transparent font-bold text-xl outline-none placeholder-black/40 text-gray-800 flex-1 min-w-0"
              placeholder="標題..."
              autoFocus
            />
          </div>
          
          <textarea 
            value={tempData.content}
            onChange={(e) => setTempData({...tempData, content: e.target.value})}
            className="bg-transparent flex-grow outline-none resize-none text-gray-700 text-lg placeholder-black/40"
            placeholder="寫下一些筆記或描述..."
          />
          
          <div className="flex items-center gap-2 border-b border-black/20 pb-1">
            <ExternalLink size={16} className="text-gray-500" />
            <input 
              type="text" 
              value={tempData.link}
              onChange={(e) => setTempData({...tempData, link: e.target.value})}
              className="bg-transparent outline-none flex-1 text-sm text-gray-600 placeholder-black/40"
              placeholder="連結網址 (例如: https://...)"
            />
          </div>

          <div className="flex items-center justify-between pt-2">
            <div className="flex gap-1">
              {NOTE_COLORS.map(color => (
                <button
                  key={color}
                  type="button"
                  onClick={() => setTempData({...tempData, color})}
                  className={`w-5 h-5 rounded-full border border-black/10 ${color} ${tempData.color === color ? 'ring-2 ring-gray-400 ring-offset-1' : ''}`}
                />
              ))}
            </div>
            <div className="flex gap-2">
              <button onClick={handleCancel} className="p-1 text-gray-500 hover:text-red-500 bg-white/50 rounded hover:bg-white transition-colors">
                <X size={20} />
              </button>
              <button onClick={handleSave} className="p-1 text-gray-500 hover:text-green-600 bg-white/50 rounded hover:bg-white transition-colors">
                <Check size={20} />
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="flex flex-col flex-1 mt-2">
          <h3 className="font-bold text-xl mb-2 text-gray-800 flex items-center gap-2">
            {note.iconType === 'image' && note.icon ? (
              <img src={note.icon} alt="icon" className="w-6 h-6 object-cover rounded shadow-sm" />
            ) : (
              <span>{note.icon || '📌'}</span>
            )}
            {note.title}
          </h3>
          <p className="text-gray-700 text-lg flex-grow whitespace-pre-wrap leading-relaxed">
            {note.content}
          </p>
          
          <div className="mt-4 flex items-center justify-between text-gray-500/80 border-t border-black/10 pt-2">
            <span className="text-sm font-medium">
              {note.link ? '點擊卡片前往 ↗' : '無連結'}
            </span>
            <Paperclip size={16} />
          </div>
        </div>
      )}
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>