im going to give you some react screen code from a project im working on, i want you to go through the code and refactor following, dry, kiss and other code best practices. think about the folder structure for all the components, helper files/utils, etc. Really do your best and go out of the box if needed.

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { PlusCircle, LogIn } from "lucide-react"
import Link from 'next/link'

export default function Component() {
const [username, setUsername] = useState("Player") // In a real app, this would come from authentication
const [gameCode, setGameCode] = useState("")

return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card className="w-full max-w-lg">
<CardHeader>
<CardTitle className="text-3xl font-bold text-center">Welcome to GameHub</CardTitle>
<CardDescription className="text-xl text-center">Hello, {username}!</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Link href="/create-game" passHref>
<Button className="w-full h-20 text-lg" variant="default">
<PlusCircle className="mr-2 h-6 w-6" />
Create Game
</Button>
</Link>
<Button className="w-full h-20 text-lg" variant="secondary" onClick={() => alert('Joining game...')}>
<LogIn className="mr-2 h-6 w-6" />
Join Game
</Button>
</div>
<div className="space-y-2">
<Input
type="text"
placeholder="Enter game code"
value={gameCode}
onChange={(e) => setGameCode(e.target.value)}
/>
<Button className="w-full" variant="outline" onClick={() => alert(Joining game with code: ${gameCode})}>
Join with Code
</Button>
</div>
</CardContent>
</Card>
</div>
)
}

import React, { useState } from 'react';
import { X, Check } from 'lucide-react';

export default function CreateGame() {
const [gameName, setGameName] = useState('');
const [numTeams, setNumTeams] = useState(2);
const [numRounds, setNumRounds] = useState(5);

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Handle form submission
console.log({ gameName, numTeams, numRounds });
};

return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
<h1 className="text-3xl font-bold mb-6 text-center text-gray-800">Create Game</h1>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="gameName" className="block text-sm font-medium text-gray-700 mb-1">
Game Name
</label>
<input
type="text"
id="gameName"
value={gameName}
onChange={(e) => setGameName(e.target.value)}
placeholder="Enter your game session name"
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
required
/>
</div>
<div>
<label htmlFor="numTeams" className="block text-sm font-medium text-gray-700 mb-1">
Number of Teams
</label>
<select
id="numTeams"
value={numTeams}
onChange={(e) => setNumTeams(Number(e.target.value))}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
{[...Array(9)].map((_, i) => (
<option key={i} value={i + 2}>
{i + 2}
</option>
))}
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Number of Rounds</label>
<div className="flex justify-between">
{[5, 10, 15].map((rounds) => (
<button
key={rounds}
type="button"
onClick={() => setNumRounds(rounds)}
className={px-4 py-2 rounded-full ${<br/> numRounds === rounds<br/> ? 'bg-blue-500 text-white'<br/> : 'bg-gray-200 text-gray-800 hover:bg-gray-300'<br/> } transition-colors duration-200}
>
{rounds}
</button>
))}
</div>
</div>
<div className="flex justify-between pt-4">
<button
type="button"
onClick={() => {/* Handle cancel action */}}
className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 flex items-center"
>
<X className="w-5 h-5 mr-2" />
Cancel
</button>
<button
type="submit"
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center"
>
<Check className="w-5 h-5 mr-2" />
Create Game
</button>
</div>
</form>
</div>
</div>
);
}

import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Users, LogIn } from "lucide-react"

// Mock data for available public games
const publicGames = [
  { id: 1, name: "Trivia Night", players: 3, maxPlayers: 5 },
  { id: 2, name: "Word Guessing", players: 2, maxPlayers: 4 },
  { id: 3, name: "Quiz Masters", players: 4, maxPlayers: 6 },
  { id: 4, name: "Puzzle Challenge", players: 1, maxPlayers: 3 },
  { id: 5, name: "Team Tactics", players: 6, maxPlayers: 8 },
]

