import React, { useState, useEffect, useRef } from 'react';
import { MapPin, Calendar, Clock, Info, Bell, Volume2 } from 'lucide-react';

// Konfigurasi Default
const KOTA = 'Karawang';
const NEGARA = 'Indonesia';
const METODE_KEMENAG = 20; // Kode 20 di Aladhan API adalah standar Kemenag RI

// Data Dummy untuk Slider
const SLIDER_DATA = [
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1564683214965-3619addd900d?q=80&w=1920&auto=format&fit=crop',
    title: 'Kajian Rutin Ahad Pagi',
    desc: 'Tafsir Al-Quran bersama Ustadz Fulan. Bada Subuh - Selesai.'
  },
  {
    type: 'text',
    title: 'Laporan Keuangan Masjid',
    desc: 'Pemasukan Infaq Jumat ini: Rp 5.500.000,- | Saldo Total: Rp 45.000.000,-. Terimakasih kepada para Jamaah.'
  },
  {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1584551246679-0daf3d275d0f?q=80&w=1920&auto=format&fit=crop',
    title: 'Mari Makmurkan Masjid',
    desc: 'Sholat berjamaah di masjid lebih utama 27 derajat dibandingkan sholat sendirian.'
  }
];

// Data Ayat/Hadits
const AYAT_HARIAN = [
  { text: "Sesungguhnya shalat itu adalah fardhu yang ditentukan waktunya atas orang-orang yang beriman.", surah: "QS. An-Nisa: 103" },
  { text: "Barangsiapa yang menempuh suatu jalan untuk menuntut ilmu, maka Allah Swt akan memudahkan baginya jalan menuju surga.", surah: "HR. Muslim" },
  { text: "Sebaik-baik kalian adalah orang yang belajar Al-Qur'an dan mengajarkannya.", surah: "HR. Bukhari" }
];

