import React, { useEffect, useState } from 'react';
import { Html5QrcodeScanner } from 'html5-qrcode';
import { supabase } from '../services/supabaseClient';
import { useAuth } from '../context/AuthContext';
import { DataSiswa } from '../types';

export const QRScanner: React.FC = () => {
  const { user } = useAuth();
  const [scanResult, setScanResult] = useState<string | null>(null);
  const [studentInfo, setStudentInfo] = useState<DataSiswa | null>(null);
  const [status, setStatus] = useState('Datang');
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Only run on client side and if container exists
    const scannerId = "reader";
    if (!document.getElementById(scannerId)) return;

    const scanner = new Html5QrcodeScanner(
      scannerId,
      { fps: 10, qrbox: { width: 250, height: 250 } },
      false
    );

    scanner.render(onScanSuccess, onScanFailure);

    return () => {
      scanner.clear().catch(error => {
        console.error("Failed to clear html5-qrcode scanner. ", error);
      });
    };
  }, [status]); // Re-render if status changes to ensure logic is fresh if needed

  const onScanSuccess = async (decodedText: string) => {
    if (decodedText === scanResult) return; // Prevent duplicates
    setScanResult(decodedText);
    setMessage('Memproses...');
    
    // 1. Cari siswa berdasarkan NIS di tabel 'data_siswa'
    const { data, error } = await supabase
      .from('data_siswa')
      .select('*')
      .eq('nis', decodedText)
      .single();

    if (data) {
      setStudentInfo(data);
      await logAttendance(data);
    } else {
      setMessage('Siswa tidak ditemukan!');
    }
  };

  const onScanFailure = (error: any) => {
    // console.warn(`Code scan error = ${error}`);
  };

  const logAttendance = async (student: DataSiswa) => {
    try {
      // 2. Insert ke 'data_presensi_qr'
      const { error } = await supabase.from('data_presensi_qr').insert([{
        nis: student.nis,
        nama: student.nama, // Denormalisasi sesuai request spreadsheet
        kelas: student.kelas,
        jenis_kegiatan: status,
        guru_input: user?.nama,
        status_wa: 'Pending'
      }]);

      if (error) throw error;
      setMessage(`Berhasil: ${student.nama} - ${status}`);
      
      // Reset after 3 seconds
      setTimeout(() => {
        setScanResult(null);
        setStudentInfo(null);
        setMessage('');
      }, 3000);

    } catch (err: any) {
      setMessage('Gagal simpan: ' + err.message);
    }
  };

  return (
    <div className="space-y-6">
       <div className="flex justify-between items-center">
        <h1 className="text-2xl font-oswald text-white">SCANNER PRESENSI</h1>
      </div>

      <div className="bg-card p-6 rounded-xl border border-gray-800">
         <div className="mb-4">
            <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Jenis Presensi</label>
            <div className="flex gap-2 flex-wrap">
              <button 
                onClick={() => setStatus('Datang')}
                className={`flex-1 py-2 px-4 rounded font-bold transition-colors ${status === 'Datang' ? 'bg-green-600 text-white' : 'bg-slate-800 text-slate-400'}`}
              >
                Datang
              </button>
              <button 
                onClick={() => setStatus('Pulang')}
                className={`flex-1 py-2 px-4 rounded font-bold transition-colors ${status === 'Pulang' ? 'bg-orange-600 text-white' : 'bg-slate-800 text-slate-400'}`}
              >
                Pulang
              </button>
               <button 
                onClick={() => setStatus('Kegiatan Sekolah')}
                className={`flex-1 py-2 px-4 rounded font-bold transition-colors ${status === 'Kegiatan Sekolah' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400'}`}
              >
                Kegiatan
              </button>
            </div>
         </div>

         <div id="reader" className="overflow-hidden rounded-lg border-2 border-slate-700 w-full"></div>

         {studentInfo && (
           <div className="mt-4 p-4 bg-green-500/10 border border-green-500 rounded-lg text-center">
             <p className="text-green-500 font-bold text-lg">{studentInfo.nama}</p>
             <p className="text-slate-300">{studentInfo.kelas} | {studentInfo.nis}</p>
           </div>
         )}

         {message && (
           <div className={`mt-4 p-3 rounded text-center text-sm font-bold ${message.includes('Gagal') || message.includes('tidak') ? 'text-red-500 bg-red-500/10' : 'text-accent bg-yellow-500/10'}`}>
             {message}
           </div>
         )}
      </div>
    </div>
  );
};