export default function JoinGame() {
  const [gameCode, setGameCode] = useState('')
  const [codeError, setCodeError] = useState('')

  const handleJoinPrivateGame = () => {
    if (gameCode.length !== 6) {
      setCodeError('Game code must be 6 characters long')
    } else {
      setCodeError('')
      console.log(`Joining private game with code: ${gameCode}`)
      // Here you would typically make an API call to join the game
    }
  }

  const handleJoinPublicGame = (gameId: number) => {
    console.log(`Joining public game with ID: ${gameId}`)
    // Here you would typically make an API call to join the game
  }

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-lg">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Join Game</CardTitle>
          <CardDescription className="text-center">Enter a game code or choose from available games</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <label htmlFor="gameCode" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
              Game Code
            </label>
            <div className="flex space-x-2">
              <Input
                id="gameCode"
                type="text"
                placeholder="Enter your game code"
                value={gameCode}
                onChange={(e) => setGameCode(e.target.value)}
                className="flex-grow"
              />
              <Button onClick={handleJoinPrivateGame}>
                <LogIn className="mr-2 h-4 w-4" />
                Join
              </Button>
            </div>
            {codeError && <p className="text-sm text-red-500">{codeError}</p>}
          </div>
          
          <div className="space-y-2">
            <h3 className="text-lg font-semibold">Available Public Games</h3>
            <ScrollArea className="h-[200px] rounded-md border p-4">
              {publicGames.map((game) => (
                <div key={game.id} className="flex items-center justify-between py-2">
                  <div>
                    <h4 className="font-medium">{game.name}</h4>
                    <p className="text-sm text-muted-foreground">
                      <Users className="inline mr-1 h-4 w-4" />
                      {game.players}/{game.maxPlayers} Players
                    </p>
                  </div>
                  <Button variant="outline" onClick={() => handleJoinPublicGame(game.id)}>
                    Join
                  </Button>
                </div>
              ))}
            </ScrollArea>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, UserPlus, Link, Play, Settings, UserMinus } from 'lucide-react'

// Mock data for game and teams
const gameData = {
  name: "Trivia Night",
  host: "Alice",
  maxPlayers: 12,
  currentPlayers: 8,
}

const teamsData = [
  { id: 1, name: "Team Alpha", members: ["Alice", "Bob", "Charlie"] },
  { id: 2, name: "Team Beta", members: ["David", "Eve"] },
  { id: 3, name: "Team Gamma", members: ["Frank", "Grace", "Henry"] },
]

export default function LobbyScreen() {
  const [teams, setTeams] = useState(teamsData)

  const handleRemovePlayer = (teamId: number, playerName: string) => {
    setTeams(teams.map(team => {
      if (team.id === teamId) {
        return { ...team, members: team.members.filter(member => member !== playerName) }
      }
      return team
    }))
  }

  return (
    <div className="min-h-screen bg-background p-4 md:p-8">
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">{gameData.name}</CardTitle>
          <CardDescription className="text-center">
            Hosted by {gameData.host} | {gameData.currentPlayers}/{gameData.maxPlayers} Players
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <Tabs defaultValue="teams" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="teams">Teams Overview</TabsTrigger>
              <TabsTrigger value="controls">Game Controls</TabsTrigger>
            </TabsList>
            <TabsContent value="teams">
              <ScrollArea className="h-[400px] w-full rounded-md border p-4">
                {teams.map((team) => (
                  <Card key={team.id} className="mb-4">
                    <CardHeader>
                      <CardTitle className="text-xl">{team.name}</CardTitle>
                      <CardDescription>{team.members.length} members</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="list-disc pl-5">
                        {team.members.map((member) => (
                          <li key={member} className="flex justify-between items-center">
                            {member}
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemovePlayer(team.id, member)}
                            >
                              <UserMinus className="h-4 w-4" />
                            </Button>
                          </li>
                        ))}
                      </ul>
                    </CardContent>
                  </Card>
                ))}
              </ScrollArea>
            </TabsContent>
            <TabsContent value="controls">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Button className="w-full" onClick={() => alert('Team Setup')}>
                  <Users className="mr-2 h-4 w-4" />
                  Team Setup
                </Button>
                <Button className="w-full" onClick={() => alert('Invite Players')}>
                  <UserPlus className="mr-2 h-4 w-4" />
                  Invite Players
                </Button>
                <Button className="w-full" onClick={() => alert('Start Game')}>
                  <Play className="mr-2 h-4 w-4" />
                  Start Game
                </Button>
                <Button className="w-full" onClick={() => alert('Modify Game Settings')}>
                  <Settings className="mr-2 h-4 w-4" />
                  Modify Game Settings
                </Button>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}