export default function App() {
  // States
  const [started, setStarted] = useState(false); // Untuk mengizinkan autoplay audio di browser
  const [currentTime, setCurrentTime] = useState(new Date());
  const [prayerTimes, setPrayerTimes] = useState(null);
  const [hijriDate, setHijriDate] = useState('');
  const [nextPrayer, setNextPrayer] = useState({ name: '-', time: '-', diffMs: 0 });
  const [viewMode, setViewMode] = useState('CLOCK'); // 'CLOCK', 'COUNTDOWN', 'ADHAN', 'IQAMAH'
  const [iqamahCountdown, setIqamahCountdown] = useState(0); // dalam detik
  const [sliderIndex, setSliderIndex] = useState(0);
  const [ayatIndex, setAyatIndex] = useState(0);

  // Audio Refs (Menggunakan suara peringatan standar)
  const adhanAudio = useRef(new Audio('https://actions.google.com/sounds/v1/alarms/bugle_tune.ogg')); 
  const beepAudio = useRef(new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg'));

  // Fetch Prayer Times
  useEffect(() => {
    const fetchTimings = async () => {
      try {
        const dateStr = `${currentTime.getDate()}-${currentTime.getMonth() + 1}-${currentTime.getFullYear()}`;
        const url = `https://api.aladhan.com/v1/timingsByCity/${dateStr}?city=${KOTA}&country=${NEGARA}&method=${METODE_KEMENAG}`;
        const res = await fetch(url);
        const data = await res.json();
        
        if (data.code === 200) {
          const pt = data.data.timings;
          setPrayerTimes({
            Imsak: pt.Imsak,
            Subuh: pt.Fajr,
            Terbit: pt.Sunrise,
            Dzuhur: pt.Dhuhr,
            Ashar: pt.Asr,
            Maghrib: pt.Maghrib,
            Isya: pt.Isha
          });
          setHijriDate(`${data.data.date.hijri.day} ${data.data.date.hijri.month.en} ${data.data.date.hijri.year} H`);
        }
      } catch (error) {
        console.error('Gagal mengambil data jadwal sholat:', error);
      }
    };
    fetchTimings();
    
    // Refresh jadwal setiap hari jam 00:01
    const interval = setInterval(fetchTimings, 24 * 60 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);

  // Main Clock & Logic Loop (berjalan setiap detik)
  useEffect(() => {
    if (!started) return;

    const timer = setInterval(() => {
      const now = new Date();
      setCurrentTime(now);

      if (!prayerTimes) return;

      // Logika Mencari Waktu Sholat Berikutnya
      const times = [
        { name: 'Subuh', time: prayerTimes.Subuh },
        { name: 'Dzuhur', time: prayerTimes.Dzuhur },
        { name: 'Ashar', time: prayerTimes.Ashar },
        { name: 'Maghrib', time: prayerTimes.Maghrib },
        { name: 'Isya', time: prayerTimes.Isya }
      ];

      let next = times[0];
      let minDiff = Infinity;
      let isAdhanTimeNow = false;

      times.forEach(pt => {
        const [h, m] = pt.time.split(':');
        const ptDate = new Date(now);
        ptDate.setHours(parseInt(h, 10), parseInt(m, 10), 0, 0);
        
        let diff = ptDate - now;
        
        // Jika sholat sudah lewat hari ini, hitung untuk besok
        if (diff < 0) {
           ptDate.setDate(ptDate.getDate() + 1);
           diff = ptDate - now;
        }

        if (diff < minDiff) {
          minDiff = diff;
          next = { name: pt.name, time: pt.time, diffMs: diff };
        }

        // Cek jika SEKARANG adalah waktu adhan (HH:MM:00)
        if (now.getHours() === parseInt(h, 10) && now.getMinutes() === parseInt(m, 10) && now.getSeconds() === 0) {
            isAdhanTimeNow = true;
        }
      });

      setNextPrayer(next);

      // STATE MACHINE: Mengatur View Mode Layar
      const seconds = now.getSeconds();

      if (viewMode === 'CLOCK' || viewMode === 'COUNTDOWN') {
        if (isAdhanTimeNow) {
          // MASUK WAKTU SHOLAT -> MODE ADHAN
          setViewMode('ADHAN');
          adhanAudio.current.play().catch(e => console.log('Audio play failed', e));
        } else {
          // LOGIKA SWITCH JAM -> COUNTDOWN setiap 1 Menit (selama 15 detik)
          if (seconds === 0 && viewMode === 'CLOCK') {
            setViewMode('COUNTDOWN');
          } else if (seconds === 15 && viewMode === 'COUNTDOWN') {
            setViewMode('CLOCK');
          }
        }
      } 
      else if (viewMode === 'ADHAN') {
        // Mode Adhan berlangsung misal 3 menit (180 detik), untuk demo kita buat 30 detik saja, lalu masuk Iqamah
        // (Di aplikasi real, bisa pakai tombol manual oleh marbot)
        if (seconds % 30 === 0 && now.getSeconds() !== 0) { // Demo: ganti setelah 30 detik
             setViewMode('IQAMAH');
             setIqamahCountdown(10 * 60); // 10 Menit hitung mundur Iqamah
        }
      }
      else if (viewMode === 'IQAMAH') {
        setIqamahCountdown(prev => {
          if (prev <= 1) {
            beepAudio.current.play().catch(e => console.log(e));
            setViewMode('CLOCK');
            return 0;
          }
          return prev - 1;
        });
      }

    }, 1000);

    return () => clearInterval(timer);
  }, [prayerTimes, viewMode, started]);

  // Slider & Ayat Interval
  useEffect(() => {
    const sliderInterval = setInterval(() => {
      setSliderIndex(prev => (prev + 1) % SLIDER_DATA.length);
    }, 10000); // Ganti slide setiap 10 detik

    const ayatInterval = setInterval(() => {
      setAyatIndex(prev => (prev + 1) % AYAT_HARIAN.length);
    }, 20000); // Ganti ayat setiap 20 detik

    return () => {
      clearInterval(sliderInterval);
      clearInterval(ayatInterval);
    }
  }, []);

  // Format Helpers
  const formatTimeHM = (date) => {
    const h = date.getHours().toString().padStart(2, '0');
    const m = date.getMinutes().toString().padStart(2, '0');
    return `${h}:${m}`;
  };

  const formatCountdown = (ms) => {
    const totalSeconds = Math.floor(ms / 1000);
    const h = Math.floor(totalSeconds / 3600);
    const m = Math.floor((totalSeconds % 3600) / 60);
    const s = totalSeconds % 60;
    if (h > 0) return `${h}j ${m}m ${s}d`;
    return `${m}m ${s}d`;
  };

  const formatIqamah = (seconds) => {
    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
    const s = (seconds % 60).toString().padStart(2, '0');
    return `${m}:${s}`;
  };

  const formatMasehi = (date) => {
    const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    return `${days[date.getDay()]}, ${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
  };

  // Komponen Layar Mulai (Untuk mengaktifkan kebijakan Autoplay Audio Browser)
  if (!started) {
    return (
      <div className="w-screen h-screen bg-emerald-950 flex flex-col items-center justify-center text-white cursor-pointer" onClick={() => setStarted(true)}>
        <Volume2 size={64} className="mb-6 animate-pulse text-amber-400" />
        <h1 className="text-4xl font-bold mb-2">Sistem Informasi Masjid</h1>
        <p className="text-xl text-emerald-200">Klik / Tap dimana saja untuk memulai layar dan mengaktifkan audio</p>
      </div>
    );
  }

  // Komponen Box Jadwal Sholat Bawah
  const PrayerBox = ({ name, time, isNext }) => (
    <div className={`flex flex-col items-center justify-center w-full h-full border-r border-emerald-800 last:border-r-0 transition-colors duration-500
      ${isNext ? 'bg-amber-500 text-slate-900' : 'bg-emerald-900/40 text-white'}`}>
      <h3 className={`text-xl font-bold tracking-widest uppercase ${isNext ? 'text-slate-900' : 'text-emerald-400'}`}>{name}</h3>
      <p className="text-4xl font-bold mt-1">{time || '--:--'}</p>
    </div>
  );

  return (
    <div className="w-screen h-screen bg-slate-950 text-white flex flex-col overflow-hidden font-sans select-none">
      
      {/* ================= HEADER (Top Bar) ================= */}
      <div className="h-[15%] flex border-b-4 border-emerald-700 bg-emerald-950">
        {/* Box 1: LOGO */}
        <div className="w-[15%] flex flex-col items-center justify-center border-r-4 border-emerald-700 p-2 bg-white">
          <div className="w-20 h-20 bg-emerald-800 rounded-full flex items-center justify-center shadow-inner mb-1">
             <MapPin size={40} className="text-white" />
          </div>
          <span className="text-slate-900 font-bold text-lg leading-none tracking-wider">LOGO MASJID</span>
        </div>
        
        {/* Box 2: NAMA MASJID */}
        <div className="w-[55%] flex flex-col justify-center px-8 border-r-4 border-emerald-700 bg-gradient-to-r from-emerald-950 to-slate-900">
          <h1 className="text-5xl font-extrabold text-amber-400 tracking-wider uppercase drop-shadow-lg">Masjid Agung Karawang</h1>
          <h2 className="text-xl text-emerald-100 mt-2 flex items-center gap-2">
            <MapPin size={18} /> Jl. Alun-alun Barat, Karawang Barat, Jawa Barat
          </h2>
        </div>

        {/* Box 3: INFORMASI TANGGAL */}
        <div className="w-[30%] flex flex-col justify-center px-6 bg-slate-900 relative overflow-hidden">
          <div className="absolute top-0 right-0 opacity-10"><Calendar size={150} /></div>
          <div className="z-10">
            <p className="text-emerald-400 font-semibold tracking-widest text-sm mb-1 uppercase">Informasi Waktu</p>
            <p className="text-2xl font-bold text-amber-400">{hijriDate || 'Memuat...'}</p>
            <p className="text-lg text-gray-300 mt-1">{formatMasehi(currentTime)}</p>
          </div>
        </div>
      </div>

      {/* ================= MIDDLE SECTION ================= */}
      <div className="h-[65%] flex">
        
        {/* KIRI: SLIDER & RUNNING TEXT */}
        <div className="w-[70%] flex flex-col border-r-4 border-emerald-700">
          
          {/* Slider Foto/Video */}
          <div className="h-[85%] relative bg-black overflow-hidden flex items-center justify-center">
            {SLIDER_DATA.map((slide, idx) => (
              <div 
                key={idx} 
                className={`absolute inset-0 transition-opacity duration-1000 ${idx === sliderIndex ? 'opacity-100' : 'opacity-0'}`}
              >
                {slide.type === 'image' ? (
                  <>
                    <img src={slide.url} alt="slider" className="w-full h-full object-cover opacity-60" />
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-10 pt-32">
                      <h2 className="text-5xl font-bold text-amber-400 mb-4 drop-shadow-md">{slide.title}</h2>
                      <p className="text-2xl text-white drop-shadow-md">{slide.desc}</p>
                    </div>
                  </>
                ) : (
                  <div className="w-full h-full flex flex-col items-center justify-center bg-emerald-900 p-16 text-center">
                    <Info size={80} className="text-amber-400 mb-8 opacity-80" />
                    <h2 className="text-6xl font-bold text-white mb-6 leading-tight">{slide.title}</h2>
                    <p className="text-3xl text-emerald-200 leading-relaxed">{slide.desc}</p>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Running Text Informasi */}
          <div className="h-[15%] bg-slate-900 border-t-4 border-emerald-700 flex items-center px-4 overflow-hidden relative">
            <div className="absolute left-0 z-10 bg-emerald-700 h-full px-6 flex items-center font-bold text-xl uppercase tracking-wider shadow-lg">
              INFO TERKINI
            </div>
            {/* Menggunakan elemen marquee standar untuk kemudahan dalam single-file setup tanpa animasi css kompleks */}
            <marquee className="text-3xl font-semibold text-amber-400 tracking-wide ml-44" scrollamount="8">
              *** Selamat datang di Masjid Agung Karawang *** Mari luruskan dan rapatkan shaf sholat demi kesempurnaan sholat berjamaah *** Harap menonaktifkan telepon genggam (HP) selama berada di dalam masjid *** </marquee>
          </div>
        </div>

        {/* KANAN: JAM DIGITAL & AYAT HARIAN */}
        <div className="w-[30%] flex flex-col">
          
          {/* Box Jam Digital / Hitung Mundur */}
          <div className="h-[45%] border-b-4 border-emerald-700 bg-slate-900 flex flex-col items-center justify-center relative shadow-inner">
            
            {viewMode === 'CLOCK' && (
              <>
                <h2 className="text-8xl font-bold text-white tracking-tighter drop-shadow-lg">
                  {formatTimeHM(currentTime)}
                </h2>
                <div className="mt-4 text-emerald-400 font-semibold tracking-widest uppercase flex items-center gap-2 text-xl">
                  <Clock size={20} /> Waktu Karawang
                </div>
              </>
            )}

            {viewMode === 'COUNTDOWN' && (
              <div className="flex flex-col items-center text-center animate-pulse">
                <p className="text-xl text-emerald-400 font-semibold uppercase tracking-widest mb-2">Menuju Waktu {nextPrayer.name}</p>
                <h2 className="text-5xl font-bold text-amber-400 tracking-wider">
                  {formatCountdown(nextPrayer.diffMs)}
                </h2>
              </div>
            )}

            {viewMode === 'ADHAN' && (
              <div className="flex flex-col items-center text-center">
                <Bell size={64} className="text-amber-400 animate-bounce mb-4" />
                <h2 className="text-5xl font-bold text-white tracking-wider uppercase">Waktu {nextPrayer.name}</h2>
                <p className="text-xl text-emerald-400 mt-2">Telah Masuk</p>
              </div>
            )}

            {viewMode === 'IQAMAH' && (
              <div className="flex flex-col items-center text-center">
                <p className="text-xl text-emerald-400 font-semibold uppercase tracking-widest mb-2">Iqamah Dalam</p>
                <h2 className="text-7xl font-bold text-red-500 tracking-wider font-mono">
                  {formatIqamah(iqamahCountdown)}
                </h2>
                <p className="text-md text-gray-400 mt-2">Luruskan & Rapatkan Shaf</p>
              </div>
            )}

          </div>

          {/* Box Ayat/Hadits Harian */}
          <div className="h-[55%] bg-slate-800 p-8 flex flex-col items-center justify-center text-center relative">
            <div className="absolute top-4 left-4 text-emerald-600/30 font-serif text-8xl">"</div>
            
            <h3 className="text-emerald-400 font-bold uppercase tracking-widest text-sm mb-6 w-full border-b border-emerald-700/50 pb-2">
              Ayat / Hadits Harian
            </h3>
            
            <p className="text-2xl font-serif leading-relaxed text-white drop-shadow-sm flex-1 flex items-center justify-center transition-opacity duration-1000">
              "{AYAT_HARIAN[ayatIndex].text}"
            </p>
            
            <p className="text-amber-400 font-semibold mt-6 text-lg w-full text-right italic">
              - {AYAT_HARIAN[ayatIndex].surah}
            </p>
          </div>

        </div>
      </div>

      {/* ================= FOOTER (Jadwal Sholat 5 Waktu) ================= */}
      <div className="h-[20%] border-t-4 border-emerald-700 bg-slate-950 flex flex-col">
        <div className="w-full text-center py-1 bg-emerald-950 border-b border-emerald-800 text-xs text-emerald-300 uppercase tracking-widest font-semibold">
          Jadwal Sholat {KOTA} & Sekitarnya (Sumber: Kemenag)
        </div>
        <div className="flex flex-1">
          {prayerTimes ? (
            <>
              <PrayerBox name="Imsak" time={prayerTimes.Imsak} isNext={false} />
              <PrayerBox name="Subuh" time={prayerTimes.Subuh} isNext={nextPrayer.name === 'Subuh'} />
              <PrayerBox name="Terbit" time={prayerTimes.Terbit} isNext={false} />
              <PrayerBox name="Dzuhur" time={prayerTimes.Dzuhur} isNext={nextPrayer.name === 'Dzuhur'} />
              <PrayerBox name="Ashar" time={prayerTimes.Ashar} isNext={nextPrayer.name === 'Ashar'} />
              <PrayerBox name="Maghrib" time={prayerTimes.Maghrib} isNext={nextPrayer.name === 'Maghrib'} />
              <PrayerBox name="Isya" time={prayerTimes.Isya} isNext={nextPrayer.name === 'Isya'} />
            </>
          ) : (
             <div className="w-full h-full flex items-center justify-center text-emerald-400 text-2xl animate-pulse">
                Memuat Jadwal Sholat...
             </div>
          )}
        </div>
      </div>

    </div>
  );
}