const VotingPage = () => {
    const [video, setVideo] = useState(null);
    const [reason, setReason] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');
    const auth = useAuth();

    const fetchNextVideo = async () => {
        setError('');
        setMessage('');
        setVideo(null);
        try {
            const data = await apiRequest('/videos/vote-next', { token: auth.token });
            setVideo(data);
        } catch (err) {
            setError(err.message);
        }
    };

    const submitVote = async (decision) => {
        if (!video) return;
        setError('');
        setMessage('');
        try {
            const body = { decision, reason, recommended_game: '' }; // Add recommended_game if needed
            await apiRequest(`/videos/${video.id}/vote`, {
                method: 'POST',
                body,
                token: auth.token
            });
            setMessage(`Vote '${decision}' submitted successfully!`);
            setVideo(null);
            setReason('');
        } catch (err) {
            setError(err.message);
        }
    };

    return (
        <div className="max-w-4xl mx-auto">
            <Card>
                <CardHeader>
                    <CardTitle>Vote on a Video</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                    {!video && (
                        <div className="text-center">
                            <Button onClick={fetchNextVideo}>Get Next Video to Vote On</Button>
                        </div>
                    )}
                    
                    {error && <p className="text-center text-red-500">{error}</p>}
                    {message && <p className="text-center text-green-500">{message}</p>}

                    {video && (
                        <div className="space-y-4">
                            <div>
                                <video 
                                    key={video.id}
                                    className="w-full rounded-lg bg-black" 
                                    controls 
                                    src={`${API_URL}/videos/${video.id}/stream?token=${auth.token}`}
                                    // The token in query param is a simple way for this demo.
                                    // In a real app, you might handle auth differently for media.
                                >
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <div className="text-sm text-gray-600">
                                <p><strong>Person:</strong> {video.person}</p>
                                <p><strong>Game:</strong> {video.game || 'N/A'}</p>
                            </div>
                            <div className="space-y-2">
                                <label htmlFor="reason">Reason (Optional)</label>
                                <Textarea id="reason" value={reason} onChange={(e) => setReason(e.target.value)} />
                            </div>
                            <div className="flex space-x-4">
                                <Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => submitVote('approve')}>Approve</Button>
                                <Button className="w-full bg-red-600 hover:bg-red-700" onClick={() => submitVote('reject')}>Reject</Button>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
};