import React, { useState, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Info, ArrowRight } from 'lucide-react'

// Mock data for the challenge
const challengeData = {
  currentRound: 1,
  totalRounds: 5,
  title: "Most Danceable Song",
  description: "Choose a song that you think will get everyone on the dance floor!",
  timeLimit: 300, // 5 minutes in seconds
  host: {
    name: "DJ Alice",
    avatar: "/placeholder.svg?height=40&width=40"
  }
}

export default function ChallengeAnnouncement() {
  const [timeLeft, setTimeLeft] = useState(challengeData.timeLimit)

  useEffect(() => {
    if (timeLeft > 0) {
      const timerId = setTimeout(() => setTimeLeft(timeLeft - 1), 1000)
      return () => clearTimeout(timerId)
    }
  }, [timeLeft])

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
  }

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-lg">
        <CardHeader>
          <Badge variant="outline" className="w-fit mb-2">
            Round {challengeData.currentRound} of {challengeData.totalRounds}
          </Badge>
          <CardTitle className="text-3xl font-bold">{challengeData.title}</CardTitle>
          <CardDescription>{challengeData.description}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2">
              <Avatar>
                <AvatarImage src={challengeData.host.avatar} alt={challengeData.host.name} />
                <AvatarFallback>{challengeData.host.name[0]}</AvatarFallback>
              </Avatar>
              <div>
                <p className="text-sm font-medium">Round Host</p>
                <p className="text-sm text-muted-foreground">{challengeData.host.name}</p>
              </div>
            </div>
            <div className="text-right">
              <p className="text-sm font-medium">Time Remaining</p>
              <p className="text-2xl font-bold">{formatTime(timeLeft)}</p>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => alert('View challenge details')}>
            <Info className="mr-2 h-4 w-4" />
            Details
          </Button>
          <Button onClick={() => alert('Proceed to next step')}>
            Proceed
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

import React, { useState, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Search, Clock, Info, Check, X, Music } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Mock data for songs
const gameSongs = [
  { id: 1, title: "Uptown Funk", artist: "Mark Ronson ft. Bruno Mars", albumArt: "/placeholder.svg?height=200&width=200" },
  { id: 2, title: "Dancing Queen", artist: "ABBA", albumArt: "/placeholder.svg?height=200&width=200" },
  { id: 3, title: "Billie Jean", artist: "Michael Jackson", albumArt: "/placeholder.svg?height=200&width=200" },
  { id: 4, title: "I Wanna Dance with Somebody", artist: "Whitney Houston", albumArt: "/placeholder.svg?height=200&width=200" },
  { id: 5, title: "Don't Stop Believin'", artist: "Journey", albumArt: "/placeholder.svg?height=200&width=200" },
]

const suggestedSongs = [
  { id: 6, title: "Stayin' Alive", artist: "Bee Gees", albumArt: "/placeholder.svg?height=200&width=200" },
  { id: 7, title: "September", artist: "Earth, Wind & Fire", albumArt: "/placeholder.svg?height=200&width=200" },
]

