import React, { useState, useEffect } from 'react';
import { 
  User, Users, MapPin, FileText, LayoutDashboard, 
  Settings, LogOut, Clock, CheckCircle, AlertCircle, Upload
} from 'lucide-react';

// Ganti URL ini dengan URL Web App dari Google Apps Script Anda
const GAS_URL = "https://script.google.com/macros/s/AKfycbz_URL_ANDA_DISINI/exec"; 

export default function App() {
  const [view, setView] = useState('home'); // home, user-login, admin-login, form, admin-dashboard
  const [deadline, setDeadline] = useState(null);
  
  useEffect(() => {
    const storedDeadline = localStorage.getItem('registrationDeadline');
    if (storedDeadline) {
      setDeadline(new Date(storedDeadline));
    } else {
      const defaultDeadline = new Date();
      defaultDeadline.setDate(defaultDeadline.getDate() + 30);
      setDeadline(defaultDeadline);
    }
  }, []);

  const isDeadlinePassed = deadline && new Date() > deadline;

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans">
      <nav className="bg-blue-700 text-white shadow-md">
        <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Users className="w-6 h-6" />
            <span className="text-xl font-bold">Portal Daftar Ulang</span>
          </div>
          <div className="space-x-4">
            <button onClick={() => setView('home')} className="hover:text-blue-200 transition">Beranda</button>
            <button onClick={() => setView('user-login')} className="hover:text-blue-200 transition">Siswa</button>
            <button onClick={() => setView('admin-login')} className="hover:text-blue-200 transition">Admin</button>
          </div>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto px-4 py-8">
        {view === 'home' && (
          <div className="text-center py-20 bg-white rounded-xl shadow-sm border border-slate-100">
            <h1 className="text-4xl font-extrabold text-blue-800 mb-4">Selamat Datang di Portal Terpadu</h1>
            <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
              Silakan login menggunakan akun siswa untuk memulai pengisian biodata atau login admin untuk memantau data.
            </p>
            {isDeadlinePassed ? (
              <div className="inline-flex items-center gap-2 px-6 py-4 bg-red-100 text-red-700 rounded-lg font-medium">
                <AlertCircle className="w-6 h-6" /> Deadline Telah Berakhir.
              </div>
            ) : (
              <button onClick={() => setView('user-login')} className="px-8 py-4 bg-blue-600 text-white rounded-full font-bold shadow-lg flex items-center gap-2 mx-auto">
                <CheckCircle className="w-6 h-6" /> Login & Mulai Daftar Ulang
              </button>
            )}
          </div>
        )}

        {view === 'user-login' && <LoginBox type="Siswa" onLogin={() => setView('form')} creds={{u:'siswa', p:'siswa123'}} />}
        {view === 'admin-login' && <LoginBox type="Admin" onLogin={() => setView('admin-dashboard')} creds={{u:'admin', p:'admin123'}} />}
        {view === 'form' && <RegistrationWizard gasUrl={GAS_URL} setView={setView} />}
        {view === 'admin-dashboard' && <AdminDashboard gasUrl={GAS_URL} deadline={deadline} setDeadline={setDeadline} setView={setView} />}
      </main>
    </div>
  );
}

function LoginBox({ type, onLogin, creds }) {
  const [u, setU] = useState('');
  const [p, setP] = useState('');
  const handle = (e) => {
    e.preventDefault();
    if (u === creds.u && p === creds.p) onLogin();
    else alert('Kredensial salah!');
  };
  return (
    <div className="max-w-md mx-auto bg-white p-8 rounded-xl shadow-md border border-slate-200">
      <h2 className="text-2xl font-bold mb-6 text-center text-slate-800">Login {type}</h2>
      <form onSubmit={handle} className="space-y-4">
        <input type="text" placeholder="Username" className="w-full border p-2 rounded" onChange={e => setU(e.target.value)} required />
        <input type="password" placeholder="Password" className="w-full border p-2 rounded" onChange={e => setP(e.target.value)} required />
        <button className="w-full py-2 bg-blue-600 text-white rounded font-medium">Masuk</button>
      </form>
    </div>
  );
}

// Komponen Dashboard & Wizard tetap mengikuti spesifikasi awal dengan interval 30 detik...
// (Silakan gunakan struktur form 4 halaman dari versi sebelumnya)