import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';

// --- Firebase and Date Utility Functions ---

// Global variables provided by the environment
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

// Helper to get the start of the week (Monday) for any given date
const getWeekStart = (date) => {
    const day = date.getDay();
    const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Adjust when day is Sunday
    const weekStart = new Date(date.setDate(diff));
    weekStart.setHours(0, 0, 0, 0);
    return weekStart;
};

// Helper to format date as YYYY-MM-DD string for document ID
const formatDate = (date) => {
    return date.toISOString().split('T')[0];
};

// Helper to add days to a date
const addDays = (date, days) => {
    const newDate = new Date(date);
    newDate.setDate(date.getDate() + days);
    return newDate;
};

// --- Constants ---

const DAY_NAMES = ['Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu', 'Ahad'];
const TIME_SLOTS = ['Pagi', 'Siang', 'Malam'];

const MOODS = {
    'Happy': { label: 'Gembira', color: 'bg-green-500', icon: '😄', darkColor: 'bg-green-600' },
    'Not Bad': { label: 'Biasa Saja', color: 'bg-yellow-400', icon: '🙂', darkColor: 'bg-yellow-500' },
    'Stressed': { label: 'Tertekan', color: 'bg-orange-500', icon: '😟', darkColor: 'bg-orange-600' },
    'Sad': { label: 'Sedih', color: 'bg-blue-500', icon: '😢', darkColor: 'bg-blue-600' },
    'Angry': { label: 'Marah', color: 'bg-red-500', icon: '😡', darkColor: 'bg-red-600' },
};

const getDefaultWeekData = (weekStartDateString) => {
    const records = {};
    DAY_NAMES.forEach(day => {
        records[day] = {};
        TIME_SLOTS.forEach(slot => {
            records[day][slot] = { mood: null, notes: '' };
        });
    });
    return { weekStart: weekStartDateString, records };
};

// --- Components ---

// Mood Selection Modal
const MoodSelector = ({ day, slot, currentRecord, onClose, onSave }) => {
    const [selectedMood, setSelectedMood] = useState(currentRecord?.mood || null);
    const [notes, setNotes] = useState(currentRecord?.notes || '');

    const handleSave = () => {
        onSave(day, slot, selectedMood, notes);
        onClose();
    };

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-lg transform transition-all">
                <h2 className="text-2xl font-bold text-gray-800 mb-4">
                    Pilih Mood Anda: {day}, {slot}
                </h2>
                
                <div className="flex flex-wrap gap-2 mb-6">
                    {Object.entries(MOODS).map(([moodKey, moodData]) => (
                        <button
                            key={moodKey}
                            onClick={() => setSelectedMood(moodKey)}
                            className={`p-3 rounded-full text-sm font-semibold transition-all duration-200
                                ${selectedMood === moodKey
                                    ? `${moodData.darkColor} text-white ring-4 ring-offset-2 ${moodData.darkColor.replace('bg-', 'ring-')}`
                                    : `${moodData.color} text-white opacity-75 hover:opacity-100`
                                }
                            `}
                        >
                            {moodData.icon} {moodData.label}
                        </button>
                    ))}
                </div>

                <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-2">
                    Catatan (Tulis perasaan anda):
                </label>
                <textarea
                    id="notes"
                    rows="3"
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-sky-500 focus:border-sky-500 transition-shadow"
                    placeholder="Saya rasa gembira kerana dapat menyiapkan projek lebih awal..."
                ></textarea>

                <div className="mt-6 flex justify-end space-x-3">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 font-medium transition duration-150"
                    >
                        Batal
                    </button>
                    <button
                        onClick={handleSave}
                        disabled={!selectedMood}
                        className={`px-4 py-2 text-white rounded-lg font-medium transition duration-150
                            ${!selectedMood ? 'bg-gray-400 cursor-not-allowed' : 'bg-sky-500 hover:bg-sky-600'}
                        `}
                    >
                        Simpan Rekod
                    </button>
                </div>
            </div>
        </div>
    );
};

