import React, { useState, useEffect } from 'react';
import { MapPin, CheckCircle, XCircle, AlertTriangle, School, Navigation, Clock, Loader2 } from 'lucide-react';

export default function App() {
  // GANTIKAN URL INI dengan URL Web App dari Google Apps Script anda
  const WEB_APP_URL = "https://script.google.com/macros/s/AKfycbxbWzoppgxYxstsBUkmPAfc1J0G31bUwncQtt_JvIzgPExjFm19qlisXlLbCmVCIvXt/exec";

  const [schoolLocation, setSchoolLocation] = useState(null);
  const [allowedRadius] = useState(100); 
  const [attendanceStatus, setAttendanceStatus] = useState('idle'); 
  const [message, setMessage] = useState('');
  const [staffList] = useState(['Cg Vironica', 'Ahmad Abu', 'Siti Aminah', 'Muthu Kumar', 'Tan Ah Chong']);
  const [selectedStaff, setSelectedStaff] = useState('');
  const [records, setRecords] = useState([]);
  const [isSaving, setIsSaving] = useState(false);

  // Ambil lokasi sekolah dari localStorage jika ada
  useEffect(() => {
    const savedLoc = localStorage.getItem('school_loc');
    if (savedLoc) setSchoolLocation(JSON.parse(savedLoc));
  }, []);

  const getDistanceInMeters = (lat1, lon1, lat2, lon2) => {
    const R = 6371e3;
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
  };

  const handleSetSchoolLocation = () => {
    navigator.geolocation.getCurrentPosition((pos) => {
      const loc = { lat: pos.coords.latitude, lng: pos.coords.longitude };
      setSchoolLocation(loc);
      localStorage.setItem('school_loc', JSON.stringify(loc));
      alert("Lokasi sekolah telah dikunci!");
    }, (err) => alert(err.message), { enableHighAccuracy: true });
  };

  const submitToBackend = async (data) => {
    setIsSaving(true);
    try {
      await fetch(WEB_APP_URL, {
        method: 'POST',
        mode: 'no-cors', // Penting untuk Google Apps Script
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      setRecords(prev => [data, ...prev]);
    } catch (e) {
      console.error("Gagal simpan ke Cloud:", e);
    } finally {
      setIsSaving(false);
    }
  };

  const handleCheckIn = () => {
    if (!schoolLocation || !selectedStaff) return;

    setAttendanceStatus('loading');
    setMessage('Menjejak koordinat GPS...');

    navigator.geolocation.getCurrentPosition((pos) => {
      const dist = getDistanceInMeters(schoolLocation.lat, schoolLocation.lng, pos.coords.latitude, pos.coords.longitude);
      const isPresent = dist <= allowedRadius;

      const newRecord = {
        name: selectedStaff,
        time: new Date().toLocaleTimeString(),
        distance: dist.toFixed(1),
        status: isPresent ? 'Hadir' : 'Luar Kawasan',
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      };

      if (isPresent) {
        setAttendanceStatus('success');
        setMessage(`Berjaya! Anda berada di sekolah.`);
      } else {
        setAttendanceStatus('failed');
        setMessage(`Gagal. Jarak anda ${dist.toFixed(0)}m dari sekolah.`);
      }

      submitToBackend(newRecord);

    }, (err) => {
      setAttendanceStatus('error');
      setMessage(err.message);
    }, { enableHighAccuracy: true });
  };

  return (
    <div className="min-h-screen bg-slate-950 text-blue-100 font-sans pb-12 selection:bg-blue-500/30">
      {/* HEADER NEON */}
      <header className="bg-slate-900/80 border-b border-blue-500/30 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-md mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="bg-blue-600 p-2 rounded-lg shadow-[0_0_15px_rgba(37,99,235,0.6)]">
              <MapPin className="text-white h-5 w-5" />
            </div>
            <h1 className="text-xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">GEO-HADIR</h1>
          </div>
          <div className="animate-pulse flex items-center space-x-1">
            <div className="h-2 w-2 bg-blue-500 rounded-full shadow-[0_0_8px_#3b82f6]"></div>
            <span className="text-[10px] font-bold text-blue-400 tracking-widest uppercase">Live Cloud</span>
          </div>
        </div>
      </header>

      <main className="max-w-md mx-auto px-6 mt-8 space-y-6">
        
        {/* ADMIN CONFIG */}
        <div className="bg-slate-900/50 rounded-2xl border border-slate-800 p-5 shadow-xl">
          <div className="flex items-center space-x-2 mb-4">
            <School className="h-4 w-4 text-blue-400" />
            <h2 className="font-bold text-sm text-slate-400 uppercase tracking-widest">Konfigurasi Sekolah</h2>
          </div>
          <button onClick={handleSetSchoolLocation} className="w-full bg-slate-800 hover:bg-slate-700 border border-blue-500/20 text-blue-300 py-3 rounded-xl transition-all text-sm font-medium shadow-inner">
            Kunci Koordinat Sekolah
          </button>
          {schoolLocation && (
            <div className="mt-3 flex justify-between text-[10px] font-mono text-blue-500/60 bg-blue-500/5 p-2 rounded-lg border border-blue-500/10">
              <span>LAT: {schoolLocation.lat.toFixed(4)}</span>
              <span>LNG: {schoolLocation.lng.toFixed(4)}</span>
            </div>
          )}
        </div>

        {/* ATTENDANCE CARD */}
        <div className="bg-slate-900 rounded-3xl border border-blue-500/30 p-8 shadow-[0_0_40px_rgba(30,58,138,0.3)] relative overflow-hidden">
          <div className="absolute top-0 right-0 p-4 opacity-10">
            <Navigation size={100} className="text-blue-400" />
          </div>

          <div className="relative z-10 space-y-6 text-center">
            <div className="text-left">
              <label className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-2 block">Pilih Nama Cikgu</label>
              <select
                value={selectedStaff}
                onChange={(e) => setSelectedStaff(e.target.value)}
                className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-4 focus:ring-2 focus:ring-blue-500 text-white font-medium outline-none appearance-none shadow-lg transition-all"
              >
                <option value="">-- Sila Pilih --</option>
                {staffList.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </div>

            {attendanceStatus !== 'idle' && (
              <div className={`p-4 rounded-2xl border transition-all animate-in fade-in zoom-in duration-300 ${
                attendanceStatus === 'success' ? 'bg-blue-500/10 border-blue-500/40 text-blue-300' : 'bg-red-500/10 border-red-500/40 text-red-300'
              }`}>
                <p className="text-sm font-bold tracking-wide">{message}</p>
              </div>
            )}

            <button
              onClick={handleCheckIn}
              disabled={attendanceStatus === 'loading' || isSaving}
              className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-800 text-white font-black py-5 rounded-2xl shadow-[0_0_25px_rgba(37,99,235,0.4)] transition-all active:scale-95 flex items-center justify-center space-x-3 text-lg tracking-wider"
            >
              {(attendanceStatus === 'loading' || isSaving) ? <Loader2 className="animate-spin" /> : <Navigation className="fill-current" />}
              <span>{isSaving ? "MENYIMPAN..." : "CHECK-IN SEKARANG"}</span>
            </button>
          </div>
        </div>

        {/* LOG HISTORY */}
        {records.length > 0 && (
          <div className="space-y-4">
            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-[0.2em] px-2 flex items-center gap-2">
              <Clock size={14} /> Log Kehadiran Awan
            </h3>
            <div className="space-y-3">
              {records.map((r, i) => (
                <div key={i} className="bg-slate-900/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between group hover:border-blue-500/30 transition-colors">
                  <div className="flex items-center space-x-4">
                    <div className={`h-10 w-10 rounded-full flex items-center justify-center ${r.status === 'Hadir' ? 'bg-blue-500/20 text-blue-400' : 'bg-red-500/20 text-red-400'}`}>
                      {r.status === 'Hadir' ? <CheckCircle size={20} /> : <XCircle size={20} />}
                    </div>
                    <div>
                      <p className="font-bold text-white tracking-tight">{r.name}</p>
                      <p className="text-[10px] font-medium text-slate-500">{r.status} • {r.distance}m</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <span className="text-xs font-mono text-blue-500 bg-blue-500/5 px-2 py-1 rounded">{r.time}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </main>
    </div>
  );
}