'use client'; import React, { useState, useRef, useEffect } from 'react'; import { Camera, CheckCircle2, FileText, ShieldCheck, AlertOctagon, X, RotateCw, Video, Image as ImageIcon, Sparkles, AlertTriangle, Lock } from 'lucide-react'; import { ALL_18_POLITICAL_PARTIES, getStatutoryRegisteredVotersForPu } from '@/lib/electoralData'; interface Props { puCode: string; registeredVoters?: number; onSubmit: (data: any) => Promise; onNext: () => void; } export const Step6ResultsData: React.FC = ({ puCode, registeredVoters, onSubmit, onNext }) => { const registeredTotal = registeredVoters || getStatutoryRegisteredVotersForPu(puCode); // Initialize votes state for all 18 official INEC parties const [votes, setVotes] = useState>(() => { const initial: Record = {}; ALL_18_POLITICAL_PARTIES.forEach((p) => { if (p.code === 'ADC') initial[p.code] = 145; else if (p.code === 'APC') initial[p.code] = 68; else if (p.code === 'PDP') initial[p.code] = 32; else if (p.code === 'LP') initial[p.code] = 14; else if (p.code === 'NNPP') initial[p.code] = 6; else if (p.code === 'SDP') initial[p.code] = 2; else initial[p.code] = 0; }); return initial; }); const [physicalEc8aPhoto, setPhysicalEc8aPhoto] = useState( '/sample_ec8a_snap.jpg' ); // Legibility Quality Status ('READABLE' | 'UNREADABLE' | 'SCANNING' | null) const [legibilityStatus, setLegibilityStatus] = useState<'READABLE' | 'UNREADABLE' | 'SCANNING'>('READABLE'); const [legibilityScore, setLegibilityScore] = useState(98.6); const [isCameraActive, setIsCameraActive] = useState(false); const [cameraError, setCameraError] = useState(null); const [submitting, setSubmitting] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const videoRef = useRef(null); const canvasRef = useRef(null); const fileInputRef = useRef(null); const streamRef = useRef(null); const totalVotesCast = Object.values(votes).reduce((a, b) => a + b, 0); const handleVoteChange = (partyCode: string, val: number) => { setVotes((prev) => ({ ...prev, [partyCode]: Math.max(0, val), })); }; // Start Live Device Camera Stream const startCamera = async () => { setCameraError(null); setIsCameraActive(true); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1920 }, height: { ideal: 1080 } }, audio: false, }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.play(); } } catch (err: any) { console.warn('Camera stream error:', err); setCameraError('Direct camera stream unavailable. Please use local gallery file uploader.'); } }; const stopCamera = () => { if (streamRef.current) { streamRef.current.getTracks().forEach((t) => t.stop()); streamRef.current = null; } setIsCameraActive(false); }; // Run AI Quality & Legibility Scan const runLegibilityScan = (imageSrc: string) => { setPhysicalEc8aPhoto(imageSrc); setLegibilityStatus('SCANNING'); setTimeout(() => { // Simulate clarity test (98.6% readable) setLegibilityStatus('READABLE'); setLegibilityScore(98.6); }, 1500); }; // Capture Photo from Video Canvas const captureSnapshot = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current; const canvas = canvasRef.current; canvas.width = video.videoWidth || 1280; canvas.height = video.videoHeight || 720; const ctx = canvas.getContext('2d'); if (ctx) { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const dataUrl = canvas.toDataURL('image/jpeg', 0.95); stopCamera(); runLegibilityScan(dataUrl); } } else { stopCamera(); runLegibilityScan(`/sample_ec8a_snap.jpg&t=${Date.now()}`); } }; const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { if (event.target?.result) { stopCamera(); runLegibilityScan(event.target.result as string); } }; reader.readAsDataURL(file); } }; // Force Unreadable Test Simulation (For user testing) const simulateUnreadablePhoto = () => { setLegibilityStatus('UNREADABLE'); setLegibilityScore(32.4); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (legibilityStatus === 'UNREADABLE') { alert('Form EC8A photo is unreadable/blurry! Please retake a clear photo under proper lighting before submitting.'); return; } setSubmitting(true); const payload = { pu_code: puCode, registered_voters: registeredTotal, party_votes: votes, votes, accredited_voters: totalVotesCast, total_valid_votes: totalVotesCast, total_votes_cast: totalVotesCast, rejected_ballots: 0, form_ec8a_url: physicalEc8aPhoto || '/sample_ec8a_snap.jpg', physical_ec8a_photo: physicalEc8aPhoto || '/sample_ec8a_snap.jpg', legibility_status: legibilityStatus, legibility_score: legibilityScore, timestamp: new Date().toISOString(), }; const success = await onSubmit(payload); setSubmitting(false); if (success) { setIsSubmitted(true); onNext(); } }; useEffect(() => { return () => { stopCamera(); }; }, []); return (