import React, { useState, useEffect } from 'react';
import { Calendar, ChevronLeft, ChevronRight, Info, RefreshCw } from 'lucide-react';

// Nepali calendar data - months, days and conversion logic
const nepaliMonths = [
  'Baishakh', 'Jestha', 'Ashadh', 'Shrawan', 
  'Bhadra', 'Ashwin', 'Kartik', 'Mangsir',
  'Poush', 'Magh', 'Falgun', 'Chaitra'
];

const nepaliMonthDays = {
  2080: [31, 31, 32, 32, 31, 30, 30, 29, 30, 29, 30, 30], // Days in each month for 2080 BS
  2081: [31, 32, 31, 32, 31, 30, 30, 30, 29, 29, 30, 31],
  2082: [31, 31, 32, 31, 31, 31, 30, 29, 30, 29, 30, 30],
};

// Festivals data
const festivals = {
  "2080-1-14": "Nepali New Year",
  "2080-2-23": "Buddha Jayanti",
  "2080-3-15": "Guru Purnima",
  "2080-5-16": "Janai Purnima",
  "2080-5-23": "Gai Jatra",
  "2080-5-24": "Krishna Janmashtami",
  "2080-6-10": "Indra Jatra",
  "2080-7-2": "Dashain Begins",
  "2080-7-10": "Vijaya Dashami",
  "2080-7-25": "Tihar Begins",
  "2080-7-27": "Laxmi Puja",
  "2080-7-29": "Bhai Tika",
  "2080-9-15": "Tamu Lhosar",
  "2080-10-1": "Maghe Sankranti",
  "2080-10-30": "Sonam Lhosar",
  "2080-11-7": "Shivaratri",
  "2080-11-21": "Gyalpo Lhosar",
  "2080-12-11": "Holi",
  "2080-12-24": "Ram Navami",
};

// Simple BS to AD conversion (approximate)
const convertBsToAd = (bsDate) => {
  const [bsYear, bsMonth, bsDay] = bsDate.split('-').map(Number);
  
  // This is a simplified conversion - in a real app, you'd use a more accurate algorithm
  const adDate = new Date(bsYear - 57, bsMonth - 1, bsDay + 14);
  return adDate.toISOString().split('T')[0];
};

// Simple AD to BS conversion (approximate)
const convertAdToBs = (adDate) => {
  const date = new Date(adDate);
  const adYear = date.getFullYear();
  const adMonth = date.getMonth() + 1;
  const adDay = date.getDate();
  
  // This is a simplified conversion - in a real app, you'd use a more accurate algorithm
  const bsYear = adYear + 57;
  const bsMonth = adMonth;
  const bsDay = adDay - 14;
  
  // Handle month/year boundaries (simplified)
  let adjustedBsMonth = bsMonth;
  let adjustedBsDay = bsDay;
  let adjustedBsYear = bsYear;
  
  if (bsDay <= 0) {
    adjustedBsMonth = bsMonth - 1;
    if (adjustedBsMonth <= 0) {
      adjustedBsMonth = 12;
      adjustedBsYear = bsYear - 1;
    }
    adjustedBsDay = 30 + bsDay; // Simplified, should use actual days in previous month
  }
  
  return `${adjustedBsYear}-${adjustedBsMonth}-${adjustedBsDay}`;
};

// Get current Nepali date (approximate)
const getCurrentNepaliDate = () => {
  const today = new Date();
  const adDate = today.toISOString().split('T')[0];
  return convertAdToBs(adDate);
};