// Main App Component
const App = () => {
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [currentWeekStart, setCurrentWeekStart] = useState(getWeekStart(new Date()));
    const [weekData, setWeekData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState('');

    const [modal, setModal] = useState({ isOpen: false, day: null, slot: null });

    // 1. Firebase Initialization and Authentication
    useEffect(() => {
        try {
            const app = initializeApp(firebaseConfig);
            const firestore = getFirestore(app);
            const authInstance = getAuth(app);
            setDb(firestore);
            setAuth(authInstance);

            const unsubscribe = onAuthStateChanged(authInstance, async (user) => {
                if (!user) {
                    // Sign in anonymously if no user is signed in
                    await signInAnonymously(authInstance);
                }
                // Use custom token if available, otherwise rely on anonymous sign-in
                if (initialAuthToken) {
                    await signInWithCustomToken(authInstance, initialAuthToken);
                }
                setUserId(authInstance.currentUser?.uid || 'anonymous');
                setIsLoading(false);
            });

            return () => unsubscribe();
        } catch (e) {
            console.error("Firebase initialization failed:", e);
            setError("Gagal memuatkan Firebase. Sila semak konfigurasi.");
            setIsLoading(false);
        }
    }, []);

    const weekStartDateString = useMemo(() => formatDate(currentWeekStart), [currentWeekStart]);

    // 2. Firestore Data Listener
    useEffect(() => {
        if (!db || !userId) return;

        const docRef = doc(db, 
            `artifacts/${appId}/users/${userId}/weekly_mood_tracker`, 
            weekStartDateString
        );
        
        // Listen for real-time updates
        const unsubscribe = onSnapshot(docRef, (docSnap) => {
            if (docSnap.exists()) {
                setWeekData(docSnap.data());
            } else {
                // Initialize default data if document doesn't exist
                setWeekData(getDefaultWeekData(weekStartDateString));
            }
        }, (error) => {
            console.error("Error fetching Firestore data:", error);
            setError("Gagal memuatkan data mood mingguan.");
        });

        return () => unsubscribe(); // Clean up listener
    }, [db, userId, weekStartDateString]);

    // 3. Save function
    const saveWeekData = useCallback(async (newRecords) => {
        if (!db || !userId) return;

        const docRef = doc(db, 
            `artifacts/${appId}/users/${userId}/weekly_mood_tracker`, 
            weekStartDateString
        );

        try {
            const dataToSave = { ...weekData, records: newRecords };
            // Using setDoc with merge: true to ensure the document exists and is updated
            await setDoc(docRef, dataToSave, { merge: true });
            // console.log("Data saved successfully!");
        } catch (e) {
            console.error("Error saving document:", e);
            setError("Gagal menyimpan rekod mood.");
        }
    }, [db, userId, weekStartDateString, weekData]);

    // 4. Mood update logic from Modal
    const handleMoodSave = useCallback((day, slot, mood, notes) => {
        const newRecords = {
            ...weekData.records,
            [day]: {
                ...weekData.records[day],
                [slot]: { mood, notes }
            }
        };
        setWeekData({ ...weekData, records: newRecords }); // Optimistic UI update
        saveWeekData(newRecords);
    }, [weekData, saveWeekData]);


    // 5. Navigation logic
    const navigateWeek = (direction) => {
        const newDate = addDays(currentWeekStart, direction * 7);
        setCurrentWeekStart(newDate);
    };

    if (isLoading) {
        return (
            <div className="flex items-center justify-center min-h-screen bg-gray-50">
                <div className="text-xl font-medium text-sky-600">Memuatkan Penjejak Mood...</div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="p-8 text-center bg-red-100 border border-red-400 text-red-700 rounded-lg m-4">
                <p className="font-bold">Ralat!</p>
                <p>{error}</p>
                <p className="mt-2 text-sm text-gray-500">ID Pengguna: {userId}</p>
            </div>
        );
    }
    
    const weekEndDate = addDays(currentWeekStart, 6);
    const formattedWeekRange = `${currentWeekStart.toLocaleDateString('ms-MY', { day: 'numeric', month: 'short' })} - ${weekEndDate.toLocaleDateString('ms-MY', { day: 'numeric', month: 'short', year: 'numeric' })}`;
    
    const today = formatDate(new Date());

    return (
        <div className="min-h-screen bg-gray-50 p-4 sm:p-8 font-sans">
            <header className="mb-8 text-center">
                <h1 className="text-4xl font-extrabold text-sky-700 mb-2">
                    Jurnal Mood Mingguan
                </h1>
                <p className="text-gray-600">Jejaki perasaan anda sepanjang hari.</p>
                <p className="mt-2 text-xs text-gray-400">ID Pengguna: {userId}</p>
            </header>

            {/* Week Navigation */}
            <div className="flex justify-between items-center mb-6 max-w-2xl mx-auto">
                <button
                    onClick={() => navigateWeek(-1)}
                    className="p-2 rounded-full bg-white shadow-md text-sky-600 hover:bg-gray-100 transition"
                    title="Minggu Sebelumnya"
                >
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path></svg>
                </button>
                <div className="text-center">
                    <h2 className="text-xl font-bold text-gray-800">
                        Minggu:
                    </h2>
                    <p className="text-lg text-sky-600 font-semibold">{formattedWeekRange}</p>
                </div>
                <button
                    onClick={() => navigateWeek(1)}
                    className="p-2 rounded-full bg-white shadow-md text-sky-600 hover:bg-gray-100 transition"
                    title="Minggu Seterusnya"
                >
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path></svg>
                </button>
            </div>

            {/* Mood Grid */}
            <div className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
                {/* Header Row */}
                <div className="grid grid-cols-4 bg-sky-100 font-bold text-sky-800 border-b border-sky-200">
                    <div className="p-3">Hari</div>
                    {TIME_SLOTS.map(slot => (
                        <div key={slot} className="p-3 text-center border-l border-sky-200">
                            {slot}
                        </div>
                    ))}
                </div>

                {/* Data Rows */}
                {weekData && DAY_NAMES.map((day, dayIndex) => {
                    const dayDate = formatDate(addDays(currentWeekStart, dayIndex));
                    const isToday = dayDate === today && weekStartDateString === formatDate(getWeekStart(new Date()));
                    
                    return (
                        <div 
                            key={day} 
                            className={`grid grid-cols-4 border-b border-gray-100 hover:bg-sky-50 transition duration-150
                                ${isToday ? 'bg-yellow-50 font-semibold border-2 border-yellow-300' : ''}
                            `}
                        >
                            {/* Day Name */}
                            <div className="p-3 font-bold text-gray-700">
                                {day}
                                {isToday && <span className="text-xs ml-1 text-yellow-600">(Hari Ini)</span>}
                            </div>
                            
                            {/* Time Slots */}
                            {TIME_SLOTS.map(slot => {
                                const record = weekData.records?.[day]?.[slot] || { mood: null, notes: '' };
                                const moodKey = record.mood;
                                const moodData = MOODS[moodKey];

                                return (
                                    <div
                                        key={slot}
                                        className={`p-2 border-l border-gray-100 flex items-center justify-center cursor-pointer relative group ${moodData ? moodData.color : 'bg-gray-100'}`}
                                        onClick={() => setModal({ isOpen: true, day, slot })}
                                        title={`Klik untuk merekod mood ${day}, ${slot}`}
                                    >
                                        <div className={`w-full h-full rounded-lg flex items-center justify-center transition duration-150 ${!moodData ? 'bg-gray-200 hover:bg-gray-300' : 'text-white'}`}>
                                            {moodData ? (
                                                <div className="flex flex-col items-center justify-center p-2">
                                                    <span className="text-3xl">{moodData.icon}</span>
                                                    <span className="text-xs font-medium mt-1">{moodData.label}</span>
                                                </div>
                                            ) : (
                                                <span className="text-gray-500 text-sm font-medium">Rekod Mood</span>
                                            )}
                                        </div>

                                        {/* Notes Indicator and Tooltip */}
                                        {record.notes && (
                                            <>
                                                <div className="absolute top-1 right-1 w-2 h-2 bg-sky-500 rounded-full border-2 border-white" title="Ada Catatan"></div>
                                                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 hidden group-hover:block w-64 p-3 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-10 transition-opacity">
                                                    <p className="font-bold mb-1">Catatan:</p>
                                                    <p className="line-clamp-3">{record.notes}</p>
                                                </div>
                                            </>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    );
                })}
            </div>
            
            {/* Legend */}
            <div className="mt-8 max-w-4xl mx-auto p-4 bg-sky-50 rounded-xl shadow-inner">
                <h3 className="text-lg font-bold text-sky-700 mb-3">Panduan Warna (Mood Indicator)</h3>
                <div className="flex flex-wrap gap-4 justify-center">
                    {Object.entries(MOODS).map(([key, data]) => (
                        <div key={key} className="flex items-center space-x-2">
                            <div className={`w-5 h-5 rounded-full ${data.color} shadow-md`}></div>
                            <span className="text-gray-700 font-medium">{data.label}</span>
                        </div>
                    ))}
                </div>
            </div>

            {/* Mood Selector Modal */}
            {modal.isOpen && weekData && (
                <MoodSelector
                    day={modal.day}
                    slot={modal.slot}
                    currentRecord={weekData.records[modal.day][modal.slot]}
                    onClose={() => setModal({ isOpen: false, day: null, slot: null })}
                    onSave={handleMoodSave}
                />
            )}
        </div>
    );
};

export default App;