import React, { useState, useEffect, useMemo } from 'react'; import { supabase } from "../../lib/supabaseClient"; import useToastStore from "../../store/toastStore"; import { Bug, Search, Filter, Clock, User, ChevronRight, ExternalLink, AlertCircle, CheckCircle2, Loader2, Eye, X, Camera, BrainCircuit, ShieldAlert, Trash2, Terminal } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; const MasterBugReports = () => { const { addToast } = useToastStore(); const [bugs, setBugs] = useState([]); const [loading, setLoading] = useState(true); const [selectedBug, setSelectedBug] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [statusFilter, setStatusFilter] = useState('All'); const [severityFilter, setSeverityFilter] = useState('All'); const fetchBugs = async () => { setLoading(true); try { const { data, error: sbError } = await supabase .from('bug_reports') .select('*') .order('created_at', { ascending: false }); if (sbError) throw sbError; setBugs(data || []); } catch (err) { console.error("Fetch bugs error:", err); } finally { setLoading(false); } }; useEffect(() => { fetchBugs(); // Real-time subscription const channel = supabase .channel('bug_reports_realtime') .on('postgres_changes', { event: '*', schema: 'public', table: 'bug_reports' }, (payload) => { if (payload.eventType === 'INSERT') { setBugs(prev => [payload.new, ...prev]); addToast("New System Bug Logged!", "success"); } else if (payload.eventType === 'UPDATE') { setBugs(prev => prev.map(b => b.id === payload.new.id ? payload.new : b)); } else if (payload.eventType === 'DELETE') { setBugs(prev => prev.filter(b => b.id === payload.old.id)); } }) .subscribe(); return () => supabase.removeChannel(channel); }, []); const updateBugStatus = async (id, newStatus) => { try { const { error: upError } = await supabase .from('bug_reports') .update({ status: newStatus }) .eq('id', id); if (upError) throw upError; addToast(`Issue status: ${newStatus.toUpperCase()}`, "success"); } catch (err) { addToast("Sync failed: " + err.message, "error"); } }; const deleteBug = async (id) => { if (!window.confirm("Permanently wipe this bug report from the system?")) return; try { const { error: delError } = await supabase .from('bug_reports') .delete() .eq('id', id); if (delError) throw delError; addToast("Record purged.", "success"); if (selectedBug?.id === id) setSelectedBug(null); } catch (err) { addToast("Purge failed: " + err.message, "error"); } }; const filteredBugs = useMemo(() => { return bugs.filter(bug => { const matchesSearch = (bug.bug_title || '').toLowerCase().includes((searchQuery || '').toLowerCase()) || (bug.description || '').toLowerCase().includes((searchQuery || '').toLowerCase()); const matchesStatus = statusFilter === 'All' || (bug.status || '').toLowerCase() === (statusFilter || '').toLowerCase(); const matchesSeverity = severityFilter === 'All' || bug.severity === severityFilter; return matchesSearch && matchesStatus && matchesSeverity; }); }, [bugs, searchQuery, statusFilter, severityFilter]); const getSeverityStyle = (s) => { switch (s) { case 'Critical': return 'bg-red-500/10 text-red-400 border-red-500/20'; case 'High': return 'bg-orange-500/10 text-orange-400 border-orange-500/20'; case 'Medium': return 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20'; default: return 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20'; } }; const getStatusStyle = (s) => { switch (s?.toLowerCase()) { case 'resolved': return 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'; case 'investigating': return 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/30'; case 'fixed': return 'bg-blue-500/20 text-blue-400 border border-blue-500/30'; default: return 'bg-white/5 text-slate-400 border border-white/10'; } }; return (
{/* Header */}
Platform Integrity

Bug Radar

Superuser override: {filteredBugs.length} system vulnerabilities tracked.

{/* Filters */}
setSearchQuery(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm font-bold focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 transition-all text-white placeholder:text-slate-600" />
{/* Data Grid */}
{loading ? (
) : filteredBugs.length === 0 ? (

Perimeter Clear: No Bugs Found

) : (
{filteredBugs.map((bug) => ( ))}
Priority Description Module Status Log Date Terminal
{bug.severity}
{bug.bug_title} "{bug.description}"
{bug.category} {new Date(bug.created_at).toLocaleString()}
)}
{/* Deep-Dive Modal (Master Dark Theme) */} {selectedBug && (
setSelectedBug(null)} className="fixed inset-0 bg-black/80 backdrop-blur-md" /> {/* Modal Header */}
{selectedBug.severity} Threat TRACE_ID: {selectedBug.id.slice(0, 12)}

{selectedBug.bug_title}

{/* Modal Content */}
{/* Primary Info */}

Vulnerability Intel

Observation

{selectedBug.description}

{selectedBug.steps_to_reproduce && (

Replication Path

{selectedBug.steps_to_reproduce}
)}

Expected Matrix

{selectedBug.expected_result || 'NO_DATA'}

Observed Output

{selectedBug.actual_result || 'SYSTEM_FAILURE'}

{/* AI Diagnostics (Dark Themed) */}

Neural Diagnostic Engine

Root Cause Synthesis

"{selectedBug.diagnostic_data?.ai_probable_cause || 'AI Engine re-scanning metadata...'}"

{selectedBug.diagnostic_data?.console_errors?.length || 0} Error Flags
{selectedBug.diagnostic_data?.url || '/root'}
{/* Secondary Info */}

Visual Capture

{selectedBug.diagnostic_data?.screenshot_base64 ? (
Vulnerability Capture
) : (

No Visual Data

)}

Telemetry Dump

OS/Engine: {selectedBug.diagnostic_data?.browser || 'UNKNOWN'}
Resolution: {selectedBug.diagnostic_data?.screen || 'HID_SPEC'}
{selectedBug.contact_permission && (
Follow-up Contact Authorized by User
)}
)}