export default function NepaliCalendarApp() {
  const [currentDate, setCurrentDate] = useState(getCurrentNepaliDate());
  const [currentYear, currentMonth, currentDay] = currentDate.split('-').map(Number);
  const [showConverter, setShowConverter] = useState(false);
  const [adDate, setAdDate] = useState('');
  const [bsDate, setBsDate] = useState('');
  const [selectedDate, setSelectedDate] = useState(null);
  const [showInfo, setShowInfo] = useState(false);

  useEffect(() => {
    // Initialize converter dates
    const today = new Date().toISOString().split('T')[0];
    setAdDate(today);
    setBsDate(convertAdToBs(today));
  }, []);

  const handlePrevMonth = () => {
    let newMonth = currentMonth - 1;
    let newYear = currentYear;
    
    if (newMonth < 1) {
      newMonth = 12;
      newYear -= 1;
    }
    
    setCurrentDate(`${newYear}-${newMonth}-1`);
    setSelectedDate(null);
  };

  const handleNextMonth = () => {
    let newMonth = currentMonth + 1;
    let newYear = currentYear;
    
    if (newMonth > 12) {
      newMonth = 1;
      newYear += 1;
    }
    
    setCurrentDate(`${newYear}-${newMonth}-1`);
    setSelectedDate(null);
  };

  const handleDateClick = (day) => {
    const dateString = `${currentYear}-${currentMonth}-${day}`;
    setSelectedDate(dateString);
  };

  const handleAdDateChange = (e) => {
    const newAdDate = e.target.value;
    setAdDate(newAdDate);
    setBsDate(convertAdToBs(newAdDate));
  };

  const handleBsDateChange = (e) => {
    const newBsDate = e.target.value;
    setBsDate(newBsDate);
    setAdDate(convertBsToAd(newBsDate));
  };

  const goToToday = () => {
    setCurrentDate(getCurrentNepaliDate());
    setSelectedDate(null);
  };

  // Generate calendar days
  const generateCalendarDays = () => {
    const daysInMonth = nepaliMonthDays[currentYear]?.[currentMonth - 1] || 30;
    const days = [];
    
    // Get first day of month (simplified - in a real app, calculate actual day of week)
    const firstDayOfWeek = 0; // Sunday
    
    // Add empty cells for days before the first day of the month
    for (let i = 0; i < firstDayOfWeek; i++) {
      days.push(<div key={`empty-${i}`} className="h-10 w-10"></div>);
    }
    
    // Add days of the month
    for (let day = 1; day <= daysInMonth; day++) {
      const dateString = `${currentYear}-${currentMonth}-${day}`;
      const isFestival = festivals[dateString];
      const isSelected = selectedDate === dateString;
      const isToday = dateString === getCurrentNepaliDate();
      
      days.push(
        <div 
          key={day} 
          onClick={() => handleDateClick(day)}
          className={`h-10 w-10 flex items-center justify-center rounded-full cursor-pointer relative
            ${isSelected ? 'bg-[#8B0000] text-white' : ''}
            ${isToday && !isSelected ? 'border-2 border-[#8B0000]' : ''}
            ${isFestival ? 'font-bold' : ''}
            hover:bg-[#F4C430] hover:text-[#8B0000]`}
        >
          {day}
          {isFestival && <div className="absolute bottom-0 w-4 h-1 bg-[#6A5ACD] rounded-full"></div>}
        </div>
      );
    }
    
    return days;
  };

  return (
    <div className="min-h-screen bg-[#FFFDD0] text-gray-800 p-4 font-sans">
      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
        {/* Header */}
        <div className="bg-[#8B0000] text-white p-4">
          <div className="flex justify-between items-center">
            <h1 className="text-xl font-bold flex items-center">
              <Calendar className="mr-2" size={20} />
              Nepali Calendar
            </h1>
            <div className="flex space-x-2">
              <button 
                onClick={() => setShowInfo(!showInfo)}
                className="p-1 rounded-full hover:bg-[#F4C430] hover:text-[#8B0000]"
              >
                <Info size={20} />
              </button>
            </div>
          </div>
        </div>
        
        {/* Info Panel */}
        {showInfo && (
          <div className="p-4 bg-[#F4C430] bg-opacity-20 border-b border-[#8B0000]">
            <h3 className="font-bold mb-2">About Nepali Calendar</h3>
            <p className="text-sm">
              The Nepali Calendar (Bikram Sambat) is approximately 56-57 years ahead of the Gregorian calendar.
              It begins in mid-April with the month of Baishakh and has its own system of months, days, and festivals.
            </p>
          </div>
        )}
        
        {/* Month Navigation */}
        <div className="flex justify-between items-center p-4 border-b">
          <button 
            onClick={handlePrevMonth}
            className="p-2 rounded-full hover:bg-gray-100"
          >
            <ChevronLeft size={20} />
          </button>
          
          <div className="text-center">
            <h2 className="text-lg font-bold">{nepaliMonths[currentMonth - 1]} {currentYear}</h2>
            <p className="text-xs text-gray-500">
              {new Date(convertBsToAd(`${currentYear}-${currentMonth}-1`)).toLocaleDateString('en-US', {
                month: 'long',
                year: 'numeric'
              })}
            </p>
          </div>
          
          <button 
            onClick={handleNextMonth}
            className="p-2 rounded-full hover:bg-gray-100"
          >
            <ChevronRight size={20} />
          </button>
        </div>
        
        {/* Calendar Grid */}
        <div className="p-4">
          {/* Weekday headers */}
          <div className="grid grid-cols-7 gap-1 mb-2 text-center text-sm font-medium text-gray-500">
            <div>Su</div>
            <div>Mo</div>
            <div>Tu</div>
            <div>We</div>
            <div>Th</div>
            <div>Fr</div>
            <div>Sa</div>
          </div>
          
          {/* Calendar days */}
          <div className="grid grid-cols-7 gap-1">
            {generateCalendarDays()}
          </div>
        </div>
        
        {/* Selected Date Info */}
        {selectedDate && (
          <div className="p-4 border-t border-gray-200 bg-gray-50">
            <h3 className="font-bold">
              {selectedDate.split('-')[2]} {nepaliMonths[currentMonth - 1]} {currentYear} BS
            </h3>
            <p className="text-sm text-gray-600">
              {new Date(convertBsToAd(selectedDate)).toLocaleDateString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
              })}
            </p>
            {festivals[selectedDate] && (
              <div className="mt-2 p-2 bg-[#F4C430] bg-opacity-20 rounded text-sm">
                <span className="font-bold">Festival:</span> {festivals[selectedDate]}
              </div>
            )}
          </div>
        )}
        
        {/* Date Converter */}
        <div className="border-t border-gray-200">
          <button 
            onClick={() => setShowConverter(!showConverter)}
            className="w-full p-3 flex items-center justify-center text-[#8B0000] hover:bg-gray-100"
          >
            <RefreshCw size={16} className="mr-2" />
            {showConverter ? 'Hide Date Converter' : 'BS-AD Date Converter'}
          </button>
          
          {showConverter && (
            <div className="p-4 bg-gray-50">
              <div className="mb-3">
                <label className="block text-sm font-medium mb-1">AD Date:</label>
                <input 
                  type="date" 
                  value={adDate}
                  onChange={handleAdDateChange}
                  className="w-full p-2 border rounded"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-1">BS Date (YYYY-MM-DD):</label>
                <input 
                  type="text" 
                  value={bsDate}
                  onChange={handleBsDateChange}
                  placeholder="YYYY-MM-DD"
                  className="w-full p-2 border rounded"
                />
              </div>
            </div>
          )}
        </div>
        
        {/* Footer */}
        <div className="bg-gray-100 p-4 flex justify-between">
          <button 
            onClick={goToToday}
            className="px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-opacity-90"
          >
            Today
          </button>
          
          <div className="text-xs text-gray-500 flex items-center">
            <span>Nepali Calendar App</span>
          </div>
        </div>
      </div>
    </div>
  );
}