import React, { useState } from 'react';

const NepaliCalendar = () => {
  const [currentMonth, setCurrentMonth] = useState(0);
  
  // Nepali month names
  const nepaliMonths = [
    'बैशाख', 'जेठ', 'असार', 'श्रावण', 'भदौ', 'असोज', 
    'कार्तिक', 'मंसिर', 'पुष', 'माघ', 'फागुन', 'चैत्र'
  ];
  
  // English equivalent months (approximate)
  const englishMonthEquivalents = [
    '(Apr-May)', '(May-Jun)', '(Jun-Jul)', '(Jul-Aug)', '(Aug-Sep)', '(Sep-Oct)',
    '(Oct-Nov)', '(Nov-Dec)', '(Dec-Jan)', '(Jan-Feb)', '(Feb-Mar)', '(Mar-Apr)'
  ];
  
  // Days of the week in Nepali
  const nepaliDaysOfWeek = [
    'आइतबार', 'सोमबार', 'मंगलबार', 'बुधबार', 'बिहिबार', 'शुक्रबार', 'शनिबार'
  ];
  
  // Short form of days
  const shortDays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  
  // Tithis (lunar days) in Nepali
  const tithis = [
    'प्रतिपदा', 'द्वितीया', 'तृतीया', 'चतुर्थी', 'पञ्चमी', 'षष्ठी',
    'सप्तमी', 'अष्टमी', 'नवमी', 'दशमी', 'एकादशी', 'द्वादशी',
    'त्रयोदशी', 'चतुर्दशी', 'पूर्णिमा', 'औंसी'
  ];
  
  // Calendar data for each month of 2082 BS
  // This is sample data for Baishakh (first month)
  // In a real app, you would have complete data for all months
  const calendarData = [
    // Baishakh
    {
      days: 31,
      startDay: 0, // Sunday
      dates: [
        { date: 1, tithi: 'प्रतिपदा' },
        { date: 2, tithi: 'द्वितीया' },
        { date: 3, tithi: 'तृतीया' },
        { date: 4, tithi: 'चतुर्थी' },
        { date: 5, tithi: 'पञ्चमी' },
        { date: 6, tithi: 'षष्ठी' },
        { date: 7, tithi: 'सप्तमी' },
        { date: 8, tithi: 'अष्टमी' },
        { date: 9, tithi: 'नवमी' },
        { date: 10, tithi: 'दशमी' },
        { date: 11, tithi: 'एकादशी' },
        { date: 12, tithi: 'द्वादशी' },
        { date: 13, tithi: 'त्रयोदशी' },
        { date: 14, tithi: 'चतुर्दशी' },
        { date: 15, tithi: 'पूर्णिमा' },
        { date: 16, tithi: 'प्रतिपदा' },
        { date: 17, tithi: 'द्वितीया' },
        { date: 18, tithi: 'तृतीया' },
        { date: 19, tithi: 'चतुर्थी' },
        { date: 20, tithi: 'पञ्चमी' },
        { date: 21, tithi: 'षष्ठी' },
        { date: 22, tithi: 'सप्तमी' },
        { date: 23, tithi: 'अष्टमी' },
        { date: 24, tithi: 'नवमी' },
        { date: 25, tithi: 'दशमी' },
        { date: 26, tithi: 'एकादशी' },
        { date: 27, tithi: 'द्वादशी' },
        { date: 28, tithi: 'त्रयोदशी' },
        { date: 29, tithi: 'चतुर्दशी' },
        { date: 30, tithi: 'औंसी' },
        { date: 31, tithi: 'प्रतिपदा' },
      ],
      specialDates: [
        { date: 23, note: 'अक्षय तृतीया' }
      ]
    },
    // Add data for other months here
    // Jestha, Ashar, etc.
  ];
  
  // For demo purposes, duplicate the first month data for all months
  const allMonthsData = Array(12).fill(calendarData[0]);
  
  const generateCalendarGrid = () => {
    const monthData = allMonthsData[currentMonth];
    const totalDays = monthData.days;
    const startDay = monthData.startDay;
    
    // Create calendar grid with empty cells for days before the 1st
    const calendarGrid = [];
    let dayCount = 1;
    
    for (let week = 0; week < 6; week++) {
      const weekRow = [];
      
      for (let day = 0; day < 7; day++) {
        if ((week === 0 && day < startDay) || dayCount > totalDays) {
          // Empty cell
          weekRow.push(null);
        } else {
          // Find the date data
          const dateData = monthData.dates.find(d => d.date === dayCount) || { date: dayCount, tithi: '' };
          
          // Check if it's a special date
          const isSpecial = monthData.specialDates && monthData.specialDates.some(sd => sd.date === dayCount);
          const specialNote = isSpecial ? 
            monthData.specialDates.find(sd => sd.date === dayCount).note : '';
          
          weekRow.push({
            date: dayCount,
            tithi: dateData.tithi,
            isSpecial,
            specialNote
          });
          
          dayCount++;
        }
      }
      
      calendarGrid.push(weekRow);
      
      // Break if we've used all days
      if (dayCount > totalDays) break;
    }
    
    return calendarGrid;
  };
  
  const handlePrevMonth = () => {
    setCurrentMonth(prev => (prev === 0 ? 11 : prev - 1));
  };
  
  const handleNextMonth = () => {
    setCurrentMonth(prev => (prev === 11 ? 0 : prev + 1));
  };
  
  const handleMonthChange = (e) => {
    setCurrentMonth(parseInt(e.target.value));
  };
  
  return (
    <div className="flex flex-col min-h-screen bg-orange-50">
      {/* Header */}
      <div className="bg-[#FF7722] text-white text-center py-3 text-xl font-bold">
        वैदिक पञ्चाङ्ग म्यानमार्ट २०८२
      </div>
      
      <div className="flex-1 max-w-md mx-auto w-full p-4">
        <div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
          {/* Month Selector */}
          <div className="p-3">
            <select 
              value={currentMonth}
              onChange={handleMonthChange}
              className="w-full p-2 border border-gray-300 rounded-md text-gray-700"
            >
              {nepaliMonths.map((month, index) => (
                <option key={index} value={index}>
                  {month} ({index + 1})
                </option>
              ))}
            </select>
          </div>
          
          {/* Month Header */}
          <div className="bg-[#FF7722] text-white p-3 flex justify-between items-center">
            <div className="text-xl font-bold">{nepaliMonths[currentMonth]}</div>
            <div>{englishMonthEquivalents[currentMonth]}</div>
          </div>
          
          {/* Days of Week Header */}
          <div className="grid grid-cols-7 bg-[#FF9955] text-white">
            {shortDays.map((day, index) => (
              <div key={index} className="text-center p-2 text-xs font-bold">
                <div>{nepaliDaysOfWeek[index]}</div>
                <div>{day}</div>
              </div>
            ))}
          </div>
          
          {/* Calendar Grid */}
          <div className="bg-white">
            {generateCalendarGrid().map((week, weekIndex) => (
              <div key={weekIndex} className="grid grid-cols-7">
                {week.map((day, dayIndex) => (
                  <div 
                    key={dayIndex} 
                    className={`border p-2 min-h-[80px] ${day ? 'bg-orange-50' : 'bg-gray-100'}`}
                  >
                    {day && (
                      <div className="flex flex-col h-full">
                        <div className="text-lg font-bold text-gray-800">{day.date}</div>
                        <div className="text-purple-700 text-sm">{day.tithi}</div>
                        {day.isSpecial && (
                          <div className="mt-auto text-red-600 text-xs font-bold">
                            {day.specialNote}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            ))}
          </div>
          
          {/* Navigation */}
          <div className="flex justify-between items-center p-3 bg-gray-100">
            <button 
              onClick={handlePrevMonth}
              className="text-gray-600 hover:text-gray-900"
            >
              ◄
            </button>
            <div className="h-2 bg-gray-300 flex-1 mx-2 rounded-full">
              <div 
                className="h-full bg-[#FF7722] rounded-full" 
                style={{ width: `${((currentMonth + 1) / 12) * 100}%` }}
              ></div>
            </div>
            <button 
              onClick={handleNextMonth}
              className="text-gray-600 hover:text-gray-900"
            >
              ►
            </button>
          </div>
          
          {/* Action Buttons */}
          <div className="p-3 space-y-2">
            <button className="w-full bg-[#FF7722] text-white py-3 rounded-md font-bold">
              अघिल्लो महिना
            </button>
            <button className="w-full bg-[#FF7722] text-white py-3 rounded-md font-bold">
              अर्को महिना
            </button>
          </div>
        </div>
      </div>
      
      {/* Footer */}
      <div className="bg-[#FF7722] text-white text-center py-3">
        म्यानमार्ट देखाको तिथि पञ्चाङ्ग
      </div>
    </div>
  );
};

export default NepaliCalendar;