export default function SongSelection() {
  const [selectedSong, setSelectedSong] = useState<number | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [timeLeft, setTimeLeft] = useState(300) // 5 minutes in seconds

  useEffect(() => {
    if (timeLeft > 0) {
      const timerId = setTimeout(() => setTimeLeft(timeLeft - 1), 1000)
      return () => clearTimeout(timerId)
    }
  }, [timeLeft])

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
  }

  const SongCard = ({ song, isSelected, onSelect }: { song: typeof gameSongs[0], isSelected: boolean, onSelect: () => void }) => (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Card className={`mb-4 ${isSelected ? 'ring-2 ring-primary' : ''}`}>
            <CardContent className="p-4 flex flex-col items-center">
              <div className="relative w-40 h-40 mb-2">
                <img src={song.albumArt} alt={`Album art for ${song.title}`} className="w-full h-full object-cover rounded-md" />
                {isSelected && (
                  <div className="absolute inset-0 bg-primary/20 flex items-center justify-center rounded-md">
                    <Check className="h-12 w-12 text-primary" />
                  </div>
                )}
              </div>
              <Button variant={isSelected ? "default" : "outline"} size="sm" onClick={onSelect} className="mt-2">
                {isSelected ? "Selected" : "Select"}
              </Button>
            </CardContent>
          </Card>
        </TooltipTrigger>
        <TooltipContent>
          <p className="font-semibold">{song.title}</p>
          <p className="text-sm text-muted-foreground">{song.artist}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )

  return (
    <div className="min-h-screen bg-background p-4">
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <div className="flex justify-between items-center">
            <CardTitle className="text-3xl font-bold">Select Your Song</CardTitle>
            <Badge variant="secondary" className="text-lg">
              <Clock className="mr-2 h-4 w-4" />
              {formatTime(timeLeft)}
            </Badge>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="game-songs">
            <TabsList className="grid w-full grid-cols-2 mb-4">
              <TabsTrigger value="game-songs">Game Songs</TabsTrigger>
              <TabsTrigger value="search-songs">Search Songs</TabsTrigger>
            </TabsList>
            <TabsContent value="game-songs">
              <ScrollArea className="h-[500px]">
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {gameSongs.map((song) => (
                    <SongCard
                      key={song.id}
                      song={song}
                      isSelected={selectedSong === song.id}
                      onSelect={() => setSelectedSong(song.id)}
                    />
                  ))}
                </div>
              </ScrollArea>
            </TabsContent>
            <TabsContent value="search-songs">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Search className="h-4 w-4 text-muted-foreground" />
                  <Input
                    type="text"
                    placeholder="Search for a song..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <div>
                  <h3 className="font-semibold mb-2">Suggested Songs</h3>
                  <ScrollArea className="h-[400px]">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                      {suggestedSongs.map((song) => (
                        <SongCard
                          key={song.id}
                          song={song}
                          isSelected={selectedSong === song.id}
                          onSelect={() => setSelectedSong(song.id)}
                        />
                      ))}
                    </div>
                  </ScrollArea>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
        <CardFooter className="flex flex-col items-stretch space-y-4">
          <div className="flex items-center text-sm text-muted-foreground">
            <Info className="mr-2 h-4 w-4" />
            Please ensure your song choice is appropriate for all audiences.
          </div>
          <div className="flex justify-between">
            <Button variant="outline" onClick={() => alert('Selection cancelled')}>
              <X className="mr-2 h-4 w-4" />
              Cancel
            </Button>
            <Button onClick={() => alert(`Song ${selectedSong} selected!`)}>
              <Music className="mr-2 h-4 w-4" />
              Confirm Selection
            </Button>
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}

import React, { useState, useEffect } from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Clock, Music } from 'lucide-react'

