import { useState, useEffect } from 'react' import { useRouter } from 'next/router' import { Participant } from '@/lib/database' export default function Admin() { const router = useRouter() const [participants, setParticipants] = useState([]) const [selectedAccessCode, setSelectedAccessCode] = useState('') const [loading, setLoading] = useState(false) const [isAuthenticated, setIsAuthenticated] = useState(false) const [pin, setPin] = useState('') const [pinError, setPinError] = useState('') const [sessionDuration, setSessionDuration] = useState(30) const [maxPhotos, setMaxPhotos] = useState(2) const [settingsLoading, setSettingsLoading] = useState(false) useEffect(() => { if (isAuthenticated) { fetchParticipants() fetchSettings() // Auto-refresh every 30 seconds const interval = setInterval(() => { fetchParticipants() }, 30000) return () => clearInterval(interval) } }, [isAuthenticated]) const handlePinSubmit = async (e: React.FormEvent) => { e.preventDefault() setPinError('') if (pin.length !== 6) { setPinError('PIN must be 6 digits') return } try { const response = await fetch('/api/admin/auth', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ pin }) }) if (response.ok) { setIsAuthenticated(true) setPin('') } else { setPinError('Invalid PIN') } } catch (error) { setPinError('Authentication error') } } const fetchParticipants = async () => { try { const response = await fetch('/api/participants') const data = await response.json() setParticipants(data) } catch (error) { console.error('Error fetching participants:', error) } } const fetchSettings = async () => { try { const response = await fetch('/api/admin/settings') if (response.ok) { const data = await response.json() setSessionDuration(data.sessionDuration || 30) setMaxPhotos(data.maxPhotos || 2) } } catch (error) { console.error('Error fetching settings:', error) } } const updateSettings = async () => { if (sessionDuration < 10 || sessionDuration > 300) { alert('Session duration must be between 10 and 300 seconds') return } if (maxPhotos < 1 || maxPhotos > 10) { alert('Max photos must be between 1 and 10') return } setSettingsLoading(true) try { const response = await fetch('/api/admin/settings', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ sessionDuration, maxPhotos }) }) if (response.ok) { alert('Settings updated successfully!') } else { alert('Failed to update settings') } } catch (error) { console.error('Error updating settings:', error) alert('Error updating settings') } finally { setSettingsLoading(false) } } const sendTrigger = async (action: string = 'capture') => { if (!selectedAccessCode) { alert('Please select a participant') return } setLoading(true) try { const response = await fetch('/api/trigger', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ accessCode: selectedAccessCode, action, data: { timestamp: new Date().toISOString() } }) }) if (response.ok) { alert(`Trigger "${action}" sent successfully!`) } else { alert('Failed to send trigger') } } catch (error) { console.error('Error sending trigger:', error) alert('Error sending trigger') } finally { setLoading(false) } } // Show PIN authentication form if not authenticated if (!isAuthenticated) { return (
🔒

Admin Access Required

Enter your 6-digit PIN to access the admin panel

setPin(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="Enter 6-digit PIN" maxLength={6} style={{ width: '100%', padding: '15px', border: pinError ? '2px solid #dc3545' : '1px solid #ddd', borderRadius: '4px', fontSize: '18px', textAlign: 'center', letterSpacing: '8px', fontFamily: 'monospace', boxSizing: 'border-box' }} autoFocus />
{pinError && (
{pinError}
)}
PIN is configured in server environment variables
) } return (

🎛ī¸ Photobooth Admin Panel

📊 Registered Participants ({participants.length})

{participants.length === 0 ? (
📋

No participants registered yet

Click "Register New Participant" to add the first participant

) : ( {participants.map((participant) => ( ))}
Select Name Phone Access Code Registration Time Status Actions
setSelectedAccessCode(e.target.value)} /> {participant.name} {participant.phone} {participant.accessCode} {new Date(participant.createdAt).toLocaleString('id-ID', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })} {participant.isActive ? '✅ Active' : '❌ Inactive'}
)}
{/* Session Settings */}

⚙ī¸ Session Settings

setSessionDuration(Number(e.target.value))} style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px', boxSizing: 'border-box' }} /> Range: 10-300 seconds
setMaxPhotos(Number(e.target.value))} style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '16px', boxSizing: 'border-box' }} /> Range: 1-10 photos
Current: {sessionDuration}s duration, {maxPhotos} photos max
⚠ī¸ Note: Settings will apply to all new photo sessions. Active sessions will continue with their original settings.

🎮 Trigger Controls

{!selectedAccessCode ? (

Please select a participant from the table above to send triggers

) : ( <>
Selected Participant: {participants.find(p => p.accessCode === selectedAccessCode)?.name} ({selectedAccessCode})
)}

ℹī¸ Instructions

  • Use "Register New Participant" to add new participants
  • Select a participant from the table to send triggers
  • Click "View QR" to see participant's QR code
  • Click "Photo Session" to open trigger page
  • Use trigger controls to send commands to photobooth controller
  • Data refreshes automatically every 30 seconds
) }