import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, onSnapshot, setDoc } from 'firebase/firestore';
import { Home, Settings, Unlock, Lock, Trash, WifiOff, Upload, ArrowLeft } from 'lucide-react';

// --- PENGATURAN DASAR & STYLING ---
const FontStyles = () => (
  <style dangerouslySetInnerHTML={{__html: `
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
    body {
      font-family: 'Inter', sans-serif;
      overflow-y: hidden; /* Hide global scrollbar */
      background-color: #000000; /* BG Dominan Hitam */
      color: #ffffff;
    }
    .time-number {
      font-size: clamp(5rem, 15vw, 12rem);
      line-height: 1;
      letter-spacing: -0.05em;
    }
    /* Custom scrollbar disesuaikan untuk tema gelap */
    .custom-scroll::-webkit-scrollbar { width: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: transparent; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #333333; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: #555555; }
  `}} />
);

// Firebase Initialization
const firebaseConfig = typeof __firebase_config !== 'undefined' && __firebase_config ? JSON.parse(__firebase_config) : {
  apiKey: "mock-key", authDomain: "mock-domain", projectId: "mock-id"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const APP_ID = typeof __app_id !== 'undefined' ? __app_id : 'lks-portal-2026';

// --- DATA BAWAAN (DEFAULT) ---
const defaultData = {
  docLink: '#',
  spreadsheetLink: '#',
  schedule: [
    { id: '1', activity: 'Loading in Peralatan & Pengecekan', time: '2026-04-05T09:00:00', endTime: '2026-04-05T15:00:00', duration: 360, pic: 'PANITIA' },
    { id: '2', activity: 'Registrasi, Persiapan (C1)', time: '2026-04-06T07:15:00', endTime: '2026-04-06T07:45:00', duration: 30, pic: 'PANITIA' },
    { id: '3', activity: 'Briefing & Tanya Jawab', time: '2026-04-06T07:45:00', endTime: '2026-04-06T08:15:00', duration: 30, pic: 'TIM JURI' },
    { id: '4', activity: 'Pengerjaan Modul 1', time: '2026-04-06T08:15:00', endTime: '2026-04-06T11:15:00', duration: 180, pic: '-' },
    { id: '5', activity: 'Pengumpulan Modul 1', time: '2026-04-06T11:15:00', endTime: '2026-04-06T11:30:00', duration: 15, pic: 'PANITIA' },
    { id: '6', activity: 'ISHOMA', time: '2026-04-06T11:30:00', endTime: '2026-04-06T12:30:00', duration: 60, pic: '-' },
    { id: '7', activity: 'Briefing & Tanya Jawab', time: '2026-04-06T12:30:00', endTime: '2026-04-06T13:00:00', duration: 30, pic: 'TIM JURI' },
    { id: '8', activity: 'Pengerjaan Modul 2', time: '2026-04-06T13:00:00', endTime: '2026-04-06T16:00:00', duration: 180, pic: '-' },
    { id: '9', activity: 'Pengumpulan Modul 2', time: '2026-04-06T16:00:00', endTime: '2026-04-06T16:15:00', duration: 15, pic: 'PANITIA' },
    { id: '10', activity: 'Peserta Pulang', time: '2026-04-06T16:15:00', endTime: '2026-04-06T16:45:00', duration: 30, pic: '-' },
    { id: '11', activity: 'Penilaian / Marking', time: '2026-04-06T16:45:00', endTime: '2026-04-06T19:45:00', duration: 180, pic: 'TIM JURI' },
    { id: '12', activity: 'Registrasi, Persiapan (C2)', time: '2026-04-07T07:15:00', endTime: '2026-04-07T08:15:00', duration: 60, pic: 'PANITIA' },
    { id: '13', activity: 'Briefing & Tanya Jawab', time: '2026-04-07T08:15:00', endTime: '2026-04-07T08:45:00', duration: 30, pic: 'TIM JURI' },
    { id: '14', activity: 'Pengerjaan Modul 3', time: '2026-04-07T08:30:00', endTime: '2026-04-07T11:30:00', duration: 180, pic: '-' },
    { id: '15', activity: 'Pengumpulan Modul 3', time: '2026-04-07T11:30:00', endTime: '2026-04-07T11:45:00', duration: 15, pic: 'PANITIA' },
    { id: '16', activity: 'ISHOMA', time: '2026-04-07T11:45:00', endTime: '2026-04-07T12:45:00', duration: 60, pic: '-' },
    { id: '17', activity: 'Briefing & Tanya Jawab', time: '2026-04-07T12:45:00', endTime: '2026-04-07T13:15:00', duration: 30, pic: 'TIM JURI' },
    { id: '18', activity: 'Pengerjaan Modul 4', time: '2026-04-07T13:15:00', endTime: '2026-04-07T16:15:00', duration: 180, pic: '-' },
    { id: '19', activity: 'Pengumpulan Modul 4', time: '2026-04-07T16:15:00', endTime: '2026-04-07T16:30:00', duration: 15, pic: 'PANITIA' },
    { id: '20', activity: 'Mengemas Alat & Pulang', time: '2026-04-07T16:30:00', endTime: '2026-04-07T17:00:00', duration: 30, pic: '-' },
    { id: '21', activity: 'Penilaian / Marking', time: '2026-04-07T17:00:00', endTime: '2026-04-07T19:30:00', duration: 150, pic: 'TIM JURI' },
    { id: '22', activity: 'Penilaian / Marking (C3)', time: '2026-04-08T08:00:00', endTime: '2026-04-08T18:00:00', duration: 600, pic: 'TIM JURI' },
    { id: '23', activity: 'Pengumuman (C4)', time: '2026-04-09T08:00:00', endTime: '2026-04-09T18:00:00', duration: 600, pic: 'PANITIA' }
  ],
  modules: [{ id: 'm1', title: 'Modul LKS Desain Grafis', link: 'https://drive.google.com/drive/folders/1DDpTLmTJQOQDOAYyIuZ63KdaDFl_tTGD?usp=sharing', releaseTime: '2026-04-05T08:00:00' }],
  submissions: [{ id: 's1', title: 'Folder Pengumpulan Tugas', link: '#', releaseTime: '2026-04-06T11:15:00' }]
};

export default function App() {
  const [user, setUser] = useState(null);
  const [appData, setAppData] = useState(defaultData);
  const [currentTime, setCurrentTime] = useState(new Date());
  const [currentView, setCurrentView] = useState('dashboard');
  const [isAdminAuth, setIsAdminAuth] = useState(false);
  const [dbError, setDbError] = useState(false);
  const [adminTab, setAdminTab] = useState('jadwal'); // Default admin tab

  // State untuk Modal Login
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [passwordInput, setPasswordInput] = useState('');
  const [loginError, setLoginError] = useState(false);

  // --- DATABASE SYNC ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        setDbError(true);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;
    const docRef = doc(db, 'artifacts', APP_ID, 'public', 'data', 'settings', 'config');
    
    const unsubscribe = onSnapshot(docRef, (snap) => {
      if (snap.exists()) {
        const data = snap.data();
        setAppData({
          docLink: data.docLink || defaultData.docLink,
          schedule: data.schedule || defaultData.schedule,
          modules: data.modules || defaultData.modules,
          submissions: data.submissions || defaultData.submissions
        });
      } else {
        saveToCloud(defaultData);
      }
    }, () => setDbError(true));
    return () => unsubscribe();
  }, [user]);

  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const saveToCloud = async (newData) => {
    if (!user) return;
    try {
      await setDoc(doc(db, 'artifacts', APP_ID, 'public', 'data', 'settings', 'config'), newData);
    } catch (error) {
      console.error("Error saving:", error);
    }
  };

  // --- LOGIKA UTAMA VIEW ---
  const agendaStatus = useMemo(() => {
    const now = currentTime.getTime();
    let ongoing = null;
    let next = null;
    const sortedSchedule = [...appData.schedule].sort((a, b) => new Date(a.time) - new Date(b.time));

    for (let item of sortedSchedule) {
      const start = new Date(item.time).getTime();
      const end = new Date(item.endTime).getTime();
      if (now >= start && now < end) {
        ongoing = item;
        break;
      } else if (now < start && !next) {
        next = item;
      }
    }

    if (ongoing) return { type: 'ONGOING', title: ongoing.activity, target: new Date(ongoing.endTime) };
    if (next) return { type: 'NEXT', title: next.activity, target: new Date(next.time) };
    return { type: 'DONE', title: 'Kompetisi Selesai', target: null };
  }, [appData.schedule, currentTime]);

  const renderCountdown = (targetDate) => {
    if (!targetDate) return { h: '00', m: '00', s: '00' };
    const diff = targetDate.getTime() - currentTime.getTime();
    if (diff <= 0) return { h: '00', m: '00', s: '00' };

    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    return {
      h: String(hours).padStart(2, '0'),
      m: String(minutes).padStart(2, '0'),
      s: String(seconds).padStart(2, '0')
    };
  };

  const timerVals = renderCountdown(agendaStatus.target);

  const handleAdminLogin = () => {
    if (isAdminAuth) {
      setCurrentView('admin');
    } else {
      setShowLoginModal(true);
      setPasswordInput('');
      setLoginError(false);
    }
  };

  const submitLogin = () => {
    if (passwordInput === 'roomjuri') {
      setIsAdminAuth(true);
      setCurrentView('admin');
      setShowLoginModal(false);
    } else {
      setLoginError(true);
    }
  };

  // --- LOGIKA ADMIN PANEL ---
  const handleUpdateSetting = (key, value) => {
    const newData = { ...appData, [key]: value };
    setAppData(newData);
    saveToCloud(newData);
  };

  const handleAddListItem = (type) => {
    const id = Date.now().toString();
    const newItem = { id, title: 'Judul Baru', link: '', releaseTime: new Date().toISOString().slice(0,16) };
    const newData = { ...appData, [type]: [...appData[type], newItem] };
    setAppData(newData);
    saveToCloud(newData);
  };

  const handleDeleteListItem = (type, id) => {
    const newData = { ...appData, [type]: appData[type].filter(i => i.id !== id) };
    setAppData(newData);
    saveToCloud(newData);
  };

  const handleUpdateListItem = (type, id, field, value) => {
    const newData = {
      ...appData,
      [type]: appData[type].map(i => i.id === id ? { ...i, [field]: value } : i)
    };
    setAppData(newData);
    saveToCloud(newData);
  };

  const handleScheduleChange = (id, field, value) => {
    let updatedSchedule = [...appData.schedule];
    const index = updatedSchedule.findIndex(s => s.id === id);
    if (index === -1) return;

    if (field === 'duration') {
      updatedSchedule[index].duration = parseInt(value) || 0;
    } else if (field === 'startTimeUpdate') {
      const datePart = updatedSchedule[index].time.split('T')[0];
      updatedSchedule[index].time = `${datePart}T${value}:00`;
    } else {
      updatedSchedule[index][field] = value;
    }

    const currentItem = updatedSchedule[index];
    const itemDate = currentItem.time.split('T')[0];
    
    let dayItems = updatedSchedule.filter(s => s.time.startsWith(itemDate)).sort((a,b) => new Date(a.time) - new Date(b.time));
    
    let previousEndTime = null;
    dayItems = dayItems.map((item, idx) => {
      let startTimeObj;
      if (idx > 0 && previousEndTime) {
         startTimeObj = new Date(previousEndTime);
         item.time = startTimeObj.toISOString().slice(0, 19);
      } else {
         startTimeObj = new Date(item.time);
      }
      
      const endTimeObj = new Date(startTimeObj.getTime() + item.duration * 60000);
      item.endTime = endTimeObj.toISOString().slice(0, 19);
      previousEndTime = item.endTime;
      return item;
    });

    updatedSchedule = updatedSchedule.map(s => {
      const dayItem = dayItems.find(d => d.id === s.id);
      return dayItem ? dayItem : s;
    });

    const newData = { ...appData, schedule: updatedSchedule };
    setAppData(newData);
    saveToCloud(newData);
  };

  // --- RENDER UI ---
  if (dbError) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-black text-white">
        <WifiOff size={48} className="mb-4" />
        <h1 className="text-2xl font-bold">Koneksi Database Terputus</h1>
      </div>
    );
  }

  return (
    <div className="h-screen flex flex-col overflow-hidden bg-black text-white">
      <FontStyles />
      
      {/* HEADER: Dibuat menyatu dan tersembunyi, hanya menampilkan ikon navigasi */}
      <header className="p-6 flex justify-end shrink-0 relative z-10">
        <div className="flex gap-4">
          {currentView !== 'dashboard' && (
             <button onClick={() => setCurrentView('dashboard')} className="p-3 border-2 border-white text-white rounded-none hover:bg-white hover:text-black transition cursor-pointer">
               <Home size={20} />
             </button>
          )}
          <button onClick={handleAdminLogin} className="p-3 border-2 border-white text-white rounded-none hover:bg-white hover:text-black transition cursor-pointer">
            <Settings size={20} />
          </button>
        </div>
      </header>

      {/* Modal Login Juri */}
      {showLoginModal && (
        <div className="fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4">
          <div className="bg-black p-8 max-w-sm w-full rounded-none border-4 border-white text-white">
            <h3 className="font-bold text-2xl mb-2 uppercase tracking-tight">Room Juri</h3>
            <p className="text-sm text-gray-400 mb-6 font-medium">Otorisasi panitia diperlukan.</p>
            <input
              type="password"
              placeholder="Password..."
              value={passwordInput}
              onChange={(e) => setPasswordInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && submitLogin()}
              className="w-full p-4 border-2 border-white bg-black text-white rounded-none mb-2 outline-none font-mono focus:bg-gray-900"
            />
            {loginError ? (
              <p className="text-red-500 text-sm font-bold mb-4">Akses ditolak.</p>
            ) : (
              <div className="mb-4"></div>
            )}
            
            <div className="flex justify-end gap-4 mt-4">
              <button onClick={() => setShowLoginModal(false)} className="px-4 py-2 font-bold text-gray-400 hover:text-white transition">BATAL</button>
              <button onClick={submitLogin} className="px-6 py-2 bg-white text-black font-bold rounded-none hover:bg-gray-300 transition">MASUK</button>
            </div>
          </div>
        </div>
      )}

      {/* BODY CONTENT */}
      <main className="flex-1 overflow-y-auto custom-scroll p-4 md:p-8 flex flex-col justify-center">
        <div className="max-w-5xl mx-auto w-full space-y-12">
          
          {/* VIEW: DASHBOARD */}
          {currentView === 'dashboard' && (
            <>
              {/* Modul Waktu Countdown - Grid System Kuat */}
              <div className="grid grid-cols-3 gap-4 md:gap-8 max-w-4xl mx-auto">
                <div className="border-4 border-white flex justify-center items-center py-10 md:py-16">
                    <div className="time-number font-extrabold">{timerVals.h}</div>
                </div>
                <div className="border-4 border-white flex justify-center items-center py-10 md:py-16">
                    <div className="time-number font-extrabold">{timerVals.m}</div>
                </div>
                <div className="border-4 border-white flex justify-center items-center py-10 md:py-16">
                    <div className="time-number font-extrabold">{timerVals.s}</div>
                </div>
              </div>

              {/* Indikator Status & Judul Kegiatan (Elegan di Bawah Countdown) */}
              <div className="text-center mt-6 mb-8">
                <h2 className="text-lg md:text-2xl font-medium text-gray-400 uppercase tracking-widest">
                  {agendaStatus.type === 'ONGOING' ? 'Sedang Berjalan:' : agendaStatus.type === 'NEXT' ? 'Menuju:' : ''} <span className="text-white font-bold ml-2">{agendaStatus.title}</span>
                </h2>
              </div>

              {/* Tombol Link - Grid Kotak Putih */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 max-w-4xl mx-auto pt-4">
                <button onClick={() => setCurrentView('modules')} className="block w-full bg-white text-black text-center py-6 font-extrabold text-sm md:text-lg rounded-none hover:bg-gray-300 transition-colors">
                    AKSES MODUL
                </button>
                <button onClick={() => setCurrentView('submissions')} className="block w-full bg-white text-black text-center py-6 font-extrabold text-sm md:text-lg rounded-none hover:bg-gray-300 transition-colors">
                    PENGUMPULAN
                </button>
                <button onClick={() => setCurrentView('schedule')} className="block w-full bg-white text-black text-center py-6 font-extrabold text-sm md:text-lg rounded-none hover:bg-gray-300 transition-colors">
                    JADWAL
                </button>
                <a href={appData.docLink} target="_blank" rel="noreferrer" className="block w-full bg-white text-black text-center py-6 font-extrabold text-sm md:text-lg rounded-none hover:bg-gray-300 transition-colors">
                    DOKUMENTASI
                </a>
              </div>
            </>
          )}

          {/* VIEW: MODULES & SUBMISSIONS (TIME-LOCKED) */}
          {(currentView === 'modules' || currentView === 'submissions') && (
            <div className="space-y-8 w-full max-w-4xl mx-auto">
              <div className="border-b-4 border-white pb-6">
                <h2 className="text-3xl md:text-5xl font-extrabold uppercase tracking-tight">
                  {currentView === 'modules' ? 'MODUL LOMBA' : 'PENGUMPULAN TUGAS'}
                </h2>
              </div>
              
              <div className="grid gap-6 md:grid-cols-2">
                {appData[currentView].map(item => {
                  const releaseDate = new Date(item.releaseTime);
                  const isLocked = currentTime < releaseDate;
                  
                  return (
                    <div key={item.id} className="bg-transparent p-6 border-4 border-white flex flex-col justify-between h-56">
                      <div>
                        <h3 className="text-xl font-bold mb-2 uppercase">{item.title}</h3>
                        <p className="text-sm font-mono text-gray-400">
                          {isLocked ? 'Terbuka pada:' : 'Tersedia sejak:'} {releaseDate.toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' })}
                        </p>
                      </div>
                      {isLocked ? (
                        <div className="bg-transparent text-gray-500 font-bold py-4 px-4 border-2 border-gray-600 flex items-center justify-center gap-3 uppercase tracking-widest">
                          <Lock size={18} /> TERKUNCI
                        </div>
                      ) : (
                        <a href={item.link} target="_blank" rel="noreferrer" className="bg-white text-black font-extrabold py-4 px-4 flex items-center justify-center gap-3 hover:bg-gray-300 transition-colors uppercase tracking-widest">
                          {currentView === 'modules' ? <Unlock size={18} /> : <Upload size={18} />}
                          {currentView === 'modules' ? 'BUKA MODUL' : 'UPLOAD FILE'}
                        </a>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* VIEW: SCHEDULE */}
          {currentView === 'schedule' && (
            <div className="space-y-8 w-full max-w-4xl mx-auto">
              <div className="border-b-4 border-white pb-6">
                <h2 className="text-3xl md:text-5xl font-extrabold uppercase tracking-tight">JADWAL LKS</h2>
              </div>
              
              <div className="space-y-12">
              {Object.entries(
                appData.schedule.reduce((acc, curr) => {
                  const date = curr.time.split('T')[0];
                  if (!acc[date]) acc[date] = [];
                  acc[date].push(curr);
                  return acc;
                }, {})
              ).map(([date, items]) => (
                <div key={date} className="border-4 border-white">
                  <div className="bg-white text-black px-6 py-4 font-extrabold uppercase tracking-widest text-lg">
                    {new Date(date).toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                  </div>
                  <table className="w-full text-left text-sm md:text-base">
                    <tbody className="divide-y-2 divide-gray-800">
                      {items.sort((a,b) => new Date(a.time) - new Date(b.time)).map(item => {
                        const isOngoing = currentTime >= new Date(item.time) && currentTime < new Date(item.endTime);
                        return (
                          <tr key={item.id} className={`transition-colors ${isOngoing ? 'bg-gray-900 text-white' : 'text-gray-300'}`}>
                            <td className={`p-5 font-mono w-32 whitespace-nowrap ${isOngoing ? 'font-bold' : ''}`}>
                              {new Date(item.time).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                            </td>
                            <td className={`p-5 ${isOngoing ? 'font-extrabold text-white' : 'font-semibold'}`}>{item.activity}</td>
                            <td className="p-5 w-32 font-mono text-xs md:text-sm opacity-60">{item.pic}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              ))}
              </div>
            </div>
          )}

          {/* VIEW: ADMIN PANEL */}
          {currentView === 'admin' && isAdminAuth && (
            <div className="bg-black text-white max-w-5xl mx-auto border-4 border-white rounded-none">
              <div className="flex bg-black border-b-4 border-white overflow-x-auto custom-scroll">
                {['jadwal', 'modul', 'pengumpulan', 'pengaturan'].map(tab => (
                  <button 
                    key={tab} 
                    onClick={() => setAdminTab(tab)}
                    className={`px-8 py-5 font-extrabold text-sm uppercase tracking-widest whitespace-nowrap transition-colors ${adminTab === tab ? 'bg-white text-black' : 'text-gray-500 hover:text-white'}`}
                  >
                    {tab}
                  </button>
                ))}
              </div>

              <div className="p-6 md:p-10 space-y-8 bg-black">
                
                {/* Tab: Pengaturan */}
                {adminTab === 'pengaturan' && (
                  <div className="space-y-6 max-w-xl">
                    <h3 className="font-extrabold text-2xl uppercase mb-6 border-b-2 border-white pb-2">Pengaturan Tautan</h3>
                    <div>
                      <label className="block text-sm font-bold text-gray-400 mb-2 uppercase tracking-wider">Link Dokumentasi Global</label>
                      <input type="url" value={appData.docLink} onChange={e => handleUpdateSetting('docLink', e.target.value)} className="w-full p-4 border-2 border-white bg-black text-white rounded-none outline-none focus:bg-gray-900 font-mono" />
                    </div>
                  </div>
                )}

                {/* Tab: Jadwal (Auto Recalculate) */}
                {adminTab === 'jadwal' && (
                  <div className="space-y-10">
                    <div className="bg-white text-black p-6 border-l-8 border-gray-400">
                      <p className="text-sm font-mono leading-relaxed">
                        <strong>INSTRUKSI:</strong> Untuk menggeser jadwal (overtime), ubah <span className="text-red-600 font-bold">Waktu Mulai</span> pada sesi paling pertama di hari tersebut, atau ubah <span className="text-red-600 font-bold">Durasi</span> (dalam menit). Jadwal di bawahnya akan bergeser secara otomatis.
                      </p>
                    </div>
                    
                    {Object.entries(
                      appData.schedule.reduce((acc, curr) => {
                        const date = curr.time.split('T')[0];
                        if (!acc[date]) acc[date] = [];
                        acc[date].push(curr);
                        return acc;
                      }, {})
                    ).map(([date, items]) => {
                      const sortedItems = items.sort((a,b) => new Date(a.time) - new Date(b.time));
                      return (
                      <div key={date} className="border-4 border-white p-6 bg-black">
                        <div className="font-extrabold text-2xl mb-6 uppercase tracking-widest border-b-2 border-white pb-4 text-white">
                          {new Date(date).toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                        </div>
                        
                        <div className="space-y-4">
                          {sortedItems.map((item, index) => (
                            <div key={item.id} className="flex flex-wrap md:flex-nowrap gap-4 items-center p-4 border-2 border-gray-800 hover:border-white transition-colors">
                              <div className="w-full md:w-auto">
                                <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Start {index === 0 ? '*' : ''}</label>
                                <input 
                                  type="time" 
                                  value={item.time.split('T')[1].substring(0,5)} 
                                  onChange={e => handleScheduleChange(item.id, 'startTimeUpdate', e.target.value)}
                                  disabled={index !== 0} 
                                  className={`p-3 border-2 font-mono text-sm w-full md:w-28 outline-none ${index !== 0 ? 'bg-gray-900 border-gray-800 text-gray-600 cursor-not-allowed' : 'bg-black border-white text-white focus:bg-gray-900'}`}
                                />
                              </div>
                              <div className="w-full md:w-auto">
                                <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Durasi</label>
                                <input type="number" value={item.duration} onChange={e => handleScheduleChange(item.id, 'duration', e.target.value)} className="p-3 border-2 border-white bg-black text-white font-mono text-sm w-full md:w-24 outline-none focus:bg-gray-900" />
                              </div>
                              <div className="w-full md:flex-1">
                                <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Kegiatan</label>
                                <input type="text" value={item.activity} onChange={e => handleScheduleChange(item.id, 'activity', e.target.value)} className="p-3 border-2 border-white bg-black text-white text-sm w-full outline-none focus:bg-gray-900 font-bold" />
                              </div>
                              <div className="w-full md:w-auto">
                                <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">PIC</label>
                                <input type="text" value={item.pic} onChange={e => handleScheduleChange(item.id, 'pic', e.target.value)} className="p-3 border-2 border-white bg-black text-white font-mono text-sm w-full md:w-32 outline-none focus:bg-gray-900" />
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )})}
                  </div>
                )}

                {/* Tab: Modul & Pengumpulan */}
                {(adminTab === 'modul' || adminTab === 'pengumpulan') && (
                  <div className="space-y-8">
                    <button onClick={() => handleAddListItem(adminTab === 'modul' ? 'modules' : 'submissions')} className="bg-white text-black px-6 py-4 font-extrabold text-sm uppercase tracking-widest hover:bg-gray-300 transition">
                      + TAMBAH {adminTab === 'modul' ? 'MODUL' : 'LINK'}
                    </button>
                    
                    <div className="grid gap-6">
                      {appData[adminTab === 'modul' ? 'modules' : 'submissions'].map(item => (
                        <div key={item.id} className="flex flex-col md:flex-row gap-4 items-start md:items-end bg-black p-6 border-4 border-white">
                          <div className="w-full md:flex-1">
                            <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Judul</label>
                            <input type="text" value={item.title} onChange={e => handleUpdateListItem(adminTab === 'modul' ? 'modules' : 'submissions', item.id, 'title', e.target.value)} className="w-full p-3 border-2 border-white bg-black text-white outline-none font-bold focus:bg-gray-900" />
                          </div>
                          <div className="w-full md:flex-1">
                            <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Link (G-Drive dll)</label>
                            <input type="url" value={item.link} onChange={e => handleUpdateListItem(adminTab === 'modul' ? 'modules' : 'submissions', item.id, 'link', e.target.value)} className="w-full p-3 border-2 border-white bg-black text-white outline-none font-mono text-sm focus:bg-gray-900" />
                          </div>
                          <div className="w-full md:w-auto">
                            <label className="text-xs font-bold text-gray-500 block mb-2 uppercase tracking-widest">Waktu Rilis</label>
                            <input type="datetime-local" value={item.releaseTime} onChange={e => handleUpdateListItem(adminTab === 'modul' ? 'modules' : 'submissions', item.id, 'releaseTime', e.target.value)} className="w-full p-3 border-2 border-white bg-black text-white outline-none font-mono text-sm focus:bg-gray-900" />
                          </div>
                          <button onClick={() => handleDeleteListItem(adminTab === 'modul' ? 'modules' : 'submissions', item.id)} className="p-4 text-white bg-red-600 hover:bg-red-700 transition flex-shrink-0 border-2 border-red-600">
                            <Trash size={20} />
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

              </div>
            </div>
          )}

        </div>
      </main>
    </div>
  );
}