// Mock data for songs
const initialSongs = [
  { id: '1', title: "Uptown Funk", artist: "Mark Ronson ft. Bruno Mars", albumArt: "/placeholder.svg?height=50&width=50" },
  { id: '2', title: "Dancing Queen", artist: "ABBA", albumArt: "/placeholder.svg?height=50&width=50" },
  { id: '3', title: "Billie Jean", artist: "Michael Jackson", albumArt: "/placeholder.svg?height=50&width=50" },
  { id: '4', title: "I Wanna Dance with Somebody", artist: "Whitney Houston", albumArt: "/placeholder.svg?height=50&width=50" },
]

export default function RankingVotingScreen() {
  const [songs, setSongs] = useState(initialSongs)
  const [timeLeft, setTimeLeft] = useState(300) // 5 minutes in seconds

  useEffect(() => {
    if (timeLeft > 0) {
      const timerId = setTimeout(() => setTimeLeft(timeLeft - 1), 1000)
      return () => clearTimeout(timerId)
    }
  }, [timeLeft])

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
  }

  const onDragEnd = (result: any) => {
    if (!result.destination) return

    const items = Array.from(songs)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

    setSongs(items)
  }

  return (
    <div className="min-h-screen bg-background p-4">
      <Card className="w-full max-w-2xl mx-auto">
        <CardHeader>
          <div className="flex justify-between items-center">
            <CardTitle className="text-3xl font-bold">Rank the Songs</CardTitle>
            <Badge variant="secondary" className="text-lg">
              <Clock className="mr-2 h-4 w-4" />
              {formatTime(timeLeft)}
            </Badge>
          </div>
        </CardHeader>
        <CardContent>
          <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="songs">
              {(provided) => (
                <ul {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
                  {songs.map((song, index) => (
                    <Draggable key={song.id} draggableId={song.id} index={index}>
                      {(provided) => (
                        <li
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className="bg-card hover:bg-accent rounded-lg p-2 flex items-center space-x-4"
                        >
                          <span className="text-2xl font-bold">{index + 1}</span>
                          <img src={song.albumArt} alt={`${song.title} album art`} className="w-12 h-12 rounded" />
                          <div>
                            <h3 className="font-semibold">{song.title}</h3>
                            <p className="text-sm text-muted-foreground">{song.artist}</p>
                          </div>
                        </li>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </DragDropContext>
        </CardContent>
        <CardFooter className="flex justify-end">
          <Button onClick={() => alert('Rankings submitted!')}>
            <Music className="mr-2 h-4 w-4" />
            Submit Rankings
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

import React from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { BarChart, ChevronRight, ListPlus } from 'lucide-react'

// Mock data for team scores
const teamScores = [
  { name: "Team A", totalPoints: 120, roundPoints: 30 },
  { name: "Team B", totalPoints: 110, roundPoints: 25 },
  { name: "Team C", totalPoints: 100, roundPoints: 35 },
  { name: "Team D", totalPoints: 90, roundPoints: 20 },
]

// Mock data for top-ranked songs
const topSongs = [
  { title: "Uptown Funk", artist: "Mark Ronson ft. Bruno Mars", points: 50 },
  { title: "Dancing Queen", artist: "ABBA", points: 45 },
  { title: "Billie Jean", artist: "Michael Jackson", points: 40 },
]

export default function ScoreboardScreen() {
  const maxScore = Math.max(...teamScores.map(team => team.totalPoints))

  return (
    <div className="min-h-screen bg-background p-4">
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Scoreboard</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h2 className="text-2xl font-semibold mb-4">Team Standings</h2>
            {teamScores.map((team, index) => (
              <div key={team.name} className="mb-4">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">{team.name}</span>
                  <span>{team.totalPoints} pts</span>
                </div>
                <div className="relative h-4 bg-secondary rounded-full overflow-hidden">
                  <div
                    className="absolute top-0 left-0 h-full bg-primary"
                    style={{ width: `${(team.totalPoints / maxScore) * 100}%` }}
                  ></div>
                </div>
                <div className="text-sm text-right mt-1 text-muted-foreground">
                  +{team.roundPoints} this round
                </div>
              </div>
            ))}
          </div>
          <div>
            <h2 className="text-2xl font-semibold mb-4">Round Summary</h2>
            <h3 className="text-xl font-medium mb-2">Top Ranked Songs</h3>
            <ul className="space-y-2">
              {topSongs.map((song, index) => (
                <li key={song.title} className="flex justify-between items-center">
                  <div>
                    <span className="font-medium">{song.title}</span>
                    <span className="text-sm text-muted-foreground ml-2">by {song.artist}</span>
                  </div>
                  <Badge variant="secondary">{song.points} pts</Badge>
                </li>
              ))}
            </ul>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => alert('Viewing detailed scores')}>
            <BarChart className="mr-2 h-4 w-4" />
            View Detailed Scores
          </Button>
          <Button onClick={() => alert('Proceeding to next round')}>
            Proceed to Next Round
            <ChevronRight className="ml-2 h-4 w-4" />
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

import React from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ChevronRight, Share2, Star } from 'lucide-react'

// Mock data for round results
const roundResults = [
  { rank: 1, title: "Uptown Funk", artist: "Mark Ronson ft. Bruno Mars", points: 50, team: "Team A", bonus: 10 },
  { rank: 2, title: "Dancing Queen", artist: "ABBA", points: 45, team: "Team B", bonus: 0 },
  { rank: 3, title: "Billie Jean", artist: "Michael Jackson", points: 40, team: "Team C", bonus: 5 },
  { rank: 4, title: "I Wanna Dance with Somebody", artist: "Whitney Houston", points: 35, team: "Team D", bonus: 0 },
]

// Mock data for Joker usage
const jokerUsage = [
  { team: "Team A", effect: "Double points", impact: "+50 points" },
  { team: "Team C", effect: "Steal points", impact: "+10 points (from Team B)" },
]

export default function RoundSummaryScreen() {
  return (
    <div className="min-h-screen bg-background p-4">
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Round Summary</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h2 className="text-2xl font-semibold mb-4">Top Songs</h2>
            <ul className="space-y-4">
              {roundResults.map((result) => (
                <li key={result.title} className="bg-card hover:bg-accent rounded-lg p-4">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-2xl font-bold">#{result.rank}</span>
                    <Badge variant="secondary">{result.points} pts</Badge>
                  </div>
                  <h3 className="text-lg font-medium">{result.title}</h3>
                  <p className="text-sm text-muted-foreground">{result.artist}</p>
                  <div className="mt-2 flex justify-between items-center">
                    <span className="text-sm">Submitted by {result.team}</span>
                    {result.bonus > 0 && (
                      <Badge variant="outline" className="text-yellow-500">
                        <Star className="mr-1 h-3 w-3" />
                        +{result.bonus} bonus
                      </Badge>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          </div>
          {jokerUsage.length > 0 && (
            <div>
              <h2 className="text-2xl font-semibold mb-4">Joker Effects</h2>
              <ul className="space-y-2">
                {jokerUsage.map((joker, index) => (
                  <li key={index} className="bg-card hover:bg-accent rounded-lg p-4">
                    <div className="flex justify-between items-center">
                      <span className="font-medium">{joker.team}</span>
                      <Badge variant="outline">{joker.effect}</Badge>
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">{joker.impact}</p>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => alert('Sharing results')}>
            <Share2 className="mr-2 h-4 w-4" />
            Share Results
          </Button>
          <Button onClick={() => alert('Proceeding to next round')}>
            Next Round
            <ChevronRight className="ml-2 h-4 w-4" />
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

import React, { useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Trophy, Medal, Share2, Home, RefreshCw } from 'lucide-react'
import confetti from 'canvas-confetti'

// Mock data for final standings
const finalStandings = [
  { rank: 1, name: "Team A", score: 500 },
  { rank: 2, name: "Team B", score: 450 },
  { rank: 3, name: "Team C", score: 400 },
  { rank: 4, name: "Team D", score: 350 },
]

// Mock data for achievements
const achievements = [
  { title: "Best Song Chooser", team: "Team B" },
  { title: "Most Creative Team", team: "Team C" },
  { title: "Comeback King", team: "Team D" },
]

export default function GameOverScreen() {
  useEffect(() => {
    // Trigger confetti animation when component mounts
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }
    });
  }, []);

  return (
    <div className="min-h-screen bg-background p-4">
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <CardTitle className="text-4xl font-bold text-center">Game Over!</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="text-center">
            <h2 className="text-3xl font-semibold mb-2">Winner</h2>
            <div className="inline-block bg-yellow-100 rounded-full p-8">
              <Trophy className="h-16 w-16 text-yellow-500" />
            </div>
            <h3 className="text-2xl font-bold mt-4">{finalStandings[0].name}</h3>
            <p className="text-xl">{finalStandings[0].score} points</p>
          </div>
          <div>
            <h2 className="text-2xl font-semibold mb-4">Final Standings</h2>
            <ul className="space-y-2">
              {finalStandings.map((team) => (
                <li key={team.name} className="flex justify-between items-center bg-card hover:bg-accent rounded-lg p-4">
                  <span className="font-medium">#{team.rank} {team.name}</span>
                  <Badge variant="secondary">{team.score} pts</Badge>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 className="text-2xl font-semibold mb-4">Achievements</h2>
            <ul className="space-y-2">
              {achievements.map((achievement, index) => (
                <li key={index} className="flex justify-between items-center bg-card hover:bg-accent rounded-lg p-4">
                  <span className="font-medium">{achievement.title}</span>
                  <Badge variant="outline">
                    <Medal className="mr-1 h-4 w-4" />
                    {achievement.team}
                  </Badge>
                </li>
              ))}
            </ul>
          </div>
        </CardContent>
        <CardFooter className="flex flex-wrap justify-center gap-4">
          <Button onClick={() => alert('Starting a new game')}>
            <RefreshCw className="mr-2 h-4 w-4" />
            Play Again
          </Button>
          <Button variant="outline" onClick={() => alert('Returning to home screen')}>
            <Home className="mr-2 h-4 w-4" />
            Return to Home
          </Button>
          <Button variant="outline" onClick={() => alert('Sharing results')}>
            <Share2 className="mr-2 h-4 w-4" />
            Share Results
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertCircle, Star } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// Mock data for team's Joker status
const initialJokerStatus = {
  available: true,
  used: false
}

export default function JokerUsageScreen() {
  const [jokerStatus, setJokerStatus] = useState(initialJokerStatus)

  const handleUseJoker = () => {
    setJokerStatus({ available: false, used: true })
    // Here you would typically make an API call to update the team's Joker status
    alert('Joker used! Your points will be doubled this round.')
  }

  const handleSaveJoker = () => {
    // Here you would typically make an API call to confirm the team's decision
    alert('Joker saved for a later round.')
  }

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Joker Usage</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex justify-center">
            <Star className="h-24 w-24 text-yellow-400" />
          </div>
          {jokerStatus.available ? (
            <>
              <p className="text-center text-lg">
                Would you like to use your Joker this round to double your points?
              </p>
              <div className="flex justify-center space-x-4">
                <Button onClick={handleUseJoker} className="w-32">
                  Use Joker
                </Button>
                <Button variant="outline" onClick={handleSaveJoker} className="w-32">
                  Save Joker
                </Button>
              </div>
            </>
          ) : (
            <Alert>
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Joker Unavailable</AlertTitle>
              <AlertDescription>
                {jokerStatus.used
                  ? "You've already used your Joker in a previous round."
                  : "Your Joker is not available for this game."}
              </AlertDescription>
            </Alert>
          )}
        </CardContent>
        <CardFooter className="flex justify-center">
          <p className="text-sm text-muted-foreground">
            Remember, you can only use your Joker once per game!
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}