import React, { useState, useEffect } from "react";
import { SermonSegment, SermonReference } from "./types";
import SermonUpload from "./components/SermonUpload";
import PreacherDashboard from "./components/PreacherDashboard";
import AudienceViewer from "./components/AudienceViewer";
import { BookOpen, Radio, Languages, Compass, ShieldAlert, Info, HelpCircle } from "lucide-react";

export default function App() {
  const [activeTab, setActiveTab] = useState<"preacher" | "audience">("preacher");
  const [activeSermon, setActiveSermon] = useState<SermonReference | null>(null);
  const [segments, setSegments] = useState<SermonSegment[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isPolling, setIsPolling] = useState(true);

  // Fetch state on mount
  const fetchState = async () => {
    try {
      const response = await fetch("/api/sermon/state");
      if (response.ok) {
        try {
          const data = await response.json();
          setActiveSermon(data.activeSermon);
          setSegments(data.segments);
        } catch (jsonErr) {
          console.error("Failed to parse server response as JSON", jsonErr);
        }
      }
    } catch (err) {
      console.error("Failed to fetch state from server", err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchState();
  }, []);

  // Poll server state to synchronize the preacher's inputs with the audience viewer
  useEffect(() => {
    if (!isPolling) return;

    const interval = setInterval(() => {
      fetchState();
    }, 1500);

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

  const handleUploadSuccess = (sermon: SermonReference) => {
    setActiveSermon(sermon);
  };

  const handleClearSermon = async () => {
    try {
      const response = await fetch("/api/sermon/clear", { method: "POST" });
      if (response.ok) {
        setActiveSermon(null);
      }
    } catch (err) {
      console.error("Failed to clear sermon reference", err);
    }
  };

  const handleClearSegments = async () => {
    if (window.confirm("هل أنت متأكد من رغبتك في مسح السجل الفوري لبث الخطبة؟")) {
      try {
        const response = await fetch("/api/segments/clear", { method: "POST" });
        if (response.ok) {
          setSegments([]);
        }
      } catch (err) {
        console.error("Failed to clear segments", err);
      }
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col font-sans" dir="rtl">
      {/* 1. Global Navigation Bar */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center text-white font-bold text-xs">
              NL
            </div>
            <div>
              <h1 className="text-base font-semibold tracking-tight text-slate-800">
                منبر الترجمة <span className="text-slate-400 font-normal">| NoorLive</span>
              </h1>
              <p className="text-[10px] text-emerald-700 font-semibold font-sans">
                الترجمة الفورية لخطبة الجمعة والتحقق القرآني بالذكاء الاصطناعي
              </p>
            </div>
          </div>

          {/* Tab Selector Buttons */}
          <div className="flex bg-slate-100 p-1 rounded-xl border border-slate-200">
            <button
              onClick={() => setActiveTab("preacher")}
              className={`flex items-center gap-1.5 px-3 sm:px-4 py-1.5 rounded-lg text-xs font-bold transition-all font-sans ${
                activeTab === "preacher"
                  ? "bg-white text-slate-800 shadow-sm border border-slate-200/50"
                  : "text-slate-500 hover:text-slate-900"
              }`}
            >
              <Radio className="w-3.5 h-3.5" />
              لوحة الخطيب
            </button>
            <button
              onClick={() => setActiveTab("audience")}
              className={`flex items-center gap-1.5 px-3 sm:px-4 py-1.5 rounded-lg text-xs font-bold transition-all font-sans ${
                activeTab === "audience"
                  ? "bg-white text-slate-800 shadow-sm border border-slate-200/50"
                  : "text-slate-500 hover:text-slate-900"
              }`}
            >
              <Languages className="w-3.5 h-3.5" />
              شاشة المصلين
            </button>
          </div>
        </div>
      </header>

      {/* 2. Main Content Container */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {isLoading ? (
          <div className="flex flex-col items-center justify-center py-24 text-center">
            <div className="w-10 h-10 border-4 border-emerald-600 border-t-transparent rounded-full animate-spin mb-4" />
            <p className="text-xs font-semibold text-slate-500 font-sans">جاري تهيئة المنبر المباشر...</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            {/* Left Content Side (Applies differently depending on active tab) */}
            <div className="lg:col-span-8 space-y-6">
              {activeTab === "preacher" ? (
                <PreacherDashboard
                  activeSermon={activeSermon}
                  segments={segments}
                  onSegmentsUpdated={setSegments}
                  onClearSegments={handleClearSegments}
                />
              ) : (
                <AudienceViewer activeSermon={activeSermon} segments={segments} />
              )}
            </div>

            {/* Right Side Info & Configuration Panels */}
            <div className="lg:col-span-4 space-y-6">
              {/* PDF & Sermon Upload Panel */}
              <SermonUpload
                activeSermon={activeSermon}
                onUploadSuccess={handleUploadSuccess}
                onClear={handleClearSermon}
              />

              {/* Islamic Callout & Instructions */}
              <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm space-y-4">
                <div className="flex items-center gap-2 mb-1">
                  <HelpCircle className="w-4 h-4 text-emerald-600" />
                  <h3 className="text-xs font-bold tracking-tight text-slate-800 font-sans uppercase">كيف يعمل النظام؟</h3>
                </div>

                <div className="space-y-3.5 text-xs text-slate-600 font-sans leading-relaxed">
                  <div className="flex gap-2.5">
                    <span className="w-5 h-5 bg-slate-100 rounded-full flex items-center justify-center font-bold text-slate-700 shrink-0">
                      ١
                    </span>
                    <p>
                      <strong>رفع الخطبة المكتوبة:</strong> يرفع الخطيب الخطبة يدوياً أو يرفع ملف PDF مسبقاً لمساعدة الذكاء الاصطناعي في مطابقة المصطلحات وزيادة دقة الترجمة.
                    </p>
                  </div>

                  <div className="flex gap-2.5">
                    <span className="w-5 h-5 bg-slate-100 rounded-full flex items-center justify-center font-bold text-slate-700 shrink-0">
                      ٢
                    </span>
                    <p>
                      <strong>التقاط الصوت الحي:</strong> يتحدث الخطيب في الميكروفون، أو يتم إدخال الجمل يدوياً ومحاكاتها للتجربة والتحقق.
                    </p>
                  </div>

                  <div className="flex gap-2.5">
                    <span className="w-5 h-5 bg-slate-100 rounded-full flex items-center justify-center font-bold text-slate-700 shrink-0">
                      ٣
                    </span>
                    <p>
                      <strong>الترجمة والتحقق بالذكاء الاصطناعي:</strong> يتعرف النظام على الآيات القرآنية ويقوم فوراً بجلب النص الصحيح مشكولاً من المصحف الشريف، وترجمة الكلام لحظياً إلى الإنجليزية والهندية.
                    </p>
                  </div>

                  <div className="flex gap-2.5">
                    <span className="w-5 h-5 bg-slate-100 rounded-full flex items-center justify-center font-bold text-slate-700 shrink-0">
                      ٤
                    </span>
                    <p>
                      <strong>مزامنة الحاضرين:</strong> تفتح شاشة العرض (على شاشات المسجد أو هواتف المصلين) لتعرض الترجمة الفورية بالهندية والإنجليزية بالزمن الحقيقي.
                    </p>
                  </div>
                </div>

                <div className="pt-3 border-t border-slate-100 flex items-center gap-2 text-[10px] text-emerald-700 bg-emerald-50 px-2.5 py-2 rounded-lg font-sans font-medium">
                  <Info className="w-3.5 h-3.5 text-emerald-600 shrink-0" />
                  <span>البرنامج يعتمد على Gemini 3.5 Flash لضمان أقصى سرعة واستجابة.</span>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>

      {/* 3. Global Decorative Footer */}
      <footer className="bg-white border-t border-slate-200 mt-12 py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-xs text-slate-500 font-sans leading-relaxed">
          <p>«منبر الترجمة الفورية لخطبة الجمعة والتحقق القرآني الذكي»</p>
          <p className="mt-1 text-[10px] text-slate-400 font-medium">
            تم التطوير باستخدام واجهة برمجة تطبيقات Google AI Studio وذكاء نماذج Gemini.
          </p>
        </div>
      </footer>
    </div>
  );
}