import React, { useState, useEffect } from 'react';
import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
import axios from 'axios';
import TodaysMatch from './TodaysMatch';

const Home2 = () => {
  const [teams, setTeams] = useState([]);
  const [dates, setDates] = useState([]);
  const [selectedTeam, setSelectedTeam] = useState(null);
  const [showChartView, setShowChartView] = useState(false);
  const [showCalendar, setShowCalendar] = useState(false);
  const [currentTime, setCurrentTime] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [calendarData, setCalendarData] = useState([]);
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [upcomingMatches, setUpcomingMatches] = useState([]);

  // API URL
  const API_URL = 'http://localhost:5500/api';

  // Format time
  const formatTime = (timeString) => {
    try {
      const date = new Date(timeString);
      return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
    } catch (e) {
      return "XX:XX";
    }
  };

  

  // Check if a match is upcoming
  const isUpcoming = (resultTime) => {
    try {
      const now = new Date();
      const matchTime = new Date(resultTime);
      return matchTime > now;
    } catch (e) {
      return false;
    }
  };

  // Fetch teams data
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);

        // Get all teams
        const teamsResponse = await axios.get(`${API_URL}/teams`);

        // Get today's date and format it
        const today = new Date();
        const todayFormatted = today.toISOString().split('T')[0];

        // Get yesterday's date and format it
        const yesterday = new Date();
        yesterday.setDate(yesterday.getDate() - 1);
        const yesterdayFormatted = yesterday.toISOString().split('T')[0];

        // Set dates for display
        setDates([yesterdayFormatted, todayFormatted]);

        // Get today's results
        const todayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${todayFormatted}`);
        const todayResults = todayResultsResponse.data;

        // Get yesterday's results
        const yesterdayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${yesterdayFormatted}`);
        const yesterdayResults = yesterdayResultsResponse.data;

        // Process upcoming matches
        const upcoming = todayResults.filter(result => isUpcoming(result.result_time));
        setUpcomingMatches(upcoming);

        // Combine team data with results
        const teamsWithResults = teamsResponse.data.map(team => {
          // Get all results for this team
          const yesterdayTeamResults = yesterdayResults.filter(r => r.team === team.name);
          const todayTeamResults = todayResults.filter(r => r.team === team.name);

          // Create result arrays for both days
          const yesterdayResultsArr = yesterdayTeamResults.map(r => ({
            result: r.visible_result,
            time: formatTime(r.result_time)
          }));

          const todayResultsArr = todayTeamResults
            .filter(r => !isUpcoming(r.result_time))
            .map(r => ({
              result: r.visible_result,
              time: formatTime(r.result_time)
            }));

          // Extract latest scheduled time
          let latestTime = "XX:XX";
          const latestTodayResult = todayTeamResults
            .sort((a, b) => new Date(b.result_time) - new Date(a.result_time))
            .find(r => r.result_time);

          if (latestTodayResult) {
            latestTime = formatTime(latestTodayResult.result_time);
          }

          return {
            id: team.id,
            name: team.name,
            time: latestTime,
            results: {
              [yesterdayFormatted]: yesterdayResultsArr,
              [todayFormatted]: todayResultsArr
            }
          };
        });

        setTeams(teamsWithResults);
        setLoading(false);
      } catch (err) {
        console.error("Error fetching data:", err);
        setError("Failed to load team data. Please try again later.");
        setLoading(false);
      }
    };

    fetchData();

    // Update current time every minute
    const interval = setInterval(() => {
      const now = new Date();
      const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
      setCurrentTime(formattedTime);
    }, 60000);

    // Set initial time
    const now = new Date();
    const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
    setCurrentTime(formattedTime);

    return () => clearInterval(interval);
  }, []);

  // Show chart for selected team
  const handleViewChart = async (team) => {
    try {
      setLoading(true);
      // Get monthly results for the selected team
      const currentDate = new Date();
      const month = currentDate.getMonth() + 1;
      const year = currentDate.getFullYear();

      const response = await axios.post(`${API_URL}/results/monthly`, {
        team: team.name,
        month: `${year}-${month.toString().padStart(2, '0')}`
      });

      setSelectedTeam({
        ...team,
        chartData: response.data
      });

      setShowChartView(true);
      setShowCalendar(false);
      setLoading(false);
    } catch (err) {
      console.error("Error fetching chart data:", err);
      setError("Failed to load chart data. Please try again later.");
      setLoading(false);
    }
  };

  // Load calendar data
  const loadCalendarData = async (year, month) => {
    try {
      setLoading(true);

      // Calculate first and last day of month
      const firstDay = new Date(year, month, 1).toISOString().split('T')[0];
      const lastDay = new Date(year, month + 1, 0).toISOString().split('T')[0];

      // Get results for each day in the month
      const dailyResultsPromises = [];
      const currentDate = new Date(year, month, 1);
      const lastDate = new Date(year, month + 1, 0);

      while (currentDate <= lastDate) {
        const dateString = currentDate.toISOString().split('T')[0];
        dailyResultsPromises.push(
          axios.get(`${API_URL}/results/daily?date=${dateString}`)
            .then(response => ({
              date: dateString,
              results: response.data
            }))
            .catch(() => ({
              date: dateString,
              results: []
            }))
        );
        currentDate.setDate(currentDate.getDate() + 1);
      }

      const allResults = await Promise.all(dailyResultsPromises);

      // Format calendar data
      const calendarDays = [];
      const firstDayOfMonth = new Date(year, month, 1);
      const firstDayWeekday = firstDayOfMonth.getDay();

      // Add empty cells for days before the first of the month
      for (let i = 0; i < firstDayWeekday; i++) {
        calendarDays.push(null);
      }

      // Add days with results
      for (let i = 1; i <= lastDate.getDate(); i++) {
        const dateObj = new Date(year, month, i);
        const dateStr = dateObj.toISOString().split('T')[0];

        const dayData = allResults.find(r => r.date === dateStr);
        let dayResults = [];

        if (dayData && dayData.results.length > 0) {
          // Group by team
          const teamResults = {};

          dayData.results.forEach(result => {
            if (!teamResults[result.team]) {
              teamResults[result.team] = [];
            }
            teamResults[result.team].push({
              result: result.visible_result,
              time: formatTime(result.result_time)
            });
          });

          // Create an array for display
          dayResults = Object.entries(teamResults).map(([team, results]) => ({
            team,
            results
          }));
        }

        calendarDays.push({
          day: i,
          date: dateStr,
          results: dayResults
        });
      }

      setCalendarData(calendarDays);
      setLoading(false);
    } catch (err) {
      console.error("Error loading calendar data:", err);
      setError("Failed to load calendar data. Please try again later.");
      setLoading(false);
    }
  };

  // Handle calendar view button click
  const handleCalendarView = () => {
    const now = new Date();
    setCurrentMonth(now);
    loadCalendarData(now.getFullYear(), now.getMonth());
    setShowCalendar(true);
    setShowChartView(false);
  };

  // Handle month change in calendar
  const handleMonthChange = (increment) => {
    const newMonth = new Date(currentMonth);
    newMonth.setMonth(newMonth.getMonth() + increment);
    setCurrentMonth(newMonth);
    loadCalendarData(newMonth.getFullYear(), newMonth.getMonth());
  };

  // Refresh data
  const handleRefresh = () => {
    window.location.reload();
  };

  // Format date for display
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      weekday: 'short',
      month: 'long',
      day: 'numeric',
      year: 'numeric'
    });
  };


    const [openIndex, setOpenIndex] = useState(null);
  
    const toggleFAQ = (index) => {
      setOpenIndex(openIndex === index ? null : index);
    };
  
    const faqs = [
      { question: "HOW TO PLAY", answer: "Details about how to play." },
      { question: "WHERE TO PLAY", answer: "Information on where to play." },
      { question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
    ];

  return (
    <div className="bg-gray-200 min-h-screen">
      <div className="w-full bg-white p-4 text-center text-white">
        {/* Header */}
        <h1 className="text-3xl md:text-4xl font-bold uppercase text-red-600">
        <img
            src="./logo.PNG"
            alt="Advertisement"
            className="w-28 h-30 m-auto"
          />
        </h1>

        {/* Advertisement Banner */}
        <div className="mt-4 flex justify-center items- border">
          <img
            src="./add.png"
            alt="Advertisement"
            className="w-auto max-w-4xl h-14"
          />
        </div>

        {/* Informational Text */}
        <p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
          Delhi Diamond Satta Result And Monthly Satta Chart of March 2025 With Combined Chart of Gali, Desawar, Ghaziabad, Faridabad And Shri Ganesh from Matka Satta Fast, Matka Satta Result, Matka Satta Chart, Black Matka Satta and Matka Satta 786.
        </p>

        {/* Disclaimer */}
        <p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
          Matka-Satta .com is the most popular gaming discussion forum for players to use freely and we are not in partnership with any gaming company.
        </p>

        {/* Warning Message */}
        <p className="mt-2 text-white font-bold bg-red-700 p-2 rounded w-full lg:w-3/4 m-auto">
          कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद
        </p>

        {/* Contact Link */}
        <p className="mt-2 text-white font-medium bg-gray-800 p-2 rounded w-full lg:w-3/4 m-auto">
          हमसे संपर्क करने के लिए ➡ <a href="#" className="underline text-red-400 hover:text-red-300">यहाँ क्लिक करें</a>
        </p>

        {/* Timestamp */}
        <p className="mt-2 text-red-400 text-lg text-bold">
          Updated: {currentTime} IST.
        </p>
      </div>

      <div className="max-w-6xl mx-auto p-4">
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <p>{error}</p>
          </div>
        )}
        <TodaysMatch/>

        <div className="bg-red-600 p-4 text-white text-center text-xl font-bold rounded-t-lg shadow-lg">
           Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])}
        </div>

        {/* Controls */}
        <div className="bg-white p-4 mb-4 flex flex-col md:flex-row justify-between items-center shadow-md">
          <div className="text-lg font-semibold text-gray-800 mb-2 md:mb-0">Latest Results</div>

          <div className="flex gap-2">
            <button
              className="bg-black text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-gray-800 transition"
              onClick={handleCalendarView}
              disabled={loading}
            >
              <Calendar size={16} />
              Calendar View
            </button>
            <button
              className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition"
              onClick={handleRefresh}
              disabled={loading}
            >
              <RefreshCw size={16} />
              Refresh
            </button>
          </div>
        </div>

        {/* Loading indicator */}
        {loading && (
          <div className="bg-white p-8 mb-4 rounded shadow flex justify-center items-center">
            <div className="flex items-center gap-2">
              <RefreshCw size={24} className="animate-spin text-red-600" />
              <span>Loading data...</span>
            </div>
          </div>
        )}

        {/* Upcoming Matches */}
        {!loading && upcomingMatches.length > 0 && !showChartView && !showCalendar && (
          <div className="bg-white p-4 mb-4 rounded shadow">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2 text-red-600">
              <Clock size={20} />
              Upcoming Matches Today
            </h2>
            <div className="overflow-x-auto">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-black text-white">
                    <th className="border border-gray-300 p-2 text-left">Team</th>
                    <th className="border border-gray-300 p-2 text-center">Scheduled Time</th>
                  </tr>
                </thead>
                <tbody>
                  {upcomingMatches.map((match, index) => (
                    <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                      <td className="border border-gray-300 p-2 font-medium">{match.team}</td>
                      <td className="border border-gray-300 p-2 text-center">{formatTime(match.result_time)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Chart View */}
        {!loading && showChartView && selectedTeam && (
          <div className="bg-white p-4 mb-4 rounded shadow">
            <h2 className="text-lg font-semibold mb-4 text-red-600">Monthly Chart: {selectedTeam.name}</h2>
            <div className="overflow-x-auto">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-black text-white">
                    <th className="border border-gray-300 p-2 text-left">Date</th>
                    <th className="border border-gray-300 p-2 text-center">Time</th>
                    <th className="border border-gray-300 p-2 text-right">Result</th>
                  </tr>
                </thead>
                <tbody>
                  {selectedTeam.chartData && selectedTeam.chartData.map((item, index) => (
                    <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                      <td className="border border-gray-300 p-2">{new Date(item.result_date).toLocaleDateString()}</td>
                      <td className="border border-gray-300 p-2 text-center">{formatTime(item.result_time)}</td>
                      <td className="border border-gray-300 p-2 text-right font-bold">{item.result}</td>
                    </tr>
                  ))}
                  {(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && (
                    <tr>
                      <td colSpan="3" className="border border-gray-300 p-2 text-center">No chart data available</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            <div className="mt-4 flex justify-end">
              <button
                className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
                onClick={() => setShowChartView(false)}
              >
                Back to Results
              </button>
            </div>
          </div>
        )}

        {/* Calendar View - Improved Responsive Design */}
        {!loading && showCalendar && (
          <div className="bg-white p-4 mb-4 rounded shadow">
            <div className="flex justify-between items-center mb-4">
              <button
                className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
                onClick={() => handleMonthChange(-1)}
              >
                <ChevronLeft size={16} />
                <span className="hidden sm:inline">Previous</span>
              </button>

              <h2 className="text-lg font-semibold text-red-600">
                {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
              </h2>

              <button
                className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
                onClick={() => handleMonthChange(1)}
              >
                <span className="hidden sm:inline">Next</span>
                <ChevronRight size={16} />
              </button>
            </div>

            <div className="grid grid-cols-7 gap-1 mb-2">
              {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
                <div key={day} className="text-center font-semibold bg-gray-800 text-white p-1 text-xs sm:text-sm">{day}</div>
              ))}
            </div>

            <div className="grid grid-cols-7 gap-1">
              {calendarData.map((day, index) => (
                <div
                  key={index}
                  className={`border rounded p-1 overflow-y-auto ${day ? 'bg-white' : 'bg-gray-100'
                    }`}
                  style={{
                    height: "120px",
                    maxHeight: "120px"
                  }}
                >
                  {day && (
                    <>
                      <div className={`text-right text-sm font-medium ${new Date().toISOString().split('T')[0] === day.date ?
                          'bg-red-600 text-white p-1 rounded-full w-6 h-6 flex items-center justify-center ml-auto' :
                          'text-gray-700'
                        }`}>
                        {day.day}
                      </div>
                      <div className="overflow-y-auto" style={{ maxHeight: "90px" }}>
                        {day.results.length > 0 ? (
                          day.results.map((teamResult, i) => (
                            <div key={i} className="mt-1 border-t border-gray-200 pt-1">
                              <div className="font-semibold text-xs text-red-600">{teamResult.team}</div>
                              {teamResult.results.map((r, j) => (
                                <div key={j} className="text-xs flex justify-between">
                                  <span className="text-gray-500">{r.time}</span>
                                  <span className="font-bold">{r.result}</span>
                                </div>
                              ))}
                            </div>
                          ))
                        ) : (
                          <div className="text-xs text-gray-400 mt-2 text-center">No results</div>
                        )}
                      </div>
                    </>
                  )}
                </div>
              ))}
            </div>

            <div className="mt-4 flex justify-end">
              <button
                className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
                onClick={() => setShowCalendar(false)}
              >
                Back to Results
              </button>
            </div>
          </div>
        )}

        {/* Teams Table with multiple results support */}
        {!loading && !showCalendar && !showChartView && (
          <div className="bg-white rounded-b-lg overflow-hidden shadow-lg">
            <table className="w-full border-collapse">
              <thead>
                <tr className="bg-black text-white">
                  <th className="p-3 text-left">Games List</th>
                  <th className="p-3 text-center">
                    {dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th
                  </th>
                  <th className="p-3 text-center">
                    {dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th
                  </th>
                  <th className="p-3 text-center">Chart</th>
                </tr>
              </thead>
              <tbody>
                {teams.map(team => (
                  <tr key={team.id} className="border-b hover:bg-gray-50">
                    <td className="p-3">
                      <div className="font-semibold text-red-600">{team.name}</div>
                      <div className="text-sm text-gray-500">at {team.time}</div>
                      <div className="text-xs text-black underline mt-1 cursor-pointer hover:text-red-600" onClick={() => handleViewChart(team)}>Record Chart</div>
                    </td>

                    <td className="p-3 text-center">
                      {dates.length > 0 && team.results[dates[0]] && team.results[dates[0]].length > 0 ? (
                        <div className="flex flex-col gap-1">
                          {team.results[dates[0]].map((result, idx) => (
                            <div key={idx} className="flex flex-col">
                              <span className="text-2xl font-bold">{result.result}</span>
                              <span className="text-xs text-gray-500">{result.time}</span>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <span className="text-2xl font-bold text-gray-400">XX</span>
                      )}
                    </td>

                    <td className="p-3 text-center">
                      {dates.length > 1 && team.results[dates[1]] && team.results[dates[1]].length > 0 ? (
                        <div className="flex flex-col gap-1">
                          {team.results[dates[1]].map((result, idx) => (
                            <div key={idx} className="flex flex-col">
                              <span className="text-2xl font-bold">{result.result}</span>
                              <span className="text-xs text-gray-500">{result.time}</span>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <span className="text-2xl font-bold text-gray-400">XX</span>
                      )}
                    </td>

                    <td className="p-3">
                      <div className="flex justify-center">
                        <button
                          className="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition"
                          onClick={() => handleViewChart(team)}
                          title="View Monthly Chart"
                        >
                          <BarChart2 size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
                {teams.length === 0 && (
                  <tr>
                    <td colSpan="4" className="p-4 text-center">No teams found</td>
                  </tr>
                )}
              </tbody>
            </table>

            <div className="bg-black text-white text-center p-3">
              <button className="hover:text-red-400 transition" onClick={handleCalendarView}>Click here for all games results.</button>
            </div>
          </div>
        )}
      </div>

      <div className="w-full bg-white text-black">
        {/* FAQ Section */}
        <div className="max-w-6xl mx-auto py-6">
          {faqs.map((faq, index) => (
            <div key={index} className="mb-2">
              <button
                className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
                onClick={() => toggleFAQ(index)}
              >
                {faq.question}
                <span>{openIndex === index ? "▲" : "▼"}</span>
              </button>
              {openIndex === index && (
                <div className="p-4 bg-gray-100 border border-gray-300">
                  {faq.answer}
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Footer Section */}
        <footer className="bg-white border-t py-6 text-center">
          <div className="max-w-3xl mx-auto text-gray-600 text-sm">
            <p className="font-bold text-xl text-black flex items-center justify-center">
              MATKA <span className="text-red-600"> SATTA</span>
            </p>
            <p className="mt-2">
              The Multi-State Lottery Association makes every effort to ensure the
              accuracy of winning numbers and other information. Official winning
              numbers are those selected in the respective drawings and recorded
              under the observation of an independent accounting firm.
            </p>
            <p className="mt-2">
              In the event of a discrepancy, the official drawing results shall
              prevail. All winning tickets must be redeemed in the
              state/jurisdiction in which they are sold.
            </p>
            <p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
              <span>Media Center</span>
              <span>Legal</span>
              <span>Privacy</span>
              <span>español</span>
            </p>
          </div>
        </footer>
      </div>
    </div>
  );
};

export default Home2;