import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs, query, where } from 'firebase/firestore';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { ChevronLeft, ChevronRight, Calendar, Bell, Settings, Info } from 'lucide-react';

// Firebase configuration
const firebaseConfig = {
  apiKey: "IvKQMx",
  authDomain: "IvKQMx.firebaseapp.com",
  projectId: "IvKQMx",
  storageBucket: "IvKQMx.appspot.com",
  messagingSenderId: "IvKQMx",
  appId: "IvKQMx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

// Mock data for development (will be replaced with Firebase data)
const monthsNP = [
  'बैशाख', 'जेठ', 'असार', 'श्रावण', 'भदौ', 'असोज', 
  'कार्तिक', 'मंसिर', 'पुष', 'माघ', 'फागुन', 'चैत्र'
];

const monthsEN = [
  'Baisakh', 'Jestha', 'Asar', 'Shrawan', 'Bhadra', 'Ashwin',
  'Kartik', 'Mangsir', 'Poush', 'Magh', 'Falgun', 'Chaitra'
];

const weekdaysNP = ['आइतवार', 'सोमवार', 'मङ्गलवार', 'बुधवार', 'बिहिवार', 'शुक्रवार', 'शनिवार'];
const weekdaysEN = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const gregorianMonths = [
  'January-February', 'February-March', 'March-April', 'April-May', 
  'May-June', 'June-July', 'July-August', 'August-September',
  'September-October', 'October-November', 'November-December', 'December-January'
];

// Convert English digits to Nepali digits
const toNepaliDigits = (num) => {
  const nepaliDigits = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९'];
  return num.toString().split('').map(digit => 
    isNaN(parseInt(digit)) ? digit : nepaliDigits[parseInt(digit)]
  ).join('');
};

// Mock calendar data for Baisakh 2082
const generateMockCalendarData = () => {
  const days = [];
  const startDay = 6; // Saturday (0-indexed, 6 = Saturday)
  const totalDays = 31;
  
  // Add empty cells for days before the 1st of the month
  for (let i = 0; i < startDay; i++) {
    days.push({ empty: true });
  }
  
  // Generate days of the month
  for (let i = 1; i <= totalDays; i++) {
    const gregorianDate = i + 13; // Approximation for April-May
    const nepaliDate = i;
    
    let tithi = '';
    let isSpecial = false;
    
    // Add some sample tithis and festivals
    if (i === 1) {
      tithi = 'नयाँ वर्ष';
      isSpecial = true;
    } else if (i === 14) {
      tithi = 'मेष सङ्क्रान्ति';
      isSpecial = true;
    } else if (i === 15) {
      tithi = 'पूर्णिमा';
    } else if (i === 22) {
      tithi = 'एकादशी';
    } else if (i === 30) {
      tithi = 'औंसी';
    }
    
    days.push({
      gregorianDate: gregorianDate > 30 ? gregorianDate - 30 : gregorianDate,
      nepaliDate,
      tithi,
      isSpecial
    });
  }
  
  return days;
};

const NepaliVedicCalendar = () => {
  const [currentYear, setCurrentYear] = useState(2082);
  const [currentMonth, setCurrentMonth] = useState(0); // 0-indexed (0 = Baisakh)
  const [calendarData, setCalendarData] = useState([]);
  const [language, setLanguage] = useState('np'); // 'np' for Nepali, 'en' for English
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);
  
  // Check if user is authenticated
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
    });
    
    return () => unsubscribe();
  }, []);
  
  // Fetch calendar data from Firebase (mock for now)
  useEffect(() => {
    const fetchCalendarData = async () => {
      setLoading(true);
      
      try {
        // In a real implementation, we would fetch from Firebase
        // const calendarRef = collection(db, 'calendar');
        // const q = query(calendarRef, where("year", "==", currentYear), where("month", "==", currentMonth));
        // const querySnapshot = await getDocs(q);
        // const data = querySnapshot.docs.map(doc => doc.data());
        
        // For now, use mock data
        const mockData = generateMockCalendarData();
        setCalendarData(mockData);
      } catch (error) {
        console.error("Error fetching calendar data:", error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchCalendarData();
  }, [currentYear, currentMonth]);
  
  const goToPreviousMonth = () => {
    if (currentMonth === 0) {
      setCurrentMonth(11);
      setCurrentYear(currentYear - 1);
    } else {
      setCurrentMonth(currentMonth - 1);
    }
  };
  
  const goToNextMonth = () => {
    if (currentMonth === 11) {
      setCurrentMonth(0);
      setCurrentYear(currentYear + 1);
    } else {
      setCurrentMonth(currentMonth + 1);
    }
  };
  
  const selectMonth = (monthIndex) => {
    setCurrentMonth(monthIndex);
  };
  
  const toggleLanguage = () => {
    setLanguage(language === 'np' ? 'en' : 'np');
  };
  
  // Render calendar grid
  const renderCalendarGrid = () => {
    if (loading) {
      return (
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-red-600"></div>
        </div>
      );
    }
    
    return (
      <div className="grid grid-cols-7 gap-1 mt-2">
        {/* Weekday headers */}
        {(language === 'np' ? weekdaysNP : weekdaysEN).map((day, index) => (
          <div key={`weekday-${index}`} className="text-center font-semibold p-1 text-xs md:text-sm bg-orange-500 text-white">
            {day}
          </div>
        ))}
        
        {/* Calendar days */}
        {calendarData.map((day, index) => {
          if (day.empty) {
            return <div key={`empty-${index}`} className="p-2 bg-gray-100"></div>;
          }
          
          return (
            <div 
              key={`day-${index}`} 
              className={`p-2 border border-gray-200 hover:bg-gray-50 transition-colors ${
                day.isSpecial ? 'bg-red-50' : ''
              }`}
            >
              <div className="text-right text-gray-500 text-xs">
                {day.gregorianDate}
              </div>
              <div className="text-center text-xl font-bold">
                {language === 'np' ? toNepaliDigits(day.nepaliDate) : day.nepaliDate}
              </div>
              {day.tithi && (
                <div className={`text-center text-xs ${day.isSpecial ? 'text-red-600 font-bold' : 'text-orange-600'}`}>
                  {day.tithi}
                </div>
              )}
            </div>
          );
        })}
      </div>
    );
  };
  
  // Render month thumbnails
  const renderMonthThumbnails = () => {
    return (
      <div className="flex overflow-x-auto py-2 mt-4 space-x-2">
        {(language === 'np' ? monthsNP : monthsEN).map((month, index) => (
          <div 
            key={`month-${index}`}
            onClick={() => selectMonth(index)}
            className={`flex-shrink-0 cursor-pointer p-2 rounded-md text-center min-w-[80px] ${
              currentMonth === index 
                ? 'bg-orange-500 text-white border-2 border-red-600' 
                : 'bg-orange-100 text-orange-800'
            }`}
          >
            {month}
          </div>
        ))}
      </div>
    );
  };
  
  return (
    <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
      {/* Header */}
      <div className="bg-red-600 text-white p-4">
        <div className="flex justify-between items-center">
          <div className="text-sm">
            {language === 'np' ? `वि.सं. ${toNepaliDigits(currentYear)}` : `B.S. ${currentYear}`}
          </div>
          <div className="text-sm">
            {gregorianMonths[currentMonth]}
          </div>
        </div>
        
        <div className="flex justify-between items-center mt-2">
          <button 
            onClick={goToPreviousMonth}
            className="bg-white bg-opacity-20 rounded-full p-2 hover:bg-opacity-30 transition-colors"
          >
            <ChevronLeft size={20} />
          </button>
          
          <h1 className="text-2xl font-bold text-center">
            {language === 'np' ? 'वैदिक तिथि पत्रम्' : 'Vedic Calendar'}
          </h1>
          
          <button 
            onClick={goToNextMonth}
            className="bg-white bg-opacity-20 rounded-full p-2 hover:bg-opacity-30 transition-colors"
          >
            <ChevronRight size={20} />
          </button>
        </div>
        
        <div className="text-center text-xl mt-2">
          {language === 'np' ? monthsNP[currentMonth] : monthsEN[currentMonth]}
        </div>
      </div>
      
      {/* Main Calendar */}
      <div className="p-4">
        {renderCalendarGrid()}
      </div>
      
      {/* Month Thumbnails */}
      <div className="px-4 pb-4">
        {renderMonthThumbnails()}
      </div>
      
      {/* Footer with actions */}
      <div className="bg-gray-100 p-4 flex justify-around">
        <button 
          onClick={toggleLanguage}
          className="flex flex-col items-center text-gray-600 hover:text-red-600"
        >
          <Settings size={20} />
          <span className="text-xs mt-1">{language === 'np' ? 'भाषा' : 'Language'}</span>
        </button>
        
        <button className="flex flex-col items-center text-gray-600 hover:text-red-600">
          <Bell size={20} />
          <span className="text-xs mt-1">{language === 'np' ? 'सूचना' : 'Notifications'}</span>
        </button>
        
        <button className="flex flex-col items-center text-gray-600 hover:text-red-600">
          <Calendar size={20} />
          <span className="text-xs mt-1">{language === 'np' ? 'आज' : 'Today'}</span>
        </button>
        
        <button className="flex flex-col items-center text-gray-600 hover:text-red-600">
          <Info size={20} />
          <span className="text-xs mt-1">{language === 'np' ? 'जानकारी' : 'Info'}</span>
        </button>
      </div>
    </div>
  );
};

export default NepaliVedicCalendar;