import React, { useState, useEffect, useRef } from "react";
import { Book, Maximize2, Minimize2, Tv, Radio, Clock, Languages } from "lucide-react";
import { SermonSegment, SermonReference } from "../types";

interface AudienceViewerProps {
  activeSermon: SermonReference | null;
  segments: SermonSegment[];
}

export default function AudienceViewer({
  activeSermon,
  segments,
}: AudienceViewerProps) {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [localTime, setLocalTime] = useState("");
  const containerRef = useRef<HTMLDivElement>(null);
  const lastSegmentRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to the latest translated segment
  useEffect(() => {
    if (lastSegmentRef.current) {
      lastSegmentRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [segments]);

  // Update clock
  useEffect(() => {
    const updateTime = () => {
      const date = new Date();
      setLocalTime(
        date.toLocaleTimeString("ar-EG", {
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
        })
      );
    };
    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  // Fullscreen toggler
  const toggleFullscreen = () => {
    if (!containerRef.current) return;

    if (!document.fullscreenElement) {
      containerRef.current.requestFullscreen().then(() => {
        setIsFullscreen(true);
      }).catch((err) => {
        console.error("Fullscreen error", err);
      });
    } else {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };
    document.addEventListener("fullscreenchange", handleFullscreenChange);
    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
  }, []);

  const latestSegment = segments[segments.length - 1];

  return (
    <div
      ref={containerRef}
      className={`flex flex-col h-full min-h-[550px] transition-colors ${
        isFullscreen ? "bg-slate-50 text-slate-900 p-8" : "bg-white text-slate-900 border border-slate-200 rounded-2xl p-6 shadow-sm"
      }`}
    >
      {/* Viewer Header */}
      <div className="flex items-center justify-between border-b border-slate-200 pb-4 mb-6">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-emerald-600 rounded-xl flex items-center justify-center shadow-md shadow-emerald-600/10 shrink-0">
            <Tv className="w-5 h-5 text-white" />
          </div>
          <div>
            <h2 className="text-sm font-bold text-slate-800 font-sans flex items-center gap-1.5">
              شاشة عرض المصلين والحاضرين
              <span className="relative flex h-2.5 w-2.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
              </span>
            </h2>
            <p className="text-[10px] text-slate-500 mt-0.5 font-sans">
              {activeSermon ? `خطبة مفعلة: ${activeSermon.title}` : "متابعة الترجمة الفورية المباشرة"}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <div className="flex items-center gap-1.5 text-xs text-slate-600 font-sans bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-200">
            <Clock className="w-3.5 h-3.5 text-emerald-600" />
            <span className="font-mono font-semibold">{localTime}</span>
          </div>

          <button
            onClick={toggleFullscreen}
            className="p-2 bg-slate-50 hover:bg-slate-100 rounded-lg text-slate-600 transition-colors border border-slate-200"
            title={isFullscreen ? "خروج من ملء الشاشة" : "عرض ملء الشاشة"}
          >
            {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
          </button>
        </div>
      </div>

      {/* Main Translation Content */}
      <div className="flex-1 flex flex-col justify-between overflow-hidden">
        {segments.length === 0 ? (
          <div className="flex-1 flex flex-col items-center justify-center text-center py-12 px-6">
            <Radio className="w-16 h-16 text-slate-200 animate-pulse mb-4" />
            <p className="text-base font-bold text-slate-700 font-sans">
              بانتظار بدء خطبة الجمعة...
            </p>
            <p className="text-xs text-slate-400 mt-2 font-sans max-w-sm leading-relaxed">
              عندما يبدأ الخطيب بإلقاء الموعظة، ستظهر الكلمات المنطوقة مع الترجمة الفورية والآيات القرآنية هنا مباشرة باللغة الإنجليزية والهندية.
            </p>
          </div>
        ) : (
          <div className="flex-1 flex flex-col md:flex-row gap-6 overflow-hidden">
            {/* Left Side: Real-time Live Presentation Mode */}
            <div className="flex-1 flex flex-col gap-5 overflow-y-auto pr-1">
              {latestSegment && (
                <div className="space-y-6 animate-fade-in">
                  {/* Live Original (Arabic) */}
                  <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col items-end shadow-sm">
                    <div className="flex items-center gap-2 mb-4 self-start">
                      <span className="h-2 w-2 bg-emerald-500 rounded-full"></span>
                      <span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Audio Input (AR)</span>
                    </div>
                    <p className="text-2xl md:text-3xl font-semibold text-slate-800 leading-relaxed text-right font-sans" dir="rtl">
                      {latestSegment.originalText}
                    </p>
                  </div>

                  {/* Translations Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* English */}
                    <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col shadow-sm">
                      <div className="flex items-center gap-2 mb-4">
                        <span className="text-[9px] font-bold text-blue-600 uppercase tracking-widest bg-blue-50 px-2 py-0.5 rounded border border-blue-100">English (EN)</span>
                      </div>
                      <p className="text-lg font-medium text-slate-700 leading-relaxed font-sans">
                        {latestSegment.englishTranslation}
                      </p>
                    </div>

                    {/* Hindi */}
                    <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col shadow-sm">
                      <div className="flex items-center gap-2 mb-4">
                        <span className="text-[9px] font-bold text-orange-600 uppercase tracking-widest bg-orange-50 px-2 py-0.5 rounded border border-orange-100">Hindi (HI)</span>
                      </div>
                      <p className="text-lg font-medium text-slate-700 leading-relaxed">
                        {latestSegment.hindiTranslation}
                      </p>
                    </div>
                  </div>

                  {/* Quranic Verification Card */}
                  {latestSegment.quranVerse && (
                    <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6 text-right shadow-sm">
                      <div className="flex items-center justify-between mb-3 border-b border-emerald-200/50 pb-2">
                        <div className="flex items-center gap-1.5 text-emerald-700 font-sans">
                          <Book className="w-4 h-4" />
                          <span className="text-xs font-bold">
                            {latestSegment.quranVerse.surahName} [آية {latestSegment.quranVerse.verseNumber}]
                          </span>
                        </div>
                        <span className="text-[9px] font-bold text-emerald-600 uppercase tracking-widest font-sans">
                          ✓ QURAN VERIFIED
                        </span>
                      </div>
                      <p className="text-xl md:text-2xl font-quran font-bold text-emerald-950 text-center leading-loose py-2" dir="rtl">
                        {latestSegment.quranVerse.verifiedText}
                      </p>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Right Side: Scrollable Timeline list of previous parts */}
            <div className="w-full md:w-72 bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col overflow-hidden shrink-0">
              <h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3 pb-2 border-b border-slate-200 font-sans">
                سجل الخطبة التراكمي
              </h4>
              <div className="flex-1 overflow-y-auto space-y-3 pr-1">
                {segments.map((seg, index) => (
                  <div
                    key={seg.id}
                    ref={index === segments.length - 1 ? lastSegmentRef : null}
                    className={`p-3 rounded-xl transition-all border ${
                      index === segments.length - 1
                        ? "bg-white border-emerald-500/50 shadow-sm"
                        : "bg-transparent border-transparent hover:bg-slate-100"
                    }`}
                  >
                    <p className="text-xs font-bold text-slate-700 text-right truncate font-sans">
                      {seg.originalText}
                    </p>
                    <p className="text-[10px] text-slate-500 mt-1 truncate">
                      {seg.englishTranslation}
                    </p>
                    <p className="text-[10px] text-slate-500 mt-0.5 truncate">
                      {seg.hindiTranslation}
                    </p>
                    {seg.quranVerse && (
                      <span className="inline-block mt-1.5 text-[9px] bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded font-sans font-bold">
                        📖 {seg.quranVerse.surahName}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* TV Screen Footer Info Bar */}
      <div className="mt-4 pt-3 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between text-[10px] text-slate-400 gap-2 font-sans font-medium">
        <p>مكّن الترجمة والتحقق بالذكاء الاصطناعي بواسطة Gemini 3.5 Flash</p>
        <p className="flex items-center gap-1.5 text-slate-500">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse inline-block" />
          البث نشط ومتزامن مع المنبر الرئيسي للمسجد
        </p>
      </div>
    </div>
  );
}