/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect, useCallback } from "react";
import { User, Permit } from "./types";
import Header from "./components/Header";
import QuickLoginModal from "./components/QuickLoginModal";
import DashboardSiswa from "./components/DashboardSiswa";
import DashboardGuruMapel from "./components/DashboardGuruMapel";
import DashboardGuruPiket from "./components/DashboardGuruPiket";
import DashboardSatpam from "./components/DashboardSatpam";
import DashboardAdmin from "./components/DashboardAdmin";
import { Landmark, KeyRound, UserRound, ArrowRight, ShieldCheck, HelpCircle } from "lucide-react";
import { getApiUrl } from "./utils";

export default function App() {
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [allUsers, setAllUsers] = useState<User[]>([]);
  const [allPermits, setAllPermits] = useState<Permit[]>([]);
  
  // UI Panels State
  const [isQuickLoginOpen, setIsQuickLoginOpen] = useState(false);
  const [loginUsername, setLoginUsername] = useState("");
  const [loginPassword, setLoginPassword] = useState("");
  const [loginError, setLoginError] = useState<string | null>(null);
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  // Load permit logs and list of actors from Express backend API
  const fetchPermitsAndUsers = useCallback(async () => {
    try {
      const [usersResponse, permitsResponse] = await Promise.all([
        fetch(getApiUrl("users")),
        fetch(getApiUrl("permits"))
      ]);

      if (usersResponse.ok) {
        const usersData = await usersResponse.json();
        setAllUsers(usersData);
      }
      if (permitsResponse.ok) {
        const permitsData = await permitsResponse.json();
        setAllPermits(permitsData);
      }
    } catch (err) {
      console.error("Gagal melakukan sinkronisasi dengan database backend", err);
    }
  }, []);

  // Hook to pull session status and initialize
  useEffect(() => {
    const saved = localStorage.getItem("sikad_session");
    if (saved) {
      try {
        setCurrentUser(JSON.parse(saved));
      } catch (e) {
        localStorage.removeItem("sikad_session");
      }
    }
    fetchPermitsAndUsers();

    // Set background poll to refresh logs for real-time multiplayer feel
    const interval = setInterval(fetchPermitsAndUsers, 6000);
    return () => clearInterval(interval);
  }, [fetchPermitsAndUsers]);

  // Auth Submit
  const handleLoginSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!loginUsername.trim() || !loginPassword) {
      setLoginError("Masukkan username dan password login.");
      return;
    }

    setIsLoggingIn(true);
    setLoginError(null);

    try {
      const response = await fetch(getApiUrl("login"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: loginUsername, password: loginPassword })
      });

      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || "Login Gagal. Hubungi Operator Tata Usaha.");
      }

      setCurrentUser(data.user);
      localStorage.setItem("sikad_session", JSON.stringify(data.user));
      setLoginUsername("");
      setLoginPassword("");
      fetchPermitsAndUsers();
    } catch (err: any) {
      setLoginError(err.message);
    } finally {
      setIsLoggingIn(false);
    }
  };

  // Perform Simulated Instant Login
  const handleInstantLogin = (user: User) => {
    setCurrentUser(user);
    localStorage.setItem("sikad_session", JSON.stringify(user));
    setIsQuickLoginOpen(false);
    fetchPermitsAndUsers();
  };

  // Session destruction
  const handleLogout = () => {
    setCurrentUser(null);
    localStorage.removeItem("sikad_session");
  };

  // Switch role drawer
  const handleQuickSwitchRequest = () => {
    setIsQuickLoginOpen(true);
  };

  // Render respective dashboards per student/staff tier
  const renderRoleDashboard = () => {
    if (!currentUser) return null;
    
    switch (currentUser.role) {
      case "siswa":
        return (
          <DashboardSiswa 
            currentUser={currentUser}
            refreshPermitsTrigger={fetchPermitsAndUsers}
            allPermits={allPermits}
            allUsers={allUsers}
          />
        );
      case "guru_mapel":
        return (
          <DashboardGuruMapel 
            currentUser={currentUser}
            refreshPermitsTrigger={fetchPermitsAndUsers}
            allPermits={allPermits}
          />
        );
      case "guru_piket":
        return (
          <DashboardGuruPiket 
            currentUser={currentUser}
            refreshPermitsTrigger={fetchPermitsAndUsers}
            allPermits={allPermits}
          />
        );
      case "satpam":
        return (
          <DashboardSatpam 
            currentUser={currentUser}
            refreshPermitsTrigger={fetchPermitsAndUsers}
            allPermits={allPermits}
          />
        );
      case "admin":
        return (
          <DashboardAdmin 
            currentUser={currentUser}
            refreshUsersTrigger={fetchPermitsAndUsers}
            refreshPermitsTrigger={fetchPermitsAndUsers}
            allUsers={allUsers}
            allPermits={allPermits}
          />
        );
      default:
        return (
          <div className="bg-white border border-gray-200 rounded-xl p-8 text-center text-gray-500 font-sans">
            Wewenang akses tidak dikenali. Silakan hubungi operator.
          </div>
        );
    }
  };

  return (
    <div className="min-h-screen bg-slate-50/70 font-sans print:bg-white selection:bg-indigo-600 selection:text-white pb-12">
      {/* 1. Header Navigation Bar */}
      <Header 
        currentUser={currentUser} 
        onLogout={handleLogout} 
        onQuickSwitch={handleQuickSwitchRequest} 
      />

      {/* 2. Main Workstation Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8">
        
        {currentUser ? (
          // Authenticated Workspace
          <div className="space-y-6">
            <div className="bg-white border border-slate-200 shadow-sm rounded-2xl p-6 sm:p-8 flex flex-wrap justify-between items-center gap-4 print:hidden">
              <div>
                <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-slate-800 leading-6">
                  Selamat Datang di SIKAD SMANIB,
                </h1>
                <p className="text-xs sm:text-sm font-bold text-indigo-600 mt-1 uppercase font-mono tracking-wide">
                  {currentUser.role === "siswa" ? "RUANG KONTROL SISWA" : "SISTEM PENGAWASAN & VERIFIKASI AKADEMIK"}
                </p>
                <p className="text-xs text-slate-500 mt-1 font-sans">
                  Sistem Informasi Digital Surat Izin Sekolah untuk menjaga keamanan, efisiensi waktu, dan kontrol disiplin siswa bekerjasama dengan POS Satpam.
                </p>
              </div>
              <div className="bg-indigo-50/50 text-indigo-700 px-4 py-2 rounded-xl text-xs font-bold border border-indigo-100 flex items-center gap-1.5 h-fit">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-ping"></span>
                <span>Database Terkoneksi Aktif</span>
              </div>
            </div>

            {/* Render proper role panel */}
            <div className="print:p-0">
              {renderRoleDashboard()}
            </div>
          </div>
        ) : (
          // Login Form Screen (Unauthenticated)
          <div className="max-w-md mx-auto pt-4 sm:pt-12 text-slate-850 animate-fade-in font-sans">
            <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
              
              {/* Login Hero Banner */}
              <div className="bg-slate-900 text-white p-8 text-center relative border-b border-slate-800">
                {/* Decorative emblem */}
                <div className="h-12 w-12 bg-indigo-600 rounded-lg mx-auto flex items-center justify-center text-white font-sans font-bold shadow-md text-xl mb-4">
                  B
                </div>
                <h1 className="text-lg font-bold tracking-tight">SIKAD SMAN 1 BANTARAN</h1>
                <p className="text-[10px] text-slate-400 tracking-wider font-semibold uppercase mt-0.5 font-mono">Sistem Digital Surat Izin Sekolah (SIP-SMAN1B)</p>
              </div>

              {/* Login Block Form */}
              <div className="p-8 space-y-6">
                <form onSubmit={handleLoginSubmit} className="space-y-4">
                  {loginError && (
                    <div className="p-3 bg-rose-50 text-rose-800 rounded-lg text-xs font-semibold border border-rose-100 flex items-start gap-1.5 leading-snug">
                      <span className="bg-rose-500 px-1.5 py-0.2 rounded text-white shrink-0 font-bold">!</span>
                      <span>{loginError}</span>
                    </div>
                  )}

                  {/* Username */}
                  <div>
                    <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Username Login</label>
                    <div className="relative">
                      <UserRound className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
                      <input
                        id="login-username"
                        type="text"
                        value={loginUsername}
                        onChange={(e) => setLoginUsername(e.target.value)}
                        placeholder="Contoh: budi, siti, joko"
                        className="w-full bg-slate-50 border border-slate-200 rounded-lg pl-10 pr-4 py-2.5 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden font-medium text-slate-800 focus:border-indigo-600"
                        required
                      />
                    </div>
                  </div>

                  {/* Password */}
                  <div>
                    <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Password</label>
                    <div className="relative">
                      <KeyRound className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
                      <input
                        id="login-password"
                        type="password"
                        value={loginPassword}
                        onChange={(e) => setLoginPassword(e.target.value)}
                        placeholder="Ketik password akun..."
                        className="w-full bg-slate-50 border border-slate-200 rounded-lg pl-10 pr-4 py-2.5 text-xs focus:ring-1 focus:ring-indigo-600 outline-hidden font-medium text-slate-800 focus:border-indigo-600"
                        required
                      />
                    </div>
                  </div>

                  {/* Submit login */}
                  <button
                    id="login-btn-submit"
                    type="submit"
                    disabled={isLoggingIn}
                    className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-semibold text-xs transition-all cursor-pointer flex items-center justify-center gap-1.5 shadow-sm"
                  >
                    Masuk Port
                    <ArrowRight className="h-4 w-4" />
                  </button>
                </form>

                {/* Helper / Live Demo Quick selection link */}
                <div className="border-t border-slate-100 pt-5 text-center">
                  <p className="text-[11px] text-slate-400">Penguji / Reviewer Alur?</p>
                  <button
                    id="login-btn-quick"
                    onClick={() => setIsQuickLoginOpen(true)}
                    className="mt-2 inline-flex items-center gap-1.5 px-4 py-2.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 rounded-lg text-xs font-bold transition-colors cursor-pointer border border-indigo-200"
                  >
                    <ShieldCheck className="h-4 w-4 text-indigo-600" />
                    Buka Simulator & Akun Uji
                  </button>
                </div>
              </div>
            </div>

            {/* Technical School footer detail */}
            <div className="text-center text-[10px] text-slate-400 mt-8 font-sans space-y-1">
              <p className="font-semibold text-slate-600 uppercase tracking-wider">SMAN 1 BANTARAN PROBOLINGGO</p>
              <p>JL. RAYA BANTARAN NO. 57, BANTARAN, KABUPATEN PROBOLINGGO</p>
            </div>
          </div>
        )}
      </main>

      {/* 3. Simulator Quick Login Modal */}
      <QuickLoginModal 
        isOpen={isQuickLoginOpen} 
        onClose={() => setIsQuickLoginOpen(false)} 
        onSelectUser={handleInstantLogin} 
      />
    </div>
  );
}