// [TSM.ID].[11031972] — All Rights Reserved. Proprietary & Confidential.
"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

export default function DashboardPage() {
  const router = useRouter();
  const [isVerifying, setIsVerifying] = useState(true);
  const [username, setUsername] = useState("");
  const [engineStrategy, setEngineStrategy] = useState("XCU_DIRECTOR");
  
  // States for Join Modal
  const [showJoinModal, setShowJoinModal] = useState(false);
  const [roomName, setRoomName] = useState("");
  
  // State for Chronos Smart Scheduler
  const [showChronosModal, setShowChronosModal] = useState(false);
  const [roomMode, setRoomMode] = useState<"standard" | "webinar" | "podcast">("standard");
  const [chronoDate, setChronoDate] = useState("");
  const [chronoName, setChronoName] = useState("");
  const [chronoResult, setChronoResult] = useState<{link: string, text: string} | null>(null);
  const [schedules, setSchedules] = useState<{id: string, title: string, mode: string, date: string, link: string}[]>([]);

  // State for The Vault
  const [showVaultModal, setShowVaultModal] = useState(false);
  const [vaultVideoUrl, setVaultVideoUrl] = useState<string | null>(null);
  const [vaultVideoName, setVaultVideoName] = useState<string>("");

  // States for Copy Alert
  const [copySuccess, setCopySuccess] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        const resp = await fetch("/vc/api/auth/me");
        const data = await resp.json();
        if (data.error) {
          // Auth failed - show as guest instead of redirecting (prevents loop)
          setUsername("Guest");
          setIsVerifying(false);
        } else {
          setUsername(data.email); // Full email as display name
          if (data.mediaEngineStrategy) {
            setEngineStrategy(data.mediaEngineStrategy);
          }
          setIsVerifying(false);
        }
      } catch {
        // Network error - show as guest instead of redirecting (prevents loop)
        setUsername("Guest");
        setIsVerifying(false);
      }
    })();
  }, []);

  const handleNewMeeting = async () => {
    // TAHAP NANO: Generate Random Room ID dengan Kriptografi Murni
    const uuid = crypto.randomUUID().toUpperCase().split('-');
    const newRoomId = `JMP-${uuid[1]}-${uuid[2]}`;
    const inviteLink = typeof window !== 'undefined' ? `${window.location.origin}/vc/room/${newRoomId}` : `/vc/room/${newRoomId}`;
    
    // Copy to clipboard
    try {
      await navigator.clipboard.writeText(`Join JUMPA.ID Meeting:\n${inviteLink}`);
      setCopySuccess(true);
      setTimeout(() => {
        router.push(`/room/${newRoomId}`);
      }, 1500); // Tunggu 1.5 detik agar user melihat notif tercopy sebelum dipindah
    } catch {
      // Fallback jika clipboard API tidak diizinkan
      router.push(`/room/${newRoomId}`);
    }
  };

  const handleJoinSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (roomName) {
      router.push(`/room/${roomName.toUpperCase()}`);
    }
  };



  if (isVerifying) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#0a101d]">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-brand border-t-transparent rounded-full animate-spin"></div>
          <p className="text-brand font-medium">Securing Connection...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-dvh bg-[#050b14] text-white selection:bg-red-500/30 relative overflow-x-hidden pb-24 md:pb-10">
      {/* Abstract Background Decorators */}
      <div className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-red-600/10 rounded-full blur-[150px] animate-pulse"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[120px]"></div>
      </div>
      
      {/* Top Navbar - Ultra Refined */}
      <header className="h-16 border-b border-white/5 flex items-center justify-between px-4 md:px-8 backdrop-blur-xl bg-black/40 relative z-50">
        <div className="flex items-center gap-4">
          <button 
            onClick={() => window.location.href = '/dashboard'}
            className="flex items-center gap-2 p-2 rounded-xl bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-all border border-white/5 group"
            title="Back to Hub"
          >
            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            <span className="hidden md:inline font-bold text-xs uppercase tracking-widest">Master Hub</span>
          </button>

          <div className="h-6 w-[1px] bg-white/10 mx-2 hidden md:block"></div>

          <div className="flex items-center gap-3">
             <div className={`w-8 h-8 rounded-lg flex items-center justify-center shadow-lg ${engineStrategy.includes('XCU') ? 'bg-red-600 shadow-red-600/20' : 'bg-blue-600 shadow-blue-600/20'}`}>
                <svg className="w-5 h-5 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2zm0 4.5l6.5 13h-13L12 6.5zM11 16h2v2h-2v-2zm0-5h2v4h-2v-4z"/></svg>
             </div>
             <span className={`font-black text-sm md:text-lg tracking-tighter uppercase ${engineStrategy.includes('XCU') ? 'text-red-500' : 'text-blue-500'}`}>
                JUMPA <span className="text-white">MEET</span>
                <span className="hidden lg:inline ml-2 text-[10px] text-gray-600 font-mono tracking-widest">XCU-DIRECT-LINK</span>
             </span>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="hidden sm:flex flex-col items-end mr-2">
             <span className="text-[10px] text-gray-500 uppercase font-bold">Authenticated as</span>
             <span className="text-xs text-white font-mono">{username}</span>
          </div>
          <div className="w-10 h-10 rounded-full bg-linear-to-br from-gray-800 to-black border border-white/10 flex items-center justify-center font-black text-brand shadow-xl">
            {username.substring(0,2).toUpperCase()}
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-6xl mx-auto px-4 md:px-6 py-10 md:py-20 relative z-10">
        
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-center lg:items-start">
          
          {/* Left Side: Dynamic Status & Info */}
          <div className="flex-1 text-center lg:text-left">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-black uppercase tracking-widest mb-6 animate-pulse">
               <div className="w-1.5 h-1.5 rounded-full bg-red-500"></div>
               XCU Engine Status: Ultra Optimal
            </div>
            
            <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-4 leading-none">
              {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
            </h1>
            <p className="text-lg md:text-xl text-gray-400 font-medium mb-10">
              {new Date().toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' })}
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-xl">
               <div className="p-5 rounded-2xl bg-black/40 border border-white/5 backdrop-blur-md">
                  <h4 className="text-[10px] font-black text-red-500 uppercase tracking-widest mb-2">Protocol</h4>
                  <p className="text-xs text-gray-400">WebTransport HTTP/3 QUIC (0ms Latency Kernel Bypass)</p>
               </div>
               <div className="p-5 rounded-2xl bg-black/40 border border-white/5 backdrop-blur-md">
                  <h4 className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-2">Encryption</h4>
                  <p className="text-xs text-gray-400">Quantum-Safe AES-GCM 256-bit (E2EE Active)</p>
               </div>
            </div>
          </div>

          {/* Right Side: High-Density Action Grid */}
          <div className="w-full max-w-md">
            <div className="grid grid-cols-2 gap-4">
              
              {/* New Meeting - The Big Button */}
              <button 
                onClick={handleNewMeeting}
                className="col-span-2 group relative p-8 rounded-3xl border border-red-500/30 bg-red-950/20 hover:bg-red-900/30 transition-all duration-500 overflow-hidden shadow-2xl shadow-red-950/20"
              >
                <div className="absolute inset-0 bg-linear-to-br from-red-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div className="relative flex flex-col items-center gap-4">
                  <div className="w-20 h-20 rounded-2xl bg-red-600 flex items-center justify-center text-black shadow-[0_0_30px_rgba(220,38,38,0.5)] group-hover:shadow-[0_0_50px_rgba(220,38,38,0.8)] transition-all group-hover:scale-110">
                    <svg className="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></svg>
                  </div>
                  <div className="text-center">
                    <span className="block font-black text-lg tracking-tighter text-white uppercase">Mulai Rapat Baru</span>
                    <span className="text-[10px] text-red-500 font-mono font-bold uppercase tracking-widest">Direct Ultra Link</span>
                  </div>
                </div>
              </button>

              {/* Join Button */}
              <button onClick={() => setShowJoinModal(true)} className="group p-6 rounded-3xl border border-white/5 bg-white/5 hover:bg-white/10 transition-all flex flex-col items-center gap-3">
                 <div className="w-12 h-12 rounded-xl bg-blue-600/20 flex items-center justify-center text-blue-500 group-hover:bg-blue-600 group-hover:text-white transition-all">
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4"></path></svg>
                 </div>
                 <span className="font-bold text-xs uppercase tracking-widest">Join</span>
              </button>

              {/* Chronos Button */}
              <button onClick={() => setShowChronosModal(true)} className="group p-6 rounded-3xl border border-white/5 bg-white/5 hover:bg-white/10 transition-all flex flex-col items-center gap-3">
                 <div className="w-12 h-12 rounded-xl bg-pink-600/20 flex items-center justify-center text-pink-500 group-hover:bg-pink-600 group-hover:text-white transition-all">
                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z"/></svg>
                 </div>
                 <span className="font-bold text-xs uppercase tracking-widest">Chronos</span>
              </button>

              {/* Vault Button */}
              <button onClick={() => setShowVaultModal(true)} className="group p-6 rounded-3xl border border-white/5 bg-white/5 hover:bg-white/10 transition-all flex flex-col items-center gap-3">
                 <div className="w-12 h-12 rounded-xl bg-teal-600/20 flex items-center justify-center text-teal-500 group-hover:bg-teal-600 group-hover:text-white transition-all">
                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                 </div>
                 <span className="font-bold text-xs uppercase tracking-widest">The Vault</span>
              </button>

              {/* Tenant Master Button */}
              <button 
                onClick={() => router.push(`/room/JMP-TENANT-MATRIX`)}
                className="group p-6 rounded-3xl border border-amber-500/20 bg-amber-500/5 hover:bg-amber-500/10 transition-all flex flex-col items-center gap-3"
              >
                 <div className="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center text-amber-500 group-hover:bg-amber-500 group-hover:text-black transition-all">
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                 </div>
                 <span className="font-bold text-[10px] uppercase tracking-tighter text-center">Master Room</span>
              </button>

            </div>
          </div>

        </div>
      </main>

      {/* Mobile Bottom Navigation - 100% Mobile Compatible */}
      <nav className="fixed bottom-4 left-4 right-4 md:hidden glass-panel rounded-2xl p-2 z-50 border-white/10 shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex justify-around items-center">
         <button onClick={() => window.location.href = '/dashboard'} className="flex flex-col items-center gap-1 p-2 text-gray-400">
            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
            <span className="text-[9px] font-bold uppercase">Home</span>
         </button>
         <button onClick={() => window.location.href = '/c'} className="flex flex-col items-center gap-1 p-2 text-gray-400">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            <span className="text-[9px] font-bold uppercase">Chat</span>
         </button>
         <button onClick={() => window.location.href = '/vc'} className="flex flex-col items-center gap-1 p-2 text-red-500">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
            <span className="text-[9px] font-bold uppercase">Meet</span>
         </button>
      </nav>

      {/* Ultra Footer */}
      <footer className="text-center py-10 opacity-30 mt-auto">
          <p className="text-[10px] font-mono tracking-[0.2em] uppercase">Jumpa.ID Meet • Absolute Zero Engine v2.4</p>
      </footer>

      {/* Copy Success Alert */}
      {copySuccess && (
        <div className="absolute top-20 left-1/2 -translate-x-1/2 bg-green-500/90 text-white px-6 py-3 rounded-full font-medium shadow-xl backdrop-blur-md flex items-center gap-2 animate-in fade-in slide-in-from-top-5 z-50">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
          Invite Link Copied! Joining meeting...
        </div>
      )}

      {/* Join Modal */}
      {showJoinModal && (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md">
          <div className="bg-[#111b21] p-8 rounded-3xl border border-white/10 shadow-2xl w-[400px] animate-in zoom-in-95 duration-200">
            <h2 className="text-2xl font-bold mb-2 text-white">Join Meeting</h2>
            <p className="text-gray-400 text-sm mb-6">Enter meeting ID or personal link name</p>
            <form onSubmit={handleJoinSubmit}>
              <input 
                type="text" 
                value={roomName}
                onChange={(e) => setRoomName(e.target.value.toUpperCase())}
                placeholder="Meeting ID (e.g. BOARD-ROOM)"
                className="w-full bg-[#0a101d] text-white border border-white/10 rounded-xl px-4 py-3.5 mb-6 focus:outline-none focus:border-brand focus:ring-1 focus:ring-brand"
                autoFocus
                required
              />
              <div className="flex gap-3">
                <button type="button" onClick={() => setShowJoinModal(false)} className="flex-1 py-3 text-gray-300 font-medium bg-white/5 hover:bg-white/10 rounded-xl transition-colors">Cancel</button>
                <button type="submit" className="flex-1 py-3 text-black font-bold bg-brand hover:bg-brand/90 rounded-xl transition-colors">Join</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* CHRONOS SMART SCHEDULER MODAL */}
      {showChronosModal && (
        <div className="fixed inset-0 z-600 flex items-center justify-center bg-black/90 backdrop-blur-md p-4">
          <div className="bg-[#111b21] w-full max-w-[700px] h-[80vh] rounded-2xl shadow-2xl border border-pink-500/50 flex flex-col overflow-hidden animate-in zoom-in duration-200">
            <div className="bg-[#202c33] px-6 py-4 border-b border-gray-800 flex justify-between items-center">
              <h3 className="text-pink-400 font-bold text-lg flex items-center gap-2">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z"/></svg>
                Chronos Smart Scheduler (Tenant Center)
              </h3>
              <button title="Aksi" onClick={() => setShowChronosModal(false)} className="text-gray-400 hover:text-white transition-colors">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              </button>
            </div>
            <div className="p-6 overflow-y-auto flex-1 custom-scroll">
              <div className="grid grid-cols-3 gap-4 mb-8">
                <div onClick={() => setRoomMode('standard')} className={`cursor-pointer p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${roomMode === 'standard' ? 'bg-blue-600/20 border-blue-500 text-blue-400' : 'bg-[#202c33] border-gray-600 text-gray-400 hover:border-gray-400'}`}>
                   <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
                   <span className="font-bold text-xs md:text-sm text-center">Standard VC</span>
                </div>
                <div onClick={() => setRoomMode('webinar')} className={`cursor-pointer p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${roomMode === 'webinar' ? 'bg-pink-600/20 border-pink-500 text-pink-400' : 'bg-[#202c33] border-gray-600 text-gray-400 hover:border-gray-400'}`}>
                   <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15h8v-2H8v2zm0-4h8V9H8v2z"/></svg>
                   <span className="font-bold text-xs md:text-sm text-center">Holo-Stage Webinar</span>
                </div>
                <div onClick={() => setRoomMode('podcast')} className={`cursor-pointer p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${roomMode === 'podcast' ? 'bg-amber-600/20 border-amber-500 text-amber-500' : 'bg-[#202c33] border-gray-600 text-gray-400 hover:border-gray-400'}`}>
                   <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
                   <span className="font-bold text-xs md:text-sm text-center">Studio Podcast</span>
                </div>
              </div>

              <div className="bg-[#202c33] p-4 rounded-xl border border-gray-600 mb-6">
                 <h4 className="text-white font-bold mb-3">Jadwalkan Ruangan (Smart Timeline)</h4>
                 {!chronoResult ? (
                   <div className="flex flex-col md:flex-row gap-2">
                      <input title="Masukan" 
                        type="datetime-local" 
                        value={chronoDate}
                        onChange={(e) => setChronoDate(e.target.value)}
                        className="flex-1 bg-[#111b21] text-white px-4 py-2 rounded-lg border border-gray-700 focus:outline-none focus:border-pink-500" 
                      />
                      <input 
                        type="text" 
                        placeholder="Nama Ruangan..." 
                        value={chronoName}
                        onChange={(e) => setChronoName(e.target.value)}
                        className="flex-1 bg-[#111b21] text-white px-4 py-2 rounded-lg border border-gray-700 focus:outline-none focus:border-pink-500" 
                      />
                      <button 
                        onClick={() => {
                          if (chronoDate && chronoName) {
                            const uuid = crypto.randomUUID().toUpperCase().split('-');
                            const newRoomId = `JMP-SCH-${uuid[1]}-${uuid[2]}`;
                            const inviteLink = `/vc/room/${newRoomId}`;
                            const inviteText = `Panggilan JUMPA.ID Terjadwal\nTopik: ${chronoName}\nWaktu: ${chronoDate}\n\nTautan Rapat:\n${inviteLink}\nMeeting ID: ${newRoomId}`;
                            setChronoResult({ link: inviteLink, text: inviteText });
                            
                            // Tambahkan ke state schedules untuk ditampilkan di list bawah
                            setSchedules(prev => [...prev, {
                               id: newRoomId,
                               title: chronoName,
                               mode: roomMode,
                               date: chronoDate,
                               link: inviteLink
                            }]);
                          } else {
                            alert("Mohon isi tanggal dan nama ruangan.");
                          }
                        }}
                        className="bg-pink-600 hover:bg-pink-500 text-white px-6 py-2 rounded-lg font-bold"
                      >
                        JADWALKAN
                      </button>
                   </div>
                 ) : (
                   <div className="bg-green-500/10 border border-green-500/30 p-4 rounded-lg mt-2">
                     <h5 className="text-green-400 font-bold mb-2 text-sm flex items-center gap-2">
                       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                       Berhasil Dijadwalkan!
                     </h5>
                     <textarea title="Teks" 
                       readOnly
                       value={chronoResult.text}
                       className="w-full h-24 bg-black/50 text-gray-300 text-xs p-2 rounded-lg border border-white/5 resize-none outline-none custom-scroll mb-2"></textarea>
                     <div className="flex gap-2">
                       <button onClick={() => {
                         navigator.clipboard.writeText(chronoResult.text);
                         alert("Teks undangan berhasil disalin!");
                       }} className="flex-1 py-1.5 text-black font-bold bg-brand hover:bg-brand/90 rounded-lg text-xs">Copy Invitation</button>
                       <button onClick={() => { setChronoResult(null); setChronoDate(""); setChronoName(""); }} className="px-4 py-1.5 text-white font-medium bg-white/10 hover:bg-white/20 rounded-lg text-xs">Tutup</button>
                     </div>
                   </div>
                 )}
              </div>

              <div className="space-y-3">
                 <h4 className="text-gray-400 font-bold text-sm">3D TIMELINE SCHEDULES</h4>
                 {schedules.length === 0 ? (
                    <div className="text-center py-6 text-gray-500 text-sm">Belum ada ruangan yang dijadwalkan.</div>
                 ) : (
                    schedules.map((sch) => (
                      <div key={sch.id} className="bg-linear-to-r from-[#202c33] to-[#111b21] p-4 rounded-xl border border-gray-700 flex justify-between items-center group">
                        <div>
                          <div className="flex items-center gap-2">
                             <span className="bg-pink-500 text-white text-[10px] px-2 py-0.5 rounded font-bold uppercase">{sch.mode}</span>
                             <span className="text-white font-bold">{sch.title}</span>
                          </div>
                          <div className="text-gray-400 text-sm mt-1">{new Date(sch.date).toLocaleString('id-ID')}</div>
                        </div>
                        <div className="flex gap-2">
                           <button onClick={() => { navigator.clipboard.writeText(`Gabung Rapat: ${sch.link}`); alert('Link disalin!'); }} className="bg-white/10 hover:bg-white/20 text-white px-3 py-2 rounded-lg text-xs font-bold md:opacity-0 group-hover:opacity-100 transition-opacity">COPY LINK</button>
                           <button 
                             onClick={() => {
                               setShowChronosModal(false);
                               router.push(`/room/${sch.id}`);
                             }}
                             className="bg-brand/20 hover:bg-brand text-brand hover:text-black border border-brand/50 px-3 py-2 rounded-lg text-xs font-bold transition-all"
                           >
                             START
                           </button>
                        </div>
                      </div>
                    ))
                 )}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* THE VAULT (RECORDINGS) MODAL */}
      {showVaultModal && (
        <div className="fixed inset-0 z-600 flex items-center justify-center bg-black/90 backdrop-blur-md p-4">
          <div className="bg-[#111b21] w-full max-w-[800px] h-[85vh] rounded-2xl shadow-2xl border border-teal-500/50 flex flex-col overflow-hidden animate-in zoom-in duration-200">
            <div className="bg-[#202c33] px-6 py-4 border-b border-gray-800 flex justify-between items-center">
              <h3 className="text-teal-400 font-bold text-lg flex items-center gap-2">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                The Vault (Quantum Recordings)
              </h3>
              <button title="Aksi" onClick={() => setShowVaultModal(false)} className="text-gray-400 hover:text-white transition-colors">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              </button>
            </div>
            <div className="p-6 overflow-y-auto flex-1 custom-scroll flex flex-col gap-4">
               
               <div className="bg-[#202c33] rounded-xl overflow-hidden border border-gray-700 hover:border-teal-500 transition-colors flex flex-col items-center justify-center text-center p-6 border-dashed relative">
                  <svg className="w-12 h-12 text-teal-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                  <h4 className="text-white font-bold mb-2">Secure Local Player</h4>
                  <p className="text-gray-400 text-sm mb-4">Pilih file rekaman hasil <strong className="text-teal-400">Quantum Record</strong> (.webm / .mp4) dari perangkat Anda. Video diputar 100% lokal tanpa diunggah ke internet.</p>
                  
                  <input 
                    type="file" 
                    accept="video/webm, video/mp4, video/x-matroska"
                    className="hidden"
                    id="vault-file-upload"
                    onChange={(e) => {
                      const file = e.target.files?.[0];
                      if (file) {
                        if (vaultVideoUrl) URL.revokeObjectURL(vaultVideoUrl);
                        const url = URL.createObjectURL(file);
                        setVaultVideoUrl(url);
                        setVaultVideoName(file.name);
                      }
                    }}
                  />
                  <label 
                    htmlFor="vault-file-upload" 
                    className="cursor-pointer bg-teal-600 hover:bg-teal-500 text-white px-6 py-2.5 rounded-lg font-bold shadow-lg shadow-teal-500/20 transition-all"
                  >
                    Buka Rekaman Lokal
                  </label>
               </div>

               {vaultVideoUrl && (
                 <div className="bg-[#111b21] rounded-xl overflow-hidden border border-teal-500 shadow-xl shadow-teal-500/10 flex flex-col animate-in fade-in zoom-in-95">
                   <div className="bg-teal-900/20 px-4 py-3 border-b border-teal-500/30 flex justify-between items-center">
                     <span className="text-teal-300 font-mono text-xs truncate max-w-[70%]">📄 {vaultVideoName}</span>
                     <button 
                       onClick={() => {
                         URL.revokeObjectURL(vaultVideoUrl);
                         setVaultVideoUrl(null);
                         setVaultVideoName("");
                       }}
                       className="text-red-400 hover:text-red-300 text-xs font-bold uppercase"
                     >
                       Tutup Video
                     </button>
                   </div>
                   <div className="bg-black aspect-video flex items-center justify-center">
                     <video 
                       src={vaultVideoUrl} 
                       controls 
                       autoPlay
                       className="w-full h-full object-contain outline-none"
                     ></video>
                   </div>
                 </div>
               )}

            </div>
          </div>
        </div>
      )}

    </div>
  );
}