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 */}
{[1,2,3,4,5,6,7].map(r => (
))}
{/* Center: Prospects */}
{/* Right: Draft Board */}
)}
Rounds
Available Prospects
-
{prospects.map(p => (
- setDetailDialogPlayer(p)} className="cursor-pointer underline">{p.name} ({p.position}, {p.school}) {paused && } ))}
Draft Board
-
{drafted.map(d=>
- Pick {d.pick}: {d.team} selected {d.name} )}