import React, { useState, useEffect } from 'react';
import { MapPin, Clock, AlertCircle, RefreshCw } from 'lucide-react';

const PrayerTimesWidget = () => {
  const [location, setLocation] = useState(null);
  const [prayerTimes, setPrayerTimes] = useState(null);
  const [currentTime, setCurrentTime] = useState(new Date());
  const [nextPrayer, setNextPrayer] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showSettings, setShowSettings] = useState(false);
  const [adjustments, setAdjustments] = useState({ Fajr: 0, Sunrise: 0, Dhuhr: 0, Asr: 0, Maghrib: 0, Isha: 0 });

  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    // Load saved adjustments
    const saved = localStorage.getItem('prayerAdjustments');
    if (saved) {
      setAdjustments(JSON.parse(saved));
    }
    getLocation();
  }, []);

  const getLocation = () => {
    setLoading(true);
    // Use Dhulian coordinates directly
    const dhalianLoc = { latitude: 33.7694, longitude: 72.4292 };
    setLocation(dhalianLoc);
    fetchPrayerTimes(dhalianLoc);
  };

  const fetchPrayerTimes = async (loc) => {
    try {
      const date = new Date();
      const url = `https://api.aladhan.com/v1/timings/${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}?latitude=${loc.latitude}&longitude=${loc.longitude}&method=1&school=1`;
      
      console.log('Fetching from:', url);
      console.log('Using: Karachi Method + Hanafi School');
      
      const response = await fetch(url);
      const data = await response.json();
      
      console.log('Full API Response:', data);
      
      if (data.code === 200 && data.data && data.data.timings) {
        console.log('Prayer Times from API:', data.data.timings);
        console.log('Asr Time:', data.data.timings.Asr);
        setPrayerTimes(data.data.timings);
        setError(`API Asr: ${data.data.timings.Asr}`);
        setLoading(false);
      }
    } catch (err) {
      console.error('Error:', err);
      setPrayerTimes({
        Fajr: '05:37',
        Sunrise: '07:05',
        Dhuhr: '12:15',
        Asr: '16:00',
        Maghrib: '17:45',
        Isha: '19:15'
      });
      setLoading(false);
    }
  };

  useEffect(() => {
    if (prayerTimes) {
      findNextPrayer();
    }
  }, [prayerTimes, currentTime, adjustments]);

  const adjustTime = (time24, mins) => {
    if (!time24 || !mins) return time24;
    const [h, m] = time24.split(':').map(Number);
    let total = h * 60 + m + mins;
    if (total >= 1440) total -= 1440;
    if (total < 0) total += 1440;
    return `${String(Math.floor(total / 60)).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`;
  };

  const findNextPrayer = () => {
    const prayers = ['Fajr', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
    const now = currentTime.getHours() * 60 + currentTime.getMinutes();

    for (let prayer of prayers) {
      const time = adjustTime(prayerTimes[prayer], adjustments[prayer]);
      const [h, m] = time.split(':').map(Number);
      const prayerMins = h * 60 + m;

      if (prayerMins > now) {
        const diff = prayerMins - now;
        const hrs = Math.floor(diff / 60);
        setNextPrayer({
          name: prayer,
          time: time,
          timeUntil: hrs > 0 ? `${hrs}h ${diff % 60}m` : `${diff}m`
        });
        return;
      }
    }
    
    const fajrTime = adjustTime(prayerTimes['Fajr'], adjustments['Fajr']);
    setNextPrayer({ name: 'Fajr', time: fajrTime, timeUntil: 'Tomorrow' });
  };

  const formatTime = (time24) => {
    if (!time24) return '--:--';
    const [h, m] = time24.split(':');
    const hour = parseInt(h);
    return `${hour % 12 || 12}:${m} ${hour >= 12 ? 'PM' : 'AM'}`;
  };

  const updateAdjustment = (prayer, change) => {
    const newAdj = { ...adjustments, [prayer]: (adjustments[prayer] || 0) + change };
    setAdjustments(newAdj);
    localStorage.setItem('prayerAdjustments', JSON.stringify(newAdj));
  };

  const adjustAllPrayers = (minutes) => {
    const newAdj = {
      Fajr: (adjustments.Fajr || 0) + minutes,
      Sunrise: (adjustments.Sunrise || 0) + minutes,
      Dhuhr: (adjustments.Dhuhr || 0) + minutes,
      Asr: (adjustments.Asr || 0) + minutes,
      Maghrib: (adjustments.Maghrib || 0) + minutes,
      Isha: (adjustments.Isha || 0) + minutes
    };
    setAdjustments(newAdj);
    localStorage.setItem('prayerAdjustments', JSON.stringify(newAdj));
  };

  const resetAllAdjustments = () => {
    const resetAdj = { Fajr: 0, Sunrise: 0, Dhuhr: 0, Asr: 0, Maghrib: 0, Isha: 0 };
    setAdjustments(resetAdj);
    localStorage.setItem('prayerAdjustments', JSON.stringify(resetAdj));
  };

  const prayers = [
    { name: 'Fajr', key: 'Fajr' },
    { name: 'Sunrise', key: 'Sunrise' },
    { name: 'Dhuhr', key: 'Dhuhr' },
    { name: 'Asr', key: 'Asr' },
    { name: 'Maghrib', key: 'Maghrib' },
    { name: 'Isha', key: 'Isha' }
  ];

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4 bg-black">
        <div className="bg-black border-2 border-red-600 rounded-3xl p-8">
          <Clock className="w-8 h-8 text-red-500 animate-pulse mx-auto mb-3" />
          <p className="text-red-500 text-center text-sm font-bold">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen p-6 flex items-center justify-center bg-black">
      <div className="w-full max-w-md">
        <div className="bg-black border-2 border-red-600 rounded-3xl shadow-2xl overflow-hidden">
          
          {/* Next Prayer */}
          {nextPrayer && (
            <div className="px-6 py-5 border-b-2 border-red-600/50 bg-black">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-green-400 text-xs uppercase mb-1 font-bold">Next Prayer</p>
                  <h2 className="text-green-400 text-3xl font-black drop-shadow-[0_2px_8px_rgba(0,255,0,1)]">{nextPrayer.name}</h2>
                </div>
                <div className="text-right">
                  <p className="text-green-400 text-2xl font-black drop-shadow-[0_2px_8px_rgba(0,255,0,1)]">{formatTime(nextPrayer.time)}</p>
                  <p className="text-green-400 text-sm mt-1 font-bold">in {nextPrayer.timeUntil}</p>
                </div>
              </div>
            </div>
          )}

          {/* Prayer Times */}
          <div className="px-6 py-4 bg-black">
            <div className="space-y-2">
              {prayers.map(prayer => {
                const isNext = nextPrayer?.name === prayer.name;
                const adjustedTime = adjustTime(prayerTimes?.[prayer.key], adjustments[prayer.key]);
                const isSunrise = prayer.key === 'Sunrise';
                return (
                  <div 
                    key={prayer.key}
                    className={`flex items-center justify-between py-2 px-3 rounded-xl ${
                      isNext ? 'bg-green-900/30 border-2 border-green-500' : ''
                    }`}
                  >
                    <span className={`font-black ${isNext ? 'text-green-400' : isSunrise ? 'text-orange-400' : 'text-red-500'}`}>
                      {prayer.name} {isSunrise ? '🌅' : ''}
                    </span>
                    <span className={`font-black ${isNext ? 'text-green-400 text-lg' : isSunrise ? 'text-orange-400' : 'text-red-500'}`}>
                      {formatTime(adjustedTime)}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Footer */}
          <div className="px-6 py-3 border-t-2 border-red-600/50 bg-black">
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <Clock className="w-3.5 h-3.5 text-red-500" />
                <span className="text-red-500 text-xs font-bold">
                  {currentTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
                </span>
              </div>
              <button 
                onClick={() => setShowSettings(!showSettings)}
                className="px-3 py-1 bg-yellow-600/50 hover:bg-yellow-600/70 text-yellow-200 rounded font-bold text-xs border border-yellow-500"
              >
                ⚙️ Adjust Times
              </button>
            </div>
            
            {location && (
              <div className="flex items-center gap-1.5">
                <MapPin className="w-3.5 h-3.5 text-red-500" />
                <span className="text-red-500 text-xs font-bold">Dhulian, Pindigheb, Attock</span>
              </div>
            )}
          </div>

          {/* Settings Panel */}
          {showSettings && (
            <div className="px-6 py-4 bg-gray-900 border-t-2 border-yellow-600">
              <h3 className="text-yellow-400 text-sm font-bold mb-3">Adjust Prayer Times</h3>
              
              {/* Quick Adjust Buttons */}
              <div className="flex gap-2 mb-4">
                <button
                  onClick={() => adjustAllPrayers(7)}
                  className="flex-1 px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-bold text-xs"
                >
                  Add +7 min to All
                </button>
                <button
                  onClick={() => adjustAllPrayers(8)}
                  className="flex-1 px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-bold text-xs"
                >
                  Add +8 min to All
                </button>
                <button
                  onClick={resetAllAdjustments}
                  className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-bold text-xs"
                >
                  Reset
                </button>
              </div>
              
              {/* Individual Adjustments */}
              <div className="space-y-2">
                {prayers.map(prayer => (
                  <div key={prayer.key} className="flex items-center justify-between">
                    <span className="text-white text-xs font-bold">{prayer.name}</span>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => updateAdjustment(prayer.key, -1)}
                        className="px-2 py-1 bg-red-600 text-white rounded font-bold hover:bg-red-700"
                      >
                        -
                      </button>
                      <span className="text-white text-xs font-bold w-16 text-center">
                        {adjustments[prayer.key] > 0 ? '+' : ''}{adjustments[prayer.key] || 0} min
                      </span>
                      <button
                        onClick={() => updateAdjustment(prayer.key, 1)}
                        className="px-2 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700"
                      >
                        +
                      </button>
                    </div>
                  </div>
                ))}
              </div>
              <p className="text-gray-400 text-xs mt-3 text-center">
                Use quick buttons or adjust each prayer individually
              </p>
            </div>
          )}
        </div>

        {/* Date */}
        <div className="text-center mt-4 bg-black border-2 border-red-600 rounded-2xl py-2 px-4">
          <p className="text-red-500 text-sm font-black">
            {currentTime.toLocaleDateString('en-US', { 
              weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'
            })}
          </p>
        </div>
      </div>
    </div>
  );
};

export default PrayerTimesWidget;