10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["b_4AnEWhyCWCh",null],["b_4yQBV3o5md5",null],["b_zfXA2lU3LOf",null],["b_dm5V6WELbni",null],["b_TpBO5oh1QKB",null],["b_whZ4H6qsxM0",null],["b_sg3eWfGfzZ3",null],["b_StI6ro5HEnJ",null],["b_vcRZQfhSy4I",null],["b_tOVLHQimcVm",null],["b_Ktv1nCxuMC6",null]] 110:[["b_4AnEWhyCWCh",{"templateVersionId":null,"templateCanonId":null}],["b_4yQBV3o5md5",{"templateVersionId":null,"templateCanonId":null}],["b_zfXA2lU3LOf",{"templateVersionId":null,"templateCanonId":null}],["b_dm5V6WELbni",{"templateVersionId":null,"templateCanonId":null}],["b_TpBO5oh1QKB",{"templateVersionId":null,"templateCanonId":null}],["b_whZ4H6qsxM0",{"templateVersionId":null,"templateCanonId":null}],["b_sg3eWfGfzZ3",{"templateVersionId":null,"templateCanonId":null}],["b_StI6ro5HEnJ",{"templateVersionId":null,"templateCanonId":null}],["b_vcRZQfhSy4I",{"templateVersionId":null,"templateCanonId":null}],["b_tOVLHQimcVm",{"templateVersionId":null,"templateCanonId":null}],["b_Ktv1nCxuMC6",{"templateVersionId":null,"templateCanonId":null}]] 111:[["upePZFBAk9R","$D2026-02-04T09:29:57.662Z"],["b_bgxbzXjinPt","$D2026-02-04T16:31:49.320Z"],["b_1879gyZ3Iu9","$D2026-02-04T16:32:06.422Z"],["b_PRvUWrHSgaP","$D2026-02-04T16:35:14.542Z"],["b_mqola5PvkhO","$D2026-02-04T16:37:07.449Z"],["b_5txrQwPFu7T","$D2026-02-04T16:37:44.218Z"],["b_IBzivm02iEZ","$D2026-02-04T16:38:54.910Z"],["b_HLNML1Ooybr","$D2026-02-04T16:41:31.313Z"],["b_BNYcLtSh9kM","$D2026-02-04T16:47:16.147Z"],["b_omUeiKJ1mLi","$D2026-02-04T16:59:33.052Z"],["b_JCbuvojhMN1","$D2026-02-04T16:59:54.314Z"],["b_Uw2DZfGD1YX","$D2026-02-04T17:00:13.564Z"],["b_eqiLIV2MSuL","$D2026-02-04T17:02:29.417Z"],["b_55MxhG987K9","$D2026-02-04T17:02:48.960Z"],["b_QA7bW4UQM7L","$D2026-02-04T17:03:05.348Z"],["b_KKLdJ1EHUny","$D2026-02-04T17:05:09.778Z"],["b_bsngya0w5Fk","$D2026-02-04T17:05:32.419Z"],["b_35wXVp3f9Mb","$D2026-02-04T17:05:51.072Z"],["b_V02r6wzZ6Vi","$D2026-02-04T17:07:37.316Z"],["b_uYbtPT2pt4i","$D2026-02-04T17:08:09.744Z"],["b_kvdHUe8SNOp","$D2026-02-04T17:08:22.032Z"],["b_HQhKx7okvoK","$D2026-02-04T17:16:24.427Z"],["b_BOtJOPP6D3G","$D2026-02-04T17:16:54.696Z"],["b_i02bGKD9xjj","$D2026-02-04T17:17:20.901Z"],["b_4AnEWhyCWCh","$D2026-02-04T17:53:03.738Z"],["b_4yQBV3o5md5","$D2026-02-04T17:55:46.427Z"],["b_zfXA2lU3LOf","$D2026-02-04T17:56:24.159Z"],["b_dm5V6WELbni","$D2026-02-04T17:56:40.795Z"],["b_TpBO5oh1QKB","$D2026-02-04T17:58:47.088Z"],["b_whZ4H6qsxM0","$D2026-02-04T17:59:10.895Z"],["b_sg3eWfGfzZ3","$D2026-02-04T18:01:13.121Z"],["b_StI6ro5HEnJ","$D2026-02-04T18:01:30.162Z"],["b_vcRZQfhSy4I","$D2026-02-04T18:02:29.007Z"],["b_tOVLHQimcVm","$D2026-02-04T18:05:42.150Z"],["b_Ktv1nCxuMC6","$D2026-02-04T18:16:55.968Z"]] 112:[["b_4AnEWhyCWCh",false],["b_4yQBV3o5md5",false],["b_zfXA2lU3LOf",false],["b_dm5V6WELbni",false],["b_TpBO5oh1QKB",false],["b_whZ4H6qsxM0",false],["b_sg3eWfGfzZ3",false],["b_StI6ro5HEnJ",false],["b_vcRZQfhSy4I",false],["b_tOVLHQimcVm",false],["b_Ktv1nCxuMC6",false]] 113:[["b_4AnEWhyCWCh","$undefined"],["b_4yQBV3o5md5","$undefined"],["b_zfXA2lU3LOf","$undefined"],["b_dm5V6WELbni","$undefined"],["b_TpBO5oh1QKB","$undefined"],["b_whZ4H6qsxM0","$undefined"],["b_sg3eWfGfzZ3","$undefined"],["b_StI6ro5HEnJ","$undefined"],["b_vcRZQfhSy4I","$undefined"],["b_tOVLHQimcVm","$undefined"],["b_Ktv1nCxuMC6","$undefined"]] 114:[["b_4AnEWhyCWCh",null],["b_4yQBV3o5md5",null],["b_zfXA2lU3LOf",null],["b_dm5V6WELbni",null],["b_TpBO5oh1QKB",null],["b_whZ4H6qsxM0",null],["b_sg3eWfGfzZ3",null],["b_StI6ro5HEnJ",null],["b_vcRZQfhSy4I",null],["b_tOVLHQimcVm",null],["b_Ktv1nCxuMC6",null]] 115:[["b_4AnEWhyCWCh",true],["b_4yQBV3o5md5",true],["b_zfXA2lU3LOf",true],["b_dm5V6WELbni",true],["b_TpBO5oh1QKB",true],["b_whZ4H6qsxM0",true],["b_sg3eWfGfzZ3",true],["b_StI6ro5HEnJ",true],["b_vcRZQfhSy4I",true],["b_tOVLHQimcVm",true],["b_Ktv1nCxuMC6",true]] 116:[["b_4AnEWhyCWCh",true],["b_4yQBV3o5md5",true],["b_zfXA2lU3LOf",true],["b_dm5V6WELbni",true],["b_TpBO5oh1QKB",true],["b_whZ4H6qsxM0",true],["b_sg3eWfGfzZ3",true],["b_StI6ro5HEnJ",true],["b_vcRZQfhSy4I",true],["b_tOVLHQimcVm",true],["b_Ktv1nCxuMC6",true]] 117:[] 118:Tdab3a,[V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { motion } from "framer-motion" import { Mail, Lock, ArrowRight, LogIn } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" export function LoginForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setTimeout(() => { toast({ title: "เข้าสู่ระบบสำเร็จ", description: "ยินดีต้อนรับกลับมา!", }) setIsLoading(false) router.push("/profile") }, 1500) } return (

เข้าสู่ระบบ กรอกข้อมูลเพื่อเข้าสู่ระบบบัญชีของคุณ

อีเมล

setEmail(e.target.value)} className="pl-10" required />

รหัสผ่าน ลืมรหัสผ่าน?

setPassword(e.target.value)} className="pl-10" required />

ยังไม่มีบัญชี?{" "} สมัครสมาชิก

) } [V0_FILE]typescriptreact:file="components/register-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { motion } from "framer-motion" import { Mail, Lock, User, ArrowRight, UserPlus } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" export function RegisterForm() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (password !== confirmPassword) { toast({ title: "เกิดข้อผิดพลาด", description: "รหัสผ่านไม่ตรงกัน", variant: "destructive", }) return } setIsLoading(true) setTimeout(() => { toast({ title: "สมัครสมาชิกสำเร็จ", description: "ยินดีต้อนรับสู่ FootballAI!", }) setIsLoading(false) router.push("/profile") }, 1500) } return (

สมัครสมาชิก สร้างบัญชีใหม่เพื่อเริ่มใช้งาน FootballAI

ชื่อผู้ใช้

setName(e.target.value)} className="pl-10" required />

อีเมล

setEmail(e.target.value)} className="pl-10" required />

รหัสผ่าน

setPassword(e.target.value)} className="pl-10" required />

ยืนยันรหัสผ่าน

setConfirmPassword(e.target.value)} className="pl-10" required />

มีบัญชีอยู่แล้ว?{" "} เข้าสู่ระบบ

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { LoginForm } from "@/components/login-form" export default function LoginPage() { return (

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { RegisterForm } from "@/components/register-form" export default function RegisterPage() { return (

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { ProfilePage } from "@/components/profile-page" export default function Profile() { return (

) } [V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true" [V0_FILE]typescriptreact:file="components/match-card.tsx" isMerged="true" import { Card, CardHeader } from "@/components/ui/card" import { Clock } from "lucide-react" interface MatchCardProps { homeTeam: string awayTeam: string time: string league: string homeLogo?: string awayLogo?: string } export function MatchCard({ homeTeam, awayTeam, time, league }: MatchCardProps) { return (

{time} {league}

{homeTeam}

{awayTeam}

) } [V0_FILE]typescriptreact:file="components/team-card.tsx" isMerged="true" import { Card, CardHeader, CardTitle } from "@/components/ui/card" import { Star } from "lucide-react" interface TeamCardProps { name: string points: number logo?: string } export function TeamCard({ name, points }: TeamCardProps) { return (

{name}

{points} คะแนน

) } [V0_FILE]typescriptreact:file="app/teams/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/teams/[id]/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Star, MapPin, Calendar, Trophy, Users } from "lucide-react" export default function TeamDetailPage() { const players = [ { name: "เควิน เดอ บรอยน์", position: "กองกลาง", number: 17, rating: 91 }, { name: "เออร์ลิง ฮาลันด์", position: "กองหน้า", number: 9, rating: 92 }, { name: "ฟิล โฟเด้น", position: "กองกลาง", number: 47, rating: 87 }, { name: "เรอูเบน ดิอาส", position: "กองหลัง", number: 3, rating: 88 }, ] return (

แมนเชสเตอร์ ซิตี้

แมนเชสเตอร์, อังกฤษ

ก่อตั้ง 1880

90/100

ภาพรวม รายชื่อนักเตะ สถิติ

แชมป์เปี้ยน

7 สมัย

ผู้เล่น

25 คน

ฟอร์มล่าสุด

W W D W W

เกี่ยวกับทีม

แมนเชสเตอร์ ซิตี้ เป็นหนึ่งในสโมสรฟุตบอลที่ประสบความสำเร็จสูงสุดในอังกฤษ มีความโดดเด่นด้วยรูปแบบการเล่นที่สวยงามและคว้าแชมป์พรีเมียร์ลีกมาแล้วหลายสมัย ภายใต้การคุมทีมของเป๊ป กวาร์ดิโอลา ทีมได้รับการยกย่องว่าเป็นหนึ่งในทีมที่ดีที่สุดในยุโรป

นักเตะประจำทีม

{players.map((player, i) => (

{player.name}

{player.position} • #{player.number}

{player.rating}

))}

สถิติฤดูกาลนี้

แข่งไปแล้ว 28 นัด

ชนะ 20 นัด

เสมอ 5 นัด

แพ้ 3 นัด

ประตูที่ยิงได้ 65 ประตู

ประตูที่เสีย 22 ประตู

) } [V0_FILE]typescriptreact:file="app/players/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/compare/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeftRight, Trophy, Target, Users } from "lucide-react" export default function ComparePage() { return (

เปรียบเทียบ

เปรียบเทียบสถิติระหว่างทีมหรือนักเตะ

เลือกทีมหรือนักเตะเพื่อเปรียบเทียบ

ทีม/นักเตะ 1

ทีม/นักเตะ 2

แมนเชสเตอร์ ซิตี้

พรีเมียร์ลีก

ประตูยิงได้ 78

ประตูเสีย 28

ชนะ 22

เสมอ 4

แพ้ 2

คะแนน 70

อาร์เซนอล

พรีเมียร์ลีก

ประตูยิงได้ 72

ประตูเสีย 32

ชนะ 20

เสมอ 6

แพ้ 2

คะแนน 66

สถิติเปรียบเทียบ

ประตูเฉลี่ย/นัด

2.79

2.57

ครองบอล %

65%

58%

ความแม่นยำการส่งบอล %

88%

86%

การยิงโดนกรอบ

210

195

ฟอร์มล่าสุด

แมนเชสเตอร์ ซิตี้

อาร์เซนอล

ดาวซัลโวของทีม

ฮาลันด์ 28

ซากา 18

มูลค่าทีม

แมนเชสเตอร์ ซิตี้ €1.2B

อาร์เซนอล €980M

) } [V0_FILE]typescriptreact:file="components/search-input.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Search } from "lucide-react" export function SearchInput({ placeholder }: { placeholder: string }) { return (

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SelectPrimitive from '@radix-ui/react-select' import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ ...props }: React.ComponentProps) { return } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = 'default', children, ...props }: React.ComponentProps & { size?: 'sm' | 'default' }) { return ( {children} ) } function SelectContent({ className, children, position = 'popper', ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]png:file="public/haaland-football-action.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-football-action-cMk1f9W8Ygaspa2hEvOdsDnKy7VX6e.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) { return (

)
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

import { cn } from '@/lib/utils'

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn('aspect-square size-full', className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        'bg-muted flex size-full items-center justify-center rounded-full',
        className,
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]jpg:file="public/haaland-football-action.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-football-action-4pR72ITBwTfDuySMSJV1msYwlWG86w.jpg" isMerged="true"
[V0_FILE]jpg:file="public/arsenal-transfer-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-transfer-news-FLoS2lVVZMuy7nMLCMz1OVoeYJioxn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/england-football-manager.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/england-football-manager-fDDWsQmEYZJWr6Ok0V4jAID5TPbaU7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/chelsea-injury-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-injury-news-VI9iOmlOKbgzFTjPy0hmkB6DIPfmpA.jpg" isMerged="true"
[V0_FILE]jpg:file="public/liverpool-vs-chelsea-match.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/liverpool-vs-chelsea-match-LvzqEXr7J6lY4DhuGSQJnbcpqjAaN9.jpg" isMerged="true"
[V0_FILE]jpg:file="public/manchester-united-new-signing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-united-new-signing-9hMwrf2IZHacacaOtB3wFStEDvmFGi.jpg" isMerged="true"
[V0_FILE]jpg:file="public/haaland-man-city-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-man-city-team-dJv3DGuqLgeerwN6yQgGXrGX7k9ARW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/salah-liverpool-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/salah-liverpool-team-sz70rm4Jhijuv7ZHjKTXSOTvzNV5Ep.jpg" isMerged="true"
[V0_FILE]jpg:file="public/saka-arsenal-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/saka-arsenal-team-FSHJX3G279sBujY9Up8j3PNm0c4XRJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/son-tottenham-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/son-tottenham-team-khgJCqqslnOsrSP3aKPc8Gq4ECTKr7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/bruno-man-united-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bruno-man-united-team-E2ZxXWC0gBSKuDGLtaAtfXUgwQs83x.jpg" isMerged="true"
[V0_FILE]jpg:file="public/palmer-chelsea-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/palmer-chelsea-team-lacjvvAqvkwrhUQ044bMIo8tZnDgjw.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/stats/page.tsx" isQuickEdit="true" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { TrendingUp, TrendingDown, Target, Shield, Activity } from "lucide-react"

export default function StatsPage() {
  const teamStats = [
    { team: "แมนเชสเตอร์ ซิตี้", goalsScored: 78, goalsConceded: 28, possession: 65, passes: 620 },
    { team: "อาร์เซนอล", goalsScored: 72, goalsConceded: 32, possession: 58, passes: 580 },
    { team: "ลิเวอร์พูล", goalsScored: 70, goalsConceded: 35, possession: 60, passes: 590 },
    { team: "เรอัล มาดริด", goalsScored: 75, goalsConceded: 30, possession: 62, passes: 600 },
  ]

const attackStats = [
    { team: "แมนเชสเตอร์ ซิตี้", shots: 520, onTarget: 210, conversion: 15, xG: 72.5 },
    { team: "บาเยิร์น มิวนิค", shots: 500, onTarget: 200, conversion: 14.5, xG: 68.2 },
    { team: "ปารีส แซงต์-แชร์กแมง", shots: 480, onTarget: 195, conversion: 14, xG: 65.8 },
  ]

const defenseStats = [
    { team: "อินเตอร์ มิลาน", cleanSheets: 18, tackles: 450, interceptions: 380, blocks: 120 },
    { team: "อเตเลติโก้ มาดริด", cleanSheets: 16, tackles: 420, interceptions: 360, blocks: 115 },
    { team: "แมนเชสเตอร์ ซิตี้", cleanSheets: 15, tackles: 400, interceptions: 350, blocks: 110 },
  ]

return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto space-y-8">
          <div className="space-y-2">
            <h1 className="text-5xl font-display">สถิติและการวิเคราะห์</h1>
            <p className="text-lg text-muted-foreground">ข้อมูลสถิติโดยละเอียดของทีมและผู้เล่น</p>
          </div>

<Tabs defaultValue="overview" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="overview">ภาพรวม</TabsTrigger>
              <TabsTrigger value="attack">การรุก</TabsTrigger>
              <TabsTrigger value="defense">การรับ</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-6 mt-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card className="border-border/50">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
                      <Target className="w-4 h-4" />
                      ประตูเฉลี่ย
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-3xl font-bold">2.8</div>
                    <div className="flex items-center gap-1 text-xs text-[#22C55E] mt-1">
                      <TrendingUp className="w-3 h-3" />
                      <span>+0.3</span>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
                      <Shield className="w-4 h-4" />
                      ประตูเสียเฉลี่ย
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-3xl font-bold">1.2</div>
                    <div className="flex items-center gap-1 text-xs text-[#EF4444] mt-1">
                      <TrendingDown className="w-3 h-3" />
                      <span>-0.1</span>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
                      <Activity className="w-4 h-4" />
                      ครองบอลเฉลี่ย
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-3xl font-bold">58%</div>
                    <div className="flex items-center gap-1 text-xs text-[#22C55E] mt-1">
                      <TrendingUp className="w-3 h-3" />
                      <span>+2%</span>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
                      <Target className="w-4 h-4" />
                      การส่งบอลเฉลี่ย
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-3xl font-bold">520</div>
                    <div className="flex items-center gap-1 text-xs text-[#22C55E] mt-1">
                      <TrendingUp className="w-3 h-3" />
                      <span>+15</span>
                    </div>
                  </CardContent>
                </Card>
              </div>

<Card className="border-border/50">
                <CardHeader>
                  <CardTitle>สถิติทีมโดยรวม</CardTitle>
                </CardHeader>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b border-border/50">
                      <tr className="text-sm text-muted-foreground">
                        <th className="text-left py-3 px-4 font-medium">ทีม</th>
                        <th className="text-center py-3 px-4 font-medium">ยิงได้</th>
                        <th className="text-center py-3 px-4 font-medium">เสีย</th>
                        <th className="text-center py-3 px-4 font-medium">ครองบอล %</th>
                        <th className="text-center py-3 px-4 font-medium">ส่งบอล/นัด</th>
                      </tr>
                    </thead>
                    <tbody>
                      {teamStats.map((team, i) => (
                        <tr key={i} className="border-b border-border/30 hover:bg-muted/50 transition-colors">
                          <td className="py-4 px-4">
                            <div className="flex items-center gap-3">
                              <div className="w-8 h-8 bg-muted rounded-full" />
                              <span className="font-semibold">{team.team}</span>
                            </div>
                          </td>
                          <td className="text-center py-4 px-4 font-bold text-primary">{team.goalsScored}</td>
                          <td className="text-center py-4 px-4">{team.goalsConceded}</td>
                          <td className="text-center py-4 px-4">{team.possession}%</td>
                          <td className="text-center py-4 px-4">{team.passes}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="attack" className="space-y-6 mt-6">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Target className="w-5 h-5 text-primary" />
                    สถิติการรุก
                  </CardTitle>
                </CardHeader>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b border-border/50">
                      <tr className="text-sm text-muted-foreground">
                        <th className="text-left py-3 px-4 font-medium">ทีม</th>
                        <th className="text-center py-3 px-4 font-medium">ยิงทั้งหมด</th>
                        <th className="text-center py-3 px-4 font-medium">โดนกรอบ</th>
                        <th className="text-center py-3 px-4 font-medium">% แปรผล</th>
                        <th className="text-center py-3 px-4 font-medium">xG</th>
                      </tr>
                    </thead>
                    <tbody>
                      {attackStats.map((team, i) => (
                        <tr key={i} className="border-b border-border/30 hover:bg-muted/50 transition-colors">
                          <td className="py-4 px-4">
                            <div className="flex items-center gap-3">
                              <div className="w-8 h-8 bg-muted rounded-full" />
                              <span className="font-semibold">{team.team}</span>
                            </div>
                          </td>
                          <td className="text-center py-4 px-4">{team.shots}</td>
                          <td className="text-center py-4 px-4">{team.onTarget}</td>
                          <td className="text-center py-4 px-4 font-bold text-primary">{team.conversion}%</td>
                          <td className="text-center py-4 px-4">{team.xG}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">การยิงโดนกรอบสูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">แมนเชสเตอร์ ซิตี้</span>
                        <span className="font-bold text-primary">210</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">xG สูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">แมนเชสเตอร์ ซิตี้</span>
                        <span className="font-bold text-primary">72.5</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">% แปรผลสูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">แมนเชสเตอร์ ซิตี้</span>
                        <span className="font-bold text-primary">15%</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="defense" className="space-y-6 mt-6">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="w-5 h-5 text-primary" />
                    สถิติการรับ
                  </CardTitle>
                </CardHeader>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b border-border/50">
                      <tr className="text-sm text-muted-foreground">
                        <th className="text-left py-3 px-4 font-medium">ทีม</th>
                        <th className="text-center py-3 px-4 font-medium">คลีนชีต</th>
                        <th className="text-center py-3 px-4 font-medium">แทคเกิล</th>
                        <th className="text-center py-3 px-4 font-medium">ตัดบอล</th>
                        <th className="text-center py-3 px-4 font-medium">บล็อก</th>
                      </tr>
                    </thead>
                    <tbody>
                      {defenseStats.map((team, i) => (
                        <tr key={i} className="border-b border-border/30 hover:bg-muted/50 transition-colors">
                          <td className="py-4 px-4">
                            <div className="flex items-center gap-3">
                              <div className="w-8 h-8 bg-muted rounded-full" />
                              <span className="font-semibold">{team.team}</span>
                            </div>
                          </td>
                          <td className="text-center py-4 px-4 font-bold text-primary">{team.cleanSheets}</td>
                          <td className="text-center py-4 px-4">{team.tackles}</td>
                          <td className="text-center py-4 px-4">{team.interceptions}</td>
                          <td className="text-center py-4 px-4">{team.blocks}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">คลีนชีตสูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">อินเตอร์ มิลาน</span>
                        <span className="font-bold text-primary">18</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">แทคเกิลสูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">อินเตอร์ มิลาน</span>
                        <span className="font-bold text-primary">450</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-base">ตัดบอลสูงสุด</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">อินเตอร์ มิลาน</span>
                        <span className="font-bold text-primary">380</span>
                      </div>
                      <div className="w-full bg-muted rounded-full h-2">
                        <div className="bg-primary h-2 rounded-full" style={{ width: "100%" }} />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/match-events-timeline.tsx" isMerged="true"
import { Badge } from "@/components/ui/badge"

export interface MatchEvent {
  id: string
  type: MatchEventType
  minute: number
  team: "home" | "away"
  player?: string
  assist?: string
  score?: { home: number; away: number }
  playerOut?: string
  playerIn?: string
  addedMinutes?: number
  isPenalty?: boolean
  isOwnGoal?: boolean
  role?: string // e.g. "Coach"
}

interface MatchEventsTimelineProps {
  events: MatchEvent[]
  homeTeam: string
  awayTeam: string
  halfTimeScore?: { home: number; away: number }
  fullTimeScore?: { home: number; away: number }
  firstHalfAddedTime?: number
  secondHalfAddedTime?: number
}

export function MatchEventsTimeline({
  events,
  homeTeam,
  awayTeam,
  halfTimeScore,
  fullTimeScore,
  firstHalfAddedTime,
  secondHalfAddedTime,
}: MatchEventsTimelineProps) {
  // Sort events by minute
  const sortedEvents = [...events].sort((a, b) => a.minute - b.minute)

// Split events into first half and second half
  const firstHalfEvents = sortedEvents.filter((e) => e.minute <= 45)
  const secondHalfEvents = sortedEvents.filter((e) => e.minute > 45)

const renderEventIcon = (event: MatchEvent) => {
    switch (event.type) {
      case "goal":
        return (
          <div className="w-6 h-6 rounded-full bg-foreground flex items-center justify-center">
            <svg viewBox="0 0 24 24" className="w-4 h-4 text-background" fill="currentColor">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
              <circle cx="12" cy="12" r="4" fill="currentColor" />
            </svg>
          </div>
        )
      case "yellow_card":
        return <div className="w-4 h-5 bg-yellow-400 rounded-sm" />
      case "red_card":
        return <div className="w-4 h-5 bg-red-500 rounded-sm" />
      case "substitution":
        return (
          <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
            <svg viewBox="0 0 24 24" className="w-4 h-4 text-white" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M7 12h10M12 7l5 5-5 5M17 12H7m5-5l-5 5 5 5" />
            </svg>
          </div>
        )
      default:
        return null
    }
  }

const renderEventContent = (event: MatchEvent, side: "home" | "away") => {
    const isLeft = side === "home"

return (
      <div className={`flex items-center gap-3 ${isLeft ? "flex-row-reverse text-right" : "flex-row text-left"}`}>
        <div className="flex flex-col">
          {event.type === "goal" && (
            <>
              <div className="font-medium text-foreground">
                {event.player}{" "}
                <span className="text-destructive">
                  ({event.score?.home} - {event.score?.away})
                </span>
              </div>
              {event.assist && <div className="text-xs text-muted-foreground">assist by {event.assist}</div>}
              {event.isPenalty && <div className="text-xs text-muted-foreground">Penalty</div>}
            </>
          )}
          {event.type === "yellow_card" && (
            <>
              <div className="font-medium text-foreground">{event.player}</div>
              {event.role && <div className="text-xs text-muted-foreground">{event.role}</div>}
            </>
          )}
          {event.type === "red_card" && <div className="font-medium text-foreground">{event.player}</div>}
          {event.type === "substitution" && (
            <div className="flex flex-col">
              <div className="text-sm text-red-400 line-through">{event.playerOut}</div>
              <div className="text-sm text-green-400">{event.playerIn}</div>
            </div>
          )}
        </div>
      </div>
    )
  }

const renderEvent = (event: MatchEvent) => {
    const isHome = event.team === "home"

return (
      <div key={event.id} className="flex items-center gap-4 py-3">
        {/* Home side content */}
        <div className="flex-1 flex justify-end">{isHome && renderEventContent(event, "home")}</div>

{/* Home side icon */}
        <div className="w-8 flex justify-end">{isHome && renderEventIcon(event)}</div>

{/* Minute */}
        <div className="w-12 flex justify-center">
          <Badge variant="secondary" className="font-mono text-sm px-2 py-1 bg-muted">
            {event.minute}'
          </Badge>
        </div>

{/* Away side icon */}
        <div className="w-8 flex justify-start">{!isHome && renderEventIcon(event)}</div>

{/* Away side content */}
        <div className="flex-1 flex justify-start">{!isHome && renderEventContent(event, "away")}</div>
      </div>
    )
  }

const renderAddedTime = (minutes: number) => (
    <div className="flex justify-center py-3">
      <span className="text-sm text-muted-foreground">+{minutes} minutes added</span>
    </div>
  )

const renderScoreLine = (label: string, score: { home: number; away: number }) => (
    <div className="flex justify-center py-4 border-y border-border">
      <span className="font-bold text-foreground">
        {label} {score.home} - {score.away}
      </span>
    </div>
  )

return (
    <div className="bg-card rounded-lg p-6">
      <h3 className="text-xl font-semibold text-center mb-6">Events</h3>

<div className="space-y-1">
        {/* First Half Events */}
        {firstHalfEvents.map((event) => renderEvent(event))}

{/* First Half Added Time */}
        {firstHalfAddedTime && renderAddedTime(firstHalfAddedTime)}

{/* Half Time Score */}
        {halfTimeScore && renderScoreLine("HT", halfTimeScore)}

{/* Second Half Events */}
        {secondHalfEvents.map((event) => renderEvent(event))}

{/* Second Half Added Time */}
        {secondHalfAddedTime && renderAddedTime(secondHalfAddedTime)}

{/* Full Time Score */}
        {fullTimeScore && renderScoreLine("FT", fullTimeScore)}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/manchester-city-vs-liverpool-football-celebration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-city-vs-liverpool-football-celebration-2ObIgk8JtftrsXG4c1RuNArbQnGzJI.jpg" isMerged="true"
[V0_FILE]png:file="public/placeholder-odl60.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-bnplz.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/aston-villa-football-player-signing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aston-villa-football-player-signing-8Vmra9eEpKj5QyBDD137ZSwYXyElKS.jpg" isMerged="true"
[V0_FILE]png:file="public/placeholder-ientx.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/leagues/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Card, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Trophy, Calendar, Users, MapPin } from "lucide-react"
import Link from "next/link"

export default function LeaguesPage() {
  const league = {
    name: "พรีเมียร์ลีก",
    country: "อังกฤษ",
    teams: 20,
    founded: 1992,
    currentChampion: "แมนเชสเตอร์ ซิตี้",
    topScorer: "เออร์ลิง ฮาแลนด์",
    description: "พรีเมียร์ลีกเป็นลีกฟุตบอลสูงสุดของอังกฤษ ก่อตั้งในปี 1992 และเป็นหนึ่งในลีกที่มีผู้ชมมากที่สุดในโลก",
  }

return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto space-y-8">
          <div className="space-y-2 text-center">
            <h1 className="text-5xl font-display">การแข่งขัน</h1>
            <p className="text-lg text-muted-foreground">ข้อมูลพรีเมียร์ลีกอังกฤษ</p>
          </div>

<Card className="border-border/50 overflow-hidden">
            <div className="bg-gradient-to-br from-primary/20 to-primary/5 p-8">
              <div className="flex flex-col md:flex-row items-center gap-6">
                <div className="w-32 h-32 bg-background rounded-full flex items-center justify-center shadow-lg">
                  <Trophy className="w-16 h-16 text-primary" />
                </div>
                <div className="text-center md:text-left">
                  <h2 className="text-4xl font-display mb-2">{league.name}</h2>
                  <p className="text-muted-foreground flex items-center justify-center md:justify-start gap-2">
                    <MapPin className="w-4 h-4" />
                    {league.country}
                  </p>
                </div>
              </div>
            </div>

<CardHeader className="space-y-6">
              <p className="text-muted-foreground leading-relaxed">{league.description}</p>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-muted/50 rounded-lg p-4 text-center">
                  <Users className="w-6 h-6 mx-auto mb-2 text-primary" />
                  <p className="text-2xl font-bold">{league.teams}</p>
                  <p className="text-xs text-muted-foreground">ทีมในลีก</p>
                </div>
                <div className="bg-muted/50 rounded-lg p-4 text-center">
                  <Calendar className="w-6 h-6 mx-auto mb-2 text-primary" />
                  <p className="text-2xl font-bold">{league.founded}</p>
                  <p className="text-xs text-muted-foreground">ปีก่อตั้ง</p>
                </div>
                <div className="bg-muted/50 rounded-lg p-4 text-center col-span-2 md:col-span-1">
                  <Trophy className="w-6 h-6 mx-auto mb-2 text-yellow-500" />
                  <p className="text-sm font-bold">{league.currentChampion}</p>
                  <p className="text-xs text-muted-foreground">แชมป์ปัจจุบัน</p>
                </div>
                <div className="bg-muted/50 rounded-lg p-4 text-center col-span-2 md:col-span-1">
                  <span className="text-2xl mb-2 block">⚽</span>
                  <p className="text-sm font-bold">{league.topScorer}</p>
                  <p className="text-xs text-muted-foreground">ดาวซัลโว</p>
                </div>
              </div>

<div className="flex flex-wrap gap-3 pt-4">
                <Button asChild className="flex-1 min-w-[140px]">
                  <Link href="/standings">ตารางคะแนน</Link>
                </Button>
                <Button asChild variant="outline" className="flex-1 min-w-[140px] bg-transparent">
                  <Link href="/matches">โปรแกรมแข่งขัน</Link>
                </Button>
                <Button asChild variant="outline" className="flex-1 min-w-[140px] bg-transparent">
                  <Link href="/teams">ทีมทั้งหมด</Link>
                </Button>
              </div>
            </CardHeader>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/teams/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { SearchInput } from "@/components/search-input"
import { Star, Users } from "lucide-react"
import Link from "next/link"

export default function TeamsPage() {
  const teams = [
    { name: "แมนเชสเตอร์ ซิตี้", rating: 90 },
    { name: "ลิเวอร์พูล", rating: 89 },
    { name: "อาร์เซนอล", rating: 88 },
    { name: "แมนเชสเตอร์ ยูไนเต็ด", rating: 85 },
    { name: "เชลซี", rating: 84 },
    { name: "ท็อตแนม ฮ็อทสเปอร์", rating: 83 },
    { name: "นิวคาสเซิล ยูไนเต็ด", rating: 82 },
    { name: "แอสตัน วิลล่า", rating: 81 },
    { name: "ไบรท์ตัน", rating: 80 },
    { name: "เวสต์แฮม ยูไนเต็ด", rating: 79 },
    { name: "คริสตัล พาเลซ", rating: 78 },
    { name: "เบรนท์ฟอร์ด", rating: 77 },
    { name: "ฟูแล่ม", rating: 77 },
    { name: "วูล์ฟแฮมป์ตัน", rating: 76 },
    { name: "บอร์นมัธ", rating: 75 },
    { name: "น็อตติงแฮม ฟอเรสต์", rating: 75 },
    { name: "เอฟเวอร์ตัน", rating: 74 },
    { name: "เลสเตอร์ ซิตี้", rating: 74 },
    { name: "อิปสวิช ทาวน์", rating: 72 },
    { name: "เซาท์แธมป์ตัน", rating: 71 },
  ]

return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />

{/* Header */}
      <div className="border-b border-border bg-muted/30">
        <div className="container mx-auto px-4 py-8">
          <div className="flex items-center gap-3 mb-2">
            <Users className="w-8 h-8 text-primary" />
            <h1 className="text-3xl md:text-4xl font-display">ทีมทั้งหมด</h1>
          </div>
          <p className="text-muted-foreground mb-4">20 ทีมในพรีเมียร์ลีก อังกฤษ</p>
          <SearchInput placeholder="ค้นหาทีม..." className="max-w-md" />
        </div>
      </div>

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
          {teams.map((team, i) => (
            <Link key={i} href={`/teams/${i + 1}`}>
              <Card className="border-border/50 hover:border-primary/50 transition-all hover:shadow-md h-full">
                <CardContent className="p-4 text-center">
                  <div className="w-16 h-16 bg-muted rounded-full mx-auto mb-3 flex items-center justify-center">
                    <Users className="w-8 h-8 text-muted-foreground" />
                  </div>
                  <h3 className="font-semibold text-sm mb-1 line-clamp-1">{team.name}</h3>
                  <p className="text-xs text-muted-foreground mb-2">พรีเมียร์ลีก</p>
                  <div className="flex items-center justify-center gap-1">
                    <Star className="w-4 h-4 text-primary fill-current" />
                    <span className="font-bold text-primary">{team.rating}</span>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/football-news-headline.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-news-headline-3DNv6rn1HAmHsR9DHpYUAjex9w5rWK.png" isMerged="true"
[V0_FILE]jpg:file="public/arsenal-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-player-EDTZ4JaOfARH6vWVK5oSuc8Q6WHlcH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/manchester-city-manager.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-city-manager-n3kvxJehabJjEbJG4qvJadx3R10GN0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/chelsea-transfer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-transfer-PcYHyj4ENwvHf7Trj3T2UnuTjMlpoj.jpg" isMerged="true"
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: "https",
        hostname: "media.api-sports.io",
      },
      {
        protocol: "https",
        hostname: "media-*.api-sports.io",
      },
    ],
  },
}

export default nextConfig
[V0_FILE]typescript:file="app/api/ai-prediction/route.ts" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"

export const maxDuration = 30

export async function POST(req: Request) {
  try {
    const { homeTeam, awayTeam, model } = await req.json()

const modelMap: Record<string, string> = {
      "gpt-5": "openai/gpt-5",
      "claude-sonnet-4.5": "anthropic/claude-sonnet-4.5",
      "grok-4-fast": "xai/grok-4-fast",
    }

const modelName = model === "gpt-5" ? "GPT-5" : model === "claude-sonnet-4.5" ? "Claude Sonnet 4.5" : "Grok 4 Fast"

// Generate mock prediction based on team names
    const homeWin = Math.floor(Math.random() * 30) + 35 // 35-65%
    const draw = Math.floor(Math.random() * 20) + 20 // 20-40%
    const awayWin = 100 - homeWin - draw

const predictionData = {
      homeWinProbability: homeWin,
      drawProbability: draw,
      awayWinProbability: awayWin,
      predictedScore: {
        home: Math.floor(Math.random() * 3) + 1,
        away: Math.floor(Math.random() * 2),
      },
      confidence: Math.floor(Math.random() * 20) + 70, // 70-90%
      analysis: `จากการวิเคราะห์สถิติและฟอร์มล่าสุดของทั้งสองทีม ${homeTeam} มีความได้เปรียบในฐานะทีมเจ้าบ้าน ด้วยสถิติการชนะในบ้านที่ดี รวมถึงผลงานการเจอกันในอดีตที่ ${homeTeam} มักได้เปรียบ อย่างไรก็ตาม ${awayTeam} ก็มีฟอร์มที่น่าจับตามองในช่วงหลัง`,
      keyFactors: ["ฟอร์มล่าสุด 5 นัดของทีมเจ้าบ้าน", "สถิติการเจอกันในอดีต", "ความแข็งแกร่งของทีมเจ้าบ้าน", "สถานะของผู้เล่นคนสำคัญ"],
    }

return NextResponse.json({
      homeTeam,
      awayTeam,
      modelName,
      ...predictionData,
    })
  } catch (error) {
    console.error("Prediction error:", error)
    return NextResponse.json({ error: "เกิดข้อผิดพลาดในการทำนาย" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/ml-prediction/route.ts" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"

export const maxDuration = 30

export async function POST(req: Request) {
  try {
    const { homeTeam, awayTeam, model } = await req.json()

const modelMap: Record<string, { name: string; description: string }> = {
      svm: { name: "Support Vector Machine (SVM)", description: "SVM Classifier with RBF kernel" },
      "random-forest": { name: "Random Forest", description: "Ensemble of 100 decision trees" },
      xgboost: { name: "XGBoost", description: "Gradient Boosting with optimized parameters" },
      "neural-network": { name: "Neural Network", description: "Deep Learning with 3 hidden layers" },
      ensemble: { name: "Ensemble Model", description: "Combined prediction from all models" },
    }

const selectedModel = modelMap[model] || modelMap.ensemble

// Generate mock ML prediction
    const homeWin = Math.floor(Math.random() * 25) + 40 // 40-65%
    const draw = Math.floor(Math.random() * 15) + 20 // 20-35%
    const awayWin = 100 - homeWin - draw

const predictionData = {
      homeWinProbability: homeWin,
      drawProbability: draw,
      awayWinProbability: awayWin,
      predictedScore: {
        home: Math.floor(Math.random() * 3) + 1,
        away: Math.floor(Math.random() * 2),
      },
      confidence: Math.floor(Math.random() * 10) + 85, // 85-95%
      analysis: `โมเดล ${selectedModel.name} วิเคราะห์จากฟีเจอร์ต่างๆ เช่น ฟอร์มล่าสุด 5 นัด, สถิติ Head-to-Head, Expected Goals (xG) และ Home Advantage Factor พบว่า ${homeTeam} มี feature importance สูงในด้านการเล่นเกมรุก โดยมีค่า xG เฉลี่ยสูงกว่า ${awayTeam} ในช่วง 10 นัดหลัง`,
      keyFactors: [
        "ฟอร์มล่าสุด 5 นัด (Win Rate)",
        "Expected Goals (xG) เฉลี่ย",
        "Home Advantage Factor",
        "Head-to-Head Statistics",
        "ระดับผู้เล่นคีย์ (Rating)",
        "Defensive Strength Index",
      ],
    }

return NextResponse.json({
      homeTeam,
      awayTeam,
      modelName: selectedModel.name,
      ...predictionData,
    })
  } catch (error) {
    console.error("ML Prediction error:", error)
    return NextResponse.json({ error: "เกิดข้อผิดพลาดในการทำนาย" }, { status: 500 })
  }
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "framer-motion": "12.24.5",
    "swr": "2.3.8"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]jpg:file="public/haaland-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-player-2jPVviQakDtqgt7cYIK6FkJCoaOJbj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/salah-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/salah-player-ETeIanuM4inpNiYOYmXCquF1mEWiJU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/palmer-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/palmer-player-Y7vnbEZbHLgOYjZyG1WjQ8xy0Ous4n.jpg" isMerged="true"
[V0_FILE]jpg:file="public/isak-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/isak-player-dAe3a4SLGqbHIHmIkt7FKWuBOqywKx.jpg" isMerged="true"
[V0_FILE]jpg:file="public/watkins-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/watkins-player-J6gxKpyGDiGPtGHBsDhBxOINSJtvLZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/de-bruyne-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/de-bruyne-player-qiDCzK0w4eC4nGKMDPYJIvKM1tbaqj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/bruno-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bruno-player-sEezmJ5WwWWmiy65yhG7NlZ1ZFY42q.jpg" isMerged="true"
[V0_FILE]jpg:file="public/saka-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/saka-player-lHYv04TnB0zC4Tpf13op2YzxzCJ9DO.jpg" isMerged="true"
[V0_FILE]jpg:file="public/liverpool-football-match.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/liverpool-football-match-MnWDdfabi6u2gB5WaFy0i5qiBRrdtf.jpg" isMerged="true"
[V0_FILE]jpg:file="public/arsenal-player-saka.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-player-saka-PdCFP8LTfllzXkZ97flrtDHLXagDIh.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pep-guardiola-manchester-city-manager.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pep-guardiola-manchester-city-manager-Vp4IPK4tYi2srqVGgzBtKbfv7Sq05b.jpg" isMerged="true"
[V0_FILE]jpg:file="public/chelsea-football-transfer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-football-transfer-ododo2vhGsAqlE80v8mLie5s10FnVd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tottenham-hotspur-football.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tottenham-hotspur-football-JnCEOh678EmhMfliaUYtUKBFhjfTPT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/haaland-manchester-city-goal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-manchester-city-goal-tScT7SFcGHPBLrmDDSweg5k7GsPCDW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-standings-table.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-standings-table-84nl3cgtCiXzROC500WLU6mXcC8Epg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/erling-haaland-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/erling-haaland-footballer-4EONo89R8YnerxkF1qiw2yiAxVaCRR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/mohamed-salah-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mohamed-salah-footballer-myMMhpOUI9N9cjr6k3QRfiZT9rzaIe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cole-palmer-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cole-palmer-footballer-gkj642vo95IZ7vIDtDJhP9fTJr0eIx.jpg" isMerged="true"
[V0_FILE]jpg:file="public/alexander-isak-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/alexander-isak-footballer-JdL5E0HjOi4znkNkkGyDlW9Da8LpCC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ollie-watkins-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ollie-watkins-footballer-jtjSJanjyUWk6PaXmkrRqPAx4Jd2lh.jpg" isMerged="true"
[V0_FILE]jpg:file="public/kevin-de-bruyne-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kevin-de-bruyne-footballer-Zejg2jzRFVYrjbl4Uj4veXWnGi9QMl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/bruno-fernandes-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bruno-fernandes-footballer-V0YMHmS9cm1FYBn2N767Sjj1r1jlpE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/bukayo-saka-footballer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bukayo-saka-footballer-ErOgNxrgPNZivHlpwfDdFzexzYRBPW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/fulham-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fulham-logo-zB0xCNJYMmVFEaJjsvgnZYBMgRL2G9.jpg" isMerged="true"
[V0_FILE]png:file="public/arsenal-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-logo-CI5CMpI6P1lDMzRIuXRWKPrIEmMSbF.png" isMerged="true"
[V0_FILE]jpg:file="public/wolves-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wolves-logo-qi8psUgkV79X8YibK4GWo4dsjbZEDT.jpg" isMerged="true"
[V0_FILE]png:file="public/liverpool-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/liverpool-logo-DR9krrmoQUiMtrAYwsOafrLPe7Nkuj.png" isMerged="true"
[V0_FILE]jpg:file="public/ipswich-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ipswich-logo-vEqwdeiGxBWnKPMEuIjYHL3UPPkaNt.jpg" isMerged="true"
[V0_FILE]png:file="public/manchester-city-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-city-logo-jojt482jbS3GFrm8T9gpo3Q65D10OW.png" isMerged="true"
[V0_FILE]png:file="public/chelsea-football-club-crest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-football-club-crest-AAzoKjRedh9XsY6Gan88Z65EF47RJe.png" isMerged="true"
[V0_FILE]png:file="public/tottenham-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tottenham-logo-uxjuuFyySfMptdI53WWi1VoV2uJasu.png" isMerged="true"
[V0_FILE]jpg:file="public/leicester-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leicester-logo-Kgt7gbvuUgo9lXV1vxswnThnKkea5T.jpg" isMerged="true"
[V0_FILE]png:file="public/west-ham-united-badge.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/west-ham-united-badge-YQhpJAvsmjv4nkw3cZ6Ue8BXiUzfXW.png" isMerged="true"
[V0_FILE]png:file="public/crystal-palace-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crystal-palace-logo-2dXgvWIbygWluWVtDYTjkkE76GuMkI.png" isMerged="true"
[V0_FILE]png:file="public/brighton-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brighton-logo-2lGErNm5WlMt1eIRTsJ8J52eHohXB6.png" isMerged="true"
[V0_FILE]jpg:file="public/bournemouth-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bournemouth-logo-9NGA0BxYgCHeuR2m0Cdc7WwTYsBW96.jpg" isMerged="true"
[V0_FILE]png:file="public/everton-fc-badge.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/everton-fc-badge-jMB6Snn9RiNPiwoSySSaCQZntnw5HX.png" isMerged="true"
[V0_FILE]jpg:file="public/brentford-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brentford-logo-8F0mGSF5g1TQcFbzCwJHzcsMXFGASJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/nottingham-forest-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/nottingham-forest-logo-DqrMx6OyLkgzT2wFWYpErcKOvdJJy5.jpg" isMerged="true"
[V0_FILE]png:file="public/southampton-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/southampton-logo-Thz6XVYz1PWcnGw6D40etZWYJRjUiP.png" isMerged="true"
[V0_FILE]jpg:file="public/football-transfer-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-transfer-news-0ayiEbf5HqtoLmKDH062aW6UetphRj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/manchester-city-vs-chelsea-preview.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-city-vs-chelsea-preview-p5WTxUkCN3In9Eth6N8cXrC79U8MiC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-team-analysis.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-team-analysis-pO6w5xCpCdT3AZ8sJKoDiIi0I29SaU.jpg" isMerged="true"
[V0_FILE]png:file="public/erling-haaland-celebration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/erling-haaland-celebration-TcwIroMkLr9joxvSnkDAPVmvxJen7x.png" isMerged="true"
[V0_FILE]png:file="public/mohamed-salah-action.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mohamed-salah-action-SRIam97aBeIpfSr9zZZR0z9ifyuvrn.png" isMerged="true"
[V0_FILE]jpg:file="public/cole-palmer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cole-palmer-SZzCpqLlkiamrrgTCm9dqV7T61NLU9.jpg" isMerged="true"
[V0_FILE]jpg:file="public/alexander-isak.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/alexander-isak-iwMiBVFTwulGLnabppchDbkxc4OBaM.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ollie-watkins.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ollie-watkins-Zb9iHSHfw0kyzxirNJCdrCsH8ygr96.jpg" isMerged="true"
[V0_FILE]png:file="public/kevin-de-bruyne-action.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kevin-de-bruyne-action-y17KkWbF7IvqG2cCaIZI9DH9pgwgS3.png" isMerged="true"
[V0_FILE]png:file="public/bruno-fernandes-soccer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bruno-fernandes-soccer-pajuhR0cawxoZw8nRl7qn4IpgcHVcZ.png" isMerged="true"
[V0_FILE]png:file="public/bukayo-saka-footballer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bukayo-saka-footballer-d4XnPkkKdVMuzi3lphhbY4cKjoS2dY.png" isMerged="true"
[V0_FILE]jpg:file="public/home-team-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/home-team-logo-2qL6cJxSvs8LXmlCuZ62Sa62H6UgAd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/away-team-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/away-team-logo-LzJ04rPcdsP9AtfMQJ7qE7DbYxP2MT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-team-T3O49iJzUgZeJ8HZxipc8O5mUW8zli.jpg" isMerged="true"
[V0_FILE]png:file="public/manchester-city-football-celebration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-city-football-celebration-A3FcVndG2WNjyHemGV2X85nT1JQEVR.png" isMerged="true"
[V0_FILE]jpg:file="public/liverpool-football.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/liverpool-football-KlGX2fkPgoWbr9jNMlmVyfoSfPjWiQ.jpg" isMerged="true"
[V0_FILE]png:file="public/arsenal-football-stadium.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-football-stadium-a4hHRZAceR5ILpgqskK2YILAttCQTO.png" isMerged="true"
[V0_FILE]png:file="public/chelsea-football-stadium.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-football-stadium-ydkPzLTGBPQ7DSxuGvH3k4JvRxNjrg.png" isMerged="true"
[V0_FILE]jpg:file="public/tottenham-football.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tottenham-football-lZImFkXiooFh0pV7wQRVAJ1VEkote8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/manchester-united-football.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-united-football-5E3naVZtDvLOFVWYAKDktnHq07DQ8a.jpg" isMerged="true"
[V0_FILE]png:file="public/premier-league-match.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-match-OZDPDnDK7v0zIa9kuqfFuRD55TkmqU.png" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-preview.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-preview-iPBLY71sIfR4HU45thy5isXwW5OuLT.jpg" isMerged="true"
[V0_FILE]png:file="public/football-transfer-news.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-transfer-news-uYwLRIUywB9SO9Rvwona71HS2L8AGT.png" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-standings.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-standings-r40aJORqqJHkqwZenVeBDYAwcfRh5e.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-top-scorer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-top-scorer-ZWc9Ma3u5IeGg9SkToVgTngd6hFbNE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-news-Ok7YSOOd3srVrov7GAAeFsWYaxfg83.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/standings/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Trophy, TrendingDown, Loader2, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import useSWR from "swr"
import Image from "next/image"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function StandingsPage() {
  const { data, isLoading, mutate, error } = useSWR("/api/football/standings", fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 300000,
  })

const standings = data?.data
    ? data.data.map((item: any) => ({
        position: item.rank,
        team: item.team.name,
        teamEn: item.team.nameEn,
        logo: item.team.logo,
        played: item.all.played,
        won: item.all.win,
        drawn: item.all.draw,
        lost: item.all.lose,
        gf: item.all.goals.for,
        ga: item.all.goals.against,
        gd: item.goalsDiff,
        points: item.points,
        form: item.form ? item.form.split("").slice(0, 5) : [],
        description: item.description,
      }))
    : []

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Header */}
      <div className="border-b border-border bg-muted/30">
        <div className="container mx-auto px-4 py-8">
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <Trophy className="w-8 h-8 text-primary" />
                <h1 className="text-3xl md:text-4xl font-display">ตารางคะแนน</h1>
              </div>
              <p className="text-muted-foreground">พรีเมียร์ลีก อังกฤษ ฤดูกาล 2024-2025</p>
            </div>
            <Button variant="outline" size="sm" onClick={() => mutate()} disabled={isLoading} className="gap-2">
              <RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
              รีเฟรช
            </Button>
          </div>
        </div>
      </div>

<main className="container mx-auto px-4 py-8">
        <div className="max-w-7xl mx-auto space-y-6">
          {isLoading ? (
            <Card className="border-border/50">
              <CardContent className="flex items-center justify-center py-20">
                <Loader2 className="w-8 h-8 animate-spin text-primary" />
                <span className="ml-3 text-muted-foreground">กำลังโหลดข้อมูลตารางคะแนน...</span>
              </CardContent>
            </Card>
          ) : error || standings.length === 0 ? (
            <Card className="border-border/50">
              <CardContent className="text-center py-12">
                <Trophy className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                <p className="text-lg font-medium mb-2">ไม่สามารถโหลดข้อมูลตารางคะแนนได้</p>
                <p className="text-muted-foreground mb-4">กรุณาตรวจสอบการเชื่อมต่อและลองใหม่อีกครั้ง</p>
                <Button variant="outline" onClick={() => mutate()}>
                  ลองใหม่
                </Button>
              </CardContent>
            </Card>
          ) : (
            <>
              <Card className="border-border/50 overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b border-border bg-muted/50">
                      <tr className="text-sm text-muted-foreground">
                        <th className="text-left py-4 px-4 font-medium w-16">อันดับ</th>
                        <th className="text-left py-4 px-4 font-medium">ทีม</th>
                        <th className="text-center py-4 px-3 font-medium">เล่น</th>
                        <th className="text-center py-4 px-3 font-medium">ชนะ</th>
                        <th className="text-center py-4 px-3 font-medium">เสมอ</th>
                        <th className="text-center py-4 px-3 font-medium">แพ้</th>
                        <th className="text-center py-4 px-3 font-medium">ได้</th>
                        <th className="text-center py-4 px-3 font-medium">เสีย</th>
                        <th className="text-center py-4 px-3 font-medium">+/-</th>
                        <th className="text-center py-4 px-4 font-medium">คะแนน</th>
                        <th className="text-center py-4 px-4 font-medium">ฟอร์ม</th>
                      </tr>
                    </thead>
                    <tbody>
                      {standings.map((team: any, i: number) => (
                        <tr
                          key={i}
                          className={`border-b border-border/50 hover:bg-muted/30 transition-colors ${
                            i < 4 ? "bg-primary/5" : i >= standings.length - 3 ? "bg-destructive/5" : ""
                          }`}
                        >
                          <td className="py-4 px-4">
                            <div
                              className={`flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm ${
                                i < 4
                                  ? "bg-primary text-primary-foreground"
                                  : i === 4
                                    ? "bg-amber-500 text-white"
                                    : i >= standings.length - 3
                                      ? "bg-destructive/20 text-destructive"
                                      : "bg-muted text-muted-foreground"
                              }`}
                            >
                              {team.position}
                            </div>
                          </td>
                          <td className="py-4 px-4">
                            <div className="flex items-center gap-3">
                              {team.logo ? (
                                <Image
                                  src={team.logo || "/placeholder.svg"}
                                  alt={team.team}
                                  width={32}
                                  height={32}
                                  className="w-8 h-8 rounded-full object-contain bg-white p-0.5"
                                />
                              ) : (
                                <div className="w-8 h-8 bg-muted rounded-full" />
                              )}
                              <div>
                                <span className="font-semibold">{team.team}</span>
                                {team.teamEn && team.teamEn !== team.team && (
                                  <p className="text-xs text-muted-foreground">{team.teamEn}</p>
                                )}
                              </div>
                            </div>
                          </td>
                          <td className="text-center py-4 px-3 text-muted-foreground">{team.played}</td>
                          <td className="text-center py-4 px-3 font-medium text-green-600 dark:text-green-400">
                            {team.won}
                          </td>
                          <td className="text-center py-4 px-3 text-muted-foreground">{team.drawn}</td>
                          <td className="text-center py-4 px-3 text-red-600 dark:text-red-400">{team.lost}</td>
                          <td className="text-center py-4 px-3">{team.gf}</td>
                          <td className="text-center py-4 px-3">{team.ga}</td>
                          <td
                            className={`text-center py-4 px-3 font-semibold ${
                              team.gd > 0
                                ? "text-green-600 dark:text-green-400"
                                : team.gd < 0
                                  ? "text-red-600 dark:text-red-400"
                                  : ""
                            }`}
                          >
                            {team.gd > 0 ? `+${team.gd}` : team.gd}
                          </td>
                          <td className="text-center py-4 px-4">
                            <span className="font-bold text-primary text-lg">{team.points}</span>
                          </td>
                          <td className="py-4 px-4">
                            <div className="flex items-center justify-center gap-1">
                              {team.form.length > 0 ? (
                                team.form.map((result: string, j: number) => (
                                  <div
                                    key={j}
                                    className={`w-6 h-6 rounded-md flex items-center justify-center text-xs font-bold ${
                                      result === "W"
                                        ? "bg-green-500 text-white"
                                        : result === "D"
                                          ? "bg-muted text-muted-foreground"
                                          : "bg-red-500 text-white"
                                    }`}
                                  >
                                    {result}
                                  </div>
                                ))
                              ) : (
                                <span className="text-muted-foreground">-</span>
                              )}
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>

{/* Legend */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="border-primary/50 bg-primary/5">
                  <CardContent className="p-4 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                      <Trophy className="w-5 h-5 text-primary-foreground" />
                    </div>
                    <div>
                      <h3 className="font-semibold">Champions League</h3>
                      <p className="text-xs text-muted-foreground">อันดับ 1-4</p>
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-amber-500/50 bg-amber-500/5">
                  <CardContent className="p-4 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center">
                      <Trophy className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <h3 className="font-semibold">Europa League</h3>
                      <p className="text-xs text-muted-foreground">อันดับ 5</p>
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-destructive/50 bg-destructive/5">
                  <CardContent className="p-4 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-destructive flex items-center justify-center">
                      <TrendingDown className="w-5 h-5 text-destructive-foreground" />
                    </div>
                    <div>
                      <h3 className="font-semibold">ตกชั้น</h3>
                      <p className="text-xs text-muted-foreground">อันดับ 18-20</p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </>
          )}
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]jpg:file="public/premier-league-stadium-night.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-stadium-night-ckFPWape8IpIHLRG4YgAxfdHXycBgc.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-match-atmosphere.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-match-atmosphere-tPuEctxer2Xmt2YprTms3nbu2NHlTY.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-trophy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-trophy-NMmZ94B4aLKGNiPFjm6SwK1xXTo57B.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-fans-celebration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-fans-celebration-3M289V1BY0FEho3AkPUBlbV83gpJg5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-action.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-action-JvsHnqn1ctnwcqmSa8RmVjYnbqVeDJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-stadium-aerial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-stadium-aerial-fHonYDLOecUfVBAPvdMQbSx6iAHFhL.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/matches/page.tsx" isMerged="true"
import { Suspense } from "react"
import MatchesContent from "./matches-content"

export default function MatchesPage() {
  return (
    <Suspense fallback={null}>
      <MatchesContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/matches/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Clock, TrendingUp, Shield } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { MatchEventsTimeline, type MatchEvent } from "@/components/match-events-timeline"

export default function MatchDetailPage() {
  const params = useParams()
  const matchId = params.id as string

console.log("[v0] Match ID:", matchId)

// Mock match data
  const match = {
    id: matchId,
    round: 28,
    homeTeam: "แมนเชสเตอร์ ซิตี้",
    awayTeam: "ลิเวอร์พูล",
    homeScore: 2,
    awayScore: 1,
    date: "8 มี.ค. 2025",
    time: "22:30",
    status: "finished",
    stadium: "เอติฮัด สเตเดี้ยม",
    attendance: "53,400",
    referee: "ไมเคิล โอลิเวอร์",
  }

// Mock match events data
  const matchEvents: MatchEvent[] = [
    {
      id: "1",
      type: "yellow_card",
      minute: 29,
      team: "away",
      player: "Lewis Dunk",
    },
    {
      id: "2",
      type: "yellow_card",
      minute: 41,
      team: "away",
      player: "Pascal Gross",
    },
    {
      id: "3",
      type: "yellow_card",
      minute: 41,
      team: "home",
      player: "Pep Guardiola",
      role: "Coach",
    },
    {
      id: "4",
      type: "goal",
      minute: 41,
      team: "home",
      player: "Erling Haaland",
      score: { home: 1, away: 0 },
      isPenalty: true,
    },
    {
      id: "5",
      type: "yellow_card",
      minute: 53,
      team: "away",
      player: "Jan Paul van Hecke",
    },
    {
      id: "6",
      type: "goal",
      minute: 60,
      team: "away",
      player: "Kaoru Mitoma",
      assist: "Yasin Ayari",
      score: { home: 1, away: 1 },
    },
    {
      id: "7",
      type: "yellow_card",
      minute: 60,
      team: "away",
      player: "Maxim De Cuyper",
    },
    {
      id: "8",
      type: "yellow_card",
      minute: 60,
      team: "home",
      player: "Gianluigi Donnarumma",
    },
    {
      id: "9",
      type: "substitution",
      minute: 64,
      team: "home",
      playerOut: "Rodri",
      playerIn: "Nico González",
    },
    {
      id: "10",
      type: "yellow_card",
      minute: 69,
      team: "away",
      player: "Kaoru Mitoma",
    },
    {
      id: "11",
      type: "substitution",
      minute: 73,
      team: "home",
      playerOut: "Rayan Cherki",
      playerIn: "Phil Foden",
    },
    {
      id: "12",
      type: "substitution",
      minute: 73,
      team: "home",
      playerOut: "Nico O'Reilly",
      playerIn: "Nathan Aké",
    },
    {
      id: "13",
      type: "substitution",
      minute: 73,
      team: "home",
      playerOut: "Rico Lewis",
      playerIn: "Matheus Nunes",
    },
    {
      id: "14",
      type: "substitution",
      minute: 77,
      team: "away",
      playerOut: "Danny Welbeck",
      playerIn: "Georginio Rutter",
    },
    {
      id: "15",
      type: "substitution",
      minute: 77,
      team: "away",
      playerOut: "Brajan Gruda",
      playerIn: "Diego Gomez",
    },
    {
      id: "16",
      type: "substitution",
      minute: 83,
      team: "away",
      playerOut: "Tom Watson",
      playerIn: "Kaoru Mitoma",
    },
    {
      id: "17",
      type: "substitution",
      minute: 83,
      team: "away",
      playerOut: "James Milner",
      playerIn: "Yasin Ayari",
    },
    {
      id: "18",
      type: "yellow_card",
      minute: 89,
      team: "away",
      player: "Tom Watson",
    },
  ]

const homeLineup = {
    formation: "4-3-3",
    manager: { name: "เป๊ป กวาร์ดิโอล่า", nationality: "สเปน" },
    starting: [
      { id: 1100, name: "เอเดอร์ซอน", number: 31, position: "GK", rating: 7.5, x: 50, y: 90 },
      { id: 1101, name: "วอล์คเกอร์", number: 2, position: "RB", rating: 7.8, x: 80, y: 70 },
      { id: 1102, name: "ดิอาส", number: 3, position: "CB", rating: 8.2, x: 60, y: 75 },
      { id: 1103, name: "อาคานจี", number: 25, position: "CB", rating: 7.9, x: 40, y: 75 },
      { id: 1104, name: "อาเกโร่", number: 21, position: "LB", rating: 7.6, x: 20, y: 70 },
      { id: 1105, name: "โรดรี", number: 16, position: "CDM", rating: 8.5, x: 50, y: 55 },
      { id: 1106, name: "เดอ บรอยเนอร์", number: 17, position: "CM", rating: 8.8, x: 65, y: 45 },
      { id: 1107, name: "กุนโดกัน", number: 19, position: "CM", rating: 7.7, x: 35, y: 45 },
      { id: 1108, name: "ฟอร์เด้น", number: 47, position: "RW", rating: 7.9, x: 75, y: 25 },
      { id: 1109, name: "ฮาแลนด์", number: 9, position: "ST", rating: 9.2, x: 50, y: 15, goals: 2 },
      { id: 1110, name: "กรีลิช", number: 10, position: "LW", rating: 7.4, x: 25, y: 25 },
    ],
    substitutes: [
      { id: 1111, name: "ออร์เตก้า", number: 18, position: "GK" },
      { id: 1112, name: "สโตนส์", number: 5, position: "DEF" },
      { id: 1113, name: "อาคันจี", number: 6, position: "MID" },
      { id: 1114, name: "เบอร์นาร์โด้ ซิลวา", number: 20, position: "MID", subbedIn: 75 },
      { id: 1115, name: "อัลวาเรซ", number: 19, position: "FWD" },
    ],
  }

const awayLineup = {
    formation: "4-3-3",
    manager: { name: "เจอร์เกน คล็อปป์", nationality: "เยอรมัน" },
    starting: [
      { id: 1200, name: "อลิสซง", number: 1, position: "GK", rating: 7.2, x: 50, y: 10 },
      { id: 1201, name: "อเล็กซานเดอร์-อาร์โนลด์", number: 66, position: "RB", rating: 7.5, x: 80, y: 30 },
      { id: 1202, name: "โควาเต้", number: 5, position: "CB", rating: 6.8, x: 60, y: 25 },
      { id: 1203, name: "ฟาน ไดค์", number: 4, position: "CB", rating: 7.3, x: 40, y: 25 },
      { id: 1204, name: "โรเบิร์ตสัน", number: 26, position: "LB", rating: 7.0, x: 20, y: 30 },
      { id: 1205, name: "มัค อัลลิสเตอร์", number: 10, position: "CM", rating: 7.4, x: 50, y: 45 },
      { id: 1206, name: "เซอบิสลอส", number: 3, position: "CM", rating: 7.1, x: 65, y: 50 },
      { id: 1207, name: "โจนส์", number: 17, position: "CM", rating: 6.9, x: 35, y: 50 },
      { id: 1208, name: "ซาลาห์", number: 11, position: "RW", rating: 8.1, x: 75, y: 70, goals: 1 },
      { id: 1209, name: "นูเนซ", number: 9, position: "ST", rating: 6.7, x: 50, y: 80 },
      { id: 1210, name: "ดิอาซ", number: 7, position: "LW", rating: 7.2, x: 25, y: 70 },
    ],
    substitutes: [
      { id: 1211, name: "เคลเลเฮอร์", number: 62, position: "GK" },
      { id: 1212, name: "ชิมิคัส", number: 21, position: "DEF" },
      { id: 1213, name: "กราเวนเบิร์ช", number: 38, position: "MID", subbedIn: 68 },
      { id: 1214, name: "เอลเลียต", number: 19, position: "MID" },
      { id: 1215, name: "กัคโป", number: 18, position: "FWD", subbedIn: 82 },
    ],
  }

const PlayerCard = ({
    player,
    isHome,
  }: {
    player: (typeof homeLineup.starting)[0]
    isHome: boolean
  }) => (
    <Link
      href={`/players/${player.id}`}
      className="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
      style={{ left: `${isHome ? player.x : 100 - player.x}%`, top: `${isHome ? player.y : 100 - player.y}%` }}
    >
      <div className="flex flex-col items-center gap-1">
        <div className="relative">
          <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center text-white font-bold text-lg shadow-lg border-2 border-white group-hover:scale-110 group-hover:border-primary transition-all">
            {player.number}
          </div>
          {player.goals && player.goals > 0 && (
            <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-amber-500 flex items-center justify-center text-xs font-bold text-white border-2 border-white">
              {player.goals}
            </div>
          )}
        </div>
        <div className="bg-background/95 backdrop-blur-sm rounded-lg px-2 py-1 shadow-md border border-border/50 group-hover:border-primary/50 transition-colors">
          <div className="text-xs font-medium text-center whitespace-nowrap">{player.name}</div>
          {match.status === "finished" && player.rating && (
            <div className="flex items-center justify-center gap-1 mt-0.5">
              <TrendingUp className="w-3 h-3 text-primary" />
              <span className="text-xs font-bold text-primary">{player.rating}</span>
            </div>
          )}
        </div>
      </div>
    </Link>
  )

const SubstituteCard = ({
    sub,
    teamColor,
  }: {
    sub: (typeof homeLineup.substitutes)[0]
    teamColor: "primary" | "destructive"
  }) => (
    <Link
      href={`/players/${sub.id}`}
      className="flex items-center gap-3 p-2 rounded-lg bg-muted/50 hover:bg-muted transition-colors cursor-pointer group"
    >
      <div
        className={`w-8 h-8 rounded-full bg-${teamColor}/20 flex items-center justify-center text-xs font-bold group-hover:bg-${teamColor}/40 transition-colors`}
      >
        {sub.number}
      </div>
      <div className="flex-1">
        <div className="text-sm font-medium group-hover:text-primary transition-colors">{sub.name}</div>
        <div className="text-xs text-muted-foreground">{sub.position}</div>
      </div>
      {sub.subbedIn && (
        <Badge variant="secondary" className="text-xs">
          ↑ {sub.subbedIn}'
        </Badge>
      )}
    </Link>
  )

return (
    <div className="min-h-screen bg-background">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-7xl mx-auto space-y-8">
          <Link
            href="/matches"
            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            กลับไปหน้าแมทช์
          </Link>

<Card className="border-border/50 shadow-lg">
            <CardHeader className="space-y-4">
              <div className="flex items-center justify-between">
                <Badge variant="secondary" className="text-sm">
                  FT
                </Badge>
                <Badge variant="outline" className="text-sm">
                  นัดที่ {match.round}
                </Badge>
              </div>
              <div className="flex items-center justify-between gap-8">
                <div className="flex items-center gap-4 flex-1">
                  <div className="w-20 h-20 bg-gradient-to-br from-primary/20 to-primary/10 rounded-full flex items-center justify-center">
                    <Shield className="w-10 h-10 text-primary" />
                  </div>
                  <div>
                    <h2 className="text-2xl font-display">{match.homeTeam}</h2>
                  </div>
                </div>
                <div className="flex items-center gap-6">
                  <span className="text-5xl font-bold text-primary">{match.homeScore}</span>
                  <span className="text-3xl font-bold text-muted-foreground">-</span>
                  <span className="text-5xl font-bold text-destructive">{match.awayScore}</span>
                </div>
                <div className="flex items-center gap-4 flex-1 justify-end">
                  <div className="text-right">
                    <h2 className="text-2xl font-display">{match.awayTeam}</h2>
                  </div>
                  <div className="w-20 h-20 bg-gradient-to-br from-destructive/20 to-destructive/10 rounded-full flex items-center justify-center">
                    <Shield className="w-10 h-10 text-destructive" />
                  </div>
                </div>
              </div>
              <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground pt-4 border-t">
                <div className="flex items-center gap-2">
                  <Clock className="w-4 h-4" />
                  <span>
                    {match.date} • {match.time}
                  </span>
                </div>
                <span>•</span>
                <span>{match.stadium}</span>
                <span>•</span>
                <span>ผู้ชม: {match.attendance}</span>
              </div>
            </CardHeader>
          </Card>

<Tabs defaultValue="lineup" className="w-full">
            <TabsList className="grid w-full grid-cols-6">
              <TabsTrigger value="facts">ข้อมูล</TabsTrigger>
              <TabsTrigger value="events">เหตุการณ์</TabsTrigger>
              <TabsTrigger value="lineup">Line-up</TabsTrigger>
              <TabsTrigger value="table">ตาราง</TabsTrigger>
              <TabsTrigger value="stats">สถิติ</TabsTrigger>
              <TabsTrigger value="h2h">ดวลกัน</TabsTrigger>
            </TabsList>

<TabsContent value="facts" className="space-y-6 mt-6">
              <Card>
                <CardHeader>
                  <h3 className="text-xl font-display">ข้อมูลการแข่งขัน</h3>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground">สนามแข่งขัน</span>
                    <span className="font-medium">{match.stadium}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground">ผู้เข้าชม</span>
                    <span className="font-medium">{match.attendance}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground">ผู้ตัดสิน</span>
                    <span className="font-medium">{match.referee}</span>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="lineup" className="space-y-6 mt-6">
              <div className="grid lg:grid-cols-2 gap-6">
                {/* Home Team Lineup */}
                <Card className="border-border/50 shadow-md">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="text-xl font-display">{match.homeTeam}</h3>
                        <p className="text-sm text-muted-foreground mt-1">แผน {homeLineup.formation}</p>
                      </div>
                      <Shield className="w-8 h-8 text-primary" />
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {/* Football Pitch */}
                    <div className="relative aspect-[9/14] bg-gradient-to-b from-emerald-700 to-emerald-600 rounded-lg overflow-hidden shadow-inner">
                      {/* Pitch markings */}
                      <div className="absolute inset-0">
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-12 border-2 border-white/30 rounded-b-lg" />
                        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-16 h-6 border-2 border-white/30 rounded-b-lg" />
                        <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-white/30" />
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 border-2 border-white/30 rounded-full" />
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white/30 rounded-full" />
                      </div>

{/* Players - now clickable */}
                      {homeLineup.starting.map((player) => (
                        <PlayerCard key={player.id} player={player} isHome={true} />
                      ))}
                    </div>

{/* Substitutes - now clickable */}
                    <div className="space-y-3">
                      <h4 className="text-sm font-semibold flex items-center gap-2">
                        <div className="w-1 h-4 bg-primary rounded" />
                        นักเตะสำรอง
                      </h4>
                      <div className="grid grid-cols-1 gap-2">
                        {homeLineup.substitutes.map((sub) => (
                          <SubstituteCard key={sub.id} sub={sub} teamColor="primary" />
                        ))}
                      </div>
                    </div>

{/* Manager */}
                    <div className="pt-4 border-t">
                      <div className="flex items-center gap-3">
                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center">
                          <span className="text-lg">👔</span>
                        </div>
                        <div>
                          <div className="text-sm text-muted-foreground">ผู้จัดการทีม</div>
                          <div className="font-semibold">{homeLineup.manager.name}</div>
                          <div className="text-xs text-muted-foreground">{homeLineup.manager.nationality}</div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

{/* Away Team Lineup */}
                <Card className="border-border/50 shadow-md">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="text-xl font-display">{match.awayTeam}</h3>
                        <p className="text-sm text-muted-foreground mt-1">แผน {awayLineup.formation}</p>
                      </div>
                      <Shield className="w-8 h-8 text-destructive" />
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {/* Football Pitch */}
                    <div className="relative aspect-[9/14] bg-gradient-to-b from-emerald-700 to-emerald-600 rounded-lg overflow-hidden shadow-inner">
                      {/* Pitch markings */}
                      <div className="absolute inset-0">
                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-32 h-12 border-2 border-white/30 rounded-t-lg" />
                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-6 border-2 border-white/30 rounded-t-lg" />
                        <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-white/30" />
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 border-2 border-white/30 rounded-full" />
                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white/30 rounded-full" />
                      </div>

{/* Players - now clickable */}
                      {awayLineup.starting.map((player) => (
                        <PlayerCard key={player.id} player={player} isHome={false} />
                      ))}
                    </div>

{/* Substitutes - now clickable */}
                    <div className="space-y-3">
                      <h4 className="text-sm font-semibold flex items-center gap-2">
                        <div className="w-1 h-4 bg-destructive rounded" />
                        นักเตะสำรอง
                      </h4>
                      <div className="grid grid-cols-1 gap-2">
                        {awayLineup.substitutes.map((sub) => (
                          <SubstituteCard key={sub.id} sub={sub} teamColor="destructive" />
                        ))}
                      </div>
                    </div>

{/* Manager */}
                    <div className="pt-4 border-t">
                      <div className="flex items-center gap-3">
                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-destructive to-destructive/60 flex items-center justify-center">
                          <span className="text-lg">👔</span>
                        </div>
                        <div>
                          <div className="text-sm text-muted-foreground">ผู้จัดการทีม</div>
                          <div className="font-semibold">{awayLineup.manager.name}</div>
                          <div className="text-xs text-muted-foreground">{awayLineup.manager.nationality}</div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="table" className="space-y-6 mt-6">
              <Card>
                <CardHeader>
                  <h3 className="text-xl font-display">ตารางคะแนน</h3>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">ตารางคะแนนจะแสดงที่นี่</p>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="stats" className="space-y-6 mt-6">
              <Card>
                <CardHeader>
                  <h3 className="text-xl font-display">สถิติการแข่งขัน</h3>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">สถิติการแข่งขันจะแสดงที่นี่</p>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="h2h" className="space-y-6 mt-6">
              <Card>
                <CardHeader>
                  <h3 className="text-xl font-display">ประวัติการพบกัน</h3>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">ประวัติการพบกันจะแสดงที่นี่</p>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/player-radar-chart.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { HelpCircle } from "lucide-react"

interface PlayerTraitsProps {
  position: string
  stats: {
    touches: number
    chancesCreated: number
    shotAttempts: number
    goals: number
    aerialDuelsWon: number
    defensiveContributions: number
  }
}

export function PlayerRadarChart({ position, stats }: PlayerTraitsProps) {
  const normalizeValue = (value: number) => {
    return Math.max(20, Math.min(value, 100))
  }

const traits = [
    { label: "Touches", value: normalizeValue(stats.touches) },
    { label: "Chances created", value: normalizeValue(stats.chancesCreated) },
    { label: "Aerial duels won", value: normalizeValue(stats.aerialDuelsWon) },
    { label: "Defensive contributions", value: normalizeValue(stats.defensiveContributions) },
    { label: "Goals", value: normalizeValue(stats.goals) },
    { label: "Shot attempts", value: normalizeValue(stats.shotAttempts) },
  ]

const size = 280
  const cx = size / 2
  const cy = size / 2
  const maxRadius = 85

const getHexagonPoints = (radius: number) => {
    return traits
      .map((_, i) => {
        const angle = (Math.PI * 2 * i) / 6 - Math.PI / 2
        const x = cx + radius * Math.cos(angle)
        const y = cy + radius * Math.sin(angle)
        return `${x},${y}`
      })
      .join(" ")
  }

const getDataPoints = () => {
    return traits
      .map((trait, i) => {
        const angle = (Math.PI * 2 * i) / 6 - Math.PI / 2
        const radius = (trait.value / 100) * maxRadius
        const x = cx + radius * Math.cos(angle)
        const y = cy + radius * Math.sin(angle)
        return `${x},${y}`
      })
      .join(" ")
  }

const labelPositions = [
    { x: cx, y: 15, anchor: "middle", valueY: 5 }, // Top - Touches
    { x: size - 10, y: 70, anchor: "end", valueY: 60 }, // Top right - Chances created
    { x: size - 10, y: size - 60, anchor: "end", valueY: size - 50 }, // Bottom right - Aerial duels
    { x: cx, y: size - 5, anchor: "middle", valueY: size - 25 }, // Bottom - Defensive contributions
    { x: 10, y: size - 60, anchor: "start", valueY: size - 50 }, // Bottom left - Goals
    { x: 10, y: 70, anchor: "start", valueY: 60 }, // Top left - Shot attempts
  ]

return (
    <Card className="border-border/50 bg-card h-full flex flex-col">
      <CardHeader className="pb-2 shrink-0">
        <CardTitle className="text-lg">Player traits</CardTitle>
        <p className="text-sm text-muted-foreground flex items-center gap-1">
          Stats compared to other {position.toLowerCase()}s
          <HelpCircle className="w-4 h-4 cursor-help opacity-60" />
        </p>
      </CardHeader>
      <CardContent className="flex-1 flex items-center justify-center py-4">
        <div className="relative w-full max-w-[320px]">
          <svg viewBox={`0 0 ${size} ${size}`} className="w-full h-full overflow-visible">
            {/* Background hexagons - 4 levels */}
            {[1, 0.75, 0.5, 0.25].map((scale, i) => (
              <polygon
                key={i}
                points={getHexagonPoints(maxRadius * scale)}
                fill="none"
                stroke="hsl(var(--border))"
                strokeWidth="1"
                strokeDasharray="3,3"
                opacity={0.3}
              />
            ))}

{/* Lines from center to vertices */}
            {traits.map((_, i) => {
              const angle = (Math.PI * 2 * i) / 6 - Math.PI / 2
              const x = cx + maxRadius * Math.cos(angle)
              const y = cy + maxRadius * Math.sin(angle)
              return (
                <line
                  key={i}
                  x1={cx}
                  y1={cy}
                  x2={x}
                  y2={y}
                  stroke="hsl(var(--border))"
                  strokeWidth="1"
                  strokeDasharray="3,3"
                  opacity={0.3}
                />
              )
            })}

{/* Data polygon with gradient */}
            <defs>
              <linearGradient id="radarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#dc2626" />
                <stop offset="100%" stopColor="#991b1b" />
              </linearGradient>
            </defs>
            <polygon
              points={getDataPoints()}
              fill="url(#radarGradient)"
              fillOpacity="0.8"
              stroke="#ef4444"
              strokeWidth="2"
            />

{/* Data points at vertices */}
            {traits.map((trait, i) => {
              const angle = (Math.PI * 2 * i) / 6 - Math.PI / 2
              const radius = (trait.value / 100) * maxRadius
              const x = cx + radius * Math.cos(angle)
              const y = cy + radius * Math.sin(angle)
              return <circle key={i} cx={x} cy={y} r="4" fill="#ef4444" stroke="white" strokeWidth="2" />
            })}

{/* Labels with values */}
            {traits.map((trait, i) => {
              const pos = labelPositions[i]
              return (
                <g key={i}>
                  {/* Value */}
                  <text
                    x={pos.x}
                    y={pos.valueY}
                    textAnchor={pos.anchor as "start" | "middle" | "end"}
                    className="fill-red-500 font-bold"
                    fontSize="12"
                  >
                    {trait.value}%
                  </text>
                  {/* Label */}
                  <text
                    x={pos.x}
                    y={pos.y}
                    textAnchor={pos.anchor as "start" | "middle" | "end"}
                    className="fill-muted-foreground"
                    fontSize="9"
                  >
                    {trait.label}
                  </text>
                </g>
              )
            })}
          </svg>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/player-shot-map.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ChevronLeft, ChevronRight } from "lucide-react"
import Image from "next/image"

interface Shot {
  id: number
  x: number
  y: number
  result: "goal" | "saved" | "blocked" | "missed"
  type: "right_foot" | "left_foot" | "header"
  situation: "regular_play" | "free_kick" | "fast_break" | "set_piece" | "corner" | "penalty"
  xG: number
  xGOT: number
  matchId?: number
  homeTeam?: string
  awayTeam?: string
  homeScore?: number
  awayScore?: number
  homeLogo?: string
  awayLogo?: string
}

interface ShotMapProps {
  shots: Shot[]
  totalShots: number
  totalGoals: number
  totalXG: number
  onTargetPercentage: number
}

export function PlayerShotMap({ shots, totalShots, totalGoals, totalXG, onTargetPercentage }: ShotMapProps) {
  const [selectedShot, setSelectedShot] = useState<Shot | null>(shots.find((s) => s.result === "goal") || shots[0])
  const [activeFilter, setActiveFilter] = useState<string>("all")

const filters = [
    { key: "goals", label: "Goals", count: shots.filter((s) => s.result === "goal").length, isHighlight: true },
    { key: "regular_play", label: "Regular play", count: shots.filter((s) => s.situation === "regular_play").length },
    { key: "free_kick", label: "Free kick", count: shots.filter((s) => s.situation === "free_kick").length },
    { key: "fast_break", label: "Fast break", count: shots.filter((s) => s.situation === "fast_break").length },
    { key: "set_piece", label: "Set piece", count: shots.filter((s) => s.situation === "set_piece").length },
    { key: "corner", label: "From corner", count: shots.filter((s) => s.situation === "corner").length },
    { key: "right_foot", label: "Right foot", count: shots.filter((s) => s.type === "right_foot").length },
    { key: "left_foot", label: "Left foot", count: shots.filter((s) => s.type === "left_foot").length },
    { key: "header", label: "Header", count: shots.filter((s) => s.type === "header").length },
  ]

const filteredShots =
    activeFilter === "all"
      ? shots
      : activeFilter === "goals"
        ? shots.filter((s) => s.result === "goal")
        : shots.filter((s) => s.situation === activeFilter || s.type === activeFilter)

const navigateShot = (direction: "prev" | "next") => {
    if (!selectedShot) return
    const currentIndex = filteredShots.findIndex((s) => s.id === selectedShot.id)
    if (direction === "prev" && currentIndex > 0) {
      setSelectedShot(filteredShots[currentIndex - 1])
    } else if (direction === "next" && currentIndex < filteredShots.length - 1) {
      setSelectedShot(filteredShots[currentIndex + 1])
    }
  }

const getTypeLabel = (type: string) => {
    switch (type) {
      case "right_foot":
        return "Right foot"
      case "left_foot":
        return "Left foot"
      case "header":
        return "Header"
      default:
        return type
    }
  }

const getSituationLabel = (situation: string) => {
    switch (situation) {
      case "regular_play":
        return "Regular play"
      case "free_kick":
        return "Free kick"
      case "fast_break":
        return "Fast break"
      case "set_piece":
        return "Set piece"
      case "corner":
        return "From corner"
      case "penalty":
        return "Penalty"
      default:
        return situation
    }
  }

const getResultLabel = (result: string) => {
    switch (result) {
      case "goal":
        return "Goal"
      case "saved":
        return "Saved"
      case "blocked":
        return "Blocked"
      case "missed":
        return "Missed"
      default:
        return result
    }
  }

const pitchWidth = 400
  const pitchHeight = 320

const getShotPosition = (shot: Shot) => {
    const x = 60 + (shot.x / 100) * (pitchWidth - 120)
    const y = 30 + ((100 - shot.y) / 100) * (pitchHeight - 80)
    return { x, y }
  }

return (
    <Card className="border-border/50 bg-card overflow-hidden">
      <CardHeader className="pb-4 border-b border-border/30">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl font-bold">Season shot map</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">On target: {onTargetPercentage}%</p>
          </div>
          <div className="flex items-center gap-2 bg-muted/30 rounded-full p-1">
            <div className="w-8 h-8 rounded-full bg-foreground/10 flex items-center justify-center">
              <div className="w-3 h-3 rounded-full bg-foreground/60" />
            </div>
            <div className="w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground">
              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="3" width="7" height="7" />
                <rect x="14" y="3" width="7" height="7" />
                <rect x="3" y="14" width="7" height="7" />
                <rect x="14" y="14" width="7" height="7" />
              </svg>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="space-y-6">
            <div className="relative w-full rounded-2xl overflow-hidden" style={{ backgroundColor: "#1a1f2e" }}>
              <svg viewBox={`0 0 ${pitchWidth} ${pitchHeight}`} className="w-full" preserveAspectRatio="xMidYMid meet">
                {/* Pitch background with gradient */}
                <defs>
                  <linearGradient id="pitchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stopColor="#1e2433" />
                    <stop offset="100%" stopColor="#151a26" />
                  </linearGradient>
                </defs>
                <rect x="0" y="0" width={pitchWidth} height={pitchHeight} fill="url(#pitchGradient)" />

{/* Outer boundary with rounded corners */}
                <rect
                  x="40"
                  y="20"
                  width={pitchWidth - 80}
                  height={pitchHeight - 40}
                  fill="none"
                  stroke="#3d4556"
                  strokeWidth="2"
                  rx="8"
                />

{/* Penalty area */}
                <rect
                  x="90"
                  y="150"
                  width={pitchWidth - 180}
                  height="130"
                  fill="none"
                  stroke="#3d4556"
                  strokeWidth="2"
                  rx="4"
                />

{/* Goal area (6-yard box) */}
                <rect
                  x="140"
                  y="220"
                  width={pitchWidth - 280}
                  height="60"
                  fill="none"
                  stroke="#3d4556"
                  strokeWidth="2"
                  rx="2"
                />

{/* Penalty arc */}
                <path
                  d={`M 110 150 Q ${pitchWidth / 2} 90 ${pitchWidth - 110} 150`}
                  fill="none"
                  stroke="#3d4556"
                  strokeWidth="2"
                />

{/* Penalty spot */}
                <circle cx={pitchWidth / 2} cy="195" r="4" fill="#4a5568" />

{/* Goal frame */}
                <g>
                  {/* Goal net background */}
                  <rect
                    x="155"
                    y="278"
                    width={pitchWidth - 310}
                    height="22"
                    fill="#252b3a"
                    stroke="#4a5568"
                    strokeWidth="2"
                    rx="2"
                  />
                  {/* Net vertical lines */}
                  {[...Array(8)].map((_, i) => (
                    <line
                      key={`v${i}`}
                      x1={165 + i * 10}
                      y1="280"
                      x2={165 + i * 10}
                      y2="298"
                      stroke="#3d4556"
                      strokeWidth="1"
                      opacity="0.5"
                    />
                  ))}
                  {/* Net horizontal lines */}
                  {[...Array(3)].map((_, i) => (
                    <line
                      key={`h${i}`}
                      x1="157"
                      y1={283 + i * 5}
                      x2={pitchWidth - 157}
                      y2={283 + i * 5}
                      stroke="#3d4556"
                      strokeWidth="1"
                      opacity="0.5"
                    />
                  ))}
                  {/* Goal posts */}
                  <line x1="155" y1="278" x2="155" y2="300" stroke="#5a6378" strokeWidth="3" strokeLinecap="round" />
                  <line
                    x1={pitchWidth - 155}
                    y1="278"
                    x2={pitchWidth - 155}
                    y2="300"
                    stroke="#5a6378"
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                  {/* Crossbar */}
                  <line
                    x1="155"
                    y1="278"
                    x2={pitchWidth - 155}
                    y2="278"
                    stroke="#5a6378"
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                </g>

{/* Shot positions */}
                {filteredShots.map((shot) => {
                  const pos = getShotPosition(shot)
                  const isGoal = shot.result === "goal"
                  const isSelected = selectedShot?.id === shot.id
                  const goalCenterX = pitchWidth / 2
                  const goalY = 278

return (
                    <g key={shot.id} className="cursor-pointer" onClick={() => setSelectedShot(shot)}>
                      {/* Connection line to goal for goals */}
                      {isGoal && (
                        <line
                          x1={pos.x}
                          y1={pos.y}
                          x2={goalCenterX}
                          y2={goalY}
                          stroke="#ef4444"
                          strokeWidth={isSelected ? "2.5" : "1.5"}
                          opacity={isSelected ? 1 : 0.7}
                        />
                      )}

{/* Shot marker */}
                      {isGoal ? (
                        <>
                          {/* Goal marker - ring with center dot */}
                          <circle
                            cx={pos.x}
                            cy={pos.y}
                            r={isSelected ? "14" : "11"}
                            fill="none"
                            stroke="#ef4444"
                            strokeWidth={isSelected ? "3" : "2.5"}
                          />
                          <circle cx={pos.x} cy={pos.y} r="5" fill="#ef4444" />
                        </>
                      ) : (
                        <>
                          {/* Non-goal - gear shape */}
                          <circle
                            cx={pos.x}
                            cy={pos.y}
                            r={isSelected ? "9" : "7"}
                            fill={shot.result === "saved" ? "#5a6378" : "#3d4556"}
                            stroke={isSelected ? "#9ca3af" : "none"}
                            strokeWidth="2"
                          />
                          {/* Small dots for gear effect */}
                          {[0, 60, 120, 180, 240, 300].map((angle, i) => {
                            const rad = (angle * Math.PI) / 180
                            const dotR = isSelected ? 5 : 4
                            const dotX = pos.x + dotR * Math.cos(rad)
                            const dotY = pos.y + dotR * Math.sin(rad)
                            return (
                              <circle
                                key={i}
                                cx={dotX}
                                cy={dotY}
                                r="2"
                                fill={shot.result === "saved" ? "#6b7280" : "#4b5563"}
                              />
                            )
                          })}
                        </>
                      )}
                    </g>
                  )
                })}
              </svg>
            </div>

{/* Summary stats */}
            <div className="flex justify-center gap-10 py-2">
              <div className="text-center">
                <p className="text-3xl font-bold">{totalShots}</p>
                <p className="text-sm text-muted-foreground">Shots</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold">{totalGoals}</p>
                <p className="text-sm text-muted-foreground">Goals</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold">{totalXG.toFixed(2)}</p>
                <p className="text-sm text-muted-foreground">xG</p>
              </div>
            </div>
          </div>

{/* Shot Details & Filters */}
          <div className="space-y-6">
            {/* Shot navigation */}
            {selectedShot && (
              <div className="flex items-center justify-between p-4 bg-muted/20 rounded-xl border border-border/30">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => navigateShot("prev")}
                  className="rounded-full bg-muted/50 hover:bg-muted h-10 w-10"
                >
                  <ChevronLeft className="w-5 h-5" />
                </Button>

<div className="flex items-center gap-4">
                  {selectedShot.homeLogo ? (
                    <Image
                      src={selectedShot.homeLogo || "/placeholder.svg"}
                      alt=""
                      width={32}
                      height={32}
                      className="rounded"
                    />
                  ) : (
                    <div className="w-8 h-8 bg-red-600/20 rounded flex items-center justify-center">
                      <div className="w-5 h-5 bg-red-600 rounded-sm" />
                    </div>
                  )}
                  <span className="font-bold text-xl">
                    {selectedShot.homeScore ?? 0} - {selectedShot.awayScore ?? 0}
                  </span>
                  {selectedShot.awayLogo ? (
                    <Image
                      src={selectedShot.awayLogo || "/placeholder.svg"}
                      alt=""
                      width={32}
                      height={32}
                      className="rounded"
                    />
                  ) : (
                    <div className="w-8 h-8 bg-amber-600/20 rounded flex items-center justify-center">
                      <div className="w-5 h-5 bg-amber-600 rounded-sm" />
                    </div>
                  )}
                </div>

<Button
                  variant="ghost"
                  size="icon"
                  onClick={() => navigateShot("next")}
                  className="rounded-full bg-muted/50 hover:bg-muted h-10 w-10"
                >
                  <ChevronRight className="w-5 h-5" />
                </Button>
              </div>
            )}

{/* Shot details */}
            {selectedShot && (
              <div className="flex gap-6">
                <div className="flex-1 space-y-1">
                  <div className="flex justify-between py-3 border-b border-border/30">
                    <span className="text-muted-foreground">Shot type</span>
                    <span className="font-semibold">{getTypeLabel(selectedShot.type)}</span>
                  </div>
                  <div className="flex justify-between py-3 border-b border-border/30">
                    <span className="text-muted-foreground">Situation</span>
                    <span className="font-semibold">{getSituationLabel(selectedShot.situation)}</span>
                  </div>
                  <div className="flex justify-between py-3">
                    <span className="text-muted-foreground">Result</span>
                    <span className={`font-semibold ${selectedShot.result === "goal" ? "text-green-500" : ""}`}>
                      {getResultLabel(selectedShot.result)}
                    </span>
                  </div>
                </div>

{/* Mini goal with xG/xGOT */}
                <div className="flex flex-col items-center gap-3 p-4 border border-border/30 rounded-xl bg-muted/10 min-w-[140px]">
                  {/* Mini goal frame */}
                  <div className="relative w-24 h-14 border-2 border-muted-foreground/50 rounded-t-md overflow-hidden">
                    {/* Net lines */}
                    <div className="absolute inset-0">
                      {[...Array(7)].map((_, i) => (
                        <div
                          key={i}
                          className="absolute h-full border-l border-muted-foreground/20"
                          style={{ left: `${(i + 1) * 12.5}%` }}
                        />
                      ))}
                      {[...Array(4)].map((_, i) => (
                        <div
                          key={i}
                          className="absolute w-full border-t border-muted-foreground/20"
                          style={{ top: `${(i + 1) * 20}%` }}
                        />
                      ))}
                    </div>
                    {selectedShot.result === "goal" && (
                      <div
                        className="absolute w-3 h-3 bg-white rounded-full shadow-lg"
                        style={{ left: "65%", top: "55%", transform: "translate(-50%, -50%)" }}
                      />
                    )}
                  </div>
                  <div className="flex gap-8">
                    <div className="text-center">
                      <p className="font-bold text-xl">{selectedShot.xG.toFixed(2)}</p>
                      <p className="text-xs text-muted-foreground">xG</p>
                    </div>
                    <div className="text-center">
                      <p className="font-bold text-xl">{selectedShot.xGOT.toFixed(2)}</p>
                      <p className="text-xs text-muted-foreground">xGOT</p>
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Filters */}
            <div className="pt-2">
              <p className="font-semibold text-lg mb-4">Filter</p>
              <div className="flex flex-wrap gap-2">
                {filters.map((filter) => (
                  <Badge
                    key={filter.key}
                    variant={activeFilter === filter.key ? "default" : "outline"}
                    className={`cursor-pointer transition-all px-4 py-2 text-sm rounded-full ${
                      activeFilter === filter.key
                        ? "bg-red-600 hover:bg-red-700 text-white border-red-600"
                        : "hover:bg-muted border-border/50"
                    }`}
                    onClick={() => setActiveFilter(activeFilter === filter.key ? "all" : filter.key)}
                  >
                    {filter.label} <span className="ml-1.5 font-bold">{filter.count}</span>
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/players/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Star, MapPin, Trophy, ArrowLeft, Loader2, AlertCircle, Users } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"
import useSWR from "swr"
import Image from "next/image"
import { PlayerRadarChart } from "@/components/player-radar-chart"
import { PlayerShotMap } from "@/components/player-shot-map"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

// Mock data for when API is not available
const mockPlayer = {
  id: "1100",
  name: "เออร์ลิง ฮาลันด์",
  firstname: "Erling",
  lastname: "Haaland",
  photo: null,
  nationality: "นอร์เวย์",
  age: 24,
  height: "194 cm",
  weight: "88 kg",
  injured: false,
  birth: {
    date: "2000-07-21",
    place: "Leeds",
    country: "England",
  },
  team: {
    id: "50",
    name: "แมนเชสเตอร์ ซิตี้",
    logo: null,
  },
  position: "กองหน้า",
  statistics: {
    games: {
      appearences: 26,
      lineups: 25,
      minutes: 2340,
      rating: "8.20",
      captain: false,
    },
    goals: {
      total: 28,
      assists: 5,
      conceded: 0,
      saves: 0,
    },
    shots: {
      total: 98,
      on: 62,
    },
    passes: {
      total: 456,
      key: 25,
      accuracy: 78,
    },
    tackles: {
      total: 8,
      blocks: 2,
      interceptions: 5,
    },
    duels: {
      total: 245,
      won: 125,
    },
    dribbles: {
      attempts: 35,
      success: 18,
    },
    fouls: {
      drawn: 32,
      committed: 15,
    },
    cards: {
      yellow: 2,
      yellowred: 0,
      red: 0,
    },
    penalty: {
      won: 3,
      commited: 0,
      scored: 5,
      missed: 1,
      saved: 0,
    },
  },
  allSeasonStats: [
    {
      season: "2024",
      league: "Premier League",
      team: "แมนเชสเตอร์ ซิตี้",
      games: 26,
      goals: 28,
      assists: 5,
      rating: "8.20",
    },
    {
      season: "2023",
      league: "Premier League",
      team: "แมนเชสเตอร์ ซิตี้",
      games: 35,
      goals: 36,
      assists: 8,
      rating: "8.45",
    },
    {
      season: "2022",
      league: "Premier League",
      team: "แมนเชสเตอร์ ซิตี้",
      games: 35,
      goals: 36,
      assists: 8,
      rating: "8.30",
    },
  ],
  transfers: [],
}

const mockShots = [
  {
    id: 1,
    x: 48,
    y: 75,
    result: "goal" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.43,
    xGOT: 0.98,
    homeScore: 2,
    awayScore: 3,
  },
  {
    id: 2,
    x: 52,
    y: 70,
    result: "goal" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.35,
    xGOT: 0.72,
    homeScore: 1,
    awayScore: 2,
  },
  {
    id: 3,
    x: 45,
    y: 80,
    result: "goal" as const,
    type: "header" as const,
    situation: "corner" as const,
    xG: 0.28,
    xGOT: 0.65,
    homeScore: 3,
    awayScore: 1,
  },
  {
    id: 4,
    x: 55,
    y: 65,
    result: "goal" as const,
    type: "left_foot" as const,
    situation: "free_kick" as const,
    xG: 0.15,
    xGOT: 0.45,
    homeScore: 2,
    awayScore: 0,
  },
  {
    id: 5,
    x: 40,
    y: 55,
    result: "saved" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.22,
    xGOT: 0.0,
    homeScore: 1,
    awayScore: 1,
  },
  {
    id: 6,
    x: 60,
    y: 50,
    result: "saved" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.18,
    xGOT: 0.0,
    homeScore: 0,
    awayScore: 2,
  },
  {
    id: 7,
    x: 35,
    y: 45,
    result: "blocked" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.12,
    xGOT: 0.0,
    homeScore: 2,
    awayScore: 2,
  },
  {
    id: 8,
    x: 58,
    y: 60,
    result: "missed" as const,
    type: "header" as const,
    situation: "set_piece" as const,
    xG: 0.25,
    xGOT: 0.0,
    homeScore: 3,
    awayScore: 0,
  },
  {
    id: 9,
    x: 42,
    y: 72,
    result: "saved" as const,
    type: "right_foot" as const,
    situation: "fast_break" as const,
    xG: 0.45,
    xGOT: 0.0,
    homeScore: 1,
    awayScore: 3,
  },
  {
    id: 10,
    x: 50,
    y: 40,
    result: "missed" as const,
    type: "right_foot" as const,
    situation: "regular_play" as const,
    xG: 0.08,
    xGOT: 0.0,
    homeScore: 2,
    awayScore: 1,
  },
]

// Stat progress bar component
function StatBar({
  value,
  max,
  color = "primary",
}: { value: number; max: number; color?: "primary" | "success" | "warning" | "destructive" }) {
  const percentage = Math.min((value / max) * 100, 100)
  const colorClasses = {
    primary: "bg-primary",
    success: "bg-green-500",
    warning: "bg-amber-500",
    destructive: "bg-red-500",
  }

return (
    <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
      <div
        className={`h-full ${colorClasses[color]} transition-all duration-500`}
        style={{ width: `${percentage}%` }}
      />
    </div>
  )
}

// Get stat color based on percentile/value
function getStatColor(value: number, max: number): "success" | "warning" | "destructive" {
  const percentage = (value / max) * 100
  if (percentage >= 70) return "success"
  if (percentage >= 40) return "warning"
  return "destructive"
}

export default function PlayerDetailPage() {
  const params = useParams()
  const playerId = params.id as string

const { data, isLoading, error } = useSWR(`/api/football/players/${playerId}`, fetcher)

const player = data?.data || mockPlayer
  const hasApiData = !!data?.data

if (isLoading) {
    return (
      <div className="min-h-screen">
        <Navigation />
        <main className="container mx-auto px-4 py-16">
          <div className="flex items-center justify-center min-h-[60vh]">
            <Loader2 className="w-8 h-8 animate-spin text-primary" />
          </div>
        </main>
      </div>
    )
  }

const stats = player.statistics

const playerTraits = {
    touches: Math.max(25, Math.min(Math.round(((stats.passes.total * 1.8) / 2500) * 100), 95)),
    chancesCreated: Math.max(20, Math.min(Math.round((stats.passes.key / 50) * 100), 95)),
    shotAttempts: Math.max(20, Math.min(Math.round((stats.shots.total / 100) * 100), 95)),
    goals: Math.max(15, Math.min(Math.round((stats.goals.total / 30) * 100), 95)),
    aerialDuelsWon: stats.duels.total > 0 ? Math.max(20, Math.round((stats.duels.won / stats.duels.total) * 100)) : 40,
    defensiveContributions: Math.max(
      15,
      Math.min(Math.round(((stats.tackles.total + stats.tackles.interceptions + stats.tackles.blocks) / 80) * 100), 90),
    ),
  }

// Season performance stats for the detailed view
  const shootingStats = [
    { label: "ประตู", value: stats.goals.total, max: 40 },
    { label: "Expected goals (xG)", value: (stats.goals.total * 0.85).toFixed(2), max: 35, isCalculated: true },
    { label: "xG on target (xGOT)", value: (stats.shots.on * 0.15).toFixed(2), max: 15, isCalculated: true },
    {
      label: "Non-penalty xG",
      value: ((stats.goals.total - stats.penalty.scored) * 0.85).toFixed(2),
      max: 30,
      isCalculated: true,
    },
    { label: "การยิงทั้งหมด", value: stats.shots.total, max: 150 },
    { label: "การยิงโดนกรอบ", value: stats.shots.on, max: 80 },
  ]

const passingStats = [
    { label: "แอสซิสต์", value: stats.goals.assists, max: 20 },
    { label: "Expected assists (xA)", value: (stats.goals.assists * 1.1).toFixed(2), max: 18, isCalculated: true },
    { label: "พาสสำเร็จ", value: stats.passes.total, max: 2000 },
    { label: "ความแม่นยำพาส %", value: stats.passes.accuracy, max: 100, isPercentage: true },
    { label: "Key passes", value: stats.passes.key, max: 80 },
  ]

const possessionStats = [
    { label: "เลี้ยงบอลสำเร็จ", value: stats.dribbles.success, max: 100 },
    {
      label: "เลี้ยงบอลสำเร็จ %",
      value: stats.dribbles.attempts > 0 ? ((stats.dribbles.success / stats.dribbles.attempts) * 100).toFixed(1) : 0,
      max: 100,
      isPercentage: true,
    },
    { label: "สัมผัสบอล", value: Math.round(stats.passes.total * 1.5), max: 3000 },
    { label: "ถูกแย่งบอล", value: stats.fouls.committed, max: 50 },
    { label: "ได้ฟรีคิก", value: stats.fouls.drawn, max: 60 },
  ]

const defendingStats = [
    { label: "เข้าสกัด", value: stats.tackles.total, max: 80 },
    { label: "ดวลชนะ", value: stats.duels.won, max: 200 },
    {
      label: "ดวลชนะ %",
      value: stats.duels.total > 0 ? ((stats.duels.won / stats.duels.total) * 100).toFixed(1) : 0,
      max: 100,
      isPercentage: true,
    },
    { label: "สกัดกั้น", value: stats.tackles.interceptions, max: 50 },
    { label: "บล็อก", value: stats.tackles.blocks, max: 30 },
    { label: "กู้บอล", value: Math.round(stats.tackles.total * 2.5), max: 200 },
  ]

const disciplineStats = [
    { label: "ใบเหลือง", value: stats.cards.yellow, max: 15 },
    { label: "ใบแดง", value: stats.cards.red, max: 3 },
  ]

return (
    <div className="min-h-screen bg-background">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-7xl mx-auto space-y-8">
          <Link
            href="/players"
            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            กลับไปหน้านักเตะ
          </Link>

{!hasApiData && (
            <div className="flex items-center gap-2 text-sm text-amber-500 bg-amber-500/10 px-3 py-2 rounded-md w-fit">
              <AlertCircle className="w-4 h-4" />
              <span>กำลังใช้ข้อมูลตัวอย่าง - เพิ่ม APIFOOTBALL_KEY เพื่อดูข้อมูลจริง</span>
            </div>
          )}

<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
            {/* Player Header Card - Takes 8 columns */}
            <Card className="border-border/50 overflow-hidden lg:col-span-8 flex flex-col">
              {/* Red Header with Player Info */}
              <div className="bg-gradient-to-br from-red-600 via-red-600 to-red-700 p-6 md:p-8">
                <div className="flex flex-col sm:flex-row items-center gap-6">
                  {/* Player Photo */}
                  <div className="relative shrink-0">
                    {player.photo ? (
                      <Image
                        src={player.photo || "/placeholder.svg"}
                        alt={player.name}
                        width={140}
                        height={140}
                        className="w-28 h-28 md:w-32 md:h-32 rounded-full bg-white/10 object-cover border-4 border-white/30 shadow-xl"
                      />
                    ) : (
                      <div className="w-28 h-28 md:w-32 md:h-32 rounded-full bg-white/10 flex items-center justify-center border-4 border-white/30 shadow-xl">
                        <Users className="w-14 h-14 text-white/60" />
                      </div>
                    )}
                    {player.injured && (
                      <div className="absolute -bottom-1 -right-1 bg-red-500 text-white text-xs px-2 py-1 rounded-full font-medium">
                        บาดเจ็บ
                      </div>
                    )}
                  </div>

{/* Player Name & Team */}
                  <div className="flex-1 text-center sm:text-left">
                    <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-tight">
                      {player.name}
                    </h1>
                    <div className="flex items-center gap-3 justify-center sm:justify-start mt-2">
                      {player.team?.logo && (
                        <Image
                          src={player.team.logo || "/placeholder.svg"}
                          alt={player.team.name}
                          width={24}
                          height={24}
                          className="w-6 h-6"
                        />
                      )}
                      <span className="text-base text-white/90 font-medium">{player.team?.name}</span>
                    </div>
                  </div>

{/* Follow Button */}
                  <Button
                    variant="secondary"
                    size="default"
                    className="gap-2 shrink-0 bg-white hover:bg-white/90 text-red-600 font-semibold shadow-lg"
                  >
                    <Star className="w-4 h-4" />
                    ติดตาม
                  </Button>
                </div>
              </div>

{/* Player Details Grid - flex-1 to fill remaining space */}
              <CardContent className="p-0 flex-1">
                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 h-full divide-x divide-y lg:divide-y-0 divide-border/50">
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <p className="text-xl md:text-2xl font-bold text-foreground">
                      {player.height?.replace(" cm", "") || "-"}
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">ส่วนสูง (cm)</p>
                  </div>
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <p className="text-xl md:text-2xl font-bold text-foreground">{stats.games.lineups || "-"}</p>
                    <p className="text-xs text-muted-foreground mt-1">เบอร์เสื้อ</p>
                  </div>
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <p className="text-xl md:text-2xl font-bold text-foreground">
                      {player.age} <span className="text-base font-normal">ปี</span>
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">{player.birth?.date || "-"}</p>
                  </div>
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <p className="text-lg md:text-xl font-bold text-foreground">{player.position}</p>
                    <p className="text-xs text-muted-foreground mt-1">ตำแหน่ง</p>
                  </div>
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <div className="flex items-center gap-1.5">
                      <MapPin className="w-3.5 h-3.5 text-muted-foreground" />
                      <p className="text-base md:text-lg font-bold text-foreground">{player.nationality}</p>
                    </div>
                    <p className="text-xs text-muted-foreground mt-1">สัญชาติ</p>
                  </div>
                  <div className="p-4 md:p-5 flex flex-col items-center justify-center hover:bg-muted/30 transition-colors">
                    <p className="text-xl md:text-2xl font-bold text-foreground">
                      {player.weight?.replace(" kg", "") || "-"}
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">น้ำหนัก (kg)</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Player Traits Radar Chart - Takes 4 columns with same height */}
            <div className="lg:col-span-4 h-full">
              <PlayerRadarChart position={player.position} stats={playerTraits} />
            </div>
          </div>
          {/* </CHANGE> */}

{/* Season Stats Summary */}
          <Card className="border-border/50 bg-card">
            <CardHeader className="pb-4">
              <div className="flex items-center gap-2">
                <Trophy className="w-5 h-5 text-primary" />
                <CardTitle>Premier League 2024/2025</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <p className="text-3xl font-bold text-primary">{stats.goals.total}</p>
                  <p className="text-sm text-muted-foreground">ประตู</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <p className="text-3xl font-bold text-primary">{stats.goals.assists}</p>
                  <p className="text-sm text-muted-foreground">แอสซิสต์</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <p className="text-3xl font-bold text-primary">{stats.games.lineups}</p>
                  <p className="text-sm text-muted-foreground">ลงสนาม</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <p className="text-3xl font-bold text-primary">{stats.games.appearences}</p>
                  <p className="text-sm text-muted-foreground">แมทช์</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <p className="text-3xl font-bold text-primary">{stats.games.minutes?.toLocaleString()}</p>
                  <p className="text-sm text-muted-foreground">นาที</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <Badge className="text-lg px-3 py-1 bg-green-600">{stats.games.rating}</Badge>
                  <p className="text-sm text-muted-foreground mt-1">เรตติ้ง</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <div className="flex items-center justify-center gap-1">
                    <div className="w-4 h-5 bg-yellow-400 rounded-sm" />
                    <span className="text-xl font-bold">{stats.cards.yellow}</span>
                  </div>
                  <p className="text-sm text-muted-foreground">ใบเหลือง</p>
                </div>
                <div className="text-center p-3 bg-muted/30 rounded-lg">
                  <div className="flex items-center justify-center gap-1">
                    <div className="w-4 h-5 bg-red-500 rounded-sm" />
                    <span className="text-xl font-bold">{stats.cards.red}</span>
                  </div>
                  <p className="text-sm text-muted-foreground">ใบแดง</p>
                </div>
              </div>
            </CardContent>
          </Card>

<PlayerShotMap
            shots={mockShots}
            totalShots={stats.shots.total}
            totalGoals={stats.goals.total}
            totalXG={stats.goals.total * 0.85}
            onTargetPercentage={stats.shots.total > 0 ? Math.round((stats.shots.on / stats.shots.total) * 100) : 0}
          />

{/* Detailed Stats Tabs */}
          <Tabs defaultValue="performance" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="performance">สถิติฤดูกาล</TabsTrigger>
              <TabsTrigger value="career">สถิติอาชีพ</TabsTrigger>
              <TabsTrigger value="info">ข้อมูลส่วนตัว</TabsTrigger>
              <TabsTrigger value="transfers">ประวัติย้ายทีม</TabsTrigger>
            </TabsList>

<TabsContent value="performance" className="space-y-6 mt-6">
              {/* Season Performance - Similar to reference image */}
              <Card className="border-border/50">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Season performance</CardTitle>
                      <p className="text-sm text-muted-foreground mt-1">
                        Minutes played: {stats.games.minutes?.toLocaleString()}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button variant="outline" size="sm">
                        Total
                      </Button>
                      <Button variant="ghost" size="sm">
                        Per 90
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-8">
                  {/* Shooting */}
                  <div>
                    <h4 className="font-semibold mb-4 text-muted-foreground">Shooting</h4>
                    <div className="space-y-3">
                      {shootingStats.map((stat, i) => (
                        <div key={i} className="flex items-center gap-4">
                          <span className="text-sm w-40 text-muted-foreground">{stat.label}</span>
                          <span className="font-bold w-16 text-right">{stat.value}</span>
                          <StatBar
                            value={typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value}
                            max={stat.max}
                            color={getStatColor(
                              typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value,
                              stat.max,
                            )}
                          />
                        </div>
                      ))}
                    </div>
                  </div>

{/* Passing */}
                  <div>
                    <h4 className="font-semibold mb-4 text-muted-foreground">Passing</h4>
                    <div className="space-y-3">
                      {passingStats.map((stat, i) => (
                        <div key={i} className="flex items-center gap-4">
                          <span className="text-sm w-40 text-muted-foreground">{stat.label}</span>
                          <span className="font-bold w-16 text-right">
                            {stat.value}
                            {stat.isPercentage ? "%" : ""}
                          </span>
                          <StatBar
                            value={typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value}
                            max={stat.max}
                            color={getStatColor(
                              typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value,
                              stat.max,
                            )}
                          />
                        </div>
                      ))}
                    </div>
                  </div>

{/* Possession */}
                  <div>
                    <h4 className="font-semibold mb-4 text-muted-foreground">Possession</h4>
                    <div className="space-y-3">
                      {possessionStats.map((stat, i) => (
                        <div key={i} className="flex items-center gap-4">
                          <span className="text-sm w-40 text-muted-foreground">{stat.label}</span>
                          <span className="font-bold w-16 text-right">
                            {stat.value}
                            {stat.isPercentage ? "%" : ""}
                          </span>
                          <StatBar
                            value={typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value}
                            max={stat.max}
                            color={getStatColor(
                              typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value,
                              stat.max,
                            )}
                          />
                        </div>
                      ))}
                    </div>
                  </div>

{/* Defending */}
                  <div>
                    <h4 className="font-semibold mb-4 text-muted-foreground">Defending</h4>
                    <div className="space-y-3">
                      {defendingStats.map((stat, i) => (
                        <div key={i} className="flex items-center gap-4">
                          <span className="text-sm w-40 text-muted-foreground">{stat.label}</span>
                          <span className="font-bold w-16 text-right">
                            {stat.value}
                            {stat.isPercentage ? "%" : ""}
                          </span>
                          <StatBar
                            value={typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value}
                            max={stat.max}
                            color={getStatColor(
                              typeof stat.value === "string" ? Number.parseFloat(stat.value) : stat.value,
                              stat.max,
                            )}
                          />
                        </div>
                      ))}
                    </div>
                  </div>

{/* Discipline */}
                  <div>
                    <h4 className="font-semibold mb-4 text-muted-foreground">Discipline</h4>
                    <div className="space-y-3">
                      {disciplineStats.map((stat, i) => (
                        <div key={i} className="flex items-center gap-4">
                          <span className="text-sm w-40 text-muted-foreground">{stat.label}</span>
                          <span className="font-bold w-16 text-right">{stat.value}</span>
                          <StatBar
                            value={stat.value}
                            max={stat.max}
                            color={
                              stat.value > stat.max * 0.5
                                ? "destructive"
                                : stat.value > stat.max * 0.3
                                  ? "warning"
                                  : "success"
                            }
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="career" className="space-y-4 mt-6">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle>สถิติตลอดอาชีพ</CardTitle>
                </CardHeader>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="border-b border-border/50 bg-muted/30">
                      <tr className="text-sm text-muted-foreground">
                        <th className="text-left py-3 px-4 font-medium">ฤดูกาล</th>
                        <th className="text-left py-3 px-4 font-medium">ลีก</th>
                        <th className="text-left py-3 px-4 font-medium">ทีม</th>
                        <th className="text-center py-3 px-3 font-medium">นัดที่เล่น</th>
                        <th className="text-center py-3 px-3 font-medium">ประตู</th>
                        <th className="text-center py-3 px-3 font-medium">แอสซิสต์</th>
                        <th className="text-center py-3 px-4 font-medium">เรตติ้ง</th>
                      </tr>
                    </thead>
                    <tbody>
                      {player.allSeasonStats?.map((season: any, i: number) => (
                        <tr key={i} className="border-b border-border/30 hover:bg-muted/50 transition-colors">
                          <td className="py-4 px-4 font-semibold">{season.season}</td>
                          <td className="py-4 px-4">{season.league}</td>
                          <td className="py-4 px-4 flex items-center gap-2">
                            {season.teamLogo && (
                              <Image
                                src={season.teamLogo || "/placeholder.svg"}
                                alt={season.team}
                                width={20}
                                height={20}
                              />
                            )}
                            {season.team}
                          </td>
                          <td className="text-center py-4 px-3">{season.games}</td>
                          <td className="text-center py-4 px-3">
                            <span className="font-bold text-primary">{season.goals}</span>
                          </td>
                          <td className="text-center py-4 px-3">{season.assists}</td>
                          <td className="text-center py-4 px-4">
                            <Badge variant={Number.parseFloat(season.rating) >= 7 ? "default" : "secondary"}>
                              {season.rating}
                            </Badge>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="info" className="space-y-6 mt-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="border-border/50">
                  <CardHeader>
                    <CardTitle>ข้อมูลส่วนตัว</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ชื่อเต็ม</span>
                      <span className="font-semibold">
                        {player.firstname} {player.lastname}
                      </span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">วันเกิด</span>
                      <span className="font-semibold">{player.birth?.date || "-"}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">อายุ</span>
                      <span className="font-semibold">{player.age} ปี</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">สัญชาติ</span>
                      <span className="font-semibold">{player.nationality}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ส่วนสูง</span>
                      <span className="font-semibold">{player.height || "-"}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">น้ำหนัก</span>
                      <span className="font-semibold">{player.weight || "-"}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">บาดเจ็บ</span>
                      <span className={`font-semibold ${player.injured ? "text-red-500" : "text-green-500"}`}>
                        {player.injured ? "บาดเจ็บ" : "ปกติ"}
                      </span>
                    </div>
                    <div className="flex justify-between py-2">
                      <span className="text-muted-foreground">สถานที่เกิด</span>
                      <span className="font-semibold">
                        {player.birth?.place || "-"}, {player.birth?.country || "-"}
                      </span>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-border/50">
                  <CardHeader>
                    <CardTitle>สถิติสำคัญ</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ตำแหน่ง</span>
                      <span className="font-semibold">{player.position}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">เรตติ้งเฉลี่ย</span>
                      <span className="font-semibold text-primary">{stats.games.rating}</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ประตูต่อนัด</span>
                      <span className="font-semibold text-primary">
                        {stats.games.appearences > 0
                          ? (stats.goals.total / stats.games.appearences).toFixed(2)
                          : "0.00"}
                      </span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ความแม่นยำพาส</span>
                      <span className="font-semibold">{stats.passes.accuracy}%</span>
                    </div>
                    <div className="flex justify-between py-2 border-b border-border/30">
                      <span className="text-muted-foreground">ดวลชนะ %</span>
                      <span className="font-semibold">
                        {stats.duels.total > 0 ? ((stats.duels.won / stats.duels.total) * 100).toFixed(1) : "0"}%
                      </span>
                    </div>
                    <div className="flex justify-between py-2">
                      <span className="text-muted-foreground">เลี้ยงบอลสำเร็จ %</span>
                      <span className="font-semibold">
                        {stats.dribbles.attempts > 0
                          ? ((stats.dribbles.success / stats.dribbles.attempts) * 100).toFixed(1)
                          : "0"}
                        %
                      </span>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="transfers" className="space-y-4 mt-6">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle>ประวัติการย้ายทีม</CardTitle>
                </CardHeader>
                <CardContent>
                  {player.transfers && player.transfers.length > 0 ? (
                    <div className="space-y-4">
                      {player.transfers.map((transfer: any, i: number) => (
                        <div key={i} className="flex items-center gap-4 p-4 bg-muted/30 rounded-lg">
                          <div className="flex items-center gap-2 flex-1">
                            {transfer.from?.logo && (
                              <Image
                                src={transfer.from.logo || "/placeholder.svg"}
                                alt={transfer.from.name}
                                width={32}
                                height={32}
                              />
                            )}
                            <span className="font-medium">{transfer.from?.name}</span>
                          </div>
                          <div className="flex flex-col items-center">
                            <Badge variant="outline">{transfer.type}</Badge>
                            <span className="text-xs text-muted-foreground mt-1">{transfer.date}</span>
                          </div>
                          <div className="flex items-center gap-2 flex-1 justify-end">
                            <span className="font-medium">{transfer.to?.name}</span>
                            {transfer.to?.logo && (
                              <Image
                                src={transfer.to.logo || "/placeholder.svg"}
                                alt={transfer.to.name}
                                width={32}
                                height={32}
                              />
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-center text-muted-foreground py-8">ไม่มีข้อมูลการย้ายทีม</p>
                  )}
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/news-feed.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight, Clock, RefreshCw, Loader2, Newspaper } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import useSWR from "swr"
import { useState } from "react"

interface NewsItem {
  id: string
  title: string
  description?: string
  source: string
  timeAgo: string
  image: string
  isFeatured?: boolean
  url?: string
}

interface NewsResponse {
  articles: NewsItem[]
  lastUpdated: string
  source: string
}

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export function NewsFeed() {
  const [isRefreshing, setIsRefreshing] = useState(false)

const { data, error, isLoading, mutate } = useSWR<NewsResponse>("/api/news", fetcher, {
    refreshInterval: 30 * 60 * 1000,
    revalidateOnFocus: false,
    dedupingInterval: 5 * 60 * 1000,
  })

const handleRefresh = async () => {
    setIsRefreshing(true)
    await mutate()
    setIsRefreshing(false)
  }

if (isLoading) {
    return (
      <Card className="border-border/50">
        <CardContent className="flex items-center justify-center py-20">
          <Loader2 className="w-6 h-6 animate-spin text-primary" />
          <span className="ml-2 text-muted-foreground">กำลังโหลดข่าว...</span>
        </CardContent>
      </Card>
    )
  }

const newsItems = data?.articles || []
  const featuredNews = newsItems.find((item) => item.isFeatured)
  const regularNews = newsItems.filter((item) => !item.isFeatured).slice(0, 3)

return (
    <Card className="border-border/50 overflow-hidden">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Newspaper className="w-5 h-5 text-primary" />
            <CardTitle className="text-base font-semibold">ข่าวล่าสุด</CardTitle>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" onClick={handleRefresh} disabled={isRefreshing} className="h-8 w-8">
              <RefreshCw className={`w-4 h-4 ${isRefreshing ? "animate-spin" : ""}`} />
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        {featuredNews && (
          <a href={featuredNews.url || "#"} className="block group" target="_blank" rel="noopener noreferrer">
            <div className="relative aspect-video bg-muted">
              <Image
                src={featuredNews.image || "/placeholder.svg"}
                alt={featuredNews.title}
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
              <div className="absolute bottom-0 inset-x-0 p-4">
                <h3 className="font-semibold leading-tight mb-2 group-hover:text-primary transition-colors line-clamp-2">
                  {featuredNews.title}
                </h3>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span className="text-primary font-medium">{featuredNews.source}</span>
                  <span>•</span>
                  <Clock className="w-3 h-3" />
                  <span>{featuredNews.timeAgo}</span>
                </div>
              </div>
            </div>
          </a>
        )}

<div className="divide-y divide-border/50">
          {regularNews.map((news) => (
            <a
              key={news.id}
              href={news.url || "#"}
              className="flex gap-3 p-4 group hover:bg-muted/30 transition-colors"
              target="_blank"
              rel="noopener noreferrer"
            >
              <div className="relative w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden bg-muted">
                <Image
                  src={news.image || "/placeholder.svg"}
                  alt={news.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <div className="flex-1 min-w-0 py-0.5">
                <h4 className="font-medium text-sm leading-snug mb-2 group-hover:text-primary transition-colors line-clamp-2">
                  {news.title}
                </h4>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span>{news.source}</span>
                  <span>•</span>
                  <span>{news.timeAgo}</span>
                </div>
              </div>
            </a>
          ))}
        </div>

{error && <div className="text-center py-4 text-muted-foreground text-sm">ไม่สามารถโหลดข่าวได้</div>}

<div className="p-3 border-t border-border/50">
          <Button asChild variant="outline" className="w-full justify-center gap-2 h-9 text-sm bg-transparent">
            <Link href="/news">
              ดูข่าวทั้งหมด
              <ArrowRight className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Trophy, Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  const currentYear = new Date().getFullYear()

const footerLinks = {
    product: [
      { href: "/ai-prediction", label: "AI ทำนายผล" },
      { href: "/matches", label: "โปรแกรมการแข่งขัน" },
      { href: "/standings", label: "ตารางคะแนน" },
      { href: "/players", label: "สถิตินักเตะ" },
    ],
    company: [
      { href: "/about", label: "เกี่ยวกับเรา" },
      { href: "/contact", label: "ติดต่อเรา" },
      { href: "/careers", label: "ร่วมงานกับเรา" },
    ],
    legal: [
      { href: "/privacy", label: "นโยบายความเป็นส่วนตัว" },
      { href: "/terms", label: "ข้อกำหนดการใช้งาน" },
      { href: "/cookies", label: "นโยบายคุกกี้" },
    ],
  }

return (
    <footer className="border-t border-border bg-card/50">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link href="/" className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                <span className="font-display text-xl text-primary-foreground">FA</span>
              </div>
              <span className="font-display text-2xl">FootballAI</span>
            </Link>
            <p className="text-muted-foreground text-sm leading-relaxed mb-6 max-w-sm">
              แพลตฟอร์มวิเคราะห์ฟุตบอลอัจฉริยะ ด้วยเทคโนโลยี AI ที่แม่นยำ ให้คุณติดตามและวิเคราะห์ฟุตบอลได้อย่างมืออาชีพ
            </p>
            <div className="flex items-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Trophy className="w-4 h-4 text-primary" />
                <span>Premier League Partner</span>
              </div>
            </div>
          </div>

{/* Product Links */}
          <div>
            <h3 className="font-semibold mb-4">ผลิตภัณฑ์</h3>
            <ul className="space-y-3">
              {footerLinks.product.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Company Links */}
          <div>
            <h3 className="font-semibold mb-4">บริษัท</h3>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Contact */}
          <div>
            <h3 className="font-semibold mb-4">ติดต่อ</h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li className="flex items-center gap-2">
                <Mail className="w-4 h-4" />
                <span>support@footballai.co.th</span>
              </li>
              <li className="flex items-center gap-2">
                <Phone className="w-4 h-4" />
                <span>02-123-4567</span>
              </li>
              <li className="flex items-start gap-2">
                <MapPin className="w-4 h-4 mt-0.5" />
                <span>กรุงเทพมหานคร, ประเทศไทย</span>
              </li>
            </ul>
          </div>
        </div>

{/* Bottom */}
        <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-muted-foreground">© {currentYear} FootballAI. สงวนลิขสิทธิ์ทั้งหมด</p>
          <div className="flex items-center gap-6">
            {footerLinks.legal.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/profile-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Edit, Mail, Heart, Shield, Settings, LogOut, Bell, Trophy } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

interface UserProfile {
  name: string
  email: string
  avatar: string
  favoriteTeams: string[]
}

export function ProfilePage() {
  const [user] = useState<UserProfile>({
    name: "สมชาย ใจดี",
    email: "somchai@email.com",
    avatar: "/diverse-user-avatars.png",
    favoriteTeams: ["แมนเชสเตอร์ ยูไนเต็ด", "ลิเวอร์พูล", "เชลซี"],
  })

return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="space-y-6"
      >
        {/* Profile Header */}
        <Card className="border-border/50 overflow-hidden">
          <div className="h-24 bg-gradient-to-r from-primary/20 via-primary/10 to-transparent" />
          <CardContent className="relative pt-0 pb-6">
            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end -mt-12">
              <Avatar className="w-24 h-24 border-4 border-background shadow-lg">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-2xl font-display bg-primary text-primary-foreground">
                  {user.name.charAt(0)}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 pt-4 sm:pt-0">
                <h1 className="text-2xl font-display mb-1">{user.name}</h1>
                <p className="text-muted-foreground flex items-center gap-2 text-sm">
                  <Mail className="w-4 h-4" />
                  {user.email}
                </p>
              </div>
              <Button size="sm" className="gap-2">
                <Edit className="w-4 h-4" />
                แก้ไขโปรไฟล์
              </Button>
            </div>
          </CardContent>
        </Card>

<div className="grid md:grid-cols-3 gap-6">
          {/* Left Column */}
          <div className="md:col-span-2 space-y-6">
            {/* Favorite Teams */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center gap-2">
                  <Heart className="w-5 h-5 text-primary" />
                  ทีมโปรด
                </CardTitle>
                <CardDescription>ทีมฟุตบอลที่คุณติดตาม</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {user.favoriteTeams.map((team) => (
                    <Badge key={team} variant="secondary" className="px-3 py-1.5">
                      {team}
                    </Badge>
                  ))}
                  <Button variant="outline" size="sm" className="h-8 bg-transparent">
                    + เพิ่มทีม
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Stats */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center gap-2">
                  <Trophy className="w-5 h-5 text-primary" />
                  สถิติการใช้งาน
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center p-4 bg-muted/50 rounded-lg">
                    <p className="text-3xl font-display text-primary">24</p>
                    <p className="text-xs text-muted-foreground">การทำนาย</p>
                  </div>
                  <div className="text-center p-4 bg-muted/50 rounded-lg">
                    <p className="text-3xl font-display text-primary">18</p>
                    <p className="text-xs text-muted-foreground">ทำนายถูก</p>
                  </div>
                  <div className="text-center p-4 bg-muted/50 rounded-lg">
                    <p className="text-3xl font-display text-primary">75%</p>
                    <p className="text-xs text-muted-foreground">ความแม่นยำ</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Right Column */}
          <div className="space-y-6">
            {/* Account Info */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center gap-2">
                  <Shield className="w-5 h-5 text-primary" />
                  ข้อมูลบัญชี
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div>
                  <p className="text-xs text-muted-foreground">สถานะ</p>
                  <p className="font-medium">สมาชิกปกติ</p>
                </div>
                <Separator />
                <div>
                  <p className="text-xs text-muted-foreground">สมาชิกตั้งแต่</p>
                  <p className="font-medium">มกราคม 2025</p>
                </div>
              </CardContent>
            </Card>

{/* Quick Actions */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-lg">การตั้งค่า</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="ghost" className="w-full justify-start gap-2 h-10">
                  <Settings className="w-4 h-4" />
                  ตั้งค่าบัญชี
                </Button>
                <Button variant="ghost" className="w-full justify-start gap-2 h-10">
                  <Bell className="w-4 h-4" />
                  การแจ้งเตือน
                </Button>
                <Separator />
                <Button
                  variant="ghost"
                  className="w-full justify-start gap-2 h-10 text-destructive hover:text-destructive"
                >
                  <LogOut className="w-4 h-4" />
                  ออกจากระบบ
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/compact-standings.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Trophy } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"
import useSWR from "swr"
import Image from "next/image"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

const mockStandings = [
  { position: 1, team: "อาร์เซนอล", played: 21, gd: 26, points: 49 },
  { position: 2, team: "แมนเชสเตอร์ ซิตี้", played: 21, gd: 26, points: 43 },
  { position: 3, team: "แอสตัน วิลล่า", played: 21, gd: 9, points: 43 },
  { position: 4, team: "ลิเวอร์พูล", played: 21, gd: 4, points: 35 },
  { position: 5, team: "เบรนท์ฟอร์ด", played: 21, gd: 7, points: 33 },
  { position: 6, team: "นิวคาสเซิล", played: 21, gd: 5, points: 32 },
]

export function CompactStandings() {
  const { data, isLoading } = useSWR("/api/football/standings", fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 300000,
  })

const standings = data?.data
    ? data.data.slice(0, 6).map((item: any) => ({
        position: item.rank,
        team: item.team.name,
        logo: item.team.logo,
        played: item.all.played,
        gd: item.goalsDiff,
        points: item.points,
      }))
    : mockStandings

return (
    <Card className="border-border/50">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Trophy className="w-5 h-5 text-primary" />
            <CardTitle className="text-base font-semibold">Premier League</CardTitle>
          </div>
          <span className="text-xs text-muted-foreground">2024/25</span>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className="w-6 h-6 animate-spin text-primary" />
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="text-[10px] uppercase tracking-wider text-muted-foreground border-y border-border/50 bg-muted/30">
                    <th className="text-left py-2 px-3 font-medium">#</th>
                    <th className="text-left py-2 px-2 font-medium">ทีม</th>
                    <th className="text-center py-2 px-2 font-medium">แข่ง</th>
                    <th className="text-center py-2 px-2 font-medium">+/-</th>
                    <th className="text-center py-2 px-3 font-medium">คะแนน</th>
                  </tr>
                </thead>
                <tbody>
                  {standings.map((team: any, index: number) => (
                    <tr
                      key={team.position}
                      className={`border-b border-border/30 hover:bg-muted/30 transition-colors ${
                        index < 4 ? "bg-primary/5" : ""
                      }`}
                    >
                      <td className="py-2.5 px-3">
                        <span
                          className={`w-6 h-6 rounded-md flex items-center justify-center text-xs font-bold ${
                            index < 4 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                          }`}
                        >
                          {team.position}
                        </span>
                      </td>
                      <td className="py-2.5 px-2">
                        <div className="flex items-center gap-2">
                          {team.logo ? (
                            <Image
                              src={team.logo || "/placeholder.svg"}
                              alt={team.team}
                              width={20}
                              height={20}
                              className="w-5 h-5 rounded-full"
                            />
                          ) : (
                            <div className="w-5 h-5 bg-muted rounded-full" />
                          )}
                          <span className="font-medium text-sm truncate max-w-[100px]">{team.team}</span>
                        </div>
                      </td>
                      <td className="text-center py-2.5 px-2 text-sm text-muted-foreground">{team.played}</td>
                      <td
                        className={`text-center py-2.5 px-2 text-sm font-medium ${
                          team.gd > 0 ? "text-green-400" : team.gd < 0 ? "text-red-400" : ""
                        }`}
                      >
                        {team.gd > 0 ? "+" : ""}
                        {team.gd}
                      </td>
                      <td className="text-center py-2.5 px-3">
                        <span className="font-bold text-primary">{team.points}</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="p-3">
              <Button asChild variant="outline" className="w-full justify-center gap-2 h-9 text-sm bg-transparent">
                <Link href="/standings">
                  ดูตารางทั้งหมด
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </Button>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Brain, Loader2, ChevronRight, Calendar, Users, Zap, Shield, BarChart3, Play } from "lucide-react"
import { CompactStandings } from "@/components/compact-standings"
import { NewsFeed } from "@/components/news-feed"
import useSWR from "swr"
import Image from "next/image"
import { HeroBackground } from "@/components/hero-background"
import { WorldCupBanner } from "@/components/worldcup-banner"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function Home() {
  const { data: fixturesData } = useSWR("/api/football/fixtures?type=upcoming&limit=6", fetcher)
  const { data: topScorersData } = useSWR("/api/football/topscorers", fetcher)
  const { data: liveData } = useSWR("/api/football/fixtures?type=live", fetcher)

const fixtures = fixturesData?.fixtures || []
  const liveMatches = liveData?.fixtures || []

const upcomingMatches = fixtures.slice(0, 4).map((match: any) => ({
    home: match.homeTeamThai || match.homeTeam,
    away: match.awayTeamThai || match.awayTeam,
    time: match.dateThai || match.date,
    homeLogo: match.homeLogo,
    awayLogo: match.awayLogo,
    fixtureId: match.id,
    venue: match.venue || "สนามแข่งขัน",
  }))

const scorers = topScorersData?.players || []
  const topScorers = scorers.slice(0, 5).map((player: any) => ({
    name: player.name,
    team: player.teamNameThai || player.teamName,
    goals: player.goals,
    photo: player.photo,
    teamLogo: player.teamLogo,
  }))

const features = [
    {
      icon: Brain,
      title: "AI ทำนายผล",
      description: "ใช้ Machine Learning 5 โมเดลวิเคราะห์ผลการแข่งขันอย่างแม่นยำ",
    },
    {
      icon: BarChart3,
      title: "สถิติเชิงลึก",
      description: "ข้อมูลสถิติครบถ้วนของทีมและนักเตะทุกคน",
    },
    {
      icon: Zap,
      title: "อัปเดตเรียลไทม์",
      description: "ติดตามผลการแข่งขันสดและข่าวสารล่าสุดทันที",
    },
    {
      icon: Shield,
      title: "ข้อมูลน่าเชื่อถือ",
      description: "ข้อมูลจากแหล่งทางการและ API ที่ได้รับการรับรอง",
    },
  ]

return (
    <div className="min-h-screen bg-background">
      <WorldCupBanner />
      <Navigation />

{/* Hero Section */}
      <section className="relative overflow-hidden min-h-[90vh] flex items-center">
        <HeroBackground />

<div className="container mx-auto px-4 py-16 md:py-24 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <div className="space-y-8">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 backdrop-blur-sm rounded-full text-sm font-medium text-primary border border-primary/20">
                <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
                Premier League 2025/26
              </div>

<h1 className="text-4xl md:text-5xl lg:text-6xl font-display tracking-tight text-foreground leading-tight">
                วิเคราะห์ฟุตบอล
                <br />
                <span className="text-primary">ด้วยพลัง AI</span>
              </h1>

<p className="text-lg md:text-xl text-muted-foreground max-w-xl leading-relaxed">
                แพลตฟอร์มวิเคราะห์ฟุตบอลอันดับ 1 ของไทย พร้อมระบบ AI ทำนายผล สถิติเชิงลึก และชุมชนแฟนบอลที่ใหญ่ที่สุด
              </p>

<div className="flex flex-wrap gap-4">
                <Button asChild size="lg" className="h-12 px-6 rounded-lg shadow-lg shadow-primary/20">
                  <Link href="/ai-prediction" className="gap-2">
                    <Brain className="w-5 h-5" />
                    ทำนายผลด้วย AI
                  </Link>
                </Button>
                <Button
                  asChild
                  size="lg"
                  variant="outline"
                  className="h-12 px-6 rounded-lg bg-background/50 backdrop-blur-sm"
                >
                  <Link href="/matches" className="gap-2">
                    <Play className="w-5 h-5" />
                    ดูโปรแกรม
                  </Link>
                </Button>
              </div>

{/* Stats */}
              <div className="grid grid-cols-3 gap-6 pt-8 border-t border-border/50">
                <div>
                  <p className="text-3xl font-display text-primary">93.7%</p>
                  <p className="text-sm text-muted-foreground">ความแม่นยำ AI</p>
                </div>
                <div>
                  <p className="text-3xl font-display text-primary">50K+</p>
                  <p className="text-sm text-muted-foreground">ผู้ใช้งาน</p>
                </div>
                <div>
                  <p className="text-3xl font-display text-primary">380+</p>
                  <p className="text-sm text-muted-foreground">แมตช์/ฤดูกาล</p>
                </div>
              </div>
            </div>

{/* Right - Live Matches or Upcoming */}
            <div className="space-y-4">
              {liveMatches.length > 0 && (
                <div className="mb-4">
                  <div className="flex items-center gap-2 mb-3">
                    <span className="w-2 h-2 bg-red-500 rounded-full animate-live-pulse" />
                    <span className="text-sm font-medium text-red-500">กำลังแข่งขันสด</span>
                  </div>
                  {liveMatches.slice(0, 1).map((match: any, i: number) => (
                    <Card key={i} className="border-red-500/50 bg-red-500/5 backdrop-blur-sm">
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            {match.homeLogo && (
                              <Image
                                src={match.homeLogo || "/placeholder.svg"}
                                alt=""
                                width={40}
                                height={40}
                                className="rounded-full"
                              />
                            )}
                            <span className="font-semibold">{match.homeTeamThai || match.homeTeam}</span>
                          </div>
                          <div className="text-2xl font-bold">
                            {match.homeScore ?? 0} - {match.awayScore ?? 0}
                          </div>
                          <div className="flex items-center gap-3">
                            <span className="font-semibold">{match.awayTeamThai || match.awayTeam}</span>
                            {match.awayLogo && (
                              <Image
                                src={match.awayLogo || "/placeholder.svg"}
                                alt=""
                                width={40}
                                height={40}
                                className="rounded-full"
                              />
                            )}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}

<Card className="border-border/50 shadow-xl bg-card/80 backdrop-blur-md">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center gap-2">
                      <Calendar className="w-5 h-5 text-primary" />
                      <h3 className="font-semibold">แมตช์ที่กำลังจะมาถึง</h3>
                    </div>
                    <Link href="/matches" className="text-sm text-primary hover:underline">
                      ดูทั้งหมด
                    </Link>
                  </div>

<div className="space-y-4">
                    {upcomingMatches.length > 0 ? (
                      upcomingMatches.map((match: any, i: number) => (
                        <Link
                          key={i}
                          href={`/ai-prediction?fixture=${match.fixtureId}`}
                          className="block p-4 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
                        >
                          <div className="flex items-center justify-between mb-2">
                            <div className="flex items-center gap-2 flex-1">
                              {match.homeLogo && (
                                <Image
                                  src={match.homeLogo || "/placeholder.svg"}
                                  alt=""
                                  width={24}
                                  height={24}
                                  className="rounded-full"
                                />
                              )}
                              <span className="font-medium text-sm truncate">{match.home}</span>
                            </div>
                            <span className="text-xs text-muted-foreground px-2">vs</span>
                            <div className="flex items-center gap-2 flex-1 justify-end">
                              <span className="font-medium text-sm truncate">{match.away}</span>
                              {match.awayLogo && (
                                <Image
                                  src={match.awayLogo || "/placeholder.svg"}
                                  alt=""
                                  width={24}
                                  height={24}
                                  className="rounded-full"
                                />
                              )}
                            </div>
                          </div>
                          <div className="flex items-center justify-between text-xs text-muted-foreground">
                            <span>{match.time}</span>
                            <span className="text-primary">ทำนายผล →</span>
                          </div>
                        </Link>
                      ))
                    ) : (
                      <div className="flex items-center justify-center py-8 text-muted-foreground">
                        <Loader2 className="w-5 h-5 animate-spin mr-2" />
                        กำลังโหลด...
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="py-16 md:py-24 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              ฟีเจอร์
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display mb-4">ทำไมต้องเลือก FootballAI</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              เครื่องมือวิเคราะห์ฟุตบอลที่ครบครันที่สุด พร้อมเทคโนโลยี AI ที่ทันสมัย
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, i) => (
              <Card key={i} className="border-border/50 hover:border-primary/50 transition-colors group">
                <CardContent className="p-6">
                  <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                    <feature.icon className="w-6 h-6 text-primary" />
                  </div>
                  <h3 className="font-semibold mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Top Scorers Section */}
      <section className="py-16 md:py-24 bg-muted/30 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="flex items-end justify-between mb-8">
            <div>
              <Badge variant="outline" className="mb-2">
                สถิติ
              </Badge>
              <h2 className="text-3xl md:text-4xl font-display">ดาวซัลโวสูงสุด</h2>
            </div>
            <Link href="/players" className="text-sm text-primary hover:underline flex items-center gap-1">
              ดูทั้งหมด
              <ChevronRight className="w-4 h-4" />
            </Link>
          </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            {topScorers.length > 0 ? (
              topScorers.map((player: any, i: number) => (
                <Card key={i} className="border-border/50 overflow-hidden hover:border-primary/50 transition-colors">
                  <div className="aspect-square relative bg-gradient-to-br from-muted to-muted/50">
                    {player.photo ? (
                      <Image src={player.photo || "/placeholder.svg"} alt={player.name} fill className="object-cover" />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center">
                        <Users className="w-16 h-16 text-muted-foreground/30" />
                      </div>
                    )}
                    <div className="absolute top-2 left-2 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-display text-lg">
                      {i + 1}
                    </div>
                    <div className="absolute bottom-2 right-2 bg-background/90 backdrop-blur-sm px-2 py-1 rounded-md">
                      <span className="font-display text-xl text-primary">{player.goals}</span>
                      <span className="text-[10px] text-muted-foreground ml-1">ประตู</span>
                    </div>
                  </div>
                  <CardContent className="p-3">
                    <h3 className="font-semibold text-sm truncate">{player.name}</h3>
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      {player.teamLogo && (
                        <Image
                          src={player.teamLogo || "/placeholder.svg"}
                          alt=""
                          width={12}
                          height={12}
                          className="rounded-full"
                        />
                      )}
                      <span className="truncate">{player.team}</span>
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="col-span-full flex items-center justify-center py-12 text-muted-foreground">
                <Loader2 className="w-5 h-5 animate-spin mr-2" />
                กำลังโหลด...
              </div>
            )}
          </div>
        </div>
      </section>

{/* News & Standings Section */}
      <section className="py-16 md:py-24 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-3 gap-8">
            {/* News */}
            <div className="lg:col-span-2">
              <div className="flex items-end justify-between mb-6">
                <div>
                  <Badge variant="outline" className="mb-2">
                    อัปเดต
                  </Badge>
                  <h2 className="text-3xl md:text-4xl font-display">ข่าวล่าสุด</h2>
                </div>
                <Link href="/news" className="text-sm text-primary hover:underline flex items-center gap-1">
                  ดูทั้งหมด
                  <ChevronRight className="w-4 h-4" />
                </Link>
              </div>
              <NewsFeed />
            </div>

{/* Standings */}
            <div>
              <div className="flex items-end justify-between mb-6">
                <div>
                  <Badge variant="outline" className="mb-2">
                    อันดับ
                  </Badge>
                  <h2 className="text-3xl md:text-4xl font-display">ตารางคะแนน</h2>
                </div>
                <Link href="/standings" className="text-sm text-primary hover:underline flex items-center gap-1">
                  ดูทั้งหมด
                  <ChevronRight className="w-4 h-4" />
                </Link>
              </div>
              <CompactStandings />
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 md:py-24 bg-primary/5 border-t border-border">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-display mb-4">พร้อมเริ่มต้นวิเคราะห์ฟุตบอลแล้วหรือยัง?</h2>
          <p className="text-muted-foreground max-w-xl mx-auto mb-8">
            สมัครสมาชิกฟรีวันนี้ เพื่อเข้าถึงฟีเจอร์ AI ทำนายผลและสถิติเชิงลึกทั้งหมด
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button asChild size="lg" className="h-12 px-8 rounded-lg shadow-lg shadow-primary/20">
              <Link href="/register">สมัครสมาชิกฟรี</Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="h-12 px-8 rounded-lg bg-transparent">
              <Link href="/login">เข้าสู่ระบบ</Link>
            </Button>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]jpg:file="public/football-stadium-night-lights-premier-league.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-stadium-night-lights-premier-league-SqRs5o2PxTIWV4WrZcwge6SKFApsaa.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-players-celebrating-goal-champions.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-players-celebrating-goal-champions-O2AISCCNLS4pJFIC91Gjw0RpbIp2ES.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-match-action-shot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-match-action-shot-h2wP7NjYgVNcV4J0y6KDCrchhxNHUR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-fans-cheering-stadium-atmosphere.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-fans-cheering-stadium-atmosphere-LxcRz3nOLlpIwJf6PZBYBmIszvLbJo.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-pitch-aerial-view-green-grass.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-pitch-aerial-view-green-grass-NE4m4A4h2sdRlFeS9l6jX3yjllOBMV.jpg" isMerged="true"
[V0_FILE]jpg:file="public/football-trophy-celebration-golden.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-trophy-celebration-golden-M0kaoQx6PExbTC4kwaLDiZvwl5yIqU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-player-action-shot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-player-action-shot-kaUtWa6aoXULi7qxtSjMn2c20gCmrg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-team-celebration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-team-celebration-6H0KxmzQj4kL5xU89IxeybV37d9Okr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-stadium-crowd.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-stadium-crowd-3oyHUZMRB3XMpCY8y8vnBKGCEaJIcz.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-match-intense.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-match-intense-vKUXn6rv6uXNQiwkJN2PXshlBEJpz6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-goal-moment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-goal-moment-34jIRpJ8gOaWvN9s5Gyo86oFzt9N9C.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premier-league-trophy-lift.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premier-league-trophy-lift-tJrtRpMpfVVL58ewMzGzdSjo0UER44.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/matches/matches-content.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Calendar,
  ChevronLeft,
  ChevronRight,
  Loader2,
  RefreshCw,
  Play,
  Clock,
  CheckCircle,
  Trophy,
  MapPin,
  TrendingUp,
} from "lucide-react"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import useSWR from "swr"
import Image from "next/image"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function MatchesContent() {
  const searchParams = useSearchParams()
  const filterParam = searchParams.get("filter")

const getDefaultTab = () => {
    switch (filterParam) {
      case "live":
        return "live"
      case "upcoming":
        return "upcoming"
      case "finished":
        return "finished"
      default:
        return "upcoming"
    }
  }

const [activeTab, setActiveTab] = useState(getDefaultTab())
  const [selectedRound, setSelectedRound] = useState<number>(1)

useEffect(() => {
    setActiveTab(getDefaultTab())
  }, [filterParam])

const {
    data: allData,
    isLoading,
    mutate,
  } = useSWR("/api/football/fixtures?type=all", fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 60000,
  })

const transformFixture = (fixture: any) => {
    const date = new Date(fixture.date)
    const today = new Date()
    const tomorrow = new Date(today)
    tomorrow.setDate(tomorrow.getDate() + 1)

let dateStr = date.toLocaleDateString("th-TH", { day: "numeric", month: "short", year: "numeric" })
    if (date.toDateString() === today.toDateString()) dateStr = "วันนี้"
    else if (date.toDateString() === tomorrow.toDateString()) dateStr = "พรุ่งนี้"

return {
      id: fixture.id?.toString(),
      round: fixture.roundNumber || 1,
      homeTeam: fixture.teams.home.name,
      awayTeam: fixture.teams.away.name,
      homeLogo: fixture.teams.home.logo,
      awayLogo: fixture.teams.away.logo,
      homeScore: fixture.goals.home,
      awayScore: fixture.goals.away,
      date: dateStr,
      fullDate: date,
      time: date.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" }),
      status: fixture.status.isLive ? "live" : fixture.status.isFinished ? "finished" : "upcoming",
      venue: fixture.venue?.name || "",
    }
  }

const allFixtures = (allData?.data || []).map(transformFixture)
  const availableRounds = allData?.rounds?.available || []
  const totalRounds = allData?.rounds?.total || 38
  const roundFixtures = allFixtures.filter((m: any) => m.round === selectedRound)
  const liveMatches = allFixtures.filter((m: any) => m.status === "live")
  const upcomingMatches = allFixtures.filter((m: any) => m.status === "upcoming")
  const finishedMatches = allFixtures.filter((m: any) => m.status === "finished")

// Get next upcoming match for featured section
  const nextMatch = upcomingMatches[0]

const FeaturedMatchCard = ({ match }: { match: any }) => {
    if (!match) return null

return (
      <Link href={`/matches/${match.id}`} className="block">
        <Card className="border-primary/30 bg-gradient-to-br from-primary/5 to-transparent overflow-hidden">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-4">
              <Badge className="bg-primary/20 text-primary border-0">แมตช์ถัดไป</Badge>
              <span className="text-sm text-muted-foreground">นัดที่ {match.round}</span>
            </div>

<div className="flex items-center justify-between gap-6">
              {/* Home Team */}
              <div className="flex-1 text-center">
                <div className="w-20 h-20 mx-auto mb-3 rounded-full bg-card border border-border/50 flex items-center justify-center p-2">
                  {match.homeLogo ? (
                    <Image
                      src={match.homeLogo || "/placeholder.svg"}
                      alt={match.homeTeam}
                      width={64}
                      height={64}
                      className="w-16 h-16 object-contain"
                    />
                  ) : (
                    <div className="w-16 h-16 bg-muted rounded-full" />
                  )}
                </div>
                <h3 className="font-semibold text-lg">{match.homeTeam}</h3>
                <span className="text-sm text-muted-foreground">เจ้าบ้าน</span>
              </div>

{/* VS and Time */}
              <div className="text-center px-6">
                <div className="text-3xl font-bold text-muted-foreground mb-2">VS</div>
                <div className="bg-card border border-border/50 rounded-lg px-4 py-2">
                  <div className="text-primary font-semibold">{match.date}</div>
                  <div className="text-2xl font-bold">{match.time}</div>
                </div>
              </div>

{/* Away Team */}
              <div className="flex-1 text-center">
                <div className="w-20 h-20 mx-auto mb-3 rounded-full bg-card border border-border/50 flex items-center justify-center p-2">
                  {match.awayLogo ? (
                    <Image
                      src={match.awayLogo || "/placeholder.svg"}
                      alt={match.awayTeam}
                      width={64}
                      height={64}
                      className="w-16 h-16 object-contain"
                    />
                  ) : (
                    <div className="w-16 h-16 bg-muted rounded-full" />
                  )}
                </div>
                <h3 className="font-semibold text-lg">{match.awayTeam}</h3>
                <span className="text-sm text-muted-foreground">ทีมเยือน</span>
              </div>
            </div>

{match.venue && (
              <div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-border/50 text-sm text-muted-foreground">
                <MapPin className="w-4 h-4" />
                <span>{match.venue}</span>
              </div>
            )}
          </CardContent>
        </Card>
      </Link>
    )
  }

const MatchCard = ({ match, showDate = true }: { match: any; showDate?: boolean }) => (
    <Link href={`/matches/${match.id}`} className="block group">
      <Card className="border-border/50 hover:border-primary/50 transition-all duration-200 overflow-hidden">
        <CardContent className="p-0">
          {/* Status bar */}
          <div
            className={`h-1 ${match.status === "live" ? "bg-red-500" : match.status === "finished" ? "bg-muted" : "bg-primary/50"}`}
          />

<div className="p-4">
            {/* Header with status and round */}
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                {match.status === "live" && (
                  <Badge variant="destructive" className="gap-1">
                    <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
                    LIVE
                  </Badge>
                )}
                {match.status === "finished" && (
                  <Badge variant="secondary" className="gap-1">
                    <CheckCircle className="w-3 h-3" /> จบแล้ว
                  </Badge>
                )}
                {match.status === "upcoming" && showDate && (
                  <div className="flex items-center gap-2 text-sm">
                    <Clock className="w-4 h-4 text-muted-foreground" />
                    <span className="text-muted-foreground">{match.date}</span>
                    <span className="font-semibold text-primary">{match.time}</span>
                  </div>
                )}
              </div>
              <Badge variant="outline" className="text-xs">
                นัด {match.round}
              </Badge>
            </div>

{/* Teams */}
            <div className="flex items-center gap-4">
              {/* Home Team */}
              <div className="flex-1 flex items-center gap-3">
                <div className="w-12 h-12 rounded-lg bg-card border border-border/50 flex items-center justify-center p-1 shrink-0">
                  {match.homeLogo ? (
                    <Image
                      src={match.homeLogo || "/placeholder.svg"}
                      alt={match.homeTeam}
                      width={40}
                      height={40}
                      className="w-10 h-10 object-contain"
                    />
                  ) : (
                    <div className="w-10 h-10 bg-muted rounded" />
                  )}
                </div>
                <div className="min-w-0">
                  <p className="font-semibold truncate">{match.homeTeam}</p>
                  <p className="text-xs text-muted-foreground">เจ้าบ้าน</p>
                </div>
              </div>

{/* Score */}
              <div className="px-4 text-center shrink-0">
                {match.status === "upcoming" ? (
                  <div className="text-2xl font-bold text-muted-foreground">-</div>
                ) : (
                  <div className="flex items-center gap-2">
                    <span className={`text-2xl font-bold ${match.homeScore > match.awayScore ? "text-primary" : ""}`}>
                      {match.homeScore}
                    </span>
                    <span className="text-muted-foreground">:</span>
                    <span className={`text-2xl font-bold ${match.awayScore > match.homeScore ? "text-primary" : ""}`}>
                      {match.awayScore}
                    </span>
                  </div>
                )}
              </div>

{/* Away Team */}
              <div className="flex-1 flex items-center gap-3 justify-end">
                <div className="min-w-0 text-right">
                  <p className="font-semibold truncate">{match.awayTeam}</p>
                  <p className="text-xs text-muted-foreground">ทีมเยือน</p>
                </div>
                <div className="w-12 h-12 rounded-lg bg-card border border-border/50 flex items-center justify-center p-1 shrink-0">
                  {match.awayLogo ? (
                    <Image
                      src={match.awayLogo || "/placeholder.svg"}
                      alt={match.awayTeam}
                      width={40}
                      height={40}
                      className="w-10 h-10 object-contain"
                    />
                  ) : (
                    <div className="w-10 h-10 bg-muted rounded" />
                  )}
                </div>
              </div>
            </div>

{/* Venue */}
            {match.venue && (
              <div className="flex items-center justify-center gap-1.5 mt-3 pt-3 border-t border-border/30 text-xs text-muted-foreground">
                <MapPin className="w-3 h-3" />
                <span>{match.venue}</span>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </Link>
  )

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Page Header */}
      <div className="border-b border-border/50 bg-gradient-to-b from-muted/50 to-transparent">
        <div className="container mx-auto px-4 py-8">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                  <Calendar className="w-5 h-5 text-primary" />
                </div>
                <h1 className="text-2xl md:text-3xl font-bold">โปรแกรมการแข่งขัน</h1>
              </div>
              <p className="text-muted-foreground">พรีเมียร์ลีก 2024/25</p>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => mutate()}
              disabled={isLoading}
              className="gap-2 self-start"
            >
              <RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
              อัปเดต
            </Button>
          </div>
        </div>
      </div>

<main className="container mx-auto px-4 py-6">
        {isLoading ? (
          <Card className="border-border/50">
            <CardContent className="flex items-center justify-center py-20">
              <Loader2 className="w-8 h-8 animate-spin text-primary" />
              <span className="ml-3 text-muted-foreground">กำลังโหลดโปรแกรมการแข่งขัน...</span>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-6">
            {/* Stats Overview */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <StatsCard icon={Play} label="แมตช์สด" value={liveMatches.length} color="bg-red-500/10 text-red-500" />
              <StatsCard icon={Clock} label="รอแข่ง" value={upcomingMatches.length} color="bg-primary/10 text-primary" />
              <StatsCard
                icon={CheckCircle}
                label="จบแล้ว"
                value={finishedMatches.length}
                color="bg-muted text-muted-foreground"
              />
              <StatsCard icon={Trophy} label="ทั้งหมด" value={allFixtures.length} color="bg-primary/10 text-primary" />
            </div>

{/* Featured Next Match */}
            {nextMatch && (
              <div>
                <h2 className="text-lg font-semibold mb-3 flex items-center gap-2">
                  <TrendingUp className="w-5 h-5 text-primary" />
                  แมตช์ที่กำลังจะมาถึง
                </h2>
                <FeaturedMatchCard match={nextMatch} />
              </div>
            )}

{/* Match Tabs */}
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="w-full justify-start bg-muted/50 p-1 h-auto flex-wrap">
                <TabsTrigger value="upcoming" className="gap-2 data-[state=active]:bg-background">
                  <Clock className="w-4 h-4" />
                  รอแข่ง
                </TabsTrigger>
                <TabsTrigger value="live" className="gap-2 data-[state=active]:bg-background">
                  {liveMatches.length > 0 && <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />}
                  <Play className="w-4 h-4" />
                  สด
                </TabsTrigger>
                <TabsTrigger value="finished" className="gap-2 data-[state=active]:bg-background">
                  <CheckCircle className="w-4 h-4" />
                  จบแล้ว
                </TabsTrigger>
                <TabsTrigger value="byRound" className="gap-2 data-[state=active]:bg-background">
                  <Calendar className="w-4 h-4" />
                  ตามนัด
                </TabsTrigger>
              </TabsList>

{/* By Round Content */}
              <TabsContent value="byRound" className="mt-6 space-y-4">
                <Card className="border-border/50">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between gap-4">
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={() => setSelectedRound(Math.max(1, selectedRound - 1))}
                        disabled={selectedRound <= 1}
                      >
                        <ChevronLeft className="w-4 h-4" />
                      </Button>
                      <div className="flex items-center gap-4">
                        <Select value={selectedRound.toString()} onValueChange={(v) => setSelectedRound(Number(v))}>
                          <SelectTrigger className="w-32">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {Array.from({ length: totalRounds }, (_, i) => i + 1).map((round) => (
                              <SelectItem key={round} value={round.toString()}>
                                นัดที่ {round}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <span className="text-sm text-muted-foreground hidden sm:inline">จาก {totalRounds} นัด</span>
                      </div>
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={() => setSelectedRound(Math.min(totalRounds, selectedRound + 1))}
                        disabled={selectedRound >= totalRounds}
                      >
                        <ChevronRight className="w-4 h-4" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>

<div className="grid gap-3">
                  {roundFixtures.length > 0 ? (
                    roundFixtures.map((match: any) => <MatchCard key={match.id} match={match} />)
                  ) : (
                    <Card className="border-border/50">
                      <CardContent className="text-center py-12">
                        <Calendar className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                        <p className="text-muted-foreground">ยังไม่มีข้อมูลสำหรับนัดที่ {selectedRound}</p>
                      </CardContent>
                    </Card>
                  )}
                </div>
              </TabsContent>

{/* Live Content */}
              <TabsContent value="live" className="mt-6">
                <div className="grid gap-3">
                  {liveMatches.length > 0 ? (
                    liveMatches.map((match: any) => <MatchCard key={match.id} match={match} />)
                  ) : (
                    <Card className="border-border/50">
                      <CardContent className="text-center py-12">
                        <Play className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                        <p className="text-muted-foreground">ไม่มีแมตช์ที่กำลังแข่งขันในขณะนี้</p>
                      </CardContent>
                    </Card>
                  )}
                </div>
              </TabsContent>

{/* Upcoming Content */}
              <TabsContent value="upcoming" className="mt-6">
                <div className="grid gap-3">
                  {upcomingMatches.length > 0 ? (
                    upcomingMatches.slice(1, 21).map((match: any) => <MatchCard key={match.id} match={match} />)
                  ) : (
                    <Card className="border-border/50">
                      <CardContent className="text-center py-12">
                        <Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                        <p className="text-muted-foreground">ไม่มีแมตช์ที่รอแข่งขัน</p>
                      </CardContent>
                    </Card>
                  )}
                </div>
              </TabsContent>

{/* Finished Content */}
              <TabsContent value="finished" className="mt-6">
                <div className="grid gap-3">
                  {finishedMatches.length > 0 ? (
                    finishedMatches
                      .slice(-20)
                      .reverse()
                      .map((match: any) => <MatchCard key={match.id} match={match} showDate={true} />)
                  ) : (
                    <Card className="border-border/50">
                      <CardContent className="text-center py-12">
                        <CheckCircle className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                        <p className="text-muted-foreground">ยังไม่มีแมตช์ที่จบแล้ว</p>
                      </CardContent>
                    </Card>
                  )}
                </div>
              </TabsContent>
            </Tabs>
          </div>
        )}
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/news/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Newspaper, Clock, RefreshCw, Loader2, ImageOff, TrendingUp, Filter } from "lucide-react"
import { useState, useMemo } from "react"
import useSWR from "swr"
import Image from "next/image"
import { NewsHeroBackground } from "@/components/hero-background"

interface NewsArticle {
  id: string
  title: string
  description?: string
  url: string
  image: string
  source: string
  timeAgo: string
  category?: string
}

const fetcher = (url: string) => fetch(url).then((res) => res.json())

const categories = [
  { id: "all", label: "ทั้งหมด", icon: Filter },
  { id: "result", label: "ผลการแข่งขัน", icon: TrendingUp },
  { id: "transfer", label: "ข่าวย้ายทีม", icon: RefreshCw },
  { id: "general", label: "ข่าวทั่วไป", icon: Newspaper },
]

function NewsImage({ src, alt }: { src: string; alt: string }) {
  const [error, setError] = useState(false)

if (error || !src) {
    return (
      <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-muted flex items-center justify-center">
        <ImageOff className="w-10 h-10 text-muted-foreground/50" />
      </div>
    )
  }

return (
    <Image
      src={src || "/placeholder.svg"}
      alt={alt}
      fill
      className="object-cover"
      onError={() => setError(true)}
      unoptimized={src.startsWith("http")}
    />
  )
}

export default function NewsPage() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [isRefreshing, setIsRefreshing] = useState(false)

const { data, error, isLoading, mutate } = useSWR("/api/news", fetcher, {
    refreshInterval: 30 * 60 * 1000,
    revalidateOnFocus: false,
  })

const newsArticles = data?.articles || []
  const filteredArticles =
    selectedCategory === "all"
      ? newsArticles
      : newsArticles.filter((article: NewsArticle) => article.category === selectedCategory)

const heroImages = useMemo(() => {
    return newsArticles
      .slice(0, 5)
      .map((article: NewsArticle) => article.image)
      .filter((img: string) => img && img.length > 0)
  }, [newsArticles])

const handleRefresh = async () => {
    setIsRefreshing(true)
    await mutate()
    setIsRefreshing(false)
  }

const featuredArticle = filteredArticles[0]
  const regularArticles = filteredArticles.slice(1)

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Content */}
        <div className="relative z-10 container mx-auto px-4">
          {/* Main Header - Compact and Centered */}
          <div className="pt-24 pb-8 text-center">
            <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 backdrop-blur-sm mb-6">
              <Newspaper className="w-5 h-5 text-primary" />
              <span className="text-sm font-medium text-primary">ข่าวสารพรีเมียร์ลีก</span>
            </div>

<h1 className="text-4xl md:text-5xl lg:text-6xl font-display mb-4">
              ข่าว<span className="text-primary">ฟุตบอล</span>ล่าสุด
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              อัปเดตข่าวสาร บทวิเคราะห์ และความเคลื่อนไหวล่าสุดจากพรีเมียร์ลีกอังกฤษ
            </p>
          </div>

{/* Filter Bar - Sticky with glass effect */}
          <div className="pb-8">
            <div className="flex flex-col sm:flex-row items-center justify-between gap-4 p-4 rounded-2xl bg-card/80 backdrop-blur-md border border-border/50">
              {/* Category Tabs */}
              <div className="flex items-center gap-2 flex-wrap justify-center">
                {categories.map((category) => {
                  const Icon = category.icon
                  return (
                    <Button
                      key={category.id}
                      variant={selectedCategory === category.id ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setSelectedCategory(category.id)}
                      className={`gap-2 rounded-xl transition-all ${
                        selectedCategory === category.id ? "shadow-lg shadow-primary/25" : "hover:bg-muted"
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                      {category.label}
                    </Button>
                  )
                })}
              </div>

{/* Refresh Button & Stats */}
              <div className="flex items-center gap-4">
                <div className="hidden md:flex items-center gap-2 text-sm text-muted-foreground">
                  <span className="font-semibold text-foreground">{filteredArticles.length}</span>
                  <span>ข่าว</span>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleRefresh}
                  disabled={isRefreshing || isLoading}
                  className="gap-2 rounded-xl bg-transparent"
                >
                  <RefreshCw className={`w-4 h-4 ${isRefreshing ? "animate-spin" : ""}`} />
                  <span className="hidden sm:inline">รีเฟรช</span>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* End of redesign */}

<main className="container mx-auto px-4 py-8">
        {isLoading && (
          <div className="flex items-center justify-center py-20">
            <Loader2 className="w-8 h-8 animate-spin text-primary" />
            <span className="ml-3 text-muted-foreground">กำลังโหลดข่าว...</span>
          </div>
        )}

{error && (
          <Card className="border-destructive/50 bg-destructive/5 mb-8">
            <CardContent className="py-8 text-center">
              <p className="text-destructive mb-4">ไม่สามารถโหลดข่าวได้</p>
              <Button variant="outline" onClick={handleRefresh} className="gap-2 bg-transparent">
                <RefreshCw className="w-4 h-4" /> ลองใหม่
              </Button>
            </CardContent>
          </Card>
        )}

{/* Featured Article */}
        {featuredArticle && !isLoading && (
          <a href={featuredArticle.url} target="_blank" rel="noopener noreferrer" className="block mb-8">
            <Card className="overflow-hidden border-border/50 hover:border-primary/50 transition-all group">
              <div className="grid md:grid-cols-2 gap-0">
                <div className="relative aspect-video md:aspect-auto md:h-full bg-muted">
                  <NewsImage src={featuredArticle.image} alt={featuredArticle.title} />
                  <Badge className="absolute top-4 left-4 bg-primary">ข่าวเด่น</Badge>
                </div>
                <div className="p-6 md:p-8 flex flex-col justify-center">
                  <h2 className="text-2xl md:text-3xl font-display mb-4 group-hover:text-primary transition-colors">
                    {featuredArticle.title}
                  </h2>
                  {featuredArticle.description && (
                    <p className="text-muted-foreground mb-6 line-clamp-3">{featuredArticle.description}</p>
                  )}
                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span>{featuredArticle.source}</span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <Clock className="w-4 h-4" /> {featuredArticle.timeAgo}
                    </span>
                  </div>
                </div>
              </div>
            </Card>
          </a>
        )}

{/* Regular Articles */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {regularArticles.map((article: NewsArticle) => (
            <a key={article.id} href={article.url} target="_blank" rel="noopener noreferrer" className="block group">
              <Card className="overflow-hidden border-border/50 hover:border-primary/50 transition-all h-full">
                <div className="relative aspect-video bg-muted">
                  <NewsImage src={article.image} alt={article.title} />
                </div>
                <CardHeader>
                  <CardTitle className="text-lg group-hover:text-primary transition-colors line-clamp-2">
                    {article.title}
                  </CardTitle>
                  {article.description && (
                    <CardDescription className="line-clamp-2">{article.description}</CardDescription>
                  )}
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <div className="flex items-center gap-1">
                      <Newspaper className="w-3 h-3" /> {article.source}
                    </div>
                    <div className="flex items-center gap-1">
                      <Clock className="w-3 h-3" /> {article.timeAgo}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </a>
          ))}
        </div>

{!isLoading && filteredArticles.length === 0 && (
          <Card className="border-dashed border-2 border-border/50">
            <CardContent className="py-20 text-center">
              <Newspaper className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="font-semibold text-lg mb-2">ไม่พบข่าวในหมวดหมู่นี้</h3>
              <p className="text-muted-foreground mb-4">ลองเลือกหมวดหมู่อื่น</p>
              <Button variant="outline" onClick={() => setSelectedCategory("all")}>
                ดูข่าวทั้งหมด
              </Button>
            </CardContent>
          </Card>
        )}
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/players/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Trophy, Target, Shield, Loader2 } from "lucide-react"
import Link from "next/link"
import useSWR from "swr"
import Image from "next/image"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function PlayersPage() {
  const { data: scorersData, isLoading: scorersLoading } = useSWR("/api/football/topscorers", fetcher)
  const { data: assistsData, isLoading: assistsLoading } = useSWR("/api/football/topassists", fetcher)

const isLoading = scorersLoading || assistsLoading

const topScorers = scorersData?.data
    ? scorersData.data.slice(0, 10).map((item: any) => ({
        id: item.player.id,
        name: item.player.name,
        photo: item.player.photo,
        team: item.statistics[0]?.team?.name || "Unknown",
        teamLogo: item.statistics[0]?.team?.logo,
        goals: item.statistics[0]?.goals?.total || 0,
        assists: item.statistics[0]?.goals?.assists || 0,
        matches: item.statistics[0]?.games?.appearences || 0,
      }))
    : []

const topAssists = assistsData?.data
    ? assistsData.data.slice(0, 10).map((item: any) => ({
        id: item.player.id,
        name: item.player.name,
        photo: item.player.photo,
        team: item.statistics[0]?.team?.name || "Unknown",
        teamLogo: item.statistics[0]?.team?.logo,
        assists: item.statistics[0]?.goals?.assists || 0,
        goals: item.statistics[0]?.goals?.total || 0,
        matches: item.statistics[0]?.games?.appearences || 0,
      }))
    : []

{/* Player Photo */}
            <div className="w-12 h-12 rounded-full overflow-hidden bg-muted shrink-0">
              <Image
                src={player.photo || "/placeholder.svg"}
                alt={player.name}
                width={48}
                height={48}
                className="w-full h-full object-cover"
              />
            </div>

{/* Player Info */}
            <div className="flex-1 min-w-0">
              <p className="font-medium truncate">{player.name}</p>
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                {player.teamLogo && (
                  <Image
                    src={player.teamLogo || "/placeholder.svg"}
                    alt=""
                    width={14}
                    height={14}
                    className="rounded-full"
                  />
                )}
                <span className="truncate">{player.team}</span>
              </div>
            </div>

{/* Stats */}
            <div className="text-right shrink-0">
              <p className="text-2xl font-bold text-primary">{statValue}</p>
              <p className="text-xs text-muted-foreground">{statLabel}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  )

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Header */}
      <div className="border-b border-border">
        <div className="container mx-auto px-4 py-8">
          <div className="flex items-center gap-3 mb-2">
            <Trophy className="w-8 h-8 text-primary" />
            <h1 className="text-2xl md:text-3xl font-bold">สถิตินักเตะ</h1>
          </div>
          <p className="text-muted-foreground">อันดับผู้ทำประตูและแอสซิสต์สูงสุดในพรีเมียร์ลีก 2024/25</p>
        </div>
      </div>

<main className="container mx-auto px-4 py-8">
        {isLoading ? (
          <div className="flex flex-col items-center justify-center py-20">
            <Loader2 className="w-10 h-10 animate-spin text-primary mb-4" />
            <p className="text-muted-foreground">กำลังโหลดข้อมูลสถิติ...</p>
          </div>
        ) : (
          <Tabs defaultValue="scorers" className="w-full">
            <TabsList className="grid w-full max-w-md mx-auto grid-cols-3 mb-8">
              <TabsTrigger value="scorers" className="gap-2">
                <Trophy className="w-4 h-4" />
                ดาวซัลโว
              </TabsTrigger>
              <TabsTrigger value="assists" className="gap-2">
                <Target className="w-4 h-4" />
                แอสซิสต์
              </TabsTrigger>
              <TabsTrigger value="cleansheets" className="gap-2">
                <Shield className="w-4 h-4" />
                คลีนชีต
              </TabsTrigger>
            </TabsList>

<TabsContent value="scorers">
              <div className="max-w-2xl mx-auto space-y-3">
                {topScorers.map((player: any, i: number) => (
                  <PlayerCard key={player.id} player={player} rank={i + 1} statValue={player.goals} statLabel="ประตู" />
                ))}
              </div>
            </TabsContent>

<TabsContent value="assists">
              <div className="max-w-2xl mx-auto space-y-3">
                {topAssists.map((player: any, i: number) => (
                  <PlayerCard
                    key={player.id}
                    player={player}
                    rank={i + 1}
                    statValue={player.assists}
                    statLabel="แอสซิสต์"
                  />
                ))}
              </div>
            </TabsContent>

<TabsContent value="cleansheets">
              <div className="max-w-2xl mx-auto">
                <Card className="border-border/50">
                  <CardContent className="flex flex-col items-center justify-center py-16">
                    <Shield className="w-12 h-12 text-muted-foreground mb-4" />
                    <h3 className="text-lg font-semibold mb-2">กำลังรวบรวมข้อมูล</h3>
                    <p className="text-muted-foreground text-center">ข้อมูลสถิติคลีนชีตจะอัปเดตเร็วๆ นี้</p>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        )}
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import {
  MessageSquare,
  ThumbsUp,
  MessageCircle,
  Plus,
  Clock,
  Eye,
  Users,
  Flame,
  Trophy,
  Star,
  Search,
  ArrowUp,
  Pin,
  Share2,
  Bookmark,
  Sparkles,
  Award,
  Zap,
} from "lucide-react"
import Link from "next/link"
import { useState } from "react"

export default function CommunityPage() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [showCreatePost, setShowCreatePost] = useState(false)

const categories = [
    { id: "all", label: "ทั้งหมด", icon: Flame, count: 156 },
    { id: "match-discussion", label: "วิเคราะห์แมตช์", icon: MessageSquare, count: 45 },
    { id: "transfer-rumors", label: "ข่าวย้ายทีม", icon: Zap, count: 32 },
    { id: "player-discussion", label: "พูดคุยนักเตะ", icon: Star, count: 28 },
    { id: "predictions", label: "ทายผล", icon: Trophy, count: 51 },
  ]

const discussions = [
    {
      id: 1,
      title: "แมนซิตี้ vs ลิเวอร์พูล จะเป็นเกมชี้ชะตาแชมป์ฤดูกาลนี้",
      author: {
        name: "สมชาย แฟนบอล",
        avatar: "/thai-man-football-fan.jpg",
        badge: "VIP",
        badgeColor: "bg-amber-500",
        level: 42,
      },
      category: "match-discussion",
      categoryLabel: "วิเคราะห์แมตช์",
      excerpt: "เกมนี้สำคัญมากสำหรับการแย่งแชมป์ ผมคิดว่าแมนซิตี้จะชนะด้วยฟอร์มที่ดีกว่า แต่ลิเวอร์พูลก็มาแรงมาก...",
      likes: 245,
      comments: 89,
      views: 1234,
      timeAgo: "30 นาทีที่แล้ว",
      isPinned: true,
      isHot: true,
    },
    {
      id: 2,
      title: "ฮาแลนด์ vs ซาลาห์ - ศึกดาวซัลโวจะลงเอยที่ใคร?",
      author: {
        name: "วิชัย ลิเวอร์พูล",
        avatar: "/thai-man-liverpool-supporter.jpg",
        badge: "Pro",
        badgeColor: "bg-emerald-500",
        level: 38,
      },
      category: "player-discussion",
      categoryLabel: "พูดคุยนักเตะ",
      excerpt: "ทั้งสองคนเก่งมากทั้งคู่ แต่ผมคิดว่าฮาแลนด์ยิงประตูได้มากกว่า แต่ซาลาห์ช่วยทีมได้รอบด้านกว่า",
      likes: 167,
      comments: 156,
      views: 2567,
      timeAgo: "1 ชั่วโมงที่แล้ว",
      isPinned: false,
      isHot: true,
    },
    {
      id: 3,
      title: "อาร์เซนอลจะคว้าตัว โอซิเมน มาเสริมทีมได้หรือไม่?",
      author: {
        name: "ประยุทธ์ ปืนใหญ่",
        avatar: "/thai-man-arsenal-fan.jpg",
        badge: "Member",
        badgeColor: "bg-zinc-500",
        level: 15,
      },
      category: "transfer-rumors",
      categoryLabel: "ข่าวย้ายทีม",
      excerpt: "เห็นข่าวว่าอาร์เซนอลจะเซ็นโอซิเมนในช่วงซัมเมอร์ มูลค่า 80 ล้านปอนด์ คิดว่าจะเป็นไปได้ไหม?",
      likes: 98,
      comments: 67,
      views: 876,
      timeAgo: "2 ชั่วโมงที่แล้ว",
      isPinned: false,
      isHot: false,
    },
    {
      id: 4,
      title: "ทายผลประจำสัปดาห์: เชลซี vs นิวคาสเซิล",
      author: {
        name: "อนุชา บอลคลุก",
        avatar: "/thai-man-chelsea-supporter.jpg",
        badge: "Pro",
        badgeColor: "bg-emerald-500",
        level: 29,
      },
      category: "predictions",
      categoryLabel: "ทายผล",
      excerpt: "สัปดาห์นี้มีเกมเชลซีปะทะนิวคาสเซิล มาทายผลกันครับ ผมว่าเสมอ 2-2",
      likes: 78,
      comments: 142,
      views: 654,
      timeAgo: "3 ชั่วโมงที่แล้ว",
      isPinned: false,
      isHot: false,
    },
    {
      id: 5,
      title: "แมนยูต้องเปลี่ยนกุนซือหรือยัง? ความเห็นจากแฟนบอล",
      author: {
        name: "สุรชัย ปีศาจแดง",
        avatar: "/thai-man-manchester-united-fan.jpg",
        badge: "VIP",
        badgeColor: "bg-amber-500",
        level: 56,
      },
      category: "match-discussion",
      categoryLabel: "วิเคราะห์แมตช์",
      excerpt: "ผมคิดว่าแมนยูต้องหากองกลางมาเสริมด่วน เพราะตอนนี้ขาดแคลนตรงนี้มาก และต้องพิจารณาเรื่องกุนซือด้วย",
      likes: 189,
      comments: 234,
      views: 1876,
      timeAgo: "5 ชั่วโมงที่แล้ว",
      isPinned: false,
      isHot: true,
    },
  ]

const filteredDiscussions =
    selectedCategory === "all" ? discussions : discussions.filter((d) => d.category === selectedCategory)

const topContributors = [
    { name: "สมชาย แฟนบอล", avatar: "/thai-man-1.jpg", points: 2456, rank: 1 },
    { name: "วิชัย ลิเวอร์พูล", avatar: "/thai-man-2.jpg", points: 2134, rank: 2 },
    { name: "สุรชัย ปีศาจแดง", avatar: "/thai-man-3.jpg", points: 1987, rank: 3 },
    { name: "ประยุทธ์ ปืนใหญ่", avatar: "/thai-man-4.jpg", points: 1654, rank: 4 },
    { name: "อนุชา บอลคลุก", avatar: "/thai-man-5.jpg", points: 1432, rank: 5 },
  ]

const liveActivities = [
    { user: "สมชาย", action: "แสดงความคิดเห็นใน", target: "ศึกดาวซัลโว", time: "เมื่อสักครู่" },
    { user: "วิชัย", action: "สร้างกระทู้ใหม่", target: "วิเคราะห์เกมคืนนี้", time: "2 นาทีที่แล้ว" },
    { user: "ประยุทธ์", action: "กดถูกใจ", target: "ข่าวย้ายทีม", time: "5 นาทีที่แล้ว" },
  ]

const communityStats = [
    { label: "สมาชิก", value: "12,456", icon: Users },
    { label: "กระทู้", value: "3,892", icon: MessageSquare },
    { label: "ความคิดเห็น", value: "45.6K", icon: MessageCircle },
    { label: "ออนไลน์", value: "234", icon: Zap },
  ]

return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="relative pt-20 pb-8 border-b border-border/50">
        <div className="container mx-auto px-4 max-w-7xl">
          {/* Header */}
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-8">
            <div>
              <div className="flex items-center gap-3 mb-3">
                <div className="p-2.5 bg-primary/10 rounded-xl">
                  <Users className="w-6 h-6 text-primary" />
                </div>
                <Badge variant="outline" className="text-xs font-normal">
                  <span className="w-2 h-2 bg-green-500 rounded-full mr-1.5 animate-pulse" />
                  234 ออนไลน์
                </Badge>
              </div>
              <h1 className="text-4xl md:text-5xl font-bold mb-2">ชุมชนแฟนบอล</h1>
              <p className="text-muted-foreground text-lg">แลกเปลี่ยนความคิดเห็น วิเคราะห์ และพูดคุยกับแฟนบอลพรีเมียร์ลีก</p>
            </div>

{/* Stats Cards */}
            <div className="flex gap-3">
              {communityStats.map((stat, i) => (
                <div key={i} className="text-center px-4 py-2 bg-card/50 rounded-xl border border-border/50">
                  <div className="text-xl md:text-2xl font-bold text-primary">{stat.value}</div>
                  <div className="text-xs text-muted-foreground">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>

{/* Search & Create */}
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="ค้นหากระทู้, หัวข้อ, หรือสมาชิก..."
                className="pl-10 bg-card/50"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Button onClick={() => setShowCreatePost(!showCreatePost)} className="gap-2">
              <Plus className="w-4 h-4" />
              สร้างกระทู้ใหม่
            </Button>
          </div>
        </div>
      </section>

<div className="container mx-auto px-4 py-8 max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-3 space-y-6">
            {/* Create Post Card */}
            {showCreatePost && (
              <Card className="border-primary/30 bg-primary/5">
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Sparkles className="w-5 h-5 text-primary" />
                    สร้างกระทู้ใหม่
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Input placeholder="หัวข้อกระทู้..." className="font-medium" />
                  <Textarea
                    placeholder="เขียนเนื้อหาของคุณที่นี่... แบ่งปันความคิดเห็น วิเคราะห์ หรือตั้งคำถาม"
                    className="min-h-28 resize-none"
                  />
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="flex flex-wrap gap-2">
                      {categories.slice(1).map((cat) => (
                        <Badge
                          key={cat.id}
                          variant="outline"
                          className="cursor-pointer hover:bg-primary/10 transition-colors"
                        >
                          <cat.icon className="w-3 h-3 mr-1" />
                          {cat.label}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex gap-2">
                      <Button variant="outline" size="sm" onClick={() => setShowCreatePost(false)}>
                        ยกเลิก
                      </Button>
                      <Button size="sm" className="gap-1.5">
                        <Plus className="w-4 h-4" />
                        โพสต์
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

{/* Category Tabs */}
            <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
              {categories.map((category) => {
                const Icon = category.icon
                return (
                  <Button
                    key={category.id}
                    variant={selectedCategory === category.id ? "default" : "outline"}
                    onClick={() => setSelectedCategory(category.id)}
                    className="rounded-full whitespace-nowrap gap-1.5"
                    size="sm"
                  >
                    <Icon className="w-3.5 h-3.5" />
                    {category.label}
                    <span
                      className={`text-xs px-1.5 py-0.5 rounded-full ${
                        selectedCategory === category.id ? "bg-primary-foreground/20" : "bg-muted"
                      }`}
                    >
                      {category.count}
                    </span>
                  </Button>
                )
              })}
            </div>

{/* Discussions List */}
            <div className="space-y-3">
              {filteredDiscussions.map((discussion) => (
                <Card
                  key={discussion.id}
                  className={`group border-border/50 hover:border-primary/30 hover:shadow-md transition-all ${
                    discussion.isPinned ? "border-primary/50 bg-primary/5" : ""
                  }`}
                >
                  <CardContent className="p-4">
                    <div className="flex gap-4">
                      {/* Avatar */}
                      <div className="hidden sm:block relative">
                        <Avatar className="w-12 h-12 ring-2 ring-border">
                          <AvatarImage src={discussion.author.avatar || "/placeholder.svg"} />
                          <AvatarFallback>{discussion.author.name[0]}</AvatarFallback>
                        </Avatar>
                        <div className="absolute -bottom-1 -right-1 bg-card rounded-full px-1.5 py-0.5 text-[10px] font-bold border">
                          Lv.{discussion.author.level}
                        </div>
                      </div>

{/* Content */}
                      <div className="flex-1 min-w-0">
                        {/* Meta */}
                        <div className="flex flex-wrap items-center gap-2 mb-2">
                          <span className="font-medium text-sm">{discussion.author.name}</span>
                          <Badge className={`${discussion.author.badgeColor} text-white text-[10px] px-1.5 py-0`}>
                            {discussion.author.badge}
                          </Badge>
                          <span className="text-muted-foreground text-xs">•</span>
                          <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                            {discussion.categoryLabel}
                          </Badge>
                          {discussion.isPinned && (
                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 gap-0.5">
                              <Pin className="w-2.5 h-2.5" />
                              ปักหมุด
                            </Badge>
                          )}
                          {discussion.isHot && (
                            <Badge className="bg-red-500/10 text-red-500 text-[10px] px-1.5 py-0 gap-0.5">
                              <Flame className="w-2.5 h-2.5" />
                              Hot
                            </Badge>
                          )}
                        </div>

{/* Title */}
                        <Link href={`/community/${discussion.id}`}>
                          <h3 className="font-semibold text-base md:text-lg mb-1.5 hover:text-primary transition-colors line-clamp-2">
                            {discussion.title}
                          </h3>
                        </Link>

{/* Excerpt */}
                        <p className="text-muted-foreground text-sm line-clamp-2 mb-3">{discussion.excerpt}</p>

{/* Actions */}
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4 text-sm">
                            <button className="flex items-center gap-1.5 text-muted-foreground hover:text-primary transition-colors">
                              <ThumbsUp className="w-4 h-4" />
                              <span>{discussion.likes}</span>
                            </button>
                            <button className="flex items-center gap-1.5 text-muted-foreground hover:text-primary transition-colors">
                              <MessageCircle className="w-4 h-4" />
                              <span>{discussion.comments}</span>
                            </button>
                            <div className="flex items-center gap-1.5 text-muted-foreground">
                              <Eye className="w-4 h-4" />
                              <span>{discussion.views}</span>
                            </div>
                          </div>

<div className="flex items-center gap-1">
                            <span className="text-xs text-muted-foreground flex items-center gap-1">
                              <Clock className="w-3 h-3" />
                              {discussion.timeAgo}
                            </span>
                            <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 ml-2">
                              <Button variant="ghost" size="icon" className="h-7 w-7">
                                <Bookmark className="w-3.5 h-3.5" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-7 w-7">
                                <Share2 className="w-3.5 h-3.5" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{filteredDiscussions.length === 0 && (
              <Card className="border-dashed border-2 border-border/50">
                <CardContent className="py-16 text-center">
                  <MessageSquare className="w-12 h-12 text-muted-foreground/30 mx-auto mb-4" />
                  <h3 className="font-semibold text-lg text-muted-foreground mb-2">ไม่พบกระทู้ในหมวดหมู่นี้</h3>
                  <p className="text-muted-foreground text-sm mb-4">ลองเลือกหมวดหมู่อื่นหรือสร้างกระทู้ใหม่</p>
                  <Button variant="outline" onClick={() => setShowCreatePost(true)} className="gap-2">
                    <Plus className="w-4 h-4" />
                    สร้างกระทู้แรก
                  </Button>
                </CardContent>
              </Card>
            )}

{/* Load More */}
            <div className="text-center">
              <Button variant="outline" className="gap-2 bg-transparent">
                โหลดเพิ่มเติม
                <ArrowUp className="w-4 h-4 rotate-180" />
              </Button>
            </div>
          </div>

{/* Sidebar */}
          <div className="space-y-4">
            {/* Top Contributors */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-base flex items-center gap-2">
                  <Trophy className="w-4 h-4 text-amber-500" />
                  สมาชิกยอดเยี่ยม
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {topContributors.map((user) => (
                  <div
                    key={user.rank}
                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
                  >
                    <div
                      className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                        user.rank === 1
                          ? "bg-amber-500 text-white"
                          : user.rank === 2
                            ? "bg-zinc-400 text-white"
                            : user.rank === 3
                              ? "bg-amber-700 text-white"
                              : "bg-muted text-muted-foreground"
                      }`}
                    >
                      {user.rank}
                    </div>
                    <Avatar className="w-8 h-8">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{user.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1 min-w-0">
                      <div className="font-medium text-sm truncate">{user.name}</div>
                      <div className="text-xs text-muted-foreground">{user.points.toLocaleString()} pts</div>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Live Activity */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-base flex items-center gap-2">
                  <Zap className="w-4 h-4 text-green-500" />
                  กิจกรรมล่าสุด
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {liveActivities.map((activity, i) => (
                  <div key={i} className="flex items-start gap-2 text-sm">
                    <div className="w-1.5 h-1.5 rounded-full bg-green-500 mt-2 animate-pulse" />
                    <div>
                      <span className="font-medium">{activity.user}</span>
                      <span className="text-muted-foreground"> {activity.action} </span>
                      <span className="text-primary">{activity.target}</span>
                      <div className="text-xs text-muted-foreground">{activity.time}</div>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Community Rules */}
            <Card className="border-border/50">
              <CardHeader className="pb-3">
                <CardTitle className="text-base flex items-center gap-2">
                  <Award className="w-4 h-4 text-primary" />
                  กฎของชุมชน
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-2 text-sm text-muted-foreground">
                {["เคารพความคิดเห็นของผู้อื่น", "ไม่ใช้คำหยาบหรือด่าทอผู้อื่น", "ห้ามโพสต์สแปมหรือโฆษณา", "ใช้หมวดหมู่ที่เหมาะสม"].map(
                  (rule, i) => (
                    <div key={i} className="flex items-start gap-2">
                      <div className="w-1 h-1 rounded-full bg-primary mt-2" />
                      <span>{rule}</span>
                    </div>
                  ),
                )}
              </CardContent>
            </Card>

{/* Quick Poll */}
            <Card className="border-border/50 bg-gradient-to-br from-primary/5 to-transparent">
              <CardHeader className="pb-3">
                <CardTitle className="text-base">โพลด่วน</CardTitle>
                <CardDescription className="text-sm">ทีมไหนจะคว้าแชมป์พรีเมียร์ลีกฤดูกาลนี้?</CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                {[
                  { team: "แมนเชสเตอร์ ซิตี้", votes: 45 },
                  { team: "ลิเวอร์พูล", votes: 32 },
                  { team: "อาร์เซนอล", votes: 18 },
                  { team: "อื่นๆ", votes: 5 },
                ].map((option, i) => (
                  <button key={i} className="w-full text-left">
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-sm font-medium">{option.team}</span>
                      <span className="text-xs text-muted-foreground">{option.votes}%</span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div
                        className="h-full bg-primary rounded-full transition-all"
                        style={{ width: `${option.votes}%` }}
                      />
                    </div>
                  </button>
                ))}
                <p className="text-xs text-muted-foreground text-center pt-2">รวม 1,234 โหวต</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]jpg:file="public/thai-man-football-fan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-football-fan-xEDrTLQuEH4SnabZ5DyiBR3tDtrIkG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-liverpool-supporter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-liverpool-supporter-ofgxwtBFop3yWsKtAjwv49F9WTTG9O.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-arsenal-fan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-arsenal-fan-NXUwM9wgTp4KLUT93cIveKEj2KSwtL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-chelsea-supporter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-chelsea-supporter-lDHZvk0yQ51RstfRkxuhLxsrOpgi4m.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-manchester-united-fan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-manchester-united-fan-cE2evfKYbE8I7YcFhXfWVVOCUiLCgF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-1-N92kIuPwcQFUHXKdraKnsvbsiipBR8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-2-m1c3BbfIXkomtOfKhDurrvHoFLf1jP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-3-7mvNoIqwVN8SF7DFUY5LAbptr9YSyk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-4-PiLD6hOlnYid6rzhf1c3VK8JUbE9cr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/thai-man-5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thai-man-5-jJHTkNbH49dwAF3VpGCnrawzpBg1oA.jpg" isMerged="true"
[V0_FILE]typescript:file="app/api/football/standings/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getStandings, translateTeamName } from "@/lib/sportmonks"

export async function GET() {
  try {
    const standings = await getStandings()

const formattedStandings = standings.map((item: any) => {
      const details = item.details || []

// Extract stats from details array
      const getDetailValue = (typeId: number) => {
        const detail = details.find((d: any) => d.type_id === typeId)
        return detail?.value || 0
      }

// SportMonks detail type IDs:
      // 129 = Matches Played, 130 = Won, 131 = Draw, 132 = Lost
      // 133 = Goals For, 134 = Goals Against, 187 = Goal Difference, 179 = Points

return {
        rank: item.position,
        team: {
          id: item.participant_id?.toString() || "",
          name: translateTeamName(item.participant?.name || ""),
          nameEn: item.participant?.name || "",
          logo: item.participant?.image_path || "",
        },
        points: getDetailValue(179),
        goalsDiff: getDetailValue(187),
        form: item.form || "",
        all: {
          played: getDetailValue(129),
          win: getDetailValue(130),
          draw: getDetailValue(131),
          lose: getDetailValue(132),
          goals: {
            for: getDetailValue(133),
            against: getDetailValue(134),
          },
        },
      }
    })

// Sort by position
    formattedStandings.sort((a: any, b: any) => a.rank - b.rank)

return NextResponse.json({
      data: formattedStandings,
      season: "2024-2025",
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Standings API error:", error)

return NextResponse.json(
      {
        data: [],
        season: "2024-2025",
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch standings",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/fixtures/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getFixtures, translateTeamName, translateStatus, formatDateThai } from "@/lib/sportmonks"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const type = searchParams.get("type") || "all"
  const round = searchParams.get("round")

try {
    const fixtures = await getFixtures({ round: round || undefined })

const formattedFixtures = fixtures.map((item: any) => {
      const stateId = item.state_id || 1
      const statusInfo = translateStatus(stateId, item.state?.name)

const isFinished = [3, 4, 5, 9, 10].includes(stateId)
      const isLive = [2, 13, 14, 15, 16, 17, 18].includes(stateId)
      const isUpcoming = [1, 6, 21].includes(stateId)

// Get participants (teams)
      const participants = item.participants || []
      const homeTeam = participants.find((p: any) => p.meta?.location === "home")
      const awayTeam = participants.find((p: any) => p.meta?.location === "away")

// Get scores
      const scores = item.scores || []
      const getScore = (participantId: number, description: string) => {
        const score = scores.find((s: any) => s.participant_id === participantId && s.description === description)
        return score?.score?.goals ?? null
      }

const homeGoals = getScore(homeTeam?.id, "CURRENT") ?? getScore(homeTeam?.id, "2ND_HALF")
      const awayGoals = getScore(awayTeam?.id, "CURRENT") ?? getScore(awayTeam?.id, "2ND_HALF")

// Extract round number
      const roundNumber = item.round?.name ? Number.parseInt(item.round.name) : null

return {
        id: item.id?.toString() || "",
        date: item.starting_at || "",
        dateThai: formatDateThai(item.starting_at || ""),
        roundNumber,
        status: {
          short: statusInfo.short,
          long: statusInfo.long,
          elapsed: item.minute || null,
          isLive,
          isFinished,
          isUpcoming,
        },
        teams: {
          home: {
            id: homeTeam?.id?.toString() || "",
            name: translateTeamName(homeTeam?.name || ""),
            nameEn: homeTeam?.name || "",
            logo: homeTeam?.image_path || "",
            winner: isFinished && homeGoals !== null && awayGoals !== null ? homeGoals > awayGoals : null,
          },
          away: {
            id: awayTeam?.id?.toString() || "",
            name: translateTeamName(awayTeam?.name || ""),
            nameEn: awayTeam?.name || "",
            logo: awayTeam?.image_path || "",
            winner: isFinished && homeGoals !== null && awayGoals !== null ? awayGoals > homeGoals : null,
          },
        },
        goals: {
          home: homeGoals,
          away: awayGoals,
        },
        league: {
          id: item.league_id?.toString() || "",
          name: "พรีเมียร์ลีก",
          round: roundNumber ? `นัดที่ ${roundNumber}` : item.round?.name || "",
        },
        venue: {
          name: item.venue?.name || "",
          city: item.venue?.city_name || "",
        },
      }
    })

// Filter by type
    let filteredFixtures = formattedFixtures
    if (type === "upcoming") {
      filteredFixtures = formattedFixtures.filter((f: any) => f.status.isUpcoming || f.status.isLive)
    } else if (type === "finished") {
      filteredFixtures = formattedFixtures.filter((f: any) => f.status.isFinished)
    }

// Sort by date
    filteredFixtures.sort((a: any, b: any) => new Date(a.date).getTime() - new Date(b.date).getTime())

// Get available rounds
    const availableRounds = [...new Set(formattedFixtures.map((f: any) => f.roundNumber).filter(Boolean))].sort(
      (a, b) => (a as number) - (b as number),
    )

return NextResponse.json({
      data: filteredFixtures,
      type,
      source: "sportmonks",
      rounds: {
        available: availableRounds,
        total: 38,
        current: round ? Number.parseInt(round) : null,
      },
      totalMatches: formattedFixtures.length,
    })
  } catch (error) {
    console.error("Fixtures API error:", error)

return NextResponse.json(
      {
        data: [],
        type,
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch fixtures",
        rounds: { available: [], total: 38, current: null },
        totalMatches: 0,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/topscorers/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getTopScorers, translateTeamName } from "@/lib/sportmonks"

// Position translation
const positionMap: Record<number, string> = {
  24: "กองหน้า",
  25: "กองกลาง",
  26: "กองหลัง",
  27: "ผู้รักษาประตู",
}

export async function GET() {
  try {
    const scorers = await getTopScorers()

const formattedScorers = scorers.slice(0, 20).map((item: any) => ({
      player: {
        id: item.player_id?.toString() || item.player?.id?.toString() || "",
        name: item.player?.display_name || item.player?.name || "",
        photo: item.player?.image_path || "",
        nationality: item.player?.nationality?.name || "",
        age: item.player?.date_of_birth
          ? Math.floor((Date.now() - new Date(item.player.date_of_birth).getTime()) / 31557600000)
          : null,
      },
      statistics: [
        {
          team: {
            id: item.participant?.id?.toString() || "",
            name: translateTeamName(item.participant?.name || ""),
            logo: item.participant?.image_path || "",
          },
          games: {
            appearences: item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 45)?.value || 0,
            position: positionMap[item.player?.position_id] || "",
            rating:
              item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 118)?.value?.toFixed(2) || "0",
          },
          goals: {
            total: item.total || 0,
            assists: item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 79)?.value || 0,
          },
        },
      ],
    }))

return NextResponse.json({
      data: formattedScorers,
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Top Scorers API error:", error)

return NextResponse.json(
      {
        data: [],
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch top scorers",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/topassists/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getTopAssists, translateTeamName } from "@/lib/sportmonks"

export async function GET() {
  try {
    const assists = await getTopAssists()

const formattedAssists = assists.slice(0, 20).map((item: any) => ({
      player: {
        id: item.player_id?.toString() || item.player?.id?.toString() || "",
        name: item.player?.display_name || item.player?.name || "",
        photo: item.player?.image_path || "",
        nationality: item.player?.nationality?.name || "",
        age: item.player?.date_of_birth
          ? Math.floor((Date.now() - new Date(item.player.date_of_birth).getTime()) / 31557600000)
          : null,
      },
      statistics: [
        {
          team: {
            id: item.participant?.id?.toString() || "",
            name: translateTeamName(item.participant?.name || ""),
            logo: item.participant?.image_path || "",
          },
          games: {
            appearences: item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 45)?.value || 0,
            position: positionMap[item.player?.position_id] || "",
            rating:
              item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 118)?.value?.toFixed(2) || "0",
          },
          goals: {
            total: item.player?.statistics?.[0]?.details?.find((d: any) => d.type_id === 52)?.value || 0,
            assists: item.total || 0,
          },
        },
      ],
    }))

return NextResponse.json({
      data: formattedAssists,
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Top Assists API error:", error)

return NextResponse.json(
      {
        data: [],
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch top assists",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/teams/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getTeams, translateTeamName } from "@/lib/sportmonks"

export async function GET() {
  try {
    const teams = await getTeams()

const formattedTeams = teams.map((item: any) => ({
      team: {
        id: item.id?.toString() || "",
        name: translateTeamName(item.name || ""),
        nameEn: item.name || "",
        logo: item.image_path || "",
        founded: item.founded,
        code: item.short_code || "",
      },
      venue: {
        name: item.venue?.name || "",
        city: item.venue?.city_name || "",
        capacity: item.venue?.capacity || 0,
        image: item.venue?.image_path || "",
      },
    }))

return NextResponse.json({
      data: formattedTeams,
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Teams API error:", error)

return NextResponse.json(
      {
        data: [],
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch teams",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/cleansheets/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getTopCleanSheets, translateTeamName } from "@/lib/sportmonks"

export async function GET() {
  try {
    const cleanSheets = await getTopCleanSheets()

const formattedData = cleanSheets.slice(0, 10).map((team: any, index: number) => ({
      rank: index + 1,
      teamId: team.teamId,
      teamName: team.teamName,
      teamNameThai: translateTeamName(team.teamName),
      teamLogo: team.teamLogo,
      cleanSheets: team.cleanSheets,
    }))

return NextResponse.json({
      teams: formattedData,
      season: "2024-2025",
      lastUpdated: new Date().toISOString(),
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Error fetching clean sheets:", error)

// Return mock data if API fails
    const mockData = [
      {
        rank: 1,
        teamId: 8,
        teamName: "Liverpool",
        teamNameThai: "ลิเวอร์พูล",
        teamLogo: "https://cdn.sportmonks.com/images/soccer/teams/8/8.png",
        cleanSheets: 12,
      },
      {
        rank: 2,
        teamId: 9,
        teamName: "Manchester City",
        teamNameThai: "แมนเชสเตอร์ ซิตี้",
        teamLogo: "https://cdn.sportmonks.com/images/soccer/teams/9/9.png",
        cleanSheets: 11,
      },
      {
        rank: 3,
        teamId: 19,
        teamName: "Arsenal",
        teamNameThai: "อาร์เซนอล",
        teamLogo: "https://cdn.sportmonks.com/images/soccer/teams/19/19.png",
        cleanSheets: 10,
      },
      {
        rank: 4,
        teamId: 18,
        teamName: "Chelsea",
        teamNameThai: "เชลซี",
        teamLogo: "https://cdn.sportmonks.com/images/soccer/teams/18/18.png",
        cleanSheets: 8,
      },
      {
        rank: 5,
        teamId: 6,
        teamName: "Tottenham Hotspur",
        teamNameThai: "ท็อตแนม ฮอทสเปอร์",
        teamLogo: "https://cdn.sportmonks.com/images/soccer/teams/6/6.png",
        cleanSheets: 7,
      },
    ]

return NextResponse.json({
      teams: mockData,
      season: "2024-2025",
      lastUpdated: new Date().toISOString(),
      source: "mock",
    })
  }
}
[V0_FILE]typescript:file="app/api/football/players/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getPlayerStats, getPlayerTransfers, translateTeamName } from "@/lib/sportmonks"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params

try {
    const [playerData, transfers] = await Promise.all([getPlayerStats(id), getPlayerTransfers(id)])

if (!playerData) {
      return NextResponse.json({ error: "Player not found", source: "sportmonks" }, { status: 404 })
    }

const stats = playerData.statistics?.[0]
    const details = stats?.details || []

const getDetailValue = (typeId: number) => {
      const detail = details.find((d: any) => d.type_id === typeId)
      return detail?.value || 0
    }

const formattedPlayer = {
      id: playerData.id?.toString() || "",
      name: playerData.display_name || playerData.name || "",
      firstname: playerData.firstname || "",
      lastname: playerData.lastname || "",
      photo: playerData.image_path || "",
      nationality: playerData.nationality?.name || "",
      age: playerData.date_of_birth
        ? Math.floor((Date.now() - new Date(playerData.date_of_birth).getTime()) / 31557600000)
        : null,
      height: playerData.height ? `${playerData.height} cm` : null,
      weight: playerData.weight ? `${playerData.weight} kg` : null,
      injured: false,
      birth: {
        date: playerData.date_of_birth,
        place: playerData.city_of_birth,
        country: playerData.country?.name || "",
      },
      team: playerData.teams?.[0]
        ? {
            id: playerData.teams[0].id?.toString() || "",
            name: translateTeamName(playerData.teams[0].name || ""),
            logo: playerData.teams[0].image_path || "",
          }
        : null,
      position: positionMap[playerData.position_id] || playerData.position?.name || "",
      statistics: {
        games: {
          appearences: getDetailValue(45), // Appearances
          lineups: getDetailValue(46), // Lineups
          minutes: getDetailValue(47), // Minutes played
          rating: getDetailValue(118)?.toFixed(2) || "0.00",
          captain: false,
        },
        goals: {
          total: getDetailValue(52), // Goals
          assists: getDetailValue(79), // Assists
          conceded: getDetailValue(88), // Goals conceded (for GK)
          saves: getDetailValue(57), // Saves
        },
        shots: {
          total: getDetailValue(86), // Total shots
          on: getDetailValue(87), // Shots on target
        },
        passes: {
          total: getDetailValue(80), // Total passes
          key: getDetailValue(84), // Key passes
          accuracy: getDetailValue(81), // Pass accuracy
        },
        tackles: {
          total: getDetailValue(78), // Tackles
          blocks: getDetailValue(94), // Blocks
          interceptions: getDetailValue(100), // Interceptions
        },
        duels: {
          total: getDetailValue(105), // Duels total
          won: getDetailValue(106), // Duels won
        },
        dribbles: {
          attempts: getDetailValue(108), // Dribble attempts
          success: getDetailValue(109), // Successful dribbles
        },
        fouls: {
          drawn: getDetailValue(98), // Fouls drawn
          committed: getDetailValue(99), // Fouls committed
        },
        cards: {
          yellow: getDetailValue(84), // Yellow cards
          yellowred: 0,
          red: getDetailValue(85), // Red cards
        },
        penalty: {
          won: getDetailValue(116), // Penalties won
          commited: getDetailValue(117), // Penalties committed
          scored: getDetailValue(114), // Penalties scored
          missed: getDetailValue(115), // Penalties missed
          saved: getDetailValue(57), // Penalties saved
        },
      },
      allSeasonStats: [],
      transfers:
        transfers.slice(0, 10).map((t: any) => ({
          date: t.date,
          from: {
            name: translateTeamName(t.fromteam?.name || ""),
            logo: t.fromteam?.image_path || "",
          },
          to: {
            name: translateTeamName(t.toteam?.name || ""),
            logo: t.toteam?.image_path || "",
          },
          type: t.type || "",
        })) || [],
    }

return NextResponse.json({
      data: formattedPlayer,
      source: "sportmonks",
    })
  } catch (error) {
    console.error("Player API error:", error)

return NextResponse.json(
      {
        data: null,
        source: "error",
        error: error instanceof Error ? error.message : "Failed to fetch player",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/football/predictions/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getPredictions } from "@/lib/sportmonks"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params

try {
    const prediction = await getPredictions(id)

if (!prediction || prediction.length === 0) {
      return NextResponse.json(
        {
          data: [],
          source: "sportmonks",
          matchId: id,
          error: "No prediction available for this match",
        },
        { status: 404 },
      )
    }

const pred = Array.isArray(prediction) ? prediction[0] : prediction

const formattedPrediction = {
      predictions: {
        winner: {
          id: null,
          name: "ไม่มีข้อมูล",
          comment: "",
        },
        percent: {
          home: pred.predictions?.home ? `${pred.predictions.home}%` : "0%",
          draw: pred.predictions?.draw ? `${pred.predictions.draw}%` : "0%",
          away: pred.predictions?.away ? `${pred.predictions.away}%` : "0%",
        },
        advice: "ไม่มีคำแนะนำ",
      },
      teams: {
        home: {
          id: null,
          name: "",
          logo: "",
        },
        away: {
          id: null,
          name: "",
          logo: "",
        },
      },
      comparison: null,
      h2h: [],
    }

return NextResponse.json({
      data: [formattedPrediction],
      source: "sportmonks",
      matchId: id,
    })
  } catch (error) {
    console.error("Predictions API error:", error)

return NextResponse.json(
      {
        data: [],
        source: "error",
        matchId: id,
        error: error instanceof Error ? error.message : "Failed to fetch predictions",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/news/route.ts" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { formatDateThai, getTimeAgoThai } from "@/lib/sportmonks"

// News categories
type NewsCategory = "match" | "transfer" | "preview" | "result" | "general"

interface NewsArticle {
  id: string
  title: string
  titleEn?: string
  description: string
  descriptionEn?: string
  url: string
  image: string
  source: string
  timeAgo: string
  publishedAt: string
  publishedAtThai: string
  isFeatured: boolean
  category: NewsCategory
}

async function fetchRealNews(): Promise<NewsArticle[]> {
  const apiKey = process.env.GNEWS_API_KEY || "2d59fcd313d1e012b7ea784cf1380dd5"

if (!apiKey) {
    console.log("[v0] GNEWS_API_KEY not configured, using fallback news")
    return []
  }

try {
    // Search for Premier League news
    const response = await fetch(
      `https://gnews.io/api/v4/search?q=Premier+League+football&lang=en&country=uk&max=20&apikey=${apiKey}`,
      { next: { revalidate: 600 } }, // Cache for 10 minutes
    )

if (!response.ok) {
      console.error("GNews API error:", response.status)
      return []
    }

const data = await response.json()
    const articles: NewsArticle[] = []

if (data.articles && Array.isArray(data.articles)) {
      data.articles.forEach((article: any, index: number) => {
        // Translate title to Thai (simple translation for common terms)
        const titleThai = translateNewsTitleToThai(article.title)
        const descriptionThai = translateNewsDescriptionToThai(article.description || "")

// Categorize news
        const category = categorizeNews(article.title, article.description)

articles.push({
          id: `gnews-${index}-${Date.now()}`,
          title: titleThai,
          titleEn: article.title,
          description: descriptionThai,
          descriptionEn: article.description || "",
          url: article.url,
          image: article.image || "/premier-league-news.jpg",
          source: article.source?.name || "GNews",
          timeAgo: getTimeAgoThai(article.publishedAt),
          publishedAt: article.publishedAt,
          publishedAtThai: formatDateThai(article.publishedAt),
          isFeatured: index === 0,
          category: category,
        })
      })
    }

return articles
  } catch (error) {
    console.error("Failed to fetch real news:", error)
    return []
  }
}

// Translate news title to Thai
function translateNewsTitleToThai(title: string): string {
  let translated = title

// Team names
  const teamTranslations: Record<string, string> = {
    "Manchester United": "แมนเชสเตอร์ ยูไนเต็ด",
    "Manchester City": "แมนเชสเตอร์ ซิตี้",
    "Man United": "แมนฯ ยูไนเต็ด",
    "Man City": "แมนฯ ซิตี้",
    Liverpool: "ลิเวอร์พูล",
    Arsenal: "อาร์เซนอล",
    Chelsea: "เชลซี",
    Tottenham: "ท็อตแนม",
    Spurs: "สเปอร์ส",
    Newcastle: "นิวคาสเซิล",
    "Aston Villa": "แอสตัน วิลล่า",
    "West Ham": "เวสต์แฮม",
    Brighton: "ไบรท์ตัน",
    Fulham: "ฟูแล่ม",
    Brentford: "เบรนท์ฟอร์ด",
    "Crystal Palace": "คริสตัล พาเลซ",
    Wolves: "วูล์ฟส์",
    Everton: "เอฟเวอร์ตัน",
    "Nottingham Forest": "น็อตติงแฮม ฟอเรสต์",
    Bournemouth: "บอร์นมัธ",
    Leicester: "เลสเตอร์",
    Southampton: "เซาแธมป์ตัน",
    Ipswich: "อิปสวิช",
  }

// Common football terms
  const termTranslations: Record<string, string> = {
    "Premier League": "พรีเมียร์ลีก",
    "2024/25": "ฤดูกาล 2024/25",
    "2024-25": "ฤดูกาล 2024/25",
    transfer: "ย้ายทีม",
    Transfer: "ย้ายทีม",
    signs: "เซ็นสัญญา",
    Signs: "เซ็นสัญญา",
    injury: "อาการบาดเจ็บ",
    Injury: "อาการบาดเจ็บ",
    goal: "ประตู",
    Goal: "ประตู",
    goals: "ประตู",
    Goals: "ประตู",
    manager: "กุนซือ",
    Manager: "กุนซือ",
    coach: "โค้ช",
    Coach: "โค้ช",
    win: "ชนะ",
    Win: "ชนะ",
    wins: "ชนะ",
    Wins: "ชนะ",
    lose: "แพ้",
    Lose: "แพ้",
    loss: "พ่ายแพ้",
    Loss: "พ่ายแพ้",
    draw: "เสมอ",
    Draw: "เสมอ",
    match: "แมตช์",
    Match: "แมตช์",
    player: "นักเตะ",
    Player: "นักเตะ",
    players: "นักเตะ",
    Players: "นักเตะ",
    team: "ทีม",
    Team: "ทีม",
    football: "ฟุตบอล",
    Football: "ฟุตบอล",
    season: "ฤดูกาล",
    Season: "ฤดูกาล",
    vs: "พบ",
    VS: "พบ",
    against: "พบ",
    beats: "เอาชนะ",
    Beats: "เอาชนะ",
    defeated: "พ่ายแพ้ต่อ",
    Defeated: "พ่ายแพ้ต่อ",
    defeats: "เอาชนะ",
    Defeats: "เอาชนะ",
    news: "ข่าว",
    News: "ข่าว",
    update: "อัปเดต",
    Update: "อัปเดต",
    breaking: "ด่วน",
    Breaking: "ด่วน",
    exclusive: "เอ็กซ์คลูซีฟ",
    Exclusive: "เอ็กซ์คลูซีฟ",
    report: "รายงาน",
    Report: "รายงาน",
    confirms: "ยืนยัน",
    Confirms: "ยืนยัน",
    striker: "กองหน้า",
    Striker: "กองหน้า",
    midfielder: "กองกลาง",
    Midfielder: "กองกลาง",
    defender: "กองหลัง",
    Defender: "กองหลัง",
    goalkeeper: "ผู้รักษาประตู",
    Goalkeeper: "ผู้รักษาประตู",
    captain: "กัปตัน",
    Captain: "กัปตัน",
    scored: "ยิง",
    Scored: "ยิง",
    scoring: "ทำประตู",
    Scoring: "ทำประตู",
    assist: "แอสซิสต์",
    Assist: "แอสซิสต์",
    assists: "แอสซิสต์",
    Assists: "แอสซิสต์",
    "hat-trick": "แฮตทริก",
    "Hat-trick": "แฮตทริก",
    derby: "ดาร์บี้",
    Derby: "ดาร์บี้",
    title: "แชมป์",
    Title: "แชมป์",
    race: "การแข่งขัน",
    Race: "การแข่งขัน",
  }

// Apply team translations
  for (const [eng, thai] of Object.entries(teamTranslations)) {
    translated = translated.replace(new RegExp(eng, "gi"), thai)
  }

// Apply term translations
  for (const [eng, thai] of Object.entries(termTranslations)) {
    translated = translated.replace(new RegExp(`\\b${eng}\\b`, "g"), thai)
  }

return translated
}

// Translate news description to Thai
function translateNewsDescriptionToThai(description: string): string {
  return translateNewsTitleToThai(description)
}

// Categorize news based on content
function categorizeNews(title: string, description: string): NewsCategory {
  const text = `${title} ${description}`.toLowerCase()

if (text.includes("transfer") || text.includes("sign") || text.includes("deal") || text.includes("move")) {
    return "transfer"
  }
  if (text.includes("preview") || text.includes("upcoming") || text.includes("will face") || text.includes("to play")) {
    return "preview"
  }
  if (
    text.includes("result") ||
    text.includes("beat") ||
    text.includes("won") ||
    text.includes("lost") ||
    text.includes("draw") ||
    text.includes("score") ||
    text.includes("-0") ||
    text.includes("-1") ||
    text.includes("-2") ||
    text.includes("-3")
  ) {
    return "result"
  }
  if (text.includes("match") || text.includes("game") || text.includes("fixture")) {
    return "match"
  }

return "general"
}

function getFallbackNews(): NewsArticle[] {
  const now = new Date()
  return [
    {
      id: "fallback-1",
      title: "พรีเมียร์ลีก อัปเดตตารางคะแนนล่าสุด",
      titleEn: "Premier League Latest Standings Update",
      description: "ติดตามความเคลื่อนไหวล่าสุดของตารางคะแนนพรีเมียร์ลีก ฤดูกาล 2024/25",
      descriptionEn: "Follow the latest Premier League standings for the 2024/25 season",
      url: "#",
      image: "/premier-league-news.jpg",
      source: "EPL Hub",
      timeAgo: "เมื่อสักครู่",
      publishedAt: now.toISOString(),
      publishedAtThai: formatDateThai(now.toISOString()),
      isFeatured: true,
      category: "general",
    },
    {
      id: "fallback-2",
      title: "สรุปผลการแข่งขันพรีเมียร์ลีกสัปดาห์นี้",
      titleEn: "Premier League Weekly Results Summary",
      description: "รวมผลการแข่งขันที่น่าสนใจในสัปดาห์ที่ผ่านมา",
      descriptionEn: "Compilation of interesting match results from this week",
      url: "#",
      image: "/premier-league-news.jpg",
      source: "EPL Hub",
      timeAgo: "1 ชั่วโมงที่แล้ว",
      publishedAt: new Date(now.getTime() - 3600000).toISOString(),
      publishedAtThai: formatDateThai(new Date(now.getTime() - 3600000).toISOString()),
      isFeatured: false,
      category: "result",
    },
    {
      id: "fallback-3",
      title: "ตารางแข่งขันพรีเมียร์ลีกสัปดาห์หน้า",
      titleEn: "Next Week Premier League Fixtures",
      description: "เตรียมพร้อมสำหรับแมตช์ที่น่าจับตามองในสัปดาห์หน้า",
      descriptionEn: "Get ready for the exciting matches coming next week",
      url: "#",
      image: "/premier-league-news.jpg",
      source: "EPL Hub",
      timeAgo: "2 ชั่วโมงที่แล้ว",
      publishedAt: new Date(now.getTime() - 7200000).toISOString(),
      publishedAtThai: formatDateThai(new Date(now.getTime() - 7200000).toISOString()),
      isFeatured: false,
      category: "preview",
    },
    {
      id: "fallback-4",
      title: "ข่าวการย้ายทีมล่าสุดในพรีเมียร์ลีก",
      titleEn: "Latest Premier League Transfer News",
      description: "อัปเดตข่าวการย้ายทีมของนักเตะในพรีเมียร์ลีก",
      descriptionEn: "Updates on player transfers in the Premier League",
      url: "#",
      image: "/premier-league-news.jpg",
      source: "EPL Hub",
      timeAgo: "3 ชั่วโมงที่แล้ว",
      publishedAt: new Date(now.getTime() - 10800000).toISOString(),
      publishedAtThai: formatDateThai(new Date(now.getTime() - 10800000).toISOString()),
      isFeatured: false,
      category: "transfer",
    },
  ]
}

export async function GET() {
  try {
    // Fetch real news from GNews API
    const realNews = await fetchRealNews()

const articles = realNews.length > 0 ? realNews : getFallbackNews()
    const source = realNews.length > 0 ? "gnews" : "fallback"

// Sort by date (newest first)
    const sortedArticles = articles.sort((a, b) => {
      if (a.isFeatured) return -1
      if (b.isFeatured) return 1
      return new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
    })

return NextResponse.json({
      articles: sortedArticles,
      lastUpdated: new Date().toISOString(),
      lastUpdatedThai: formatDateThai(new Date().toISOString()),
      source: source,
      stats: {
        total: sortedArticles.length,
        results: sortedArticles.filter((a) => a.category === "result").length,
        previews: sortedArticles.filter((a) => a.category === "preview").length,
        transfers: sortedArticles.filter((a) => a.category === "transfer").length,
        general: sortedArticles.filter((a) => a.category === "general").length,
        match: sortedArticles.filter((a) => a.category === "match").length,
      },
    })
  } catch (error) {
    console.error("News API error:", error)

const fallbackNews = getFallbackNews()
    return NextResponse.json({
      articles: fallbackNews,
      lastUpdated: new Date().toISOString(),
      lastUpdatedThai: formatDateThai(new Date().toISOString()),
      source: "fallback",
      stats: {
        total: fallbackNews.length,
        results: fallbackNews.filter((a) => a.category === "result").length,
        previews: fallbackNews.filter((a) => a.category === "preview").length,
        transfers: fallbackNews.filter((a) => a.category === "transfer").length,
        general: fallbackNews.filter((a) => a.category === "general").length,
        match: fallbackNews.filter((a) => a.category === "match").length,
      },
    })
  }
}
[V0_FILE]typescriptreact:file="app/heatmap/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Activity, Zap, Route, Target, Timer, Footprints, ChevronRight } from "lucide-react"
import { useState, useEffect, useRef } from "react"

function FootballPitch({ heatmapData }: { heatmapData: any }) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return

const width = canvas.width
    const height = canvas.height

// Clear canvas
    ctx.clearRect(0, 0, width, height)

// Draw pitch gradient
    const gradient = ctx.createLinearGradient(0, 0, 0, height)
    gradient.addColorStop(0, "#1a472a")
    gradient.addColorStop(0.5, "#2d5a3d")
    gradient.addColorStop(1, "#1a472a")
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, width, height)

// Draw pitch lines
    ctx.strokeStyle = "rgba(255, 255, 255, 0.6)"
    ctx.lineWidth = 2

// Outer boundary
    ctx.strokeRect(20, 20, width - 40, height - 40)

// Center line
    ctx.beginPath()
    ctx.moveTo(width / 2, 20)
    ctx.lineTo(width / 2, height - 20)
    ctx.stroke()

// Center circle
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, 50, 0, Math.PI * 2)
    ctx.stroke()

// Center dot
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, 4, 0, Math.PI * 2)
    ctx.fillStyle = "rgba(255, 255, 255, 0.6)"
    ctx.fill()

// Left penalty area
    ctx.strokeRect(20, height / 2 - 80, 80, 160)
    ctx.strokeRect(20, height / 2 - 40, 30, 80)

// Right penalty area
    ctx.strokeRect(width - 100, height / 2 - 80, 80, 160)
    ctx.strokeRect(width - 50, height / 2 - 40, 30, 80)

// Draw heatmap if data exists
    if (heatmapData) {
      // Generate random heatmap points based on player position
      const points: { x: number; y: number; intensity: number }[] = []
      const isAttacker = heatmapData.player.position === "กองหน้า"
      const isMidfielder = heatmapData.player.position === "กองกลาง"

// Generate heat points based on position
      for (let i = 0; i < 100; i++) {
        let x, y
        if (isAttacker) {
          x = width * 0.5 + Math.random() * width * 0.4
          y = height * 0.2 + Math.random() * height * 0.6
        } else if (isMidfielder) {
          x = width * 0.25 + Math.random() * width * 0.5
          y = height * 0.15 + Math.random() * height * 0.7
        } else {
          x = width * 0.1 + Math.random() * width * 0.4
          y = height * 0.15 + Math.random() * height * 0.7
        }
        points.push({ x, y, intensity: Math.random() })
      }

// Draw heatmap
      points.forEach((point) => {
        const gradient = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, 30 + point.intensity * 20)
        gradient.addColorStop(0, `rgba(212, 165, 116, ${0.4 * point.intensity})`)
        gradient.addColorStop(0.5, `rgba(239, 68, 68, ${0.2 * point.intensity})`)
        gradient.addColorStop(1, "rgba(0, 0, 0, 0)")
        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(point.x, point.y, 30 + point.intensity * 20, 0, Math.PI * 2)
        ctx.fill()
      })
    }
  }, [heatmapData])

return <canvas ref={canvasRef} width={600} height={400} className="w-full h-auto rounded-xl shadow-2xl" />
}

function StatCard({
  icon: Icon,
  value,
  label,
  highlight = false,
}: {
  icon: any
  value: string
  label: string
  highlight?: boolean
}) {
  return (
    <div
      className={`
      relative overflow-hidden rounded-xl p-4
      ${highlight ? "bg-primary/20 border border-primary/30" : "bg-card/50 border border-border/50"}
      transition-all duration-300 hover:scale-105 hover:border-primary/50
    `}
    >
      <Icon className={`w-5 h-5 mb-2 ${highlight ? "text-primary" : "text-muted-foreground"}`} />
      <div className={`text-2xl font-bold ${highlight ? "text-primary" : "text-foreground"}`}>{value}</div>
      <div className="text-xs text-muted-foreground mt-1">{label}</div>
    </div>
  )
}

function MatchItem({ match, onSelect }: { match: any; onSelect: () => void }) {
  return (
    <button
      onClick={onSelect}
      className="group w-full text-left p-4 rounded-xl bg-card/30 border border-border/30 
                 hover:border-primary/50 hover:bg-card/60 transition-all duration-300"
    >
      <div className="flex items-center justify-between">
        <div className="flex-1">
          <div className="text-xs text-muted-foreground mb-2">{match.date}</div>
          <div className="flex items-center gap-3">
            <span className="font-medium text-sm">{match.home}</span>
            <span className="text-lg font-bold text-primary px-2 py-0.5 bg-primary/10 rounded">{match.score}</span>
            <span className="font-medium text-sm">{match.away}</span>
          </div>
          <div className="text-xs text-muted-foreground mt-2">{match.stadium}</div>
        </div>
        <ChevronRight
          className="w-5 h-5 text-muted-foreground group-hover:text-primary 
                                 group-hover:translate-x-1 transition-all"
        />
      </div>
    </button>
  )
}

export default function HeatmapPage() {
  const [selectedTeam, setSelectedTeam] = useState("")
  const [selectedPlayer, setSelectedPlayer] = useState("")
  const [heatmapData, setHeatmapData] = useState<any>(null)
  const [selectedMatch, setSelectedMatch] = useState<any>(null)
  const [dialogOpen, setDialogOpen] = useState(false)

const recentMatches = [
    {
      id: "1",
      home: "แมนเชสเตอร์ ซิตี้",
      away: "ลิเวอร์พูล",
      score: "2-1",
      date: "15 ม.ค. 2026",
      time: "22:00",
      stadium: "เอติฮัด สเตเดียม",
    },
    {
      id: "2",
      home: "อาร์เซนอล",
      away: "เชลซี",
      score: "3-2",
      date: "12 ม.ค. 2026",
      time: "19:30",
      stadium: "เอมิเรตส์ สเตเดียม",
    },
    {
      id: "3",
      home: "แมนเชสเตอร์ ยูไนเต็ด",
      away: "ท็อตแน่ม",
      score: "1-1",
      date: "10 ม.ค. 2026",
      time: "21:00",
      stadium: "โอลด์ แทรฟฟอร์ด",
    },
    {
      id: "4",
      home: "นิวคาสเซิล",
      away: "แอสตัน วิลล่า",
      score: "2-0",
      date: "8 ม.ค. 2026",
      time: "20:00",
      stadium: "เซนต์ เจมส์ พาร์ค",
    },
  ]

const playersByTeam: Record<
    string,
    Array<{ id: string; name: string; position: string; number: number; image?: string }>
  > = {
    "แมนเชสเตอร์ ซิตี้": [
      { id: "1", name: "เออร์ลิง ฮาลันด์", position: "กองหน้า", number: 9 },
      { id: "2", name: "เควิน เดอ บรอยน์", position: "กองกลาง", number: 17 },
      { id: "3", name: "ฟิล โฟเด้น", position: "กองกลาง", number: 47 },
    ],
    ลิเวอร์พูล: [
      { id: "5", name: "โมฮาเหม็ด ซาลาห์", position: "กองหน้า", number: 11 },
      { id: "6", name: "ดาร์วิน นูนเญซ", position: "กองหน้า", number: 9 },
    ],
    อาร์เซนอล: [
      { id: "9", name: "บูคาโย่ ซากา", position: "กองหน้า", number: 7 },
      { id: "10", name: "มาร์ติน เอเดการ์ด", position: "กองกลาง", number: 8 },
    ],
    เชลซี: [
      { id: "12", name: "โคล พาล์มเมอร์", position: "กองกลาง", number: 20 },
      { id: "13", name: "นิโคลัส แจ็คสัน", position: "กองหน้า", number: 15 },
    ],
    "แมนเชสเตอร์ ยูไนเต็ด": [
      { id: "14", name: "บรูโน่ แฟร์นันด์ส", position: "กองกลาง", number: 8 },
      { id: "15", name: "มาร์คัส แรชฟอร์ด", position: "กองหน้า", number: 10 },
    ],
    ท็อตแน่ม: [
      { id: "16", name: "ซน ฮึง-มิน", position: "กองหน้า", number: 7 },
      { id: "17", name: "เจมส์ แมดดิสัน", position: "กองกลาง", number: 10 },
    ],
    นิวคาสเซิล: [
      { id: "18", name: "อเล็กซานเดอร์ อิซัค", position: "กองหน้า", number: 14 },
      { id: "19", name: "บรูโน่ กิมาไรส์", position: "กองกลาง", number: 39 },
    ],
    "แอสตัน วิลล่า": [
      { id: "20", name: "โอลลี่ วัตกินส์", position: "กองหน้า", number: 11 },
      { id: "21", name: "จอห์น แม็คกินน์", position: "กองกลาง", number: 7 },
    ],
  }

const handleGenerateHeatmap = () => {
    if (!selectedMatch || !selectedTeam || !selectedPlayer) return

const player = playersByTeam[selectedTeam]?.find((p) => p.id === selectedPlayer)
    if (!player) return

setHeatmapData({
      match: selectedMatch,
      team: selectedTeam,
      player,
      statistics: {
        distance: (10 + Math.random() * 3).toFixed(1) + " km",
        sprints: Math.floor(30 + Math.random() * 30),
        topSpeed: (30 + Math.random() * 6).toFixed(1) + " km/h",
        touches: Math.floor(40 + Math.random() * 50),
        passes: Math.floor(30 + Math.random() * 40),
        shots: Math.floor(1 + Math.random() * 5),
      },
      zones: [
        { zone: "โซนโจมตี", percentage: Math.floor(30 + Math.random() * 30) },
        { zone: "โซนกลาง", percentage: Math.floor(20 + Math.random() * 30) },
        { zone: "โซนป้องกัน", percentage: Math.floor(10 + Math.random() * 30) },
      ],
    })
    setDialogOpen(false)
  }

const openMatchDialog = (match: any) => {
    setSelectedMatch(match)
    setSelectedTeam("")
    setSelectedPlayer("")
    setDialogOpen(true)
  }

return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />

<div className="container mx-auto px-4 py-12 relative">
          <div className="max-w-2xl">
            <Badge variant="outline" className="mb-4 border-primary/50 text-primary">
              PLAYER ANALYTICS
            </Badge>
            <h1 className="text-4xl md:text-6xl font-display tracking-tight mb-4">
              PLAYER <span className="text-primary">HEATMAP</span>
            </h1>
            <p className="text-muted-foreground text-lg leading-relaxed">
              วิเคราะห์การเคลื่อนไหวและพื้นที่ครอบครองของนักเตะบนสนาม ด้วยข้อมูลเชิงลึกจากทุกนัดการแข่งขัน
            </p>
          </div>
        </div>
      </div>

<main className="flex-1 container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-5 gap-8">
          <div className="lg:col-span-2 space-y-4">
            <div className="flex items-center justify-between mb-2">
              <h2 className="font-semibold text-lg">เลือกแมตช์</h2>
              <span className="text-xs text-muted-foreground">{recentMatches.length} แมตช์</span>
            </div>

<div className="space-y-3">
              {recentMatches.map((match) => (
                <MatchItem key={match.id} match={match} onSelect={() => openMatchDialog(match)} />
              ))}
            </div>
          </div>

<div className="lg:col-span-3">
            {heatmapData ? (
              <div className="space-y-6">
                {/* Player Header */}
                <div className="flex items-start gap-4 p-6 rounded-2xl bg-gradient-to-br from-card to-card/50 border border-border/50">
                  <div className="w-20 h-20 rounded-xl bg-primary/20 flex items-center justify-center text-3xl font-bold text-primary">
                    {heatmapData.player.number}
                  </div>
                  <div className="flex-1">
                    <h2 className="text-2xl font-bold mb-1">{heatmapData.player.name}</h2>
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <span>{heatmapData.player.position}</span>
                      <span className="w-1 h-1 rounded-full bg-muted-foreground" />
                      <span>{heatmapData.team}</span>
                    </div>
                    <div className="mt-2">
                      <Badge variant="secondary" className="text-xs">
                        {heatmapData.match.home} {heatmapData.match.score} {heatmapData.match.away}
                      </Badge>
                    </div>
                  </div>
                </div>

{/* Pitch Heatmap */}
                <div className="relative">
                  <div className="absolute -inset-4 bg-gradient-to-br from-primary/10 to-transparent rounded-3xl blur-xl" />
                  <div className="relative rounded-2xl overflow-hidden border border-border/50 bg-card p-4">
                    <FootballPitch heatmapData={heatmapData} />
                  </div>
                </div>

{/* Stats Grid */}
                <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
                  <StatCard icon={Route} value={heatmapData.statistics.distance} label="ระยะทาง" highlight />
                  <StatCard icon={Zap} value={String(heatmapData.statistics.sprints)} label="สปรินต์" />
                  <StatCard icon={Timer} value={heatmapData.statistics.topSpeed} label="ความเร็วสูงสุด" highlight />
                  <StatCard icon={Footprints} value={String(heatmapData.statistics.touches)} label="แตะบอล" />
                  <StatCard icon={Activity} value={String(heatmapData.statistics.passes)} label="พาส" />
                  <StatCard icon={Target} value={String(heatmapData.statistics.shots)} label="ยิง" />
                </div>

{/* Zone Distribution */}
                <div className="p-6 rounded-2xl bg-card/50 border border-border/50">
                  <h3 className="font-semibold mb-4 flex items-center gap-2">
                    <Target className="w-5 h-5 text-primary" />
                    การกระจายตัวตามโซน
                  </h3>
                  <div className="space-y-4">
                    {heatmapData.zones.map((zone: any, i: number) => (
                      <div key={i} className="space-y-2">
                        <div className="flex items-center justify-between text-sm">
                          <span className="text-muted-foreground">{zone.zone}</span>
                          <span className="font-bold text-primary">{zone.percentage}%</span>
                        </div>
                        <div className="h-3 bg-muted/50 rounded-full overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all duration-1000 ease-out"
                            style={{
                              width: `${zone.percentage}%`,
                              background:
                                i === 0
                                  ? "linear-gradient(90deg, #d4a574, #e8dcc8)"
                                  : i === 1
                                    ? "linear-gradient(90deg, #fbbf24, #f59e0b)"
                                    : "linear-gradient(90deg, #3b82f6, #60a5fa)",
                            }}
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ) : (
              /* Empty state with better design */
              <div className="h-full flex items-center justify-center">
                <div className="text-center max-w-md p-12 rounded-3xl border-2 border-dashed border-border/50 bg-card/20">
                  <div className="w-24 h-24 mx-auto mb-6 rounded-2xl bg-primary/10 flex items-center justify-center">
                    <Activity className="w-12 h-12 text-primary/50" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">เลือกแมตช์เพื่อดู Heatmap</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    คลิกที่แมตช์ด้านซ้ายและเลือกนักเตะที่ต้องการวิเคราะห์ เพื่อดูข้อมูลการเคลื่อนไหวบนสนาม
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="text-xl">เลือกนักเตะ</DialogTitle>
            {selectedMatch && (
              <DialogDescription className="flex items-center gap-2 pt-2">
                <span>{selectedMatch.home}</span>
                <span className="font-bold text-primary">{selectedMatch.score}</span>
                <span>{selectedMatch.away}</span>
              </DialogDescription>
            )}
          </DialogHeader>
          <div className="space-y-4 pt-4">
            <div className="space-y-2">
              <Label className="text-muted-foreground">ทีม</Label>
              <Select
                value={selectedTeam}
                onValueChange={(v) => {
                  setSelectedTeam(v)
                  setSelectedPlayer("")
                }}
              >
                <SelectTrigger className="h-12">
                  <SelectValue placeholder="เลือกทีม" />
                </SelectTrigger>
                <SelectContent>
                  {selectedMatch && (
                    <>
                      <SelectItem value={selectedMatch.home}>{selectedMatch.home}</SelectItem>
                      <SelectItem value={selectedMatch.away}>{selectedMatch.away}</SelectItem>
                    </>
                  )}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label className="text-muted-foreground">นักเตะ</Label>
              <Select value={selectedPlayer} onValueChange={setSelectedPlayer} disabled={!selectedTeam}>
                <SelectTrigger className="h-12">
                  <SelectValue placeholder="เลือกนักเตะ" />
                </SelectTrigger>
                <SelectContent>
                  {selectedTeam &&
                    playersByTeam[selectedTeam]?.map((player) => (
                      <SelectItem key={player.id} value={player.id}>
                        <span className="font-mono text-primary mr-2">#{player.number}</span>
                        {player.name}
                        <span className="text-muted-foreground ml-2 text-xs">({player.position})</span>
                      </SelectItem>
                    ))}
                </SelectContent>
              </Select>
            </div>

<Button
              onClick={handleGenerateHeatmap}
              disabled={!selectedTeam || !selectedPlayer}
              className="w-full h-12 text-base font-semibold mt-2"
            >
              <Activity className="w-5 h-5 mr-2" />
              แสดง Heatmap
            </Button>
          </div>
        </DialogContent>
      </Dialog>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/generic-football-club-badge.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-football-club-badge-khMSEJXoTL0ifaCJmIO0jeTdCSDPlC.png" isMerged="true"
[V0_FILE]png:file="public/liverpool-crest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/liverpool-crest-IsB30LHpMOVTjSy2XIPyyt8vJNMHSr.png" isMerged="true"
[V0_FILE]png:file="public/arsenal-football-club-emblem.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arsenal-football-club-emblem-8f7CtHXu9WrcTihxwVFKq6dKMmWdsd.png" isMerged="true"
[V0_FILE]png:file="public/football-club-badge.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/football-club-badge-xlBRDnjB1cEre6FWAV3wqPNvPJa52c.png" isMerged="true"
[V0_FILE]png:file="public/manchester-united-crest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manchester-united-crest-kMjhbxh5CyNw2nprA15F783gekbwYy.png" isMerged="true"
[V0_FILE]png:file="public/tottenham-hotspur-crest.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tottenham-hotspur-crest-hL7xuNY5zWMYL3CbD4jUMt9xpF3Mxo.png" isMerged="true"
[V0_FILE]png:file="public/newcastle-united-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/newcastle-united-logo-fX7KL5ARS3EXkZXkRC25DpX9Ya7vKi.png" isMerged="true"
[V0_FILE]png:file="public/aston-villa-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aston-villa-logo-fhfjA44mHw0KDNinZQuLjmjfKuRohe.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/ai-prediction/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog"
import {
  MapPin,
  Clock,
  Calendar,
  CheckCircle2,
  Brain,
  Sparkles,
  TrendingUp,
  Target,
  Zap,
  ChevronRight,
  Trophy,
} from "lucide-react"
import { useState, useEffect } from "react"

export default function AIPredictionPage() {
  const [matches, setMatches] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedMatch, setSelectedMatch] = useState<any>(null)
  const [filter, setFilter] = useState<"all" | "upcoming" | "finished">("all")

const mlModels = [
    { id: "svm", name: "SVM", accuracy: "87.5%", color: "from-blue-500 to-cyan-500" },
    { id: "rf", name: "Random Forest", accuracy: "89.2%", color: "from-green-500 to-emerald-500" },
    { id: "xgb", name: "XGBoost", accuracy: "91.3%", color: "from-amber-500 to-orange-500" },
    { id: "nn", name: "Neural Network", accuracy: "90.8%", color: "from-purple-500 to-pink-500" },
    { id: "ens", name: "Ensemble", accuracy: "93.7%", color: "from-primary to-accent" },
  ]

useEffect(() => {
    const mockMatches = [
      {
        id: 1,
        homeTeam: "แมนเชสเตอร์ ซิตี้",
        awayTeam: "ลิเวอร์พูล",
        homeLogo: "/generic-football-club-badge.png",
        awayLogo: "/liverpool-crest.png",
        date: "10 ม.ค. 2026",
        time: "22:00",
        stadium: "Etihad Stadium",
        league: "Premier League",
        status: "finished",
        actualScore: { home: 2, away: 1 },
        goals: [
          { team: "home", player: "Erling Haaland", minute: 23 },
          { team: "away", player: "Mohamed Salah", minute: 45 },
          { team: "home", player: "Kevin De Bruyne", minute: 78 },
        ],
        predictions: [
          { model: "svm", homeScore: 2, awayScore: 1, confidence: 78, correct: true },
          { model: "rf", homeScore: 2, awayScore: 2, confidence: 82, correct: false },
          { model: "xgb", homeScore: 3, awayScore: 1, confidence: 85, correct: false },
          { model: "nn", homeScore: 2, awayScore: 1, confidence: 81, correct: true },
          { model: "ens", homeScore: 2, awayScore: 1, confidence: 88, correct: true },
        ],
        winProbability: { home: 55, draw: 25, away: 20 },
      },
      {
        id: 2,
        homeTeam: "อาร์เซนอล",
        awayTeam: "เชลซี",
        homeLogo: "/arsenal-football-club-emblem.png",
        awayLogo: "/football-club-badge.png",
        date: "12 ม.ค. 2026",
        time: "00:30",
        stadium: "Emirates Stadium",
        league: "Premier League",
        status: "finished",
        actualScore: { home: 2, away: 1 },
        goals: [
          { team: "home", player: "Bukayo Saka", minute: 15 },
          { team: "away", player: "Cole Palmer", minute: 58 },
          { team: "home", player: "Martin Ødegaard", minute: 89 },
        ],
        predictions: [
          { model: "svm", homeScore: 1, awayScore: 1, confidence: 75, correct: false },
          { model: "rf", homeScore: 2, awayScore: 0, confidence: 79, correct: false },
          { model: "xgb", homeScore: 2, awayScore: 1, confidence: 83, correct: true },
          { model: "nn", homeScore: 1, awayScore: 0, confidence: 77, correct: false },
          { model: "ens", homeScore: 2, awayScore: 1, confidence: 86, correct: true },
        ],
        winProbability: { home: 48, draw: 28, away: 24 },
      },
      {
        id: 3,
        homeTeam: "แมนเชสเตอร์ ยูไนเต็ด",
        awayTeam: "ท็อตแน่ม ฮ็อทสเปอร์",
        homeLogo: "/manchester-united-crest.png",
        awayLogo: "/tottenham-hotspur-crest.png",
        date: "17 ม.ค. 2026",
        time: "21:00",
        stadium: "Old Trafford",
        league: "Premier League",
        status: "upcoming",
        predictions: [
          { model: "svm", homeScore: 1, awayScore: 2, confidence: 72 },
          { model: "rf", homeScore: 1, awayScore: 1, confidence: 76 },
          { model: "xgb", homeScore: 2, awayScore: 2, confidence: 80 },
          { model: "nn", homeScore: 1, awayScore: 1, confidence: 74 },
          { model: "ens", homeScore: 1, awayScore: 2, confidence: 82 },
        ],
        winProbability: { home: 35, draw: 30, away: 35 },
      },
      {
        id: 4,
        homeTeam: "นิวคาสเซิล ยูไนเต็ด",
        awayTeam: "แอสตัน วิลล่า",
        homeLogo: "/newcastle-united-logo.png",
        awayLogo: "/aston-villa-logo.png",
        date: "18 ม.ค. 2026",
        time: "19:30",
        stadium: "St James' Park",
        league: "Premier League",
        status: "upcoming",
        predictions: [
          { model: "svm", homeScore: 2, awayScore: 0, confidence: 80 },
          { model: "rf", homeScore: 3, awayScore: 1, confidence: 84 },
          { model: "xgb", homeScore: 2, awayScore: 1, confidence: 87 },
          { model: "nn", homeScore: 2, awayScore: 0, confidence: 82 },
          { model: "ens", homeScore: 2, awayScore: 1, confidence: 89 },
        ],
        winProbability: { home: 58, draw: 24, away: 18 },
      },
    ]

setTimeout(() => {
      setMatches(mockMatches)
      setLoading(false)
    }, 800)
  }, [])

const getModelDetails = (modelId: string) => mlModels.find((m) => m.id === modelId) || mlModels[0]
  const getEnsemblePrediction = (match: any) => {
    if (!match?.predictions) return { homeScore: 0, awayScore: 0, confidence: 0 }
    return match.predictions.find((p: any) => p.model === "ens") || { homeScore: 0, awayScore: 0, confidence: 0 }
  }

const filteredMatches = matches.filter((match) => {
    if (filter === "all") return true
    return match.status === filter
  })

return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />

<div className="relative overflow-hidden border-b border-border">
        {/* Gradient Glow Background */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-primary/20 rounded-full blur-[120px]" />
          <div className="absolute top-1/4 right-1/4 w-[300px] h-[300px] bg-accent/10 rounded-full blur-[100px]" />
        </div>

<div className="relative container mx-auto px-4 py-16 md:py-24">
          <div className="max-w-4xl mx-auto text-center">
            {/* AI Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-6">
              <Sparkles className="w-4 h-4 text-primary" />
              <span className="text-sm text-primary font-medium">AI-Powered Predictions</span>
            </div>

<h1 className="text-4xl md:text-6xl lg:text-7xl font-display text-balance mb-6">
              ทำนายผลด้วย
              <span className="text-primary"> AI </span>
              ที่แม่นยำที่สุด
            </h1>

<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 text-pretty">
              วิเคราะห์โดย 5 โมเดล Machine Learning รวมถึง Neural Network และ XGBoost ด้วยความแม่นยำสูงสุดถึง 93.7%
            </p>

{/* Model Stats Row */}
            <div className="flex flex-wrap justify-center gap-4 md:gap-8">
              {[
                { icon: Brain, label: "5 ML Models", value: "Ensemble" },
                { icon: Target, label: "Accuracy", value: "93.7%" },
                { icon: Zap, label: "Real-time", value: "Analysis" },
              ].map((stat, i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 px-4 py-3 rounded-xl bg-card/50 backdrop-blur border border-border/50"
                >
                  <div className="p-2 rounded-lg bg-primary/10">
                    <stat.icon className="w-5 h-5 text-primary" />
                  </div>
                  <div className="text-left">
                    <p className="text-xs text-muted-foreground">{stat.label}</p>
                    <p className="font-semibold text-foreground">{stat.value}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

<div className="sticky top-0 z-40 bg-background/80 backdrop-blur-lg border-b border-border">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex gap-2">
              {[
                { key: "all", label: "ทั้งหมด", count: matches.length },
                { key: "upcoming", label: "ยังไม่แข่ง", count: matches.filter((m) => m.status === "upcoming").length },
                { key: "finished", label: "จบแล้ว", count: matches.filter((m) => m.status === "finished").length },
              ].map((tab) => (
                <Button
                  key={tab.key}
                  onClick={() => setFilter(tab.key as any)}
                  variant={filter === tab.key ? "default" : "ghost"}
                  size="sm"
                  className={`rounded-full gap-2 ${filter === tab.key ? "" : "text-muted-foreground"}`}
                >
                  {tab.label}
                  <span
                    className={`text-xs px-1.5 py-0.5 rounded-full ${filter === tab.key ? "bg-primary-foreground/20" : "bg-muted"}`}
                  >
                    {tab.count}
                  </span>
                </Button>
              ))}
            </div>
          </div>
        </div>
      </div>

<main className="flex-1 container mx-auto px-4 py-8">
        {loading ? (
          <div className="flex flex-col items-center justify-center py-20 gap-4">
            <div className="relative">
              <div className="w-16 h-16 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
              <Brain className="w-6 h-6 text-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
            </div>
            <p className="text-muted-foreground">AI กำลังวิเคราะห์ข้อมูล...</p>
          </div>
        ) : (
          <div className="grid gap-6 md:grid-cols-2 max-w-5xl mx-auto">
            {filteredMatches.map((match) => {
              const ensemblePred = getEnsemblePrediction(match)
              return (
                <Card
                  key={match.id}
                  className="group relative overflow-hidden border-border/50 hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5"
                >
                  <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />

<CardContent className="relative p-6">
                    {/* Header */}
                    <div className="flex items-center justify-between mb-6">
                      <Badge variant="outline" className="gap-1.5">
                        <Trophy className="w-3 h-3" />
                        {match.league}
                      </Badge>
                      {match.status === "finished" ? (
                        <Badge className="gap-1 bg-emerald-500/10 text-emerald-500 border-emerald-500/20">
                          <CheckCircle2 className="w-3 h-3" />
                          จบแล้ว
                        </Badge>
                      ) : (
                        <Badge className="gap-1 bg-primary/10 text-primary border-primary/20">
                          <Clock className="w-3 h-3" />
                          กำลังจะแข่ง
                        </Badge>
                      )}
                    </div>

<div className="flex items-center justify-between mb-6">
                      <div className="flex-1 text-center">
                        <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-muted/50 flex items-center justify-center overflow-hidden">
                          <img
                            src={match.homeLogo || "/placeholder.svg"}
                            alt={match.homeTeam}
                            className="w-12 h-12 object-contain"
                          />
                        </div>
                        <p className="font-semibold text-sm">{match.homeTeam}</p>
                      </div>

<div className="px-4">
                        {match.status === "finished" ? (
                          <div className="text-center">
                            <div className="text-3xl font-bold font-display text-primary mb-1">
                              {match.actualScore.home} - {match.actualScore.away}
                            </div>
                            <p className="text-xs text-muted-foreground">สกอร์จริง</p>
                          </div>
                        ) : (
                          <div className="text-center">
                            <div className="text-3xl font-bold font-display text-primary mb-1">
                              {ensemblePred.homeScore} - {ensemblePred.awayScore}
                            </div>
                            <p className="text-xs text-muted-foreground">AI ทำนาย</p>
                          </div>
                        )}
                      </div>

<div className="flex-1 text-center">
                        <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-muted/50 flex items-center justify-center overflow-hidden">
                          <img
                            src={match.awayLogo || "/placeholder.svg"}
                            alt={match.awayTeam}
                            className="w-12 h-12 object-contain"
                          />
                        </div>
                        <p className="font-semibold text-sm">{match.awayTeam}</p>
                      </div>
                    </div>

<div className="mb-6">
                      <div className="flex justify-between text-xs text-muted-foreground mb-2">
                        <span>เจ้าบ้านชนะ</span>
                        <span>เสมอ</span>
                        <span>ทีมเยือนชนะ</span>
                      </div>
                      <div className="flex h-3 rounded-full overflow-hidden bg-muted/50">
                        <div
                          className="bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-500"
                          style={{ width: `${match.winProbability.home}%` }}
                        />
                        <div
                          className="bg-gradient-to-r from-amber-500 to-amber-400 transition-all duration-500"
                          style={{ width: `${match.winProbability.draw}%` }}
                        />
                        <div
                          className="bg-gradient-to-r from-blue-500 to-blue-400 transition-all duration-500"
                          style={{ width: `${match.winProbability.away}%` }}
                        />
                      </div>
                      <div className="flex justify-between text-sm font-semibold mt-2">
                        <span className="text-emerald-500">{match.winProbability.home}%</span>
                        <span className="text-amber-500">{match.winProbability.draw}%</span>
                        <span className="text-blue-500">{match.winProbability.away}%</span>
                      </div>
                    </div>

{/* Match Info */}
                    <div className="flex items-center justify-center gap-4 text-xs text-muted-foreground mb-6">
                      <div className="flex items-center gap-1">
                        <Calendar className="w-3.5 h-3.5" />
                        <span>{match.date}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Clock className="w-3.5 h-3.5" />
                        <span>{match.time}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <MapPin className="w-3.5 h-3.5" />
                        <span>{match.stadium}</span>
                      </div>
                    </div>

<div className="flex items-center justify-between p-3 rounded-lg bg-muted/30 mb-4">
                      <div className="flex items-center gap-2">
                        <Sparkles className="w-4 h-4 text-primary" />
                        <span className="text-sm">AI Confidence</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-24 h-2 rounded-full bg-muted overflow-hidden">
                          <div
                            className="h-full bg-gradient-to-r from-primary to-accent transition-all duration-500"
                            style={{ width: `${ensemblePred.confidence}%` }}
                          />
                        </div>
                        <span className="text-sm font-bold text-primary">{ensemblePred.confidence}%</span>
                      </div>
                    </div>

<Button onClick={() => setSelectedMatch(match)} className="w-full gap-2 group/btn">
                      <Brain className="w-4 h-4" />
                      {match.status === "finished" ? "ดูผลการวิเคราะห์" : "ดูการทำนายละเอียด"}
                      <ChevronRight className="w-4 h-4 transition-transform group-hover/btn:translate-x-1" />
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        )}
      </main>

<Dialog open={!!selectedMatch} onOpenChange={(open) => !open && setSelectedMatch(null)}>
        <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto p-0">
          {/* Dialog Header with Gradient */}
          <div className="relative p-6 pb-8 border-b border-border overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10" />
            <DialogHeader className="relative">
              <div className="flex items-center justify-center gap-2 mb-4">
                <Badge variant="outline" className="gap-1.5">
                  <Trophy className="w-3 h-3" />
                  {selectedMatch?.league}
                </Badge>
                {selectedMatch?.status === "finished" && (
                  <Badge className="gap-1 bg-emerald-500/10 text-emerald-500 border-emerald-500/20">
                    <CheckCircle2 className="w-3 h-3" />
                    จบแล้ว
                  </Badge>
                )}
              </div>

{/* Teams in Dialog */}
              <div className="flex items-center justify-center gap-8">
                <div className="text-center">
                  <div className="w-20 h-20 mx-auto mb-2 rounded-full bg-muted/50 flex items-center justify-center">
                    <img
                      src={selectedMatch?.homeLogo || "/placeholder.svg"}
                      alt=""
                      className="w-14 h-14 object-contain"
                    />
                  </div>
                  <p className="font-semibold">{selectedMatch?.homeTeam}</p>
                </div>

<div className="text-center">
                  {selectedMatch?.status === "finished" ? (
                    <>
                      <div className="text-5xl font-bold font-display text-primary">
                        {selectedMatch.actualScore.home} - {selectedMatch.actualScore.away}
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">สกอร์จริง</p>
                    </>
                  ) : (
                    <>
                      <div className="text-5xl font-bold font-display text-primary">
                        {getEnsemblePrediction(selectedMatch)?.homeScore} -{" "}
                        {getEnsemblePrediction(selectedMatch)?.awayScore}
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">AI ทำนาย (Ensemble)</p>
                    </>
                  )}
                </div>

<div className="text-center">
                  <div className="w-20 h-20 mx-auto mb-2 rounded-full bg-muted/50 flex items-center justify-center">
                    <img
                      src={selectedMatch?.awayLogo || "/placeholder.svg"}
                      alt=""
                      className="w-14 h-14 object-contain"
                    />
                  </div>
                  <p className="font-semibold">{selectedMatch?.awayTeam}</p>
                </div>
              </div>
            </DialogHeader>
          </div>

<div className="p-6 space-y-6">
            {/* Win Probability Section */}
            {selectedMatch?.winProbability && (
              <div>
                <h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
                  <TrendingUp className="w-4 h-4" />
                  โอกาสชนะ
                </h3>
                <div className="grid grid-cols-3 gap-4">
                  {[
                    { label: "เจ้าบ้านชนะ", value: selectedMatch.winProbability.home, color: "emerald" },
                    { label: "เสมอ", value: selectedMatch.winProbability.draw, color: "amber" },
                    { label: "ทีมเยือนชนะ", value: selectedMatch.winProbability.away, color: "blue" },
                  ].map((item) => (
                    <div key={item.label} className="text-center p-4 rounded-xl bg-muted/30">
                      <div className={`text-3xl font-bold text-${item.color}-500 mb-1`}>{item.value}%</div>
                      <p className="text-xs text-muted-foreground">{item.label}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

{/* Goals Timeline */}
            {selectedMatch?.status === "finished" && selectedMatch?.goals && (
              <div>
                <h3 className="text-sm font-semibold text-muted-foreground mb-3">ไทม์ไลน์ประตู</h3>
                <div className="space-y-2">
                  {selectedMatch.goals.map((goal: any, i: number) => (
                    <div
                      key={i}
                      className={`flex items-center gap-3 p-3 rounded-lg ${
                        goal.team === "home" ? "bg-emerald-500/10" : "bg-blue-500/10"
                      }`}
                    >
                      <span className="text-sm font-mono font-bold text-muted-foreground w-10">{goal.minute}'</span>
                      <span className="font-semibold">{goal.player}</span>
                      <Badge variant="outline" className="ml-auto">
                        {goal.team === "home" ? selectedMatch.homeTeam : selectedMatch.awayTeam}
                      </Badge>
                    </div>
                  ))}
                </div>
              </div>
            )}

{/* ML Models Predictions */}
            <div>
              <h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
                <Brain className="w-4 h-4" />
                การทำนายจาก 5 โมเดล ML
              </h3>
              <div className="space-y-3">
                {selectedMatch?.predictions.map((prediction: any) => {
                  const modelInfo = getModelDetails(prediction.model)
                  return (
                    <div
                      key={prediction.model}
                      className={`relative overflow-hidden rounded-xl border transition-all ${
                        prediction.correct ? "border-emerald-500/50 bg-emerald-500/5" : "border-border bg-card/50"
                      }`}
                    >
                      <div className="flex items-center justify-between p-4">
                        <div className="flex items-center gap-3">
                          <div
                            className={`w-10 h-10 rounded-lg bg-gradient-to-br ${modelInfo.color} flex items-center justify-center`}
                          >
                            <Brain className="w-5 h-5 text-white" />
                          </div>
                          <div>
                            <div className="flex items-center gap-2">
                              <span className="font-semibold">{modelInfo.name}</span>
                              {prediction.correct && <Badge className="bg-emerald-500 text-white text-xs">ถูกต้อง</Badge>}
                            </div>
                            <span className="text-xs text-muted-foreground">ความแม่นยำ {modelInfo.accuracy}</span>
                          </div>
                        </div>

<div className="flex items-center gap-6">
                          <div className="text-center">
                            <div className="text-2xl font-bold font-display">
                              {prediction.homeScore} - {prediction.awayScore}
                            </div>
                            <p className="text-xs text-muted-foreground">ทำนาย</p>
                          </div>

<div className="text-center">
                            <div className="text-2xl font-bold text-primary">{prediction.confidence}%</div>
                            <p className="text-xs text-muted-foreground">ความมั่นใจ</p>
                          </div>
                        </div>
                      </div>

{/* Confidence Bar */}
                      <div className="h-1 bg-muted">
                        <div
                          className={`h-full bg-gradient-to-r ${modelInfo.color} transition-all duration-500`}
                          style={{ width: `${prediction.confidence}%` }}
                        />
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

{/* Match Info */}
            <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground pt-4 border-t border-border">
              <div className="flex items-center gap-1.5">
                <Calendar className="w-4 h-4" />
                <span>{selectedMatch?.date}</span>
              </div>
              <div className="flex items-center gap-1.5">
                <Clock className="w-4 h-4" />
                <span>{selectedMatch?.time}</span>
              </div>
              <div className="flex items-center gap-1.5">
                <MapPin className="w-4 h-4" />
                <span>{selectedMatch?.stadium}</span>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Bebas_Neue, Inter } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const bebasNeue = Bebas_Neue({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-bebas",
})

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

export const metadata: Metadata = {
  title: "FootballAI - วิเคราะห์ฟุตบอลด้วย AI",
  description: "แพลตฟอร์มวิเคราะห์ฟุตบอลอัจฉริยะด้วยเทคโนโลยี AI ที่แม่นยำ พร้อมสถิติเชิงลึกและการทำนายผลที่น่าเชื่อถือ",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-dark-32x32.png",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export const viewport: Viewport = {
  themeColor: "#d4a574",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="th" suppressHydrationWarning>
      <body className={`${inter.variable} ${bebasNeue.variable} font-sans antialiased`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun, Monitor } from "lucide-react"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { theme, setTheme, resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <Button variant="outline" size="icon" className="rounded-full w-10 h-10 border-primary/30 bg-transparent">
        <div className="h-5 w-5" />
      </Button>
    )
  }

const currentTheme = theme === "system" ? resolvedTheme : theme
  const isDark = currentTheme === "dark"

console.log("[v0] Theme state:", { theme, resolvedTheme, currentTheme, isDark })

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="icon"
          className="relative rounded-full w-10 h-10 border-primary/30 hover:border-primary hover:bg-primary/10 transition-all duration-300 bg-transparent"
          aria-label="เลือก Theme"
        >
          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all duration-500 dark:-rotate-90 dark:scale-0 text-primary" />
          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all duration-500 dark:rotate-0 dark:scale-100 text-primary" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-40">
        <DropdownMenuItem 
          onClick={() => setTheme("light")}
          className={`gap-2 cursor-pointer ${theme === "light" ? "bg-primary/10 text-primary" : ""}`}
        >
          <Sun className="h-4 w-4" />
          <span>สว่าง (Light)</span>
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => setTheme("dark")}
          className={`gap-2 cursor-pointer ${theme === "dark" ? "bg-primary/10 text-primary" : ""}`}
        >
          <Moon className="h-4 w-4" />
          <span>มืด (Dark)</span>
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => setTheme("system")}
          className={`gap-2 cursor-pointer ${theme === "system" ? "bg-primary/10 text-primary" : ""}`}
        >
          <Monitor className="h-4 w-4" />
          <span>ตามระบบ</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]jpg:file="public/stadiums/old-trafford.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/old-trafford-iTPGC6xgm2GiOSwaquyB1LSip1wkTv.jpg" isMerged="true"
[V0_FILE]jpg:file="public/stadiums/emirates-exterior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pexels-huy-phan-316220-17160691-dU7YwOUlkCQbkw45qF949qsttIidAm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/stadiums/emirates-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pexels-asta-leung-1609530505-33654888-npRTcMKbmHiTKassDRDyfCoC5kRbuD.jpg" isMerged="true"
[V0_FILE]plaintext:file="public/players/saka.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0_Bukayo-Saka-HOh5djHFPadZQAtXJWqDVbqCGtL2iY.webp" isMerged="true"
[V0_FILE]plaintext:file="public/players/romero.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cristian-romero-aKAFxtT0cV5Y9q1X5vjzIou8uZ8ZQv.webp" isMerged="true"
[V0_FILE]plaintext:file="public/players/palmer.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/palmer-vNKeTuVt5xQByJnyIC1gKKgB8Yf2sP.webp" isMerged="true"
[V0_FILE]jpg:file="public/players/sesko.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sesko-Ng3E5Iupsr1x1u1tFagd1ud95SBtqi.jpg" isMerged="true"
[V0_FILE]jpg:file="public/players/wirtz.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/FLORIAN_WIRTZ_-mMdXwvqKl6Tmt0jWz1q9mB7XhugDGO.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/players/gyokeres.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Viktor%20Gyokeres%20-09eN47FbLsXaHwgCB2xKsz45MIboi7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/players/isak.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/alexander-isak-liverpool-fc-3EVnbaPfkJOp07pqMZttefRgz4iMqM.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/hero-background.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import Image from "next/image"

// Alternating stadium and player images
const heroSlides = [
  { type: "stadium", src: "/stadiums/old-trafford.jpg", name: "Old Trafford" },
  { type: "player", src: "/players/haaland.webp", name: "Erling Haaland", team: "Manchester City" },
  { type: "stadium", src: "/stadiums/emirates-interior.jpg", name: "Emirates Stadium" },
  { type: "player", src: "/players/saka.webp", name: "Bukayo Saka", team: "Arsenal" },
  { type: "stadium", src: "/stadiums/anfield.png", name: "Anfield" },
  { type: "player", src: "/players/wirtz.jpg", name: "Florian Wirtz", team: "Liverpool" },
  { type: "stadium", src: "/stadiums/etihad.jpg", name: "Etihad Stadium" },
  { type: "player", src: "/players/palmer.webp", name: "Cole Palmer", team: "Chelsea" },
  { type: "player", src: "/players/rice.jpg", name: "Declan Rice", team: "Arsenal" },
  { type: "stadium", src: "/stadiums/emirates-exterior.jpg", name: "Emirates Stadium" },
  { type: "player", src: "/players/romero.webp", name: "Cristian Romero", team: "Tottenham" },
  { type: "player", src: "/players/gyokeres.jpg", name: "Viktor Gyokeres", team: "Arsenal" },
  { type: "player", src: "/players/sesko.jpg", name: "Benjamin Sesko", team: "Manchester United" },
  { type: "player", src: "/players/isak.jpg", name: "Alexander Isak", team: "Liverpool" },
]

export function HeroBackground() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isTransitioning, setIsTransitioning] = useState(false)
  const [direction, setDirection] = useState<"left" | "right">("right")

const goToSlide = useCallback((index: number) => {
    if (isTransitioning) return
    setIsTransitioning(true)
    setDirection(index > currentIndex ? "right" : "left")
    setCurrentIndex(index)
    setTimeout(() => setIsTransitioning(false), 1200)
  }, [currentIndex, isTransitioning])

const nextSlide = useCallback(() => {
    goToSlide((currentIndex + 1) % heroSlides.length)
  }, [currentIndex, goToSlide])

useEffect(() => {
    const interval = setInterval(nextSlide, 5000)
    return () => clearInterval(interval)
  }, [nextSlide])

const currentSlide = heroSlides[currentIndex]

return (
    <div className="absolute inset-0 overflow-hidden">
      {/* Background Images with Ken Burns effect */}
      {heroSlides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 transition-all duration-1000 ease-out ${
            index === currentIndex 
              ? "opacity-100 scale-100" 
              : "opacity-0 scale-105"
          }`}
          style={{
            transform: index === currentIndex 
              ? "scale(1)" 
              : direction === "right" 
                ? "scale(1.1) translateX(5%)" 
                : "scale(1.1) translateX(-5%)",
          }}
        >
          <div 
            className={`absolute inset-0 ${
              index === currentIndex ? "animate-ken-burns" : ""
            }`}
          >
            <Image 
              src={slide.src || "/placeholder.svg"} 
              alt={slide.name} 
              fill 
              className={`object-cover ${
                slide.type === "player" ? "object-top" : "object-center"
              }`}
              priority={index === 0} 
            />
          </div>
        </div>
      ))}

{/* Animated Gradient Overlays */}
      <div className="absolute inset-0 bg-gradient-to-r from-background via-background/85 to-transparent" />
      <div className="absolute inset-0 bg-gradient-to-t from-background via-background/30 to-transparent" />
      
      {/* Animated scan line effect */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute inset-0 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.03)_50%)] bg-[length:100%_4px] animate-scan-lines" />
      </div>

{/* Glowing accent based on current slide */}
      <div 
        className={`absolute -right-1/4 top-1/4 w-[600px] h-[600px] rounded-full blur-[150px] transition-all duration-1000 ${
          currentSlide.type === "player" 
            ? "bg-primary/20 scale-110" 
            : "bg-primary/10 scale-100"
        }`}
      />

{/* Player name overlay for player slides */}
      {currentSlide.type === "player" && (
        <div className="absolute bottom-24 right-8 md:right-16 text-right z-10">
          <div className="overflow-hidden">
            <p 
              className="text-xs md:text-sm text-primary/80 uppercase tracking-[0.3em] font-medium animate-slide-up"
              style={{ animationDelay: "0.2s" }}
            >
              {currentSlide.team}
            </p>
          </div>
          <div className="overflow-hidden">
            <h3 
              className="text-2xl md:text-4xl lg:text-5xl font-bold text-foreground/90 animate-slide-up"
              style={{ animationDelay: "0.4s" }}
            >
              {currentSlide.name}
            </h3>
          </div>
        </div>
      )}

{/* Stadium name for stadium slides */}
      {currentSlide.type === "stadium" && (
        <div className="absolute bottom-24 right-8 md:right-16 text-right z-10">
          <div className="overflow-hidden">
            <p 
              className="text-xs md:text-sm text-muted-foreground/60 uppercase tracking-[0.3em] font-medium animate-slide-up"
              style={{ animationDelay: "0.2s" }}
            >
              Stadium
            </p>
          </div>
          <div className="overflow-hidden">
            <h3 
              className="text-xl md:text-2xl lg:text-3xl font-light text-foreground/70 animate-slide-up"
              style={{ animationDelay: "0.4s" }}
            >
              {currentSlide.name}
            </h3>
          </div>
        </div>
      )}

{/* Progress bar indicator */}
      <div className="absolute bottom-8 left-8 right-8 md:left-16 md:right-16 z-10">
        <div className="flex items-center gap-2">
          {/* Slide type indicators */}
          <div className="flex gap-1.5">
            {heroSlides.map((slide, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`group relative h-1 transition-all duration-300 ${
                  index === currentIndex 
                    ? "w-8 md:w-12" 
                    : "w-1.5 hover:w-3"
                }`}
                aria-label={`Go to slide ${index + 1}: ${slide.name}`}
              >
                <div 
                  className={`absolute inset-0 rounded-full transition-colors ${
                    slide.type === "player" 
                      ? index === currentIndex 
                        ? "bg-primary" 
                        : "bg-primary/30 group-hover:bg-primary/50"
                      : index === currentIndex
                        ? "bg-foreground/80"
                        : "bg-foreground/20 group-hover:bg-foreground/40"
                  }`}
                />
                {index === currentIndex && (
                  <div 
                    className="absolute inset-0 rounded-full bg-white/50 animate-progress-fill origin-left"
                    style={{ animationDuration: "5s" }}
                  />
                )}
              </button>
            ))}
          </div>
          
          {/* Current slide counter */}
          <div className="ml-auto text-xs text-muted-foreground/50 font-mono">
            <span className="text-foreground/80">{String(currentIndex + 1).padStart(2, "0")}</span>
            <span className="mx-1">/</span>
            <span>{String(heroSlides.length).padStart(2, "0")}</span>
          </div>
        </div>
      </div>

{/* Decorative corner elements */}
      <div className="absolute top-8 right-8 w-16 h-16 border-t-2 border-r-2 border-primary/20 rounded-tr-lg" />
      <div className="absolute bottom-20 left-8 w-16 h-16 border-b-2 border-l-2 border-primary/20 rounded-bl-lg" />
    </div>
  )
}

interface NewsHeroBackgroundProps {
  images: string[]
}

export function NewsHeroBackground({ images }: NewsHeroBackgroundProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const displayImages = images.length > 0 ? images.slice(0, 5) : []

useEffect(() => {
    if (displayImages.length <= 1) return

const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % displayImages.length)
    }, 4000)

return () => clearInterval(interval)
  }, [displayImages.length])

if (displayImages.length === 0) {
    return <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-background" />
  }

return (
    <div className="absolute inset-0 overflow-hidden">
      {/* Background Images from News API */}
      {displayImages.map((src, index) => (
        <div
          key={index}
          className={`absolute inset-0 transition-opacity duration-1000 ${
            index === currentIndex ? "opacity-100" : "opacity-0"
          }`}
        >
          <Image
            src={src || "/placeholder.svg"}
            alt=""
            fill
            className="object-cover"
            priority={index === 0}
            unoptimized={src.startsWith("http")}
          />
        </div>
      ))}

{/* Dark Overlay */}
      <div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/60" />
      <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/40" />

{/* Slide Indicators */}
      {displayImages.length > 1 && (
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2 z-10">
          {displayImages.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentIndex(index)}
              className={`w-2 h-2 rounded-full transition-all ${
                index === currentIndex ? "bg-primary w-6" : "bg-primary/30 hover:bg-primary/50"
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]jpg:file="public/players/rice.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Declan-Rice-backed--CKt5atGScXJ0VYwwaV2SZqc86gi9XV.jpg" isMerged="true"
[V0_FILE]png:file="public/stadiums/anfield.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pexels-soccer-trippers-2149979438-31741497-f1n06Fw44zdJgZ8k15tnr3pwr7EqWP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/stadiums/etihad.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pexels-scgough-13434565-DU4cxZmad4PJKSWf1PcH64YoDdIbmy.jpg" isMerged="true"
[V0_FILE]plaintext:file="public/players/haaland.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Haaland-QEMKo2iENbx2FCVq0Vo5u6aphNLvHH.jpeg" isMerged="true"
[V0_FILE]typescript:file="app/sitemap.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://footballai.vercel.app"

// Static pages
  const staticPages = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/matches`,
      lastModified: new Date(),
      changeFrequency: "hourly" as const,
      priority: 0.9,
    },
    {
      url: `${baseUrl}/standings`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 0.9,
    },
    {
      url: `${baseUrl}/teams`,
      lastModified: new Date(),
      changeFrequency: "weekly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/players`,
      lastModified: new Date(),
      changeFrequency: "weekly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/news`,
      lastModified: new Date(),
      changeFrequency: "hourly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/stats`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 0.7,
    },
    {
      url: `${baseUrl}/leagues`,
      lastModified: new Date(),
      changeFrequency: "weekly" as const,
      priority: 0.7,
    },
    {
      url: `${baseUrl}/ai-prediction`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/compare`,
      lastModified: new Date(),
      changeFrequency: "weekly" as const,
      priority: 0.6,
    },
    {
      url: `${baseUrl}/heatmap`,
      lastModified: new Date(),
      changeFrequency: "weekly" as const,
      priority: 0.6,
    },
    {
      url: `${baseUrl}/community`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 0.7,
    },

{
      url: `${baseUrl}/login`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: 0.3,
    },
    {
      url: `${baseUrl}/register`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: 0.3,
    },
  ]

return staticPages
}
[V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true"
"use client"

import { Bell, Menu, Search, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ThemeToggle } from "@/components/theme-toggle"

export function AdminHeader() {
  return (
    <header className="h-16 border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-40">
      <div className="h-full px-4 flex items-center justify-between gap-4">
        {/* Mobile menu button */}
        <Button variant="ghost" size="icon" className="lg:hidden">
          <Menu className="h-5 w-5" />
        </Button>

{/* Search */}
        <div className="hidden md:flex flex-1 max-w-md">
          <div className="relative w-full">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="ค้นหา..."
              className="pl-9 bg-muted/50 border-0"
            />
          </div>
        </div>

{/* Right side */}
        <div className="flex items-center gap-2">
          <ThemeToggle />
          
          {/* Notifications */}
          <Button variant="ghost" size="icon" className="relative">
            <Bell className="h-5 w-5" />
            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full" />
          </Button>

{/* User menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="gap-2 px-2">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg" />
                  <AvatarFallback>AD</AvatarFallback>
                </Avatar>
                <span className="hidden md:inline text-sm font-medium">ผู้ดูแลระบบ</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuLabel>บัญชีของฉัน</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <User className="mr-2 h-4 w-4" />
                โปรไฟล์
              </DropdownMenuItem>
              <DropdownMenuItem>ตั้งค่า</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-red-500">
                ออกจากระบบ
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-sidebar.tsx" isMerged="true"
"use client"

import React from "react"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import {
  LayoutDashboard,
  Users,
  Calendar,
  Settings,
  Shield,
  ChevronLeft,
  ChevronDown,
  Trophy,
  Globe,
  UserSquare2,
  Brain,
  MessageSquare,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"

interface SubLink {
  title: string
  href: string
}

interface SidebarLink {
  title: string
  href: string
  icon: React.ComponentType<{ className?: string }>
  subLinks?: SubLink[]
}

const sidebarLinks: SidebarLink[] = [
  {
    title: "แดชบอร์ด",
    href: "/admin",
    icon: LayoutDashboard,
  },
  {
    title: "ลีก",
    href: "/admin/leagues",
    icon: Globe,
    subLinks: [
      { title: "ลีกทั้งหมด", href: "/admin/leagues" },
      { title: "ฤดูกาล", href: "/admin/leagues/seasons" },
      { title: "ตารางคะแนน", href: "/admin/leagues/standings" },
    ],
  },
  {
    title: "แมตช์",
    href: "/admin/matches",
    icon: Calendar,
    subLinks: [
      { title: "แมตช์ทั้งหมด", href: "/admin/matches" },
      { title: "โปรแกรมแข่งขัน", href: "/admin/matches/fixtures" },
      { title: "ผลการแข่งขัน", href: "/admin/matches/results" },
      { title: "รายชื่อลงสนาม", href: "/admin/matches/lineups" },
    ],
  },
  {
    title: "ทีม",
    href: "/admin/teams",
    icon: Trophy,
    subLinks: [
      { title: "ทีมทั้งหมด", href: "/admin/teams" },
      { title: "รายชื่อนักเตะ", href: "/admin/teams/squads" },
      { title: "สถิติทีม", href: "/admin/teams/stats" },
    ],
  },
  {
    title: "นักเตะ",
    href: "/admin/players",
    icon: UserSquare2,
    subLinks: [
      { title: "นักเตะทั้งหมด", href: "/admin/players" },
      { title: "สถิติ", href: "/admin/players/stats" },
      { title: "เปรียบเทียบ", href: "/admin/players/compare" },
      { title: "ซิงค์ข้อมูล", href: "/admin/players/sync" },
    ],
  },
  {
    title: "AI ทำนายผล",
    href: "/admin/ai",
    icon: Brain,
    subLinks: [
      { title: "ตั้งค่าโมเดล", href: "/admin/ai" },
      { title: "ประวัติ Training", href: "/admin/ai/training" },
      { title: "บันทึกการทำนาย", href: "/admin/ai/logs" },
    ],
  },
  {
    title: "คอมมูนิตี้",
    href: "/admin/community",
    icon: MessageSquare,
    subLinks: [
      { title: "โพสต์ทั้งหมด", href: "/admin/community" },
      { title: "รายงาน", href: "/admin/community/reports" },
      { title: "คำต้องห้าม", href: "/admin/community/banned-words" },
      { title: "ตั้งค่า", href: "/admin/community/settings" },
    ],
  },
  {
    title: "ผู้ใช้งาน",
    href: "/admin/users",
    icon: Users,
    subLinks: [
      { title: "ผู้ใช้ทั้งหมด", href: "/admin/users" },
      { title: "บทบาท", href: "/admin/users/roles" },
    ],
  },
  {
    title: "ตั้งค่า",
    href: "/admin/settings",
    icon: Settings,
  },
]

export function AdminSidebar() {
  const pathname = usePathname()
  const [collapsed, setCollapsed] = useState(false)
  const [expandedMenus, setExpandedMenus] = useState<string[]>([])

const toggleMenu = (href: string) => {
    setExpandedMenus((prev) =>
      prev.includes(href) ? prev.filter((h) => h !== href) : [...prev, href]
    )
  }

const isMenuExpanded = (href: string) => expandedMenus.includes(href)

return (
    <>
      {/* Mobile overlay */}
      <div className="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40 hidden" />

{/* Sidebar */}
      <aside
        className={cn(
          "fixed left-0 top-0 z-50 h-screen bg-card border-r border-border transition-all duration-300",
          collapsed ? "w-16" : "w-72",
          "hidden lg:block"
        )}
      >
        {/* Logo */}
        <div className="h-16 flex items-center justify-between px-4 border-b border-border">
          {!collapsed && (
            <Link href="/admin" className="flex items-center gap-2">
              <Shield className="h-8 w-8 text-primary" />
              <span className="font-bold text-lg">แผงควบคุม</span>
            </Link>
          )}
          {collapsed && <Shield className="h-8 w-8 text-primary mx-auto" />}
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setCollapsed(!collapsed)}
            className={cn("h-8 w-8", collapsed && "mx-auto")}
          >
            <ChevronLeft
              className={cn(
                "h-4 w-4 transition-transform",
                collapsed && "rotate-180"
              )}
            />
          </Button>
        </div>

{/* Navigation */}
        <nav className="p-2 space-y-1 overflow-y-auto h-[calc(100vh-8rem)]">
          {sidebarLinks.map((link) => {
            const isActive =
              pathname === link.href ||
              (link.href !== "/admin" && pathname.startsWith(link.href))
            const hasSubLinks = link.subLinks && link.subLinks.length > 0
            const isExpanded = isMenuExpanded(link.href)

return (
              <div key={link.href}>
                {hasSubLinks ? (
                  <>
                    <button
                      onClick={() => toggleMenu(link.href)}
                      className={cn(
                        "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
                        isActive
                          ? "bg-primary/10 text-primary"
                          : "text-muted-foreground hover:text-foreground hover:bg-muted",
                        collapsed && "justify-center px-2"
                      )}
                    >
                      <link.icon className="h-5 w-5 flex-shrink-0" />
                      {!collapsed && (
                        <>
                          <span className="flex-1 text-left">{link.title}</span>
                          <ChevronDown
                            className={cn(
                              "h-4 w-4 transition-transform",
                              isExpanded && "rotate-180"
                            )}
                          />
                        </>
                      )}
                    </button>
                    {!collapsed && isExpanded && (
                      <div className="ml-4 mt-1 space-y-1 border-l border-border pl-4">
                        {link.subLinks?.map((subLink) => {
                          const isSubActive = pathname === subLink.href
                          return (
                            <Link
                              key={subLink.href}
                              href={subLink.href}
                              className={cn(
                                "block px-3 py-2 rounded-lg text-sm transition-colors",
                                isSubActive
                                  ? "bg-primary text-primary-foreground"
                                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
                              )}
                            >
                              {subLink.title}
                            </Link>
                          )
                        })}
                      </div>
                    )}
                  </>
                ) : (
                  <Link
                    href={link.href}
                    className={cn(
                      "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
                      isActive
                        ? "bg-primary text-primary-foreground"
                        : "text-muted-foreground hover:text-foreground hover:bg-muted",
                      collapsed && "justify-center px-2"
                    )}
                  >
                    <link.icon className="h-5 w-5 flex-shrink-0" />
                    {!collapsed && <span>{link.title}</span>}
                  </Link>
                )}
              </div>
            )
          })}
        </nav>

{/* Back to site */}
        <div className="absolute bottom-4 left-0 right-0 px-2">
          <Link
            href="/"
            className={cn(
              "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
              collapsed && "justify-center px-2"
            )}
          >
            <ChevronLeft className="h-5 w-5" />
            {!collapsed && <span>กลับหน้าหลัก</span>}
          </Link>
        </div>
      </aside>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { AdminSidebar } from "@/components/admin/admin-sidebar"
import { AdminHeader } from "@/components/admin/admin-header"

export const metadata: Metadata = {
  title: "Admin Dashboard - FootballAI",
  description: "Admin dashboard for managing FootballAI platform",
}

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-muted/30">
      <AdminSidebar />
      <div className="lg:pl-72">
        <AdminHeader />
        <main className="p-4 md:p-6 lg:p-8">
          {children}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, MoreHorizontal, UserPlus, Filter, Download } from "lucide-react"

const users = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    role: "admin",
    status: "active",
    joinDate: "2024-01-15",
    avatar: "/thai-man-1.jpg",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane@example.com",
    role: "editor",
    status: "active",
    joinDate: "2024-02-20",
    avatar: "/thai-man-2.jpg",
  },
  {
    id: 3,
    name: "Bob Wilson",
    email: "bob@example.com",
    role: "user",
    status: "inactive",
    joinDate: "2024-03-10",
    avatar: "/thai-man-3.jpg",
  },
  {
    id: 4,
    name: "Alice Brown",
    email: "alice@example.com",
    role: "user",
    status: "active",
    joinDate: "2024-03-15",
    avatar: "/thai-man-4.jpg",
  },
  {
    id: 5,
    name: "Charlie Davis",
    email: "charlie@example.com",
    role: "moderator",
    status: "active",
    joinDate: "2024-04-01",
    avatar: "/thai-man-5.jpg",
  },
]

const roleColors: Record<string, string> = {
  admin: "bg-red-500/10 text-red-500",
  editor: "bg-blue-500/10 text-blue-500",
  moderator: "bg-purple-500/10 text-purple-500",
  user: "bg-gray-500/10 text-gray-500",
}

const statusColors: Record<string, string> = {
  active: "bg-green-500/10 text-green-500",
  inactive: "bg-yellow-500/10 text-yellow-500",
  banned: "bg-red-500/10 text-red-500",
}

export default function UsersPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredUsers = users.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase())
  )

{/* Filters and Search */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search users..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Select>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Roles</SelectItem>
                  <SelectItem value="admin">Admin</SelectItem>
                  <SelectItem value="editor">Editor</SelectItem>
                  <SelectItem value="moderator">Moderator</SelectItem>
                  <SelectItem value="user">User</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="inactive">Inactive</SelectItem>
                  <SelectItem value="banned">Banned</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline" size="icon">
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Users Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Users</CardTitle>
          <CardDescription>
            Total {filteredUsers.length} users found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>User</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Join Date</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.map((user) => (
                <TableRow key={user.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src={user.avatar || "/placeholder.svg"} />
                        <AvatarFallback>
                          {user.name.split(" ").map((n) => n[0]).join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-medium">{user.name}</p>
                        <p className="text-sm text-muted-foreground">{user.email}</p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={roleColors[user.role]}>
                      {user.role}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={statusColors[user.status]}>
                      {user.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{user.joinDate}</TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>View Profile</DropdownMenuItem>
                        <DropdownMenuItem>Edit User</DropdownMenuItem>
                        <DropdownMenuItem>Change Role</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-500">
                          Ban User
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Shield, Eye, EyeOff, Lock, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"

export default function AdminLoginPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [rememberMe, setRememberMe] = useState(false)
  const [error, setError] = useState("")

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError("")

// Simulate login - Replace with actual auth logic
    setTimeout(() => {
      if (email === "admin@footballai.com" && password === "admin123") {
        router.push("/admin")
      } else {
        setError("Invalid email or password")
      }
      setIsLoading(false)
    }, 1000)
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-muted/50 to-background p-4">
      <div className="absolute inset-0 bg-[url('/football-pitch-aerial-view-green-grass.jpg')] bg-cover bg-center opacity-5" />
      
      <Card className="w-full max-w-md relative z-10">
        <CardHeader className="text-center space-y-4">
          <div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
            <Shield className="h-8 w-8 text-primary" />
          </div>
          <div>
            <CardTitle className="text-2xl font-bold">Admin Login</CardTitle>
            <CardDescription>
              Sign in to access the admin dashboard
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            {error && (
              <div className="p-3 rounded-lg bg-destructive/10 text-destructive text-sm text-center">
                {error}
              </div>
            )}
            
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="email"
                  type="email"
                  placeholder="admin@footballai.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4" />
                  ) : (
                    <Eye className="h-4 w-4" />
                  )}
                </button>
              </div>
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="remember"
                  checked={rememberMe}
                  onCheckedChange={(checked) => setRememberMe(checked as boolean)}
                />
                <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
                  Remember me
                </Label>
              </div>
              <Button variant="link" className="px-0 text-sm" type="button">
                Forgot password?
              </Button>
            </div>

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <div className="flex items-center gap-2">
                  <div className="h-4 w-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
                  Signing in...
                </div>
              ) : (
                "Sign In"
              )}
            </Button>
          </form>

<div className="mt-6 text-center text-sm text-muted-foreground">
            <p>Demo credentials:</p>
            <p className="font-mono text-xs mt-1">admin@footballai.com / admin123</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/leagues/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, MoreHorizontal, Globe, Upload, Calendar, Trophy } from "lucide-react"
import Image from "next/image"

const leagues = [
  {
    id: 1,
    name: "Premier League",
    country: "England",
    logo: "/premier-league-match.png",
    teams: 20,
    status: "active",
    currentSeason: "2024/25",
  },
  {
    id: 2,
    name: "La Liga",
    country: "Spain",
    logo: "/premier-league-match.png",
    teams: 20,
    status: "active",
    currentSeason: "2024/25",
  },
  {
    id: 3,
    name: "Serie A",
    country: "Italy",
    logo: "/premier-league-match.png",
    teams: 20,
    status: "active",
    currentSeason: "2024/25",
  },
  {
    id: 4,
    name: "Bundesliga",
    country: "Germany",
    logo: "/premier-league-match.png",
    teams: 18,
    status: "active",
    currentSeason: "2024/25",
  },
  {
    id: 5,
    name: "Ligue 1",
    country: "France",
    logo: "/premier-league-match.png",
    teams: 18,
    status: "active",
    currentSeason: "2024/25",
  },
]

const statusColors: Record<string, string> = {
  active: "bg-green-500/10 text-green-500",
  inactive: "bg-gray-500/10 text-gray-500",
  upcoming: "bg-blue-500/10 text-blue-500",
}

export default function LeaguesPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredLeagues = leagues.filter(
    (league) =>
      league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      league.country.toLowerCase().includes(searchQuery.toLowerCase())
  )

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Globe className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{leagues.length}</p>
                <p className="text-sm text-muted-foreground">Total Leagues</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <Trophy className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{leagues.filter(l => l.status === "active").length}</p>
                <p className="text-sm text-muted-foreground">Active Leagues</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <Calendar className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">96</p>
                <p className="text-sm text-muted-foreground">Total Teams</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-purple-500/10 rounded-lg">
                <Globe className="h-6 w-6 text-purple-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">5</p>
                <p className="text-sm text-muted-foreground">Countries</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search and Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search leagues..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Select>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="Country" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Countries</SelectItem>
                  <SelectItem value="england">England</SelectItem>
                  <SelectItem value="spain">Spain</SelectItem>
                  <SelectItem value="italy">Italy</SelectItem>
                  <SelectItem value="germany">Germany</SelectItem>
                  <SelectItem value="france">France</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="inactive">Inactive</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Leagues Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Leagues</CardTitle>
          <CardDescription>
            {filteredLeagues.length} leagues found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>League</TableHead>
                <TableHead>Country</TableHead>
                <TableHead>Teams</TableHead>
                <TableHead>Season</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredLeagues.map((league) => (
                <TableRow key={league.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="relative h-10 w-10 rounded-lg overflow-hidden bg-muted">
                        <Image
                          src={league.logo || "/placeholder.svg"}
                          alt={league.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <span className="font-medium">{league.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{league.country}</TableCell>
                  <TableCell>{league.teams}</TableCell>
                  <TableCell>{league.currentSeason}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={statusColors[league.status]}>
                      {league.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>View Details</DropdownMenuItem>
                        <DropdownMenuItem>Edit League</DropdownMenuItem>
                        <DropdownMenuItem>Manage Seasons</DropdownMenuItem>
                        <DropdownMenuItem>View Standings</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-500">
                          Delete League
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/leagues/seasons/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, Calendar, Play, Pause, CheckCircle } from "lucide-react"

const seasons = [
  {
    id: 1,
    name: "2024/25",
    league: "Premier League",
    startDate: "2024-08-16",
    endDate: "2025-05-25",
    matchweeks: 38,
    status: "active",
    matchesPlayed: 180,
  },
  {
    id: 2,
    name: "2023/24",
    league: "Premier League",
    startDate: "2023-08-11",
    endDate: "2024-05-19",
    matchweeks: 38,
    status: "completed",
    matchesPlayed: 380,
  },
  {
    id: 3,
    name: "2024/25",
    league: "La Liga",
    startDate: "2024-08-15",
    endDate: "2025-05-25",
    matchweeks: 38,
    status: "active",
    matchesPlayed: 160,
  },
  {
    id: 4,
    name: "2024/25",
    league: "Serie A",
    startDate: "2024-08-18",
    endDate: "2025-05-25",
    matchweeks: 38,
    status: "active",
    matchesPlayed: 150,
  },
]

const statusColors: Record<string, string> = {
  active: "bg-green-500/10 text-green-500",
  completed: "bg-blue-500/10 text-blue-500",
  upcoming: "bg-yellow-500/10 text-yellow-500",
  cancelled: "bg-red-500/10 text-red-500",
}

const statusIcons: Record<string, React.ReactNode> = {
  active: <Play className="h-3 w-3" />,
  completed: <CheckCircle className="h-3 w-3" />,
  upcoming: <Calendar className="h-3 w-3" />,
  cancelled: <Pause className="h-3 w-3" />,
}

export default function SeasonsPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredSeasons = seasons.filter(
    (season) =>
      season.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      season.league.toLowerCase().includes(searchQuery.toLowerCase())
  )

{/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Calendar className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{seasons.length}</p>
                <p className="text-sm text-muted-foreground">Total Seasons</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <Play className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{seasons.filter(s => s.status === "active").length}</p>
                <p className="text-sm text-muted-foreground">Active Seasons</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <CheckCircle className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{seasons.filter(s => s.status === "completed").length}</p>
                <p className="text-sm text-muted-foreground">Completed</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-purple-500/10 rounded-lg">
                <Calendar className="h-6 w-6 text-purple-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{seasons.reduce((acc, s) => acc + s.matchesPlayed, 0)}</p>
                <p className="text-sm text-muted-foreground">Matches Played</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search seasons..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select>
              <SelectTrigger className="w-40">
                <SelectValue placeholder="League" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Leagues</SelectItem>
                <SelectItem value="premier-league">Premier League</SelectItem>
                <SelectItem value="la-liga">La Liga</SelectItem>
                <SelectItem value="serie-a">Serie A</SelectItem>
              </SelectContent>
            </Select>
            <Select>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
                <SelectItem value="upcoming">Upcoming</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Seasons Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Seasons</CardTitle>
          <CardDescription>
            {filteredSeasons.length} seasons found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Season</TableHead>
                <TableHead>League</TableHead>
                <TableHead>Duration</TableHead>
                <TableHead>Matchweeks</TableHead>
                <TableHead>Matches</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredSeasons.map((season) => (
                <TableRow key={season.id}>
                  <TableCell className="font-medium">{season.name}</TableCell>
                  <TableCell>{season.league}</TableCell>
                  <TableCell>
                    <span className="text-sm">
                      {new Date(season.startDate).toLocaleDateString()} - {new Date(season.endDate).toLocaleDateString()}
                    </span>
                  </TableCell>
                  <TableCell>{season.matchweeks}</TableCell>
                  <TableCell>{season.matchesPlayed}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={`${statusColors[season.status]} flex items-center gap-1 w-fit`}>
                      {statusIcons[season.status]}
                      {season.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-2">
                      <Button variant="outline" size="sm">Edit</Button>
                      <Button variant="outline" size="sm">Fixtures</Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/leagues/standings/page.tsx" isMerged="true"
"use client"

const standingsData = [
  { pos: 1, team: "Liverpool", logo: "/liverpool-logo.png", played: 20, won: 15, drawn: 4, lost: 1, gf: 48, ga: 18, gd: 30, points: 49, form: ["W", "W", "D", "W", "W"] },
  { pos: 2, team: "Arsenal", logo: "/arsenal-logo.png", played: 20, won: 13, drawn: 5, lost: 2, gf: 42, ga: 20, gd: 22, points: 44, form: ["W", "D", "W", "W", "D"] },
  { pos: 3, team: "Nottingham Forest", logo: "/nottingham-forest-logo.jpg", played: 20, won: 12, drawn: 5, lost: 3, gf: 35, ga: 21, gd: 14, points: 41, form: ["W", "W", "L", "W", "D"] },
  { pos: 4, team: "Chelsea", logo: "/chelsea-football-club-crest.png", played: 20, won: 11, drawn: 5, lost: 4, gf: 40, ga: 25, gd: 15, points: 38, form: ["L", "W", "W", "D", "W"] },
  { pos: 5, team: "Newcastle", logo: "/newcastle-united-logo.png", played: 20, won: 10, drawn: 6, lost: 4, gf: 35, ga: 22, gd: 13, points: 36, form: ["W", "D", "D", "W", "W"] },
  { pos: 6, team: "Manchester City", logo: "/manchester-city-logo.png", played: 20, won: 10, drawn: 5, lost: 5, gf: 38, ga: 26, gd: 12, points: 35, form: ["L", "W", "D", "L", "W"] },
  { pos: 7, team: "Bournemouth", logo: "/bournemouth-logo.jpg", played: 20, won: 9, drawn: 6, lost: 5, gf: 32, ga: 25, gd: 7, points: 33, form: ["D", "W", "W", "L", "D"] },
  { pos: 8, team: "Aston Villa", logo: "/aston-villa-logo.png", played: 20, won: 9, drawn: 5, lost: 6, gf: 30, ga: 28, gd: 2, points: 32, form: ["W", "L", "W", "D", "L"] },
]

const formColors: Record<string, string> = {
  W: "bg-green-500 text-white",
  D: "bg-yellow-500 text-white",
  L: "bg-red-500 text-white",
}

export default function StandingsAdminPage() {
  const [selectedLeague, setSelectedLeague] = useState("premier-league")
  const [selectedSeason, setSelectedSeason] = useState("2024-25")
  const [isGenerating, setIsGenerating] = useState(false)

const handleGenerate = () => {
    setIsGenerating(true)
    setTimeout(() => setIsGenerating(false), 2000)
  }

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <Select value={selectedLeague} onValueChange={setSelectedLeague}>
              <SelectTrigger className="w-full md:w-48">
                <SelectValue placeholder="Select League" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="premier-league">Premier League</SelectItem>
                <SelectItem value="la-liga">La Liga</SelectItem>
                <SelectItem value="serie-a">Serie A</SelectItem>
                <SelectItem value="bundesliga">Bundesliga</SelectItem>
              </SelectContent>
            </Select>
            <Select value={selectedSeason} onValueChange={setSelectedSeason}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Select Season" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="2024-25">2024/25</SelectItem>
                <SelectItem value="2023-24">2023/24</SelectItem>
                <SelectItem value="2022-23">2022/23</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Info Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card className="border-green-500/30 bg-green-500/5">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <TrendingUp className="h-5 w-5 text-green-500" />
              <div>
                <p className="text-sm font-medium">Champions League</p>
                <p className="text-xs text-muted-foreground">Position 1-4</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-yellow-500/30 bg-yellow-500/5">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Minus className="h-5 w-5 text-yellow-500" />
              <div>
                <p className="text-sm font-medium">Europa League</p>
                <p className="text-xs text-muted-foreground">Position 5-6</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-red-500/30 bg-red-500/5">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <TrendingDown className="h-5 w-5 text-red-500" />
              <div>
                <p className="text-sm font-medium">Relegation Zone</p>
                <p className="text-xs text-muted-foreground">Position 18-20</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Standings Table */}
      <Card>
        <CardHeader>
          <CardTitle>League Standings</CardTitle>
          <CardDescription>
            Premier League - Season 2024/25 - Updated {new Date().toLocaleDateString()}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">#</TableHead>
                <TableHead>Team</TableHead>
                <TableHead className="text-center">P</TableHead>
                <TableHead className="text-center">W</TableHead>
                <TableHead className="text-center">D</TableHead>
                <TableHead className="text-center">L</TableHead>
                <TableHead className="text-center">GF</TableHead>
                <TableHead className="text-center">GA</TableHead>
                <TableHead className="text-center">GD</TableHead>
                <TableHead className="text-center">Pts</TableHead>
                <TableHead>Form</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {standingsData.map((team) => (
                <TableRow key={team.pos} className={
                  team.pos <= 4 ? "bg-green-500/5" :
                  team.pos <= 6 ? "bg-yellow-500/5" :
                  team.pos >= 18 ? "bg-red-500/5" : ""
                }>
                  <TableCell className="font-bold">{team.pos}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="relative h-8 w-8 rounded overflow-hidden bg-muted">
                        <Image
                          src={team.logo || "/placeholder.svg"}
                          alt={team.team}
                          fill
                          className="object-contain"
                        />
                      </div>
                      <span className="font-medium">{team.team}</span>
                    </div>
                  </TableCell>
                  <TableCell className="text-center">{team.played}</TableCell>
                  <TableCell className="text-center">{team.won}</TableCell>
                  <TableCell className="text-center">{team.drawn}</TableCell>
                  <TableCell className="text-center">{team.lost}</TableCell>
                  <TableCell className="text-center">{team.gf}</TableCell>
                  <TableCell className="text-center">{team.ga}</TableCell>
                  <TableCell className="text-center font-medium">
                    {team.gd > 0 ? `+${team.gd}` : team.gd}
                  </TableCell>
                  <TableCell className="text-center font-bold">{team.points}</TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {team.form.map((result, idx) => (
                        <span
                          key={idx}
                          className={`w-5 h-5 flex items-center justify-center rounded text-xs font-bold ${formColors[result]}`}
                        >
                          {result}
                        </span>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="sm">Edit</Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Alert */}
      <Card className="border-blue-500/30">
        <CardContent className="p-4">
          <div className="flex items-start gap-3">
            <AlertCircle className="h-5 w-5 text-blue-500 mt-0.5" />
            <div>
              <p className="font-medium">Auto-Update Enabled</p>
              <p className="text-sm text-muted-foreground">
                Standings are automatically recalculated after each match result is entered. 
                You can also manually regenerate standings using the button above.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/matches/lineups/page.tsx" isMerged="true"
"use client"

const matchData = {
  homeTeam: "Liverpool",
  homeLogo: "/liverpool-logo.png",
  awayTeam: "Arsenal",
  awayLogo: "/arsenal-logo.png",
  date: "2025-01-28",
  venue: "Anfield",
}

const homeSquad = [
  { id: 1, name: "Alisson", number: 1, position: "GK" },
  { id: 2, name: "Alexander-Arnold", number: 66, position: "RB" },
  { id: 3, name: "Van Dijk", number: 4, position: "CB" },
  { id: 4, name: "Konaté", number: 5, position: "CB" },
  { id: 5, name: "Robertson", number: 26, position: "LB" },
  { id: 6, name: "Mac Allister", number: 10, position: "CM" },
  { id: 7, name: "Gravenberch", number: 38, position: "CM" },
  { id: 8, name: "Szoboszlai", number: 8, position: "CM" },
  { id: 9, name: "Salah", number: 11, position: "RW" },
  { id: 10, name: "Gakpo", number: 18, position: "LW" },
  { id: 11, name: "Diaz", number: 7, position: "ST" },
]

const awaySquad = [
  { id: 1, name: "Raya", number: 22, position: "GK" },
  { id: 2, name: "White", number: 4, position: "RB" },
  { id: 3, name: "Saliba", number: 2, position: "CB" },
  { id: 4, name: "Gabriel", number: 6, position: "CB" },
  { id: 5, name: "Timber", number: 12, position: "LB" },
  { id: 6, name: "Rice", number: 41, position: "DM" },
  { id: 7, name: "Partey", number: 5, position: "CM" },
  { id: 8, name: "Ødegaard", number: 8, position: "CAM" },
  { id: 9, name: "Saka", number: 7, position: "RW" },
  { id: 10, name: "Martinelli", number: 11, position: "LW" },
  { id: 11, name: "Havertz", number: 29, position: "ST" },
]

const formations = ["4-3-3", "4-4-2", "3-5-2", "4-2-3-1", "5-3-2", "3-4-3"]

export default function LineupsAdminPage() {
  const [homeFormation, setHomeFormation] = useState("4-3-3")
  const [awayFormation, setAwayFormation] = useState("4-3-3")
  const [selectedHomeLineup, setSelectedHomeLineup] = useState<number[]>(homeSquad.slice(0, 11).map(p => p.id))
  const [selectedAwayLineup, setSelectedAwayLineup] = useState<number[]>(awaySquad.slice(0, 11).map(p => p.id))

const togglePlayer = (playerId: number, team: "home" | "away") => {
    if (team === "home") {
      if (selectedHomeLineup.includes(playerId)) {
        setSelectedHomeLineup(selectedHomeLineup.filter(id => id !== playerId))
      } else if (selectedHomeLineup.length < 11) {
        setSelectedHomeLineup([...selectedHomeLineup, playerId])
      }
    } else {
      if (selectedAwayLineup.includes(playerId)) {
        setSelectedAwayLineup(selectedAwayLineup.filter(id => id !== playerId))
      } else if (selectedAwayLineup.length < 11) {
        setSelectedAwayLineup([...selectedAwayLineup, playerId])
      }
    }
  }

{/* Match Selector */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row md:items-center gap-4">
            <Select defaultValue="match1">
              <SelectTrigger className="flex-1">
                <SelectValue placeholder="Select match" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="match1">Liverpool vs Arsenal - Jan 28, 2025</SelectItem>
                <SelectItem value="match2">Man City vs Chelsea - Jan 29, 2025</SelectItem>
                <SelectItem value="match3">Tottenham vs Newcastle - Jan 30, 2025</SelectItem>
              </SelectContent>
            </Select>
            <Badge variant="secondary" className="bg-blue-500/10 text-blue-500">
              Scheduled
            </Badge>
          </div>
        </CardContent>
      </Card>

{/* Lineups Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Home Team */}
        <Card>
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="relative h-10 w-10 rounded overflow-hidden bg-muted">
                  <Image src={matchData.homeLogo || "/placeholder.svg"} alt={matchData.homeTeam} fill className="object-contain" />
                </div>
                <div>
                  <CardTitle className="text-lg">{matchData.homeTeam}</CardTitle>
                  <CardDescription>Home Team</CardDescription>
                </div>
              </div>
              <Select value={homeFormation} onValueChange={setHomeFormation}>
                <SelectTrigger className="w-28">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {formations.map(f => (
                    <SelectItem key={f} value={f}>{f}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <p className="text-sm font-medium flex items-center gap-2">
                <Users className="h-4 w-4" />
                Starting XI
              </p>
              <Badge variant="secondary">
                {selectedHomeLineup.length}/11 selected
              </Badge>
            </div>
            <div className="grid grid-cols-2 gap-2">
              {homeSquad.map((player) => {
                const isSelected = selectedHomeLineup.includes(player.id)
                return (
                  <button
                    key={player.id}
                    onClick={() => togglePlayer(player.id, "home")}
                    className={`p-3 rounded-lg border text-left transition-colors ${
                      isSelected
                        ? "border-primary bg-primary/10"
                        : "border-border hover:bg-muted"
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <span className="text-lg font-bold text-muted-foreground">
                        {player.number}
                      </span>
                      <div>
                        <p className="font-medium text-sm">{player.name}</p>
                        <p className="text-xs text-muted-foreground">{player.position}</p>
                      </div>
                    </div>
                  </button>
                )
              })}
            </div>
          </CardContent>
        </Card>

{/* Away Team */}
        <Card>
          <CardHeader className="pb-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="relative h-10 w-10 rounded overflow-hidden bg-muted">
                  <Image src={matchData.awayLogo || "/placeholder.svg"} alt={matchData.awayTeam} fill className="object-contain" />
                </div>
                <div>
                  <CardTitle className="text-lg">{matchData.awayTeam}</CardTitle>
                  <CardDescription>Away Team</CardDescription>
                </div>
              </div>
              <Select value={awayFormation} onValueChange={setAwayFormation}>
                <SelectTrigger className="w-28">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {formations.map(f => (
                    <SelectItem key={f} value={f}>{f}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-4">
              <p className="text-sm font-medium flex items-center gap-2">
                <Users className="h-4 w-4" />
                Starting XI
              </p>
              <Badge variant="secondary">
                {selectedAwayLineup.length}/11 selected
              </Badge>
            </div>
            <div className="grid grid-cols-2 gap-2">
              {awaySquad.map((player) => {
                const isSelected = selectedAwayLineup.includes(player.id)
                return (
                  <button
                    key={player.id}
                    onClick={() => togglePlayer(player.id, "away")}
                    className={`p-3 rounded-lg border text-left transition-colors ${
                      isSelected
                        ? "border-primary bg-primary/10"
                        : "border-border hover:bg-muted"
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <span className="text-lg font-bold text-muted-foreground">
                        {player.number}
                      </span>
                      <div>
                        <p className="font-medium text-sm">{player.name}</p>
                        <p className="text-xs text-muted-foreground">{player.position}</p>
                      </div>
                    </div>
                  </button>
                )
              })}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/matches/fixtures/page.tsx" isMerged="true"
"use client"

const fixtures = [
  {
    date: "2025-01-28",
    matches: [
      { id: 1, homeTeam: "Liverpool", homeLogo: "/liverpool-logo.png", awayTeam: "Nottm Forest", awayLogo: "/nottingham-forest-logo.jpg", time: "20:00", venue: "Anfield" },
    ],
  },
  {
    date: "2025-01-29",
    matches: [
      { id: 2, homeTeam: "Arsenal", homeLogo: "/arsenal-logo.png", awayTeam: "Man United", awayLogo: "/manchester-united-crest.png", time: "19:30", venue: "Emirates Stadium" },
      { id: 3, homeTeam: "Newcastle", homeLogo: "/newcastle-united-logo.png", awayTeam: "Brighton", awayLogo: "/brighton-logo.png", time: "19:30", venue: "St James Park" },
      { id: 4, homeTeam: "Bournemouth", homeLogo: "/bournemouth-logo.jpg", awayTeam: "West Ham", awayLogo: "/west-ham-united-badge.png", time: "19:30", venue: "Vitality Stadium" },
    ],
  },
  {
    date: "2025-02-01",
    matches: [
      { id: 5, homeTeam: "Man City", homeLogo: "/manchester-city-logo.png", awayTeam: "Chelsea", awayLogo: "/chelsea-football-club-crest.png", time: "12:30", venue: "Etihad Stadium" },
      { id: 6, homeTeam: "Everton", homeLogo: "/everton-fc-badge.png", awayTeam: "Aston Villa", awayLogo: "/aston-villa-logo.png", time: "15:00", venue: "Goodison Park" },
      { id: 7, homeTeam: "Tottenham", homeLogo: "/tottenham-logo.png", awayTeam: "Leicester", awayLogo: "/leicester-logo.jpg", time: "17:30", venue: "Tottenham Hotspur Stadium" },
    ],
  },
]

export default function FixturesAdminPage() {
  const [selectedMatchweek, setSelectedMatchweek] = useState("21")

{/* Fixtures by Date */}
      <div className="space-y-6">
        {fixtures.map((day) => (
          <Card key={day.date}>
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-2 text-lg">
                <Calendar className="h-5 w-5 text-primary" />
                {new Date(day.date).toLocaleDateString("en-GB", {
                  weekday: "long",
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </CardTitle>
              <CardDescription>{day.matches.length} matches</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {day.matches.map((match) => (
                <div
                  key={match.id}
                  className="flex items-center justify-between p-4 rounded-lg border border-border hover:bg-muted/50 transition-colors"
                >
                  <div className="flex items-center gap-4 flex-1">
                    <div className="flex items-center gap-3 flex-1 justify-end">
                      <span className="font-medium text-right">{match.homeTeam}</span>
                      <div className="relative h-10 w-10 rounded overflow-hidden bg-muted">
                        <Image
                          src={match.homeLogo || "/placeholder.svg"}
                          alt={match.homeTeam}
                          fill
                          className="object-contain"
                        />
                      </div>
                    </div>

<div className="flex flex-col items-center px-4 min-w-[80px]">
                      <Badge variant="secondary" className="bg-primary/10 text-primary">
                        {match.time}
                      </Badge>
                    </div>

<div className="flex items-center gap-3 flex-1">
                      <div className="relative h-10 w-10 rounded overflow-hidden bg-muted">
                        <Image
                          src={match.awayLogo || "/placeholder.svg"}
                          alt={match.awayTeam}
                          fill
                          className="object-contain"
                        />
                      </div>
                      <span className="font-medium">{match.awayTeam}</span>
                    </div>
                  </div>

<div className="flex items-center gap-4 ml-4">
                    <div className="hidden md:flex items-center gap-2 text-sm text-muted-foreground">
                      <MapPin className="h-4 w-4" />
                      {match.venue}
                    </div>
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>

{/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline">Generate Full Season</Button>
            <Button variant="outline">Import from API</Button>
            <Button variant="outline">Bulk Edit Dates</Button>
            <Button variant="outline">Export Schedule</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/matches/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, MoreHorizontal, Calendar, Clock, Play, CheckCircle, Pause } from "lucide-react"
import Image from "next/image"

const matches = [
  {
    id: 1,
    homeTeam: "Liverpool",
    homeLogo: "/liverpool-logo.png",
    awayTeam: "Arsenal",
    awayLogo: "/arsenal-logo.png",
    homeScore: 2,
    awayScore: 1,
    date: "2025-01-25",
    time: "15:00",
    venue: "Anfield",
    status: "completed",
    league: "Premier League",
    matchweek: 20,
  },
  {
    id: 2,
    homeTeam: "Manchester City",
    homeLogo: "/manchester-city-logo.png",
    awayTeam: "Chelsea",
    awayLogo: "/chelsea-football-club-crest.png",
    homeScore: 0,
    awayScore: 0,
    date: "2025-01-26",
    time: "17:30",
    venue: "Etihad Stadium",
    status: "live",
    league: "Premier League",
    matchweek: 20,
  },
  {
    id: 3,
    homeTeam: "Tottenham",
    homeLogo: "/tottenham-logo.png",
    awayTeam: "Newcastle",
    awayLogo: "/newcastle-united-logo.png",
    homeScore: null,
    awayScore: null,
    date: "2025-01-28",
    time: "20:00",
    venue: "Tottenham Hotspur Stadium",
    status: "scheduled",
    league: "Premier League",
    matchweek: 21,
  },
  {
    id: 4,
    homeTeam: "Aston Villa",
    homeLogo: "/aston-villa-logo.png",
    awayTeam: "Brighton",
    awayLogo: "/brighton-logo.png",
    homeScore: null,
    awayScore: null,
    date: "2025-01-29",
    time: "19:45",
    venue: "Villa Park",
    status: "scheduled",
    league: "Premier League",
    matchweek: 21,
  },
]

const statusColors: Record<string, string> = {
  scheduled: "bg-blue-500/10 text-blue-500",
  live: "bg-green-500/10 text-green-500",
  completed: "bg-gray-500/10 text-gray-500",
  postponed: "bg-yellow-500/10 text-yellow-500",
  cancelled: "bg-red-500/10 text-red-500",
}

const statusIcons: Record<string, React.ReactNode> = {
  scheduled: <Clock className="h-3 w-3" />,
  live: <Play className="h-3 w-3" />,
  completed: <CheckCircle className="h-3 w-3" />,
  postponed: <Pause className="h-3 w-3" />,
}

export default function MatchesAdminPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredMatches = matches.filter(
    (match) =>
      match.homeTeam.toLowerCase().includes(searchQuery.toLowerCase()) ||
      match.awayTeam.toLowerCase().includes(searchQuery.toLowerCase())
  )

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Match Management</h1>
          <p className="text-muted-foreground">Manage fixtures, scores, and match events</p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Add Match
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Add New Match</DialogTitle>
              <DialogDescription>
                Schedule a new match fixture.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Home Team</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select team" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="liverpool">Liverpool</SelectItem>
                      <SelectItem value="arsenal">Arsenal</SelectItem>
                      <SelectItem value="man-city">Manchester City</SelectItem>
                      <SelectItem value="chelsea">Chelsea</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Away Team</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select team" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="liverpool">Liverpool</SelectItem>
                      <SelectItem value="arsenal">Arsenal</SelectItem>
                      <SelectItem value="man-city">Manchester City</SelectItem>
                      <SelectItem value="chelsea">Chelsea</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label>League</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Select league" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="premier-league">Premier League</SelectItem>
                    <SelectItem value="fa-cup">FA Cup</SelectItem>
                    <SelectItem value="league-cup">League Cup</SelectItem>
                    <SelectItem value="ucl">Champions League</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Date</Label>
                  <Input type="date" />
                </div>
                <div className="space-y-2">
                  <Label>Time</Label>
                  <Input type="time" />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Venue</Label>
                <Input placeholder="Enter stadium name" />
              </div>
              <div className="space-y-2">
                <Label>Matchweek</Label>
                <Input type="number" placeholder="e.g. 21" />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsAddDialogOpen(false)}>
                Create Match
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Calendar className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{matches.length}</p>
                <p className="text-sm text-muted-foreground">Total Matches</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <Play className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{matches.filter(m => m.status === "live").length}</p>
                <p className="text-sm text-muted-foreground">Live Now</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <Clock className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{matches.filter(m => m.status === "scheduled").length}</p>
                <p className="text-sm text-muted-foreground">Scheduled</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-gray-500/10 rounded-lg">
                <CheckCircle className="h-6 w-6 text-gray-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{matches.filter(m => m.status === "completed").length}</p>
                <p className="text-sm text-muted-foreground">Completed</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search and Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search matches..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Select>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="League" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Leagues</SelectItem>
                  <SelectItem value="premier-league">Premier League</SelectItem>
                  <SelectItem value="fa-cup">FA Cup</SelectItem>
                  <SelectItem value="ucl">Champions League</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className="w-36">
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="scheduled">Scheduled</SelectItem>
                  <SelectItem value="live">Live</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="postponed">Postponed</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Matches Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Matches</CardTitle>
          <CardDescription>
            {filteredMatches.length} matches found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Match</TableHead>
                <TableHead>Score</TableHead>
                <TableHead>Date & Time</TableHead>
                <TableHead>Venue</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredMatches.map((match) => (
                <TableRow key={match.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="flex items-center gap-2">
                        <div className="relative h-8 w-8 rounded overflow-hidden bg-muted">
                          <Image
                            src={match.homeLogo || "/placeholder.svg"}
                            alt={match.homeTeam}
                            fill
                            className="object-contain"
                          />
                        </div>
                        <span className="font-medium text-sm">{match.homeTeam}</span>
                      </div>
                      <span className="text-muted-foreground text-sm">vs</span>
                      <div className="flex items-center gap-2">
                        <div className="relative h-8 w-8 rounded overflow-hidden bg-muted">
                          <Image
                            src={match.awayLogo || "/placeholder.svg"}
                            alt={match.awayTeam}
                            fill
                            className="object-contain"
                          />
                        </div>
                        <span className="font-medium text-sm">{match.awayTeam}</span>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    {match.homeScore !== null ? (
                      <span className="font-bold">
                        {match.homeScore} - {match.awayScore}
                      </span>
                    ) : (
                      <span className="text-muted-foreground">-</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <div>
                      <p className="text-sm">{new Date(match.date).toLocaleDateString()}</p>
                      <p className="text-xs text-muted-foreground">{match.time}</p>
                    </div>
                  </TableCell>
                  <TableCell className="text-sm">{match.venue}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={`${statusColors[match.status]} flex items-center gap-1 w-fit`}>
                      {statusIcons[match.status]}
                      {match.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>View Details</DropdownMenuItem>
                        <DropdownMenuItem>Edit Match</DropdownMenuItem>
                        <DropdownMenuItem>Update Score</DropdownMenuItem>
                        <DropdownMenuItem>Manage Events</DropdownMenuItem>
                        <DropdownMenuItem>Set Lineups</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-500">
                          Delete Match
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/matches/results/page.tsx" isMerged="true"
"use client"

const resultsData = [
  {
    id: 1,
    homeTeam: "Liverpool",
    homeLogo: "/liverpool-logo.png",
    homeScore: 2,
    awayTeam: "Arsenal",
    awayLogo: "/arsenal-logo.png",
    awayScore: 1,
    date: "2025-01-25",
    events: [
      { type: "goal", player: "Salah", team: "home", minute: 23 },
      { type: "goal", player: "Saka", team: "away", minute: 45 },
      { type: "goal", player: "Diaz", team: "home", minute: 78 },
      { type: "yellow", player: "Rice", team: "away", minute: 55 },
    ],
  },
  {
    id: 2,
    homeTeam: "Chelsea",
    homeLogo: "/chelsea-football-club-crest.png",
    homeScore: 3,
    awayTeam: "Tottenham",
    awayLogo: "/tottenham-logo.png",
    awayScore: 3,
    date: "2025-01-24",
    events: [
      { type: "goal", player: "Palmer", team: "home", minute: 12 },
      { type: "goal", player: "Son", team: "away", minute: 28 },
      { type: "goal", player: "Palmer", team: "home", minute: 34 },
      { type: "red", player: "Romero", team: "away", minute: 65 },
      { type: "goal", player: "Kulusevski", team: "away", minute: 70 },
      { type: "goal", player: "Son", team: "away", minute: 85 },
      { type: "goal", player: "Jackson", team: "home", minute: 90 },
    ],
  },
  {
    id: 3,
    homeTeam: "Newcastle",
    homeLogo: "/newcastle-united-logo.png",
    homeScore: 1,
    awayTeam: "Bournemouth",
    awayLogo: "/bournemouth-logo.jpg",
    awayScore: 0,
    date: "2025-01-23",
    events: [
      { type: "goal", player: "Isak", team: "home", minute: 67 },
      { type: "yellow", player: "Senesi", team: "away", minute: 72 },
    ],
  },
]

export default function ResultsAdminPage() {
  const [selectedMatch, setSelectedMatch] = useState<typeof resultsData[0] | null>(null)
  const [isScoreDialogOpen, setIsScoreDialogOpen] = useState(false)
  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)

{/* Results List */}
      <div className="space-y-4">
        {resultsData.map((match) => (
          <Card key={match.id}>
            <CardContent className="p-6">
              <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                {/* Match Info */}
                <div className="flex items-center justify-center gap-4 flex-1">
                  <div className="flex items-center gap-3 flex-1 justify-end">
                    <span className="font-medium text-lg text-right">{match.homeTeam}</span>
                    <div className="relative h-12 w-12 rounded overflow-hidden bg-muted">
                      <Image src={match.homeLogo || "/placeholder.svg"} alt={match.homeTeam} fill className="object-contain" />
                    </div>
                  </div>

<div className="flex items-center gap-2 px-4">
                    <span className="text-3xl font-bold">{match.homeScore}</span>
                    <span className="text-xl text-muted-foreground">-</span>
                    <span className="text-3xl font-bold">{match.awayScore}</span>
                  </div>

<div className="flex items-center gap-3 flex-1">
                    <div className="relative h-12 w-12 rounded overflow-hidden bg-muted">
                      <Image src={match.awayLogo || "/placeholder.svg"} alt={match.awayTeam} fill className="object-contain" />
                    </div>
                    <span className="font-medium text-lg">{match.awayTeam}</span>
                  </div>
                </div>

{/* Actions */}
                <div className="flex items-center gap-2 justify-center lg:justify-end">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setSelectedMatch(match)
                      setIsScoreDialogOpen(true)
                    }}
                  >
                    <Edit2 className="h-4 w-4 mr-2" />
                    Edit Score
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setSelectedMatch(match)
                      setIsEventDialogOpen(true)
                    }}
                  >
                    <Plus className="h-4 w-4 mr-2" />
                    Events
                  </Button>
                </div>
              </div>

{/* Events */}
              {match.events.length > 0 && (
                <div className="mt-4 pt-4 border-t border-border">
                  <p className="text-sm font-medium text-muted-foreground mb-3">Match Events</p>
                  <div className="flex flex-wrap gap-2">
                    {match.events.map((event, idx) => (
                      <Badge
                        key={idx}
                        variant="secondary"
                        className={
                          event.type === "goal" ? "bg-green-500/10 text-green-500" :
                          event.type === "yellow" ? "bg-yellow-500/10 text-yellow-500" :
                          "bg-red-500/10 text-red-500"
                        }
                      >
                        {event.minute}' {event.player} ({event.type})
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

<div className="mt-4 pt-4 border-t border-border flex items-center justify-between text-sm text-muted-foreground">
                <div className="flex items-center gap-2">
                  <Calendar className="h-4 w-4" />
                  {new Date(match.date).toLocaleDateString("en-GB", {
                    weekday: "long",
                    day: "numeric",
                    month: "long",
                  })}
                </div>
                <Badge variant="secondary">Completed</Badge>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Edit Score Dialog */}
      <Dialog open={isScoreDialogOpen} onOpenChange={setIsScoreDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Update Match Score</DialogTitle>
            <DialogDescription>
              {selectedMatch?.homeTeam} vs {selectedMatch?.awayTeam}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <div className="flex items-center justify-center gap-4">
              <div className="text-center">
                <p className="text-sm text-muted-foreground mb-2">{selectedMatch?.homeTeam}</p>
                <Input
                  type="number"
                  className="w-20 text-center text-2xl"
                  defaultValue={selectedMatch?.homeScore}
                />
              </div>
              <span className="text-2xl text-muted-foreground">-</span>
              <div className="text-center">
                <p className="text-sm text-muted-foreground mb-2">{selectedMatch?.awayTeam}</p>
                <Input
                  type="number"
                  className="w-20 text-center text-2xl"
                  defaultValue={selectedMatch?.awayScore}
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsScoreDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={() => setIsScoreDialogOpen(false)}>
              Update Score
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Events Dialog */}
      <Dialog open={isEventDialogOpen} onOpenChange={setIsEventDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Match Events</DialogTitle>
            <DialogDescription>
              Add or edit events for {selectedMatch?.homeTeam} vs {selectedMatch?.awayTeam}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4 space-y-4">
            {/* Existing Events */}
            <div className="space-y-2">
              {selectedMatch?.events.map((event, idx) => (
                <div key={idx} className="flex items-center justify-between p-2 rounded bg-muted">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">{event.minute}'</span>
                    <Badge variant="secondary" className={
                      event.type === "goal" ? "bg-green-500/10 text-green-500" :
                      event.type === "yellow" ? "bg-yellow-500/10 text-yellow-500" :
                      "bg-red-500/10 text-red-500"
                    }>
                      {event.type}
                    </Badge>
                    <span className="text-sm">{event.player}</span>
                  </div>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </div>
              ))}
            </div>

{/* Add New Event */}
            <div className="border-t border-border pt-4">
              <p className="text-sm font-medium mb-3">Add New Event</p>
              <div className="grid grid-cols-2 gap-3">
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Event Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="goal">Goal</SelectItem>
                    <SelectItem value="yellow">Yellow Card</SelectItem>
                    <SelectItem value="red">Red Card</SelectItem>
                    <SelectItem value="sub">Substitution</SelectItem>
                  </SelectContent>
                </Select>
                <Input placeholder="Minute" type="number" />
              </div>
              <div className="grid grid-cols-2 gap-3 mt-3">
                <Input placeholder="Player Name" />
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Team" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="home">{selectedMatch?.homeTeam}</SelectItem>
                    <SelectItem value="away">{selectedMatch?.awayTeam}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button className="w-full mt-3">
                <Plus className="h-4 w-4 mr-2" />
                Add Event
              </Button>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEventDialogOpen(false)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/teams/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, MoreHorizontal, Trophy, Users, MapPin, Upload } from "lucide-react"
import Image from "next/image"

const teams = [
  { id: 1, name: "Liverpool", logo: "/liverpool-logo.png", league: "Premier League", stadium: "Anfield", capacity: 61276, manager: "Arne Slot", players: 28, status: "active" },
  { id: 2, name: "Arsenal", logo: "/arsenal-logo.png", league: "Premier League", stadium: "Emirates Stadium", capacity: 60704, manager: "Mikel Arteta", players: 26, status: "active" },
  { id: 3, name: "Manchester City", logo: "/manchester-city-logo.png", league: "Premier League", stadium: "Etihad Stadium", capacity: 53400, manager: "Pep Guardiola", players: 27, status: "active" },
  { id: 4, name: "Chelsea", logo: "/chelsea-football-club-crest.png", league: "Premier League", stadium: "Stamford Bridge", capacity: 40343, manager: "Enzo Maresca", players: 32, status: "active" },
  { id: 5, name: "Manchester United", logo: "/manchester-united-crest.png", league: "Premier League", stadium: "Old Trafford", capacity: 74310, manager: "Ruben Amorim", players: 29, status: "active" },
  { id: 6, name: "Tottenham", logo: "/tottenham-logo.png", league: "Premier League", stadium: "Tottenham Hotspur Stadium", capacity: 62850, manager: "Ange Postecoglou", players: 27, status: "active" },
]

const statusColors: Record<string, string> = {
  active: "bg-green-500/10 text-green-500",
  inactive: "bg-gray-500/10 text-gray-500",
}

export default function TeamsAdminPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredTeams = teams.filter(
    (team) =>
      team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      team.manager.toLowerCase().includes(searchQuery.toLowerCase())
  )

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Team Management</h1>
          <p className="text-muted-foreground">Manage teams, squads, and team information</p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Add Team
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Add New Team</DialogTitle>
              <DialogDescription>
                Create a new team in the system.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="name">Team Name</Label>
                <Input id="name" placeholder="e.g. Liverpool FC" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="league">League</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Select league" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="premier-league">Premier League</SelectItem>
                    <SelectItem value="la-liga">La Liga</SelectItem>
                    <SelectItem value="serie-a">Serie A</SelectItem>
                    <SelectItem value="bundesliga">Bundesliga</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="stadium">Stadium</Label>
                  <Input id="stadium" placeholder="Stadium name" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="capacity">Capacity</Label>
                  <Input id="capacity" type="number" placeholder="60000" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="manager">Manager</Label>
                <Input id="manager" placeholder="Manager name" />
              </div>
              <div className="space-y-2">
                <Label>Team Logo</Label>
                <div className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors">
                  <Upload className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
                  <p className="text-sm text-muted-foreground">Click to upload or drag and drop</p>
                  <p className="text-xs text-muted-foreground mt-1">PNG, JPG up to 2MB</p>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsAddDialogOpen(false)}>
                Create Team
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Trophy className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{teams.length}</p>
                <p className="text-sm text-muted-foreground">Total Teams</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <Users className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{teams.reduce((acc, t) => acc + t.players, 0)}</p>
                <p className="text-sm text-muted-foreground">Total Players</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <MapPin className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{teams.length}</p>
                <p className="text-sm text-muted-foreground">Stadiums</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-purple-500/10 rounded-lg">
                <Trophy className="h-6 w-6 text-purple-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{teams.filter(t => t.status === "active").length}</p>
                <p className="text-sm text-muted-foreground">Active Teams</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search and Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search teams..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Select>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="League" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Leagues</SelectItem>
                  <SelectItem value="premier-league">Premier League</SelectItem>
                  <SelectItem value="la-liga">La Liga</SelectItem>
                  <SelectItem value="serie-a">Serie A</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="inactive">Inactive</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Teams Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Teams</CardTitle>
          <CardDescription>
            {filteredTeams.length} teams found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Team</TableHead>
                <TableHead>League</TableHead>
                <TableHead>Stadium</TableHead>
                <TableHead>Manager</TableHead>
                <TableHead>Players</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredTeams.map((team) => (
                <TableRow key={team.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="relative h-10 w-10 rounded overflow-hidden bg-muted">
                        <Image
                          src={team.logo || "/placeholder.svg"}
                          alt={team.name}
                          fill
                          className="object-contain"
                        />
                      </div>
                      <span className="font-medium">{team.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{team.league}</TableCell>
                  <TableCell>
                    <div>
                      <p className="text-sm">{team.stadium}</p>
                      <p className="text-xs text-muted-foreground">{team.capacity.toLocaleString()} capacity</p>
                    </div>
                  </TableCell>
                  <TableCell>{team.manager}</TableCell>
                  <TableCell>{team.players}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={statusColors[team.status]}>
                      {team.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>View Details</DropdownMenuItem>
                        <DropdownMenuItem>Edit Team</DropdownMenuItem>
                        <DropdownMenuItem>Manage Squad</DropdownMenuItem>
                        <DropdownMenuItem>View Stats</DropdownMenuItem>
                        <DropdownMenuItem>Update Logo</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-500">
                          Delete Team
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/teams/stats/page.tsx" isMerged="true"
"use client"

const teamStats = {
  general: {
    played: 20,
    won: 15,
    drawn: 4,
    lost: 1,
    goalsFor: 48,
    goalsAgainst: 18,
    cleanSheets: 10,
    points: 49,
  },
  attacking: {
    totalShots: 289,
    shotsOnTarget: 128,
    bigChances: 45,
    xG: 42.5,
    penaltiesScored: 3,
  },
  defending: {
    tackles: 340,
    interceptions: 189,
    blocks: 78,
    clearances: 245,
    xGA: 21.3,
  },
  passing: {
    totalPasses: 12456,
    passAccuracy: 87.3,
    keyPasses: 178,
    crosses: 234,
    throughBalls: 45,
  },
}

export default function TeamStatsAdminPage() {
  const [selectedTeam, setSelectedTeam] = useState("liverpool")
  const [selectedSeason, setSelectedSeason] = useState("2024-25")
  const [isRefreshing, setIsRefreshing] = useState(false)

const handleRefresh = () => {
    setIsRefreshing(true)
    setTimeout(() => setIsRefreshing(false), 2000)
  }

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <Select value={selectedTeam} onValueChange={setSelectedTeam}>
              <SelectTrigger className="w-full md:w-48">
                <SelectValue placeholder="Select team" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="liverpool">Liverpool</SelectItem>
                <SelectItem value="arsenal">Arsenal</SelectItem>
                <SelectItem value="man-city">Manchester City</SelectItem>
                <SelectItem value="chelsea">Chelsea</SelectItem>
              </SelectContent>
            </Select>
            <Select value={selectedSeason} onValueChange={setSelectedSeason}>
              <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Season" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="2024-25">2024/25</SelectItem>
                <SelectItem value="2023-24">2023/24</SelectItem>
                <SelectItem value="2022-23">2022/23</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Team Header */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="relative h-20 w-20 rounded overflow-hidden bg-muted">
              <Image src="/liverpool-logo.png" alt="Liverpool" fill className="object-contain" />
            </div>
            <div className="flex-1">
              <h2 className="text-2xl font-bold">Liverpool FC</h2>
              <p className="text-muted-foreground">Premier League - Season 2024/25</p>
              <div className="flex items-center gap-2 mt-2">
                <Badge variant="secondary" className="bg-green-500/10 text-green-500">
                  <TrendingUp className="h-3 w-3 mr-1" />
                  1st Place
                </Badge>
                <Badge variant="secondary">49 Points</Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* General Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{teamStats.general.played}</p>
            <p className="text-xs text-muted-foreground">Played</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-green-500">{teamStats.general.won}</p>
            <p className="text-xs text-muted-foreground">Won</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-yellow-500">{teamStats.general.drawn}</p>
            <p className="text-xs text-muted-foreground">Drawn</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-red-500">{teamStats.general.lost}</p>
            <p className="text-xs text-muted-foreground">Lost</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{teamStats.general.goalsFor}</p>
            <p className="text-xs text-muted-foreground">Goals For</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{teamStats.general.goalsAgainst}</p>
            <p className="text-xs text-muted-foreground">Goals Against</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold">{teamStats.general.cleanSheets}</p>
            <p className="text-xs text-muted-foreground">Clean Sheets</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4 text-center">
            <p className="text-2xl font-bold text-primary">{teamStats.general.points}</p>
            <p className="text-xs text-muted-foreground">Points</p>
          </CardContent>
        </Card>
      </div>

{/* Detailed Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* Attacking Stats */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="h-5 w-5 text-red-500" />
              Attacking
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between">
              <span className="text-muted-foreground">Total Shots</span>
              <span className="font-medium">{teamStats.attacking.totalShots}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Shots on Target</span>
              <span className="font-medium">{teamStats.attacking.shotsOnTarget}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Big Chances</span>
              <span className="font-medium">{teamStats.attacking.bigChances}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Expected Goals (xG)</span>
              <span className="font-medium">{teamStats.attacking.xG}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Penalties Scored</span>
              <span className="font-medium">{teamStats.attacking.penaltiesScored}</span>
            </div>
          </CardContent>
        </Card>

{/* Defending Stats */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5 text-blue-500" />
              Defending
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between">
              <span className="text-muted-foreground">Tackles</span>
              <span className="font-medium">{teamStats.defending.tackles}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Interceptions</span>
              <span className="font-medium">{teamStats.defending.interceptions}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Blocks</span>
              <span className="font-medium">{teamStats.defending.blocks}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Clearances</span>
              <span className="font-medium">{teamStats.defending.clearances}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Expected Goals Against (xGA)</span>
              <span className="font-medium">{teamStats.defending.xGA}</span>
            </div>
          </CardContent>
        </Card>

{/* Passing Stats */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-green-500" />
              Passing
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between">
              <span className="text-muted-foreground">Total Passes</span>
              <span className="font-medium">{teamStats.passing.totalPasses.toLocaleString()}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Pass Accuracy</span>
              <span className="font-medium">{teamStats.passing.passAccuracy}%</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Key Passes</span>
              <span className="font-medium">{teamStats.passing.keyPasses}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Crosses</span>
              <span className="font-medium">{teamStats.passing.crosses}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Through Balls</span>
              <span className="font-medium">{teamStats.passing.throughBalls}</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Edit Stats */}
      <Card>
        <CardHeader>
          <CardTitle>Manual Stats Update</CardTitle>
          <CardDescription>
            Use this section to manually update team statistics if needed
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline">Edit General Stats</Button>
            <Button variant="outline">Edit Attacking Stats</Button>
            <Button variant="outline">Edit Defending Stats</Button>
            <Button variant="outline">Edit Passing Stats</Button>
            <Button variant="outline">Recalculate All</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/teams/squads/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, Edit2, Trash2, UserPlus } from "lucide-react"
import Image from "next/image"

const squadData = [
  { id: 1, name: "Mohamed Salah", number: 11, position: "RW", nationality: "Egypt", age: 32, marketValue: "€70M", status: "fit" },
  { id: 2, name: "Virgil van Dijk", number: 4, position: "CB", nationality: "Netherlands", age: 33, marketValue: "€35M", status: "fit" },
  { id: 3, name: "Trent Alexander-Arnold", number: 66, position: "RB", nationality: "England", age: 26, marketValue: "€70M", status: "fit" },
  { id: 4, name: "Alisson Becker", number: 1, position: "GK", nationality: "Brazil", age: 32, marketValue: "€35M", status: "fit" },
  { id: 5, name: "Darwin Nunez", number: 9, position: "ST", nationality: "Uruguay", age: 25, marketValue: "€65M", status: "fit" },
  { id: 6, name: "Alexis Mac Allister", number: 10, position: "CM", nationality: "Argentina", age: 26, marketValue: "€75M", status: "fit" },
  { id: 7, name: "Luis Diaz", number: 7, position: "LW", nationality: "Colombia", age: 28, marketValue: "€75M", status: "injured" },
  { id: 8, name: "Ryan Gravenberch", number: 38, position: "DM", nationality: "Netherlands", age: 22, marketValue: "€50M", status: "fit" },
  { id: 9, name: "Dominik Szoboszlai", number: 8, position: "AM", nationality: "Hungary", age: 24, marketValue: "€70M", status: "fit" },
  { id: 10, name: "Cody Gakpo", number: 18, position: "LW", nationality: "Netherlands", age: 25, marketValue: "€55M", status: "fit" },
]

const positionColors: Record<string, string> = {
  GK: "bg-yellow-500/10 text-yellow-500",
  CB: "bg-blue-500/10 text-blue-500",
  RB: "bg-blue-500/10 text-blue-500",
  LB: "bg-blue-500/10 text-blue-500",
  DM: "bg-green-500/10 text-green-500",
  CM: "bg-green-500/10 text-green-500",
  AM: "bg-green-500/10 text-green-500",
  RW: "bg-purple-500/10 text-purple-500",
  LW: "bg-purple-500/10 text-purple-500",
  ST: "bg-red-500/10 text-red-500",
}

const statusColors: Record<string, string> = {
  fit: "bg-green-500/10 text-green-500",
  injured: "bg-red-500/10 text-red-500",
  suspended: "bg-yellow-500/10 text-yellow-500",
}

export default function SquadsAdminPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedTeam, setSelectedTeam] = useState("liverpool")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredSquad = squadData.filter(
    (player) => player.name.toLowerCase().includes(searchQuery.toLowerCase())
  )

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Squad Management</h1>
          <p className="text-muted-foreground">Manage team squads and player assignments</p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <UserPlus className="h-4 w-4 mr-2" />
              Add Player
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Add Player to Squad</DialogTitle>
              <DialogDescription>
                Add a new player to the team squad.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Player Name</Label>
                  <Input placeholder="Full name" />
                </div>
                <div className="space-y-2">
                  <Label>Squad Number</Label>
                  <Input type="number" placeholder="11" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Position</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select position" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="GK">Goalkeeper</SelectItem>
                      <SelectItem value="CB">Center Back</SelectItem>
                      <SelectItem value="RB">Right Back</SelectItem>
                      <SelectItem value="LB">Left Back</SelectItem>
                      <SelectItem value="DM">Defensive Mid</SelectItem>
                      <SelectItem value="CM">Center Mid</SelectItem>
                      <SelectItem value="AM">Attacking Mid</SelectItem>
                      <SelectItem value="RW">Right Wing</SelectItem>
                      <SelectItem value="LW">Left Wing</SelectItem>
                      <SelectItem value="ST">Striker</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Nationality</Label>
                  <Input placeholder="e.g. England" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Age</Label>
                  <Input type="number" placeholder="25" />
                </div>
                <div className="space-y-2">
                  <Label>Market Value</Label>
                  <Input placeholder="e.g. €50M" />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsAddDialogOpen(false)}>
                Add Player
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Team Selector */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <Select value={selectedTeam} onValueChange={setSelectedTeam}>
              <SelectTrigger className="w-full md:w-64">
                <SelectValue placeholder="Select team" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="liverpool">Liverpool</SelectItem>
                <SelectItem value="arsenal">Arsenal</SelectItem>
                <SelectItem value="man-city">Manchester City</SelectItem>
                <SelectItem value="chelsea">Chelsea</SelectItem>
                <SelectItem value="man-united">Manchester United</SelectItem>
                <SelectItem value="tottenham">Tottenham</SelectItem>
              </SelectContent>
            </Select>
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search players..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="Position" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                <SelectItem value="gk">GK</SelectItem>
                <SelectItem value="def">DEF</SelectItem>
                <SelectItem value="mid">MID</SelectItem>
                <SelectItem value="fwd">FWD</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Team Info Card */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="relative h-16 w-16 rounded overflow-hidden bg-muted">
              <Image src="/liverpool-logo.png" alt="Liverpool" fill className="object-contain" />
            </div>
            <div className="flex-1">
              <h2 className="text-xl font-bold">Liverpool FC</h2>
              <p className="text-muted-foreground">Premier League</p>
            </div>
            <div className="grid grid-cols-3 gap-8 text-center">
              <div>
                <p className="text-2xl font-bold">{squadData.length}</p>
                <p className="text-sm text-muted-foreground">Players</p>
              </div>
              <div>
                <p className="text-2xl font-bold">{squadData.filter(p => p.status === "fit").length}</p>
                <p className="text-sm text-muted-foreground">Fit</p>
              </div>
              <div>
                <p className="text-2xl font-bold">{squadData.filter(p => p.status === "injured").length}</p>
                <p className="text-sm text-muted-foreground">Injured</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Squad Table */}
      <Card>
        <CardHeader>
          <CardTitle>Squad List</CardTitle>
          <CardDescription>
            {filteredSquad.length} players
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">#</TableHead>
                <TableHead>Player</TableHead>
                <TableHead>Position</TableHead>
                <TableHead>Nationality</TableHead>
                <TableHead>Age</TableHead>
                <TableHead>Market Value</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredSquad.map((player) => (
                <TableRow key={player.id}>
                  <TableCell className="font-bold">{player.number}</TableCell>
                  <TableCell className="font-medium">{player.name}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={positionColors[player.position]}>
                      {player.position}
                    </Badge>
                  </TableCell>
                  <TableCell>{player.nationality}</TableCell>
                  <TableCell>{player.age}</TableCell>
                  <TableCell>{player.marketValue}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={statusColors[player.status]}>
                      {player.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button variant="ghost" size="icon">
                        <Edit2 className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/players/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Search, Plus, MoreHorizontal, Users, Target, Medal, Upload } from "lucide-react"
import Image from "next/image"

const players = [
  { id: 1, name: "Mohamed Salah", image: "/mohamed-salah-action.png", team: "Liverpool", position: "RW", nationality: "Egypt", age: 32, goals: 18, assists: 12, rating: 8.2 },
  { id: 2, name: "Erling Haaland", image: "/erling-haaland-celebration.png", team: "Man City", position: "ST", nationality: "Norway", age: 24, goals: 16, assists: 4, rating: 7.9 },
  { id: 3, name: "Cole Palmer", image: "/players/palmer.webp", team: "Chelsea", position: "AM", nationality: "England", age: 22, goals: 14, assists: 8, rating: 8.0 },
  { id: 4, name: "Bukayo Saka", image: "/players/saka.webp", team: "Arsenal", position: "RW", nationality: "England", age: 23, goals: 11, assists: 10, rating: 7.8 },
  { id: 5, name: "Alexander Isak", image: "/players/isak.jpg", team: "Newcastle", position: "ST", nationality: "Sweden", age: 25, goals: 15, assists: 5, rating: 7.7 },
  { id: 6, name: "Bruno Fernandes", image: "/bruno-fernandes-soccer.png", team: "Man United", position: "AM", nationality: "Portugal", age: 30, goals: 8, assists: 9, rating: 7.4 },
  { id: 7, name: "Heung-min Son", image: "/son-tottenham-team.jpg", team: "Tottenham", position: "LW", nationality: "South Korea", age: 32, goals: 12, assists: 7, rating: 7.6 },
  { id: 8, name: "Martin Odegaard", image: "/players/rice.jpg", team: "Arsenal", position: "AM", nationality: "Norway", age: 26, goals: 7, assists: 11, rating: 7.9 },
]

export default function PlayersAdminPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

const filteredPlayers = players.filter(
    (player) =>
      player.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      player.team.toLowerCase().includes(searchQuery.toLowerCase())
  )

return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">Player Management</h1>
          <p className="text-muted-foreground">Manage player profiles and statistics</p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Add Player
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>Add New Player</DialogTitle>
              <DialogDescription>
                Create a new player profile in the system.
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Full Name</Label>
                  <Input placeholder="Player name" />
                </div>
                <div className="space-y-2">
                  <Label>Age</Label>
                  <Input type="number" placeholder="25" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Team</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select team" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="liverpool">Liverpool</SelectItem>
                      <SelectItem value="arsenal">Arsenal</SelectItem>
                      <SelectItem value="man-city">Manchester City</SelectItem>
                      <SelectItem value="chelsea">Chelsea</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Position</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Position" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="GK">Goalkeeper</SelectItem>
                      <SelectItem value="CB">Center Back</SelectItem>
                      <SelectItem value="RB">Right Back</SelectItem>
                      <SelectItem value="LB">Left Back</SelectItem>
                      <SelectItem value="DM">Defensive Mid</SelectItem>
                      <SelectItem value="CM">Center Mid</SelectItem>
                      <SelectItem value="AM">Attacking Mid</SelectItem>
                      <SelectItem value="RW">Right Wing</SelectItem>
                      <SelectItem value="LW">Left Wing</SelectItem>
                      <SelectItem value="ST">Striker</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label>Nationality</Label>
                <Input placeholder="e.g. England" />
              </div>
              <div className="space-y-2">
                <Label>Player Photo</Label>
                <div className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors">
                  <Upload className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
                  <p className="text-sm text-muted-foreground">Click to upload photo</p>
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsAddDialogOpen(false)}>
                Create Player
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Users className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{players.length}</p>
                <p className="text-sm text-muted-foreground">Total Players</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <Target className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{players.reduce((acc, p) => acc + p.goals, 0)}</p>
                <p className="text-sm text-muted-foreground">Total Goals</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <Medal className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{players.reduce((acc, p) => acc + p.assists, 0)}</p>
                <p className="text-sm text-muted-foreground">Total Assists</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-purple-500/10 rounded-lg">
                <Users className="h-6 w-6 text-purple-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{(players.reduce((acc, p) => acc + p.rating, 0) / players.length).toFixed(1)}</p>
                <p className="text-sm text-muted-foreground">Avg Rating</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search and Filter */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search players..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2">
              <Select>
                <SelectTrigger className="w-40">
                  <SelectValue placeholder="Team" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Teams</SelectItem>
                  <SelectItem value="liverpool">Liverpool</SelectItem>
                  <SelectItem value="arsenal">Arsenal</SelectItem>
                  <SelectItem value="man-city">Man City</SelectItem>
                  <SelectItem value="chelsea">Chelsea</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Position" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="gk">GK</SelectItem>
                  <SelectItem value="def">DEF</SelectItem>
                  <SelectItem value="mid">MID</SelectItem>
                  <SelectItem value="fwd">FWD</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Players Table */}
      <Card>
        <CardHeader>
          <CardTitle>All Players</CardTitle>
          <CardDescription>
            {filteredPlayers.length} players found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Player</TableHead>
                <TableHead>Team</TableHead>
                <TableHead>Position</TableHead>
                <TableHead>Nationality</TableHead>
                <TableHead className="text-center">Goals</TableHead>
                <TableHead className="text-center">Assists</TableHead>
                <TableHead className="text-center">Rating</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredPlayers.map((player) => (
                <TableRow key={player.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="relative h-10 w-10 rounded-full overflow-hidden bg-muted">
                        <Image
                          src={player.image || "/placeholder.svg"}
                          alt={player.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-medium">{player.name}</p>
                        <p className="text-xs text-muted-foreground">{player.age} years</p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{player.team}</TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={positionColors[player.position]}>
                      {player.position}
                    </Badge>
                  </TableCell>
                  <TableCell>{player.nationality}</TableCell>
                  <TableCell className="text-center font-medium">{player.goals}</TableCell>
                  <TableCell className="text-center font-medium">{player.assists}</TableCell>
                  <TableCell className="text-center">
                    <Badge variant="secondary" className={
                      player.rating >= 8 ? "bg-green-500/10 text-green-500" :
                      player.rating >= 7 ? "bg-yellow-500/10 text-yellow-500" :
                      "bg-red-500/10 text-red-500"
                    }>
                      {player.rating}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>View Profile</DropdownMenuItem>
                        <DropdownMenuItem>Edit Player</DropdownMenuItem>
                        <DropdownMenuItem>Update Stats</DropdownMenuItem>
                        <DropdownMenuItem>Compare</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-500">
                          Delete Player
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/players/stats/page.tsx" isMerged="true"
"use client"

const playerStats = {
  player: {
    name: "Mohamed Salah",
    image: "/mohamed-salah-action.png",
    team: "Liverpool",
    position: "RW",
    number: 11,
  },
  attacking: {
    goals: 18,
    assists: 12,
    shots: 89,
    shotsOnTarget: 45,
    xG: 15.2,
    xA: 9.8,
    bigChances: 22,
    bigChancesMissed: 8,
    penaltyGoals: 2,
  },
  passing: {
    totalPasses: 845,
    passAccuracy: 81.5,
    keyPasses: 56,
    throughBalls: 12,
    longBalls: 34,
    crossesCompleted: 28,
  },
  defending: {
    tackles: 24,
    tacklesWon: 16,
    interceptions: 18,
    blocksShots: 4,
    clearances: 8,
    aerialDuelsWon: 12,
  },
  physical: {
    minutesPlayed: 1620,
    appearances: 20,
    starts: 19,
    distanceCovered: 198.5,
    sprints: 412,
    foulsDrawn: 34,
    foulsConceded: 12,
  },
}

export default function PlayerStatsAdminPage() {
  const [selectedPlayer, setSelectedPlayer] = useState("salah")
  const [searchQuery, setSearchQuery] = useState("")
  const [isEditing, setIsEditing] = useState(false)
  const [isSaving, setIsSaving] = useState(false)

const handleSave = () => {
    setIsSaving(true)
    setTimeout(() => {
      setIsSaving(false)
      setIsEditing(false)
    }, 1500)
  }

{/* Player Search */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search player..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select value={selectedPlayer} onValueChange={setSelectedPlayer}>
              <SelectTrigger className="w-full md:w-48">
                <SelectValue placeholder="Select player" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="salah">Mohamed Salah</SelectItem>
                <SelectItem value="haaland">Erling Haaland</SelectItem>
                <SelectItem value="palmer">Cole Palmer</SelectItem>
                <SelectItem value="saka">Bukayo Saka</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Player Info Card */}
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="relative h-20 w-20 rounded-full overflow-hidden bg-muted">
              <Image src={playerStats.player.image || "/placeholder.svg"} alt={playerStats.player.name} fill className="object-cover" />
            </div>
            <div className="flex-1">
              <h2 className="text-2xl font-bold">{playerStats.player.name}</h2>
              <p className="text-muted-foreground">{playerStats.player.team} - #{playerStats.player.number}</p>
              <div className="flex items-center gap-2 mt-2">
                <Badge variant="secondary">{playerStats.player.position}</Badge>
                <Badge variant="secondary" className="bg-green-500/10 text-green-500">
                  {playerStats.attacking.goals} Goals
                </Badge>
                <Badge variant="secondary" className="bg-blue-500/10 text-blue-500">
                  {playerStats.attacking.assists} Assists
                </Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Stats Sections */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Attacking Stats */}
        <Card>
          <CardHeader>
            <CardTitle>Attacking</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Goals</Label>
                <Input
                  type="number"
                  value={playerStats.attacking.goals}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Assists</Label>
                <Input
                  type="number"
                  value={playerStats.attacking.assists}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Shots</Label>
                <Input
                  type="number"
                  value={playerStats.attacking.shots}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Shots on Target</Label>
                <Input
                  type="number"
                  value={playerStats.attacking.shotsOnTarget}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>xG</Label>
                <Input
                  type="number"
                  step="0.1"
                  value={playerStats.attacking.xG}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>xA</Label>
                <Input
                  type="number"
                  step="0.1"
                  value={playerStats.attacking.xA}
                  disabled={!isEditing}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Passing Stats */}
        <Card>
          <CardHeader>
            <CardTitle>Passing</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Total Passes</Label>
                <Input
                  type="number"
                  value={playerStats.passing.totalPasses}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Pass Accuracy (%)</Label>
                <Input
                  type="number"
                  step="0.1"
                  value={playerStats.passing.passAccuracy}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Key Passes</Label>
                <Input
                  type="number"
                  value={playerStats.passing.keyPasses}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Through Balls</Label>
                <Input
                  type="number"
                  value={playerStats.passing.throughBalls}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Long Balls</Label>
                <Input
                  type="number"
                  value={playerStats.passing.longBalls}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Crosses Completed</Label>
                <Input
                  type="number"
                  value={playerStats.passing.crossesCompleted}
                  disabled={!isEditing}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Defending Stats */}
        <Card>
          <CardHeader>
            <CardTitle>Defending</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Tackles</Label>
                <Input
                  type="number"
                  value={playerStats.defending.tackles}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Tackles Won</Label>
                <Input
                  type="number"
                  value={playerStats.defending.tacklesWon}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Interceptions</Label>
                <Input
                  type="number"
                  value={playerStats.defending.interceptions}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Blocks</Label>
                <Input
                  type="number"
                  value={playerStats.defending.blocksShots}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Clearances</Label>
                <Input
                  type="number"
                  value={playerStats.defending.clearances}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Aerial Duels Won</Label>
                <Input
                  type="number"
                  value={playerStats.defending.aerialDuelsWon}
                  disabled={!isEditing}
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Physical Stats */}
        <Card>
          <CardHeader>
            <CardTitle>Physical</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Minutes Played</Label>
                <Input
                  type="number"
                  value={playerStats.physical.minutesPlayed}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Appearances</Label>
                <Input
                  type="number"
                  value={playerStats.physical.appearances}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Starts</Label>
                <Input
                  type="number"
                  value={playerStats.physical.starts}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Distance (km)</Label>
                <Input
                  type="number"
                  step="0.1"
                  value={playerStats.physical.distanceCovered}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Sprints</Label>
                <Input
                  type="number"
                  value={playerStats.physical.sprints}
                  disabled={!isEditing}
                />
              </div>
              <div className="space-y-2">
                <Label>Fouls Drawn</Label>
                <Input
                  type="number"
                  value={playerStats.physical.foulsDrawn}
                  disabled={!isEditing}
                />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/players/compare/page.tsx" isMerged="true"
"use client"

const players = {
  salah: {
    name: "Mohamed Salah",
    image: "/mohamed-salah-action.png",
    team: "Liverpool",
    position: "RW",
    stats: { goals: 18, assists: 12, shots: 89, xG: 15.2, passes: 845, rating: 8.2 },
  },
  haaland: {
    name: "Erling Haaland",
    image: "/erling-haaland-celebration.png",
    team: "Man City",
    position: "ST",
    stats: { goals: 16, assists: 4, shots: 78, xG: 14.8, passes: 412, rating: 7.9 },
  },
  palmer: {
    name: "Cole Palmer",
    image: "/players/palmer.webp",
    team: "Chelsea",
    position: "AM",
    stats: { goals: 14, assists: 8, shots: 65, xG: 11.5, passes: 980, rating: 8.0 },
  },
  saka: {
    name: "Bukayo Saka",
    image: "/players/saka.webp",
    team: "Arsenal",
    position: "RW",
    stats: { goals: 11, assists: 10, shots: 58, xG: 9.2, passes: 1120, rating: 7.8 },
  },
}

type PlayerKey = keyof typeof players

export default function PlayerCompareAdminPage() {
  const [player1, setPlayer1] = useState<PlayerKey>("salah")
  const [player2, setPlayer2] = useState<PlayerKey>("haaland")

const p1 = players[player1]
  const p2 = players[player2]

const compareStats = [
    { label: "Goals", key: "goals", p1: p1.stats.goals, p2: p2.stats.goals },
    { label: "Assists", key: "assists", p1: p1.stats.assists, p2: p2.stats.assists },
    { label: "Shots", key: "shots", p1: p1.stats.shots, p2: p2.stats.shots },
    { label: "xG", key: "xG", p1: p1.stats.xG, p2: p2.stats.xG },
    { label: "Passes", key: "passes", p1: p1.stats.passes, p2: p2.stats.passes },
    { label: "Rating", key: "rating", p1: p1.stats.rating, p2: p2.stats.rating },
  ]

{/* Player Selection */}
      <Card>
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row items-center gap-4 justify-center">
            <Select value={player1} onValueChange={(v) => setPlayer1(v as PlayerKey)}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Select player" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="salah">Mohamed Salah</SelectItem>
                <SelectItem value="haaland">Erling Haaland</SelectItem>
                <SelectItem value="palmer">Cole Palmer</SelectItem>
                <SelectItem value="saka">Bukayo Saka</SelectItem>
              </SelectContent>
            </Select>
            
            <div className="flex items-center gap-2">
              <ArrowRight className="h-5 w-5 text-muted-foreground" />
              <span className="text-muted-foreground">vs</span>
              <ArrowRight className="h-5 w-5 text-muted-foreground rotate-180" />
            </div>

<Select value={player2} onValueChange={(v) => setPlayer2(v as PlayerKey)}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Select player" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="salah">Mohamed Salah</SelectItem>
                <SelectItem value="haaland">Erling Haaland</SelectItem>
                <SelectItem value="palmer">Cole Palmer</SelectItem>
                <SelectItem value="saka">Bukayo Saka</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Player Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Player 1 */}
        <Card>
          <CardContent className="p-6 text-center">
            <div className="relative h-32 w-32 rounded-full overflow-hidden bg-muted mx-auto mb-4">
              <Image src={p1.image || "/placeholder.svg"} alt={p1.name} fill className="object-cover" />
            </div>
            <h2 className="text-xl font-bold">{p1.name}</h2>
            <p className="text-muted-foreground">{p1.team}</p>
            <Badge variant="secondary" className="mt-2">{p1.position}</Badge>
          </CardContent>
        </Card>

{/* Player 2 */}
        <Card>
          <CardContent className="p-6 text-center">
            <div className="relative h-32 w-32 rounded-full overflow-hidden bg-muted mx-auto mb-4">
              <Image src={p2.image || "/placeholder.svg"} alt={p2.name} fill className="object-cover" />
            </div>
            <h2 className="text-xl font-bold">{p2.name}</h2>
            <p className="text-muted-foreground">{p2.team}</p>
            <Badge variant="secondary" className="mt-2">{p2.position}</Badge>
          </CardContent>
        </Card>
      </div>

{/* Stats Comparison */}
      <Card>
        <CardHeader>
          <CardTitle>Statistics Comparison</CardTitle>
          <CardDescription>Season 2024/25</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {compareStats.map((stat) => {
            const p1Higher = stat.p1 > stat.p2
            const p2Higher = stat.p2 > stat.p1
            const maxValue = Math.max(stat.p1, stat.p2)
            
            return (
              <div key={stat.key} className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className={`font-medium ${p1Higher ? "text-green-500" : ""}`}>
                    {stat.p1}
                  </span>
                  <span className="text-muted-foreground">{stat.label}</span>
                  <span className={`font-medium ${p2Higher ? "text-green-500" : ""}`}>
                    {stat.p2}
                  </span>
                </div>
                <div className="flex gap-1">
                  <div className="flex-1">
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div
                        className={`h-full ${p1Higher ? "bg-green-500" : "bg-primary"} rounded-full transition-all`}
                        style={{ width: `${(stat.p1 / maxValue) * 100}%`, marginLeft: "auto" }}
                      />
                    </div>
                  </div>
                  <div className="flex-1">
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div
                        className={`h-full ${p2Higher ? "bg-green-500" : "bg-primary"} rounded-full transition-all`}
                        style={{ width: `${(stat.p2 / maxValue) * 100}%` }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </CardContent>
      </Card>

{/* Summary */}
      <Card>
        <CardHeader>
          <CardTitle>Comparison Summary</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <p className="text-3xl font-bold text-green-500">
                {compareStats.filter(s => s.p1 > s.p2).length}
              </p>
              <p className="text-sm text-muted-foreground">{p1.name} Wins</p>
            </div>
            <div>
              <p className="text-3xl font-bold text-yellow-500">
                {compareStats.filter(s => s.p1 === s.p2).length}
              </p>
              <p className="text-sm text-muted-foreground">Draws</p>
            </div>
            <div>
              <p className="text-3xl font-bold text-blue-500">
                {compareStats.filter(s => s.p2 > s.p1).length}
              </p>
              <p className="text-sm text-muted-foreground">{p2.name} Wins</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/players/sync/page.tsx" isMerged="true"
"use client"

import React from "react"

const syncHistory = [
  { id: 1, source: "API Football", type: "Full Sync", status: "completed", records: 1245, date: "2025-01-28 14:30", duration: "2m 15s" },
  { id: 2, source: "Transfermarkt", type: "Player Values", status: "completed", records: 892, date: "2025-01-28 12:00", duration: "1m 45s" },
  { id: 3, source: "API Football", type: "Stats Update", status: "completed", records: 3456, date: "2025-01-27 20:00", duration: "3m 22s" },
  { id: 4, source: "Manual Import", type: "CSV Upload", status: "failed", records: 0, date: "2025-01-27 15:30", duration: "-" },
  { id: 5, source: "API Football", type: "Full Sync", status: "completed", records: 1243, date: "2025-01-26 14:30", duration: "2m 18s" },
]

const statusColors: Record<string, string> = {
  completed: "bg-green-500/10 text-green-500",
  failed: "bg-red-500/10 text-red-500",
  running: "bg-blue-500/10 text-blue-500",
  pending: "bg-yellow-500/10 text-yellow-500",
}

const statusIcons: Record<string, React.ReactNode> = {
  completed: <CheckCircle className="h-3 w-3" />,
  failed: <AlertCircle className="h-3 w-3" />,
  running: <RefreshCw className="h-3 w-3 animate-spin" />,
  pending: <Clock className="h-3 w-3" />,
}

export default function PlayerSyncPage() {
  const [isSyncing, setIsSyncing] = useState(false)
  const [syncProgress, setSyncProgress] = useState(0)
  const [selectedSource, setSelectedSource] = useState("api-football")

const handleSync = () => {
    setIsSyncing(true)
    setSyncProgress(0)
    
    const interval = setInterval(() => {
      setSyncProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          setIsSyncing(false)
          return 100
        }
        return prev + 10
      })
    }, 500)
  }

{/* Sync Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Database className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">5,432</p>
                <p className="text-sm text-muted-foreground">Total Records</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <CheckCircle className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">23</p>
                <p className="text-sm text-muted-foreground">Successful Syncs</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-red-500/10 rounded-lg">
                <AlertCircle className="h-6 w-6 text-red-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">2</p>
                <p className="text-sm text-muted-foreground">Failed Syncs</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-blue-500/10 rounded-lg">
                <Clock className="h-6 w-6 text-blue-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">2h ago</p>
                <p className="text-sm text-muted-foreground">Last Sync</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Sync Action */}
      <Card>
        <CardHeader>
          <CardTitle>Start Synchronization</CardTitle>
          <CardDescription>
            Choose a data source and sync type to update player data
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Data Source</label>
              <Select value={selectedSource} onValueChange={setSelectedSource}>
                <SelectTrigger>
                  <SelectValue placeholder="Select source" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="api-football">API Football</SelectItem>
                  <SelectItem value="transfermarkt">Transfermarkt</SelectItem>
                  <SelectItem value="sofascore">SofaScore</SelectItem>
                  <SelectItem value="manual">Manual Import</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Sync Type</label>
              <Select defaultValue="full">
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="full">Full Sync</SelectItem>
                  <SelectItem value="stats">Stats Only</SelectItem>
                  <SelectItem value="values">Market Values</SelectItem>
                  <SelectItem value="new">New Players Only</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">League</label>
              <Select defaultValue="all">
                <SelectTrigger>
                  <SelectValue placeholder="Select league" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Leagues</SelectItem>
                  <SelectItem value="premier-league">Premier League</SelectItem>
                  <SelectItem value="la-liga">La Liga</SelectItem>
                  <SelectItem value="serie-a">Serie A</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

{isSyncing && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>Syncing data...</span>
                <span>{syncProgress}%</span>
              </div>
              <Progress value={syncProgress} />
            </div>
          )}

<div className="flex gap-2">
            <Button onClick={handleSync} disabled={isSyncing}>
              <RefreshCw className={`h-4 w-4 mr-2 ${isSyncing ? "animate-spin" : ""}`} />
              {isSyncing ? "Syncing..." : "Start Sync"}
            </Button>
            <Button variant="outline" disabled={isSyncing}>
              <Zap className="h-4 w-4 mr-2" />
              Quick Sync
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Sync History */}
      <Card>
        <CardHeader>
          <CardTitle>Sync History</CardTitle>
          <CardDescription>Recent synchronization activities</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {syncHistory.map((sync) => (
              <div
                key={sync.id}
                className="flex items-center justify-between p-4 rounded-lg border border-border"
              >
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-muted rounded-lg">
                    <Cloud className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <div>
                    <p className="font-medium">{sync.source}</p>
                    <p className="text-sm text-muted-foreground">{sync.type}</p>
                  </div>
                </div>
                <div className="flex items-center gap-6">
                  <div className="text-right hidden md:block">
                    <p className="text-sm">{sync.records.toLocaleString()} records</p>
                    <p className="text-xs text-muted-foreground">{sync.duration}</p>
                  </div>
                  <div className="text-right hidden md:block">
                    <p className="text-sm">{sync.date}</p>
                  </div>
                  <Badge variant="secondary" className={`${statusColors[sync.status]} flex items-center gap-1`}>
                    {statusIcons[sync.status]}
                    {sync.status}
                  </Badge>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* API Configuration */}
      <Card>
        <CardHeader>
          <CardTitle>API Configuration</CardTitle>
          <CardDescription>Manage external API connections</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 rounded-lg border border-border">
              <div className="flex items-center gap-4">
                <Badge variant="secondary" className="bg-green-500/10 text-green-500">Connected</Badge>
                <span className="font-medium">API Football</span>
              </div>
              <Button variant="outline" size="sm">Configure</Button>
            </div>
            <div className="flex items-center justify-between p-4 rounded-lg border border-border">
              <div className="flex items-center gap-4">
                <Badge variant="secondary" className="bg-green-500/10 text-green-500">Connected</Badge>
                <span className="font-medium">Transfermarkt</span>
              </div>
              <Button variant="outline" size="sm">Configure</Button>
            </div>
            <div className="flex items-center justify-between p-4 rounded-lg border border-border">
              <div className="flex items-center gap-4">
                <Badge variant="secondary" className="bg-gray-500/10 text-gray-500">Not Connected</Badge>
                <span className="font-medium">SofaScore</span>
              </div>
              <Button variant="outline" size="sm">Connect</Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ai/logs/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Search,
  Download,
  Eye,
  CheckCircle2,
  XCircle,
  AlertCircle,
  RefreshCw,
  TrendingUp,
  Target,
  Percent,
} from "lucide-react"

const predictionLogs = [
  {
    id: "pred-001",
    matchId: "match-456",
    homeTeam: "Manchester City",
    awayTeam: "Liverpool",
    prediction: "Home Win",
    confidence: 68,
    actualResult: "Draw",
    correct: false,
    model: "GPT-4o",
    createdAt: "2026-01-28 14:00",
    responseTime: "2.3s",
  },
  {
    id: "pred-002",
    matchId: "match-457",
    homeTeam: "Arsenal",
    awayTeam: "Chelsea",
    prediction: "Home Win",
    confidence: 72,
    actualResult: "Home Win",
    correct: true,
    model: "GPT-4o",
    createdAt: "2026-01-28 16:30",
    responseTime: "1.8s",
  },
  {
    id: "pred-003",
    matchId: "match-458",
    homeTeam: "Tottenham",
    awayTeam: "Man United",
    prediction: "Draw",
    confidence: 55,
    actualResult: "Away Win",
    correct: false,
    model: "Claude 3 Opus",
    createdAt: "2026-01-27 15:00",
    responseTime: "2.1s",
  },
  {
    id: "pred-004",
    matchId: "match-459",
    homeTeam: "Newcastle",
    awayTeam: "Brighton",
    prediction: "Home Win",
    confidence: 65,
    actualResult: "Home Win",
    correct: true,
    model: "GPT-4o",
    createdAt: "2026-01-27 12:30",
    responseTime: "1.9s",
  },
  {
    id: "pred-005",
    matchId: "match-460",
    homeTeam: "Aston Villa",
    awayTeam: "West Ham",
    prediction: "Home Win",
    confidence: 70,
    actualResult: "Home Win",
    correct: true,
    model: "Custom ML v2.1",
    createdAt: "2026-01-26 20:00",
    responseTime: "0.5s",
  },
  {
    id: "pred-006",
    matchId: "match-461",
    homeTeam: "Everton",
    awayTeam: "Wolves",
    prediction: "Draw",
    confidence: 58,
    actualResult: null,
    correct: null,
    model: "GPT-4o",
    createdAt: "2026-01-29 10:00",
    responseTime: "2.0s",
  },
]

export default function PredictionLogsPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [modelFilter, setModelFilter] = useState("all")

const filteredLogs = predictionLogs.filter((log) => {
    const matchesSearch =
      log.homeTeam.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.awayTeam.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.id.toLowerCase().includes(searchQuery.toLowerCase())

const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "correct" && log.correct === true) ||
      (statusFilter === "incorrect" && log.correct === false) ||
      (statusFilter === "pending" && log.correct === null)

const matchesModel = modelFilter === "all" || log.model === modelFilter

return matchesSearch && matchesStatus && matchesModel
  })

const totalPredictions = predictionLogs.length
  const correctPredictions = predictionLogs.filter((l) => l.correct === true).length
  const incorrectPredictions = predictionLogs.filter((l) => l.correct === false).length
  const pendingPredictions = predictionLogs.filter((l) => l.correct === null).length
  const accuracyRate = ((correctPredictions / (correctPredictions + incorrectPredictions)) * 100).toFixed(1)

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Prediction Logs</h1>
          <p className="text-muted-foreground mt-1">
            View and analyze AI prediction history
          </p>
        </div>
        <Button variant="outline">
          <Download className="h-4 w-4 mr-2" />
          Export Logs
        </Button>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <Target className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{totalPredictions}</p>
                <p className="text-sm text-muted-foreground">Total Predictions</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <CheckCircle2 className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{correctPredictions}</p>
                <p className="text-sm text-muted-foreground">Correct</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-red-500/10 rounded-lg">
                <XCircle className="h-6 w-6 text-red-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{incorrectPredictions}</p>
                <p className="text-sm text-muted-foreground">Incorrect</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-yellow-500/10 rounded-lg">
                <Percent className="h-6 w-6 text-yellow-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">{accuracyRate}%</p>
                <p className="text-sm text-muted-foreground">Accuracy Rate</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search by team or prediction ID..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="correct">Correct</SelectItem>
                <SelectItem value="incorrect">Incorrect</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
              </SelectContent>
            </Select>
            <Select value={modelFilter} onValueChange={setModelFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Filter by model" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Models</SelectItem>
                <SelectItem value="GPT-4o">GPT-4o</SelectItem>
                <SelectItem value="Claude 3 Opus">Claude 3 Opus</SelectItem>
                <SelectItem value="Custom ML v2.1">Custom ML v2.1</SelectItem>
              </SelectContent>
            </Select>
            <Button variant="outline">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Logs Table */}
      <Card>
        <CardHeader>
          <CardTitle>Prediction History</CardTitle>
          <CardDescription>
            {filteredLogs.length} predictions found
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Match</TableHead>
                <TableHead>Prediction</TableHead>
                <TableHead>Confidence</TableHead>
                <TableHead>Actual Result</TableHead>
                <TableHead>Model</TableHead>
                <TableHead>Response Time</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredLogs.map((log) => (
                <TableRow key={log.id}>
                  <TableCell className="font-mono text-sm">{log.id}</TableCell>
                  <TableCell>
                    <div className="font-medium">{log.homeTeam}</div>
                    <div className="text-sm text-muted-foreground">vs {log.awayTeam}</div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{log.prediction}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <div className="w-16 h-2 bg-muted rounded-full overflow-hidden">
                        <div
                          className={`h-full ${
                            log.confidence >= 70
                              ? "bg-green-500"
                              : log.confidence >= 60
                              ? "bg-yellow-500"
                              : "bg-red-500"
                          }`}
                          style={{ width: `${log.confidence}%` }}
                        />
                      </div>
                      <span className="text-sm">{log.confidence}%</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    {log.actualResult ? (
                      <Badge variant="secondary">{log.actualResult}</Badge>
                    ) : (
                      <span className="text-muted-foreground text-sm">Pending</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <span className="text-sm">{log.model}</span>
                  </TableCell>
                  <TableCell>
                    <span className="text-sm text-muted-foreground">{log.responseTime}</span>
                  </TableCell>
                  <TableCell>
                    {log.correct === true && (
                      <Badge className="bg-green-500">
                        <CheckCircle2 className="h-3 w-3 mr-1" />
                        Correct
                      </Badge>
                    )}
                    {log.correct === false && (
                      <Badge variant="destructive">
                        <XCircle className="h-3 w-3 mr-1" />
                        Incorrect
                      </Badge>
                    )}
                    {log.correct === null && (
                      <Badge variant="secondary">
                        <AlertCircle className="h-3 w-3 mr-1" />
                        Pending
                      </Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <Eye className="h-4 w-4" />
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="max-w-2xl">
                        <DialogHeader>
                          <DialogTitle>Prediction Details</DialogTitle>
                          <DialogDescription>
                            {log.homeTeam} vs {log.awayTeam}
                          </DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                          <div className="grid grid-cols-2 gap-4">
                            <div className="p-4 bg-muted/50 rounded-lg">
                              <p className="text-sm text-muted-foreground">Prediction ID</p>
                              <p className="font-mono">{log.id}</p>
                            </div>
                            <div className="p-4 bg-muted/50 rounded-lg">
                              <p className="text-sm text-muted-foreground">Match ID</p>
                              <p className="font-mono">{log.matchId}</p>
                            </div>
                            <div className="p-4 bg-muted/50 rounded-lg">
                              <p className="text-sm text-muted-foreground">Model Used</p>
                              <p className="font-medium">{log.model}</p>
                            </div>
                            <div className="p-4 bg-muted/50 rounded-lg">
                              <p className="text-sm text-muted-foreground">Created At</p>
                              <p className="font-medium">{log.createdAt}</p>
                            </div>
                          </div>
                          <div className="p-4 bg-muted/50 rounded-lg">
                            <p className="text-sm text-muted-foreground mb-2">AI Analysis</p>
                            <p className="text-sm">
                              Based on recent form, head-to-head records, and player availability,
                              the model predicted a <strong>{log.prediction}</strong> with{" "}
                              <strong>{log.confidence}%</strong> confidence. Key factors included
                              home advantage, recent winning streak, and key player fitness.
                            </p>
                          </div>
                        </div>
                      </DialogContent>
                    </Dialog>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ai/training/page.tsx" isMerged="true"
"use client"

const trainingHistory = [
  {
    id: "train-001",
    model: "Custom ML v2.1",
    startedAt: "2026-01-28 14:30",
    completedAt: "2026-01-28 18:45",
    duration: "4h 15m",
    epochs: 100,
    accuracy: 78.5,
    loss: 0.342,
    status: "completed",
  },
  {
    id: "train-002",
    model: "Custom ML v2.0",
    startedAt: "2026-01-25 10:00",
    completedAt: "2026-01-25 15:30",
    duration: "5h 30m",
    epochs: 100,
    accuracy: 75.2,
    loss: 0.389,
    status: "completed",
  },
  {
    id: "train-003",
    model: "Custom ML v1.9",
    startedAt: "2026-01-20 09:00",
    completedAt: null,
    duration: "2h 15m",
    epochs: 45,
    accuracy: 62.1,
    loss: 0.521,
    status: "failed",
  },
  {
    id: "train-004",
    model: "Custom ML v1.8",
    startedAt: "2026-01-15 11:00",
    completedAt: "2026-01-15 14:20",
    duration: "3h 20m",
    epochs: 100,
    accuracy: 72.8,
    loss: 0.412,
    status: "completed",
  },
]

const currentTraining = {
  model: "Custom ML v2.2",
  progress: 67,
  currentEpoch: 67,
  totalEpochs: 100,
  currentAccuracy: 76.3,
  currentLoss: 0.358,
  eta: "1h 23m",
  startedAt: "2026-01-29 09:00",
}

export default function AITrainingPage() {
  const [isTraining, setIsTraining] = useState(true)

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Training History</h1>
          <p className="text-muted-foreground mt-1">
            Monitor and manage AI model training sessions
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Select defaultValue="all">
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Filter status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="completed">Completed</SelectItem>
              <SelectItem value="running">Running</SelectItem>
              <SelectItem value="failed">Failed</SelectItem>
            </SelectContent>
          </Select>
          <Button>
            <Play className="h-4 w-4 mr-2" />
            Start New Training
          </Button>
        </div>
      </div>

{/* Current Training */}
      {isTraining && (
        <Card className="border-primary/50">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary/10 rounded-lg">
                  <Brain className="h-6 w-6 text-primary animate-pulse" />
                </div>
                <div>
                  <CardTitle>Training in Progress</CardTitle>
                  <CardDescription>{currentTraining.model}</CardDescription>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="outline" size="sm">
                  <Pause className="h-4 w-4 mr-2" />
                  Pause
                </Button>
                <Button variant="destructive" size="sm" onClick={() => setIsTraining(false)}>
                  <Square className="h-4 w-4 mr-2" />
                  Stop
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span>Progress: {currentTraining.currentEpoch}/{currentTraining.totalEpochs} epochs</span>
                  <span>{currentTraining.progress}%</span>
                </div>
                <Progress value={currentTraining.progress} className="h-3" />
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Current Accuracy</p>
                  <p className="text-2xl font-bold text-green-500">{currentTraining.currentAccuracy}%</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Current Loss</p>
                  <p className="text-2xl font-bold text-yellow-500">{currentTraining.currentLoss}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">ETA</p>
                  <p className="text-2xl font-bold">{currentTraining.eta}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Started At</p>
                  <p className="text-lg font-semibold">{currentTraining.startedAt}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-green-500/10 rounded-lg">
                <CheckCircle2 className="h-6 w-6 text-green-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">12</p>
                <p className="text-sm text-muted-foreground">Completed</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-red-500/10 rounded-lg">
                <XCircle className="h-6 w-6 text-red-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">3</p>
                <p className="text-sm text-muted-foreground">Failed</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-primary/10 rounded-lg">
                <TrendingUp className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">78.5%</p>
                <p className="text-sm text-muted-foreground">Best Accuracy</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-yellow-500/10 rounded-lg">
                <Clock className="h-6 w-6 text-yellow-500" />
              </div>
              <div>
                <p className="text-2xl font-bold">4.2h</p>
                <p className="text-sm text-muted-foreground">Avg Duration</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Training History Table */}
      <Card>
        <CardHeader>
          <CardTitle>Training Sessions</CardTitle>
          <CardDescription>
            History of all model training sessions
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Training ID</TableHead>
                <TableHead>Model</TableHead>
                <TableHead>Started</TableHead>
                <TableHead>Duration</TableHead>
                <TableHead>Epochs</TableHead>
                <TableHead>Accuracy</TableHead>
                <TableHead>Loss</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {trainingHistory.map((training) => (
                <TableRow key={training.id}>
                  <TableCell className="font-mono text-sm">{training.id}</TableCell>
                  <TableCell className="font-medium">{training.model}</TableCell>
                  <TableCell>{training.startedAt}</TableCell>
                  <TableCell>{training.duration}</TableCell>
                  <TableCell>{training.epochs}</TableCell>
                  <TableCell>
                    <span className={training.accuracy >= 75 ? "text-green-500" : "text-yellow-500"}>
                      {training.accuracy}%
                    </span>
                  </TableCell>
                  <TableCell>{training.loss}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        training.status === "completed"
                          ? "default"
                          : training.status === "failed"
                          ? "destructive"
                          : "secondary"
                      }
                    >
                      {training.status === "completed" && <CheckCircle2 className="h-3 w-3 mr-1" />}
                      {training.status === "failed" && <XCircle className="h-3 w-3 mr-1" />}
                      {training.status === "running" && <AlertCircle className="h-3 w-3 mr-1" />}
                      {training.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-2">
                      {training.status === "completed" && (
                        <Button variant="ghost" size="sm">
                          <Download className="h-4 w-4" />
                        </Button>
                      )}
                      {training.status === "failed" && (
                        <Button variant="ghost" size="sm">
                          <RefreshCw className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ai/page.tsx" isMerged="true"
"use client"

const models = [
  { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI", status: "active" },
  { id: "claude-3-opus", name: "Claude 3 Opus", provider: "Anthropic", status: "active" },
  { id: "custom-ml", name: "Custom ML Model", provider: "Internal", status: "training" },
]

export default function AIConfigPage() {
  const [selectedModel, setSelectedModel] = useState("gpt-4o")
  const [temperature, setTemperature] = useState([0.7])
  const [maxTokens, setMaxTokens] = useState([2048])
  const [autoPredict, setAutoPredict] = useState(true)
  const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    await new Promise((r) => setTimeout(r, 1500))
    setIsSaving(false)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">AI Configuration</h1>
          <p className="text-muted-foreground mt-1">
            Configure AI models and prediction settings
          </p>
        </div>
        <Button onClick={handleSave} disabled={isSaving}>
          {isSaving ? (
            <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
          ) : (
            <Save className="h-4 w-4 mr-2" />
          )}
          Save Changes
        </Button>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        {/* Model Selection */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Brain className="h-5 w-5" />
              Model Selection
            </CardTitle>
            <CardDescription>
              Choose the AI model for match predictions
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>Primary Model</Label>
              <Select value={selectedModel} onValueChange={setSelectedModel}>
                <SelectTrigger>
                  <SelectValue placeholder="Select model" />
                </SelectTrigger>
                <SelectContent>
                  {models.map((model) => (
                    <SelectItem key={model.id} value={model.id}>
                      <div className="flex items-center gap-2">
                        <span>{model.name}</span>
                        <Badge variant={model.status === "active" ? "default" : "secondary"}>
                          {model.status}
                        </Badge>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Fallback Model</Label>
              <Select defaultValue="claude-3-opus">
                <SelectTrigger>
                  <SelectValue placeholder="Select fallback" />
                </SelectTrigger>
                <SelectContent>
                  {models.filter((m) => m.id !== selectedModel).map((model) => (
                    <SelectItem key={model.id} value={model.id}>
                      {model.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="pt-4 border-t">
              <h4 className="font-medium mb-3">Available Models</h4>
              <div className="space-y-2">
                {models.map((model) => (
                  <div
                    key={model.id}
                    className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
                  >
                    <div className="flex items-center gap-3">
                      {model.status === "active" ? (
                        <CheckCircle2 className="h-4 w-4 text-green-500" />
                      ) : (
                        <AlertCircle className="h-4 w-4 text-yellow-500" />
                      )}
                      <div>
                        <p className="font-medium text-sm">{model.name}</p>
                        <p className="text-xs text-muted-foreground">{model.provider}</p>
                      </div>
                    </div>
                    <Badge variant={model.status === "active" ? "default" : "outline"}>
                      {model.status}
                    </Badge>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

{/* Model Parameters */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              Model Parameters
            </CardTitle>
            <CardDescription>
              Fine-tune model behavior and output
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>Temperature</Label>
                  <span className="text-sm text-muted-foreground">{temperature[0]}</span>
                </div>
                <Slider
                  value={temperature}
                  onValueChange={setTemperature}
                  max={1}
                  step={0.1}
                  className="w-full"
                />
                <p className="text-xs text-muted-foreground">
                  Higher values make output more random, lower values more focused
                </p>
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>Max Tokens</Label>
                  <span className="text-sm text-muted-foreground">{maxTokens[0]}</span>
                </div>
                <Slider
                  value={maxTokens}
                  onValueChange={setMaxTokens}
                  min={256}
                  max={4096}
                  step={256}
                  className="w-full"
                />
                <p className="text-xs text-muted-foreground">
                  Maximum length of the generated response
                </p>
              </div>

<div className="space-y-2">
                <Label>Top P (Nucleus Sampling)</Label>
                <Input type="number" defaultValue="0.9" step="0.1" min="0" max="1" />
              </div>

<div className="space-y-2">
                <Label>Frequency Penalty</Label>
                <Input type="number" defaultValue="0" step="0.1" min="-2" max="2" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Prediction Settings */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Zap className="h-5 w-5" />
              Prediction Settings
            </CardTitle>
            <CardDescription>
              Configure automatic predictions and scheduling
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Auto-Predict Matches</Label>
                <p className="text-xs text-muted-foreground">
                  Automatically generate predictions for upcoming matches
                </p>
              </div>
              <Switch checked={autoPredict} onCheckedChange={setAutoPredict} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Pre-Match Analysis</Label>
                <p className="text-xs text-muted-foreground">
                  Generate detailed analysis 24 hours before kickoff
                </p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Live Updates</Label>
                <p className="text-xs text-muted-foreground">
                  Update predictions during live matches
                </p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="space-y-2 pt-4 border-t">
              <Label>Prediction Confidence Threshold</Label>
              <Select defaultValue="70">
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="50">50% - Show all predictions</SelectItem>
                  <SelectItem value="60">60% - Moderate confidence</SelectItem>
                  <SelectItem value="70">70% - High confidence only</SelectItem>
                  <SelectItem value="80">80% - Very high confidence</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Prediction Lookahead (days)</Label>
              <Input type="number" defaultValue="7" min="1" max="30" />
            </div>
          </CardContent>
        </Card>

{/* Data Sources */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              Data Sources
            </CardTitle>
            <CardDescription>
              Configure data inputs for predictions
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Historical Match Data</Label>
                <p className="text-xs text-muted-foreground">Last 5 seasons</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Player Statistics</Label>
                <p className="text-xs text-muted-foreground">Current season stats</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Head-to-Head Records</Label>
                <p className="text-xs text-muted-foreground">Last 10 meetings</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Form Analysis</Label>
                <p className="text-xs text-muted-foreground">Last 5 matches</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Injury Reports</Label>
                <p className="text-xs text-muted-foreground">Real-time updates</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Weather Conditions</Label>
                <p className="text-xs text-muted-foreground">Match day forecast</p>
              </div>
              <Switch />
            </div>

<div className="pt-4 border-t">
              <Button variant="outline" className="w-full bg-transparent">
                <Play className="h-4 w-4 mr-2" />
                Test Prediction Pipeline
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

{/* API Keys */}
      <Card>
        <CardHeader>
          <CardTitle>API Configuration</CardTitle>
          <CardDescription>
            Manage API keys for external AI services
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>OpenAI API Key</Label>
              <Input type="password" placeholder="sk-..." defaultValue="sk-*********************" />
            </div>
            <div className="space-y-2">
              <Label>Anthropic API Key</Label>
              <Input type="password" placeholder="sk-ant-..." defaultValue="sk-ant-***************" />
            </div>
            <div className="space-y-2">
              <Label>Sports Data API Key</Label>
              <Input type="password" placeholder="Your API key" defaultValue="*********************" />
            </div>
            <div className="space-y-2">
              <Label>Weather API Key</Label>
              <Input type="password" placeholder="Your API key" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/roles/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Shield,
  Plus,
  Edit,
  Trash2,
  Users,
  Eye,
  FileEdit,
  Settings,
  Database,
  Brain,
} from "lucide-react"

const roles = [
  {
    id: 1,
    name: "Super Admin",
    description: "Full access to all features and settings",
    userCount: 2,
    color: "bg-red-500",
    permissions: ["all"],
    isSystem: true,
  },
  {
    id: 2,
    name: "Admin",
    description: "Manage users, content, and basic settings",
    userCount: 5,
    color: "bg-orange-500",
    permissions: ["users.manage", "content.manage", "settings.view"],
    isSystem: true,
  },
  {
    id: 3,
    name: "Editor",
    description: "Create and edit content, manage matches and teams",
    userCount: 12,
    color: "bg-blue-500",
    permissions: ["content.manage", "matches.manage", "teams.manage"],
    isSystem: false,
  },
  {
    id: 4,
    name: "Moderator",
    description: "Moderate community content and comments",
    userCount: 8,
    color: "bg-purple-500",
    permissions: ["community.moderate", "content.view"],
    isSystem: false,
  },
  {
    id: 5,
    name: "User",
    description: "Basic access to public features",
    userCount: 1250,
    color: "bg-gray-500",
    permissions: ["content.view", "community.participate"],
    isSystem: true,
  },
]

const permissionCategories = [
  {
    name: "Dashboard",
    icon: Eye,
    permissions: [
      { id: "dashboard.view", label: "View Dashboard", description: "Access admin dashboard" },
      { id: "dashboard.analytics", label: "View Analytics", description: "Access analytics data" },
    ],
  },
  {
    name: "Users",
    icon: Users,
    permissions: [
      { id: "users.view", label: "View Users", description: "View user list" },
      { id: "users.manage", label: "Manage Users", description: "Create, edit, delete users" },
      { id: "users.roles", label: "Manage Roles", description: "Assign and manage user roles" },
    ],
  },
  {
    name: "Content",
    icon: FileEdit,
    permissions: [
      { id: "content.view", label: "View Content", description: "View all content" },
      { id: "content.manage", label: "Manage Content", description: "Create, edit, delete content" },
      { id: "content.publish", label: "Publish Content", description: "Publish and unpublish content" },
    ],
  },
  {
    name: "Matches & Teams",
    icon: Database,
    permissions: [
      { id: "matches.view", label: "View Matches", description: "View match data" },
      { id: "matches.manage", label: "Manage Matches", description: "Create, edit matches" },
      { id: "teams.manage", label: "Manage Teams", description: "Create, edit teams" },
      { id: "players.manage", label: "Manage Players", description: "Create, edit players" },
    ],
  },
  {
    name: "AI Prediction",
    icon: Brain,
    permissions: [
      { id: "ai.view", label: "View AI Settings", description: "View AI configuration" },
      { id: "ai.manage", label: "Manage AI", description: "Configure AI models" },
      { id: "ai.train", label: "Train Models", description: "Start model training" },
    ],
  },
  {
    name: "Settings",
    icon: Settings,
    permissions: [
      { id: "settings.view", label: "View Settings", description: "View system settings" },
      { id: "settings.manage", label: "Manage Settings", description: "Modify system settings" },
    ],
  },
]

export default function RolesPage() {
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [selectedRole, setSelectedRole] = useState<typeof roles[0] | null>(null)

const handleEdit = (role: typeof roles[0]) => {
    setSelectedRole(role)
    setIsEditDialogOpen(true)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Roles & Permissions</h1>
          <p className="text-muted-foreground mt-1">
            Manage user roles and access permissions
          </p>
        </div>
        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Create Role
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Create New Role</DialogTitle>
              <DialogDescription>
                Define a new role with specific permissions
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-6 py-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="roleName">Role Name</Label>
                  <Input id="roleName" placeholder="Enter role name" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="roleColor">Role Color</Label>
                  <div className="flex items-center gap-2">
                    <Input id="roleColor" type="color" className="w-20 h-10 p-1" defaultValue="#3b82f6" />
                    <span className="text-sm text-muted-foreground">Choose a color for this role</span>
                  </div>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="roleDescription">Description</Label>
                <Input id="roleDescription" placeholder="Brief description of this role" />
              </div>

<div className="space-y-4">
                <Label>Permissions</Label>
                {permissionCategories.map((category) => (
                  <Card key={category.name}>
                    <CardHeader className="py-3">
                      <div className="flex items-center gap-2">
                        <category.icon className="h-4 w-4" />
                        <CardTitle className="text-sm">{category.name}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent className="py-2">
                      <div className="space-y-3">
                        {category.permissions.map((permission) => (
                          <div key={permission.id} className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                              <Checkbox id={permission.id} />
                              <div>
                                <Label htmlFor={permission.id} className="font-medium cursor-pointer">
                                  {permission.label}
                                </Label>
                                <p className="text-xs text-muted-foreground">{permission.description}</p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
                Cancel
              </Button>
              <Button onClick={() => setIsCreateDialogOpen(false)}>
                Create Role
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

{/* Roles Overview */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {roles.map((role) => (
          <Card key={role.id} className="relative overflow-hidden">
            <div className={`absolute top-0 left-0 w-1 h-full ${role.color}`} />
            <CardHeader>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Shield className="h-5 w-5" />
                  <CardTitle className="text-lg">{role.name}</CardTitle>
                </div>
                {role.isSystem && (
                  <Badge variant="outline" className="text-xs">System</Badge>
                )}
              </div>
              <CardDescription>{role.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Users className="h-4 w-4" />
                  <span>{role.userCount} users</span>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="ghost" size="sm" onClick={() => handleEdit(role)}>
                    <Edit className="h-4 w-4" />
                  </Button>
                  {!role.isSystem && (
                    <Button variant="ghost" size="sm" className="text-red-500 hover:text-red-600">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Permissions Matrix */}
      <Card>
        <CardHeader>
          <CardTitle>Permissions Matrix</CardTitle>
          <CardDescription>
            Overview of permissions across all roles
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="min-w-[200px]">Permission</TableHead>
                  {roles.map((role) => (
                    <TableHead key={role.id} className="text-center min-w-[100px]">
                      <div className="flex flex-col items-center gap-1">
                        <div className={`w-3 h-3 rounded-full ${role.color}`} />
                        <span className="text-xs">{role.name}</span>
                      </div>
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {permissionCategories.map((category) => (
                  <>
                    <TableRow key={category.name} className="bg-muted/50">
                      <TableCell colSpan={roles.length + 1} className="font-medium">
                        <div className="flex items-center gap-2">
                          <category.icon className="h-4 w-4" />
                          {category.name}
                        </div>
                      </TableCell>
                    </TableRow>
                    {category.permissions.map((permission) => (
                      <TableRow key={permission.id}>
                        <TableCell className="pl-8">{permission.label}</TableCell>
                        {roles.map((role) => (
                          <TableCell key={`${role.id}-${permission.id}`} className="text-center">
                            <Switch
                              defaultChecked={
                                role.permissions.includes("all") ||
                                role.permissions.some((p) => permission.id.startsWith(p.split(".")[0]))
                              }
                              disabled={role.isSystem && role.name === "Super Admin"}
                            />
                          </TableCell>
                        ))}
                      </TableRow>
                    ))}
                  </>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{/* Edit Role Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Edit Role: {selectedRole?.name}</DialogTitle>
            <DialogDescription>
              Modify role settings and permissions
            </DialogDescription>
          </DialogHeader>
          {selectedRole && (
            <div className="space-y-6 py-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="editRoleName">Role Name</Label>
                  <Input
                    id="editRoleName"
                    defaultValue={selectedRole.name}
                    disabled={selectedRole.isSystem}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="editRoleColor">Role Color</Label>
                  <Input
                    id="editRoleColor"
                    type="color"
                    className="w-20 h-10 p-1"
                    defaultValue="#3b82f6"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="editRoleDescription">Description</Label>
                <Input
                  id="editRoleDescription"
                  defaultValue={selectedRole.description}
                />
              </div>

<div className="space-y-4">
                <Label>Permissions</Label>
                {permissionCategories.map((category) => (
                  <Card key={category.name}>
                    <CardHeader className="py-3">
                      <div className="flex items-center gap-2">
                        <category.icon className="h-4 w-4" />
                        <CardTitle className="text-sm">{category.name}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent className="py-2">
                      <div className="space-y-3">
                        {category.permissions.map((permission) => (
                          <div key={permission.id} className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                              <Checkbox
                                id={`edit-${permission.id}`}
                                defaultChecked={
                                  selectedRole.permissions.includes("all") ||
                                  selectedRole.permissions.some((p) =>
                                    permission.id.startsWith(p.split(".")[0])
                                  )
                                }
                                disabled={selectedRole.name === "Super Admin"}
                              />
                              <div>
                                <Label
                                  htmlFor={`edit-${permission.id}`}
                                  className="font-medium cursor-pointer"
                                >
                                  {permission.label}
                                </Label>
                                <p className="text-xs text-muted-foreground">
                                  {permission.description}
                                </p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={() => setIsEditDialogOpen(false)}>
              Save Changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
"use client"

export default function SettingsPage() {
  const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    await new Promise((r) => setTimeout(r, 1500))
    setIsSaving(false)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Settings</h1>
          <p className="text-muted-foreground mt-1">
            Manage application settings and preferences
          </p>
        </div>
        <Button onClick={handleSave} disabled={isSaving}>
          {isSaving ? (
            <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
          ) : (
            <Save className="h-4 w-4 mr-2" />
          )}
          Save Changes
        </Button>
      </div>

<Tabs defaultValue="general" className="space-y-6">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="general" className="flex items-center gap-2">
            <Settings className="h-4 w-4" />
            General
          </TabsTrigger>
          <TabsTrigger value="appearance" className="flex items-center gap-2">
            <Globe className="h-4 w-4" />
            Appearance
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex items-center gap-2">
            <Bell className="h-4 w-4" />
            Notifications
          </TabsTrigger>
          <TabsTrigger value="security" className="flex items-center gap-2">
            <Shield className="h-4 w-4" />
            Security
          </TabsTrigger>
          <TabsTrigger value="advanced" className="flex items-center gap-2">
            <Database className="h-4 w-4" />
            Advanced
          </TabsTrigger>
        </TabsList>

{/* General Settings */}
        <TabsContent value="general" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Site Information</CardTitle>
              <CardDescription>Basic information about your site</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="siteName">Site Name</Label>
                  <Input id="siteName" defaultValue="Premier League Stats" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="siteUrl">Site URL</Label>
                  <Input id="siteUrl" defaultValue="https://premierleague-stats.com" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="siteDescription">Site Description</Label>
                <Textarea
                  id="siteDescription"
                  defaultValue="Comprehensive Premier League statistics, match predictions, and analytics platform"
                  rows={3}
                />
              </div>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="timezone">Timezone</Label>
                  <Select defaultValue="utc">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="utc">UTC</SelectItem>
                      <SelectItem value="london">Europe/London</SelectItem>
                      <SelectItem value="bangkok">Asia/Bangkok</SelectItem>
                      <SelectItem value="new-york">America/New_York</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="language">Default Language</Label>
                  <Select defaultValue="en">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="th">Thai</SelectItem>
                      <SelectItem value="es">Spanish</SelectItem>
                      <SelectItem value="fr">French</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Contact Information</CardTitle>
              <CardDescription>How users can reach you</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="adminEmail">Admin Email</Label>
                  <Input id="adminEmail" type="email" defaultValue="admin@premierleague-stats.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="supportEmail">Support Email</Label>
                  <Input id="supportEmail" type="email" defaultValue="support@premierleague-stats.com" />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Appearance Settings */}
        <TabsContent value="appearance" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Theme Settings</CardTitle>
              <CardDescription>Customize the look and feel</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Dark Mode</Label>
                  <p className="text-sm text-muted-foreground">Enable dark mode by default</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Compact Mode</Label>
                  <p className="text-sm text-muted-foreground">Use compact layout for tables</p>
                </div>
                <Switch />
              </div>
              <div className="space-y-2">
                <Label>Primary Color</Label>
                <div className="flex items-center gap-4">
                  <Input type="color" className="w-20 h-10 p-1" defaultValue="#3b82f6" />
                  <span className="text-sm text-muted-foreground">Choose your brand color</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Notifications Settings */}
        <TabsContent value="notifications" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Email Notifications</CardTitle>
              <CardDescription>Configure email notification preferences</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>New User Registration</Label>
                  <p className="text-sm text-muted-foreground">Get notified when new users register</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Match Results</Label>
                  <p className="text-sm text-muted-foreground">Receive match result updates</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>AI Prediction Alerts</Label>
                  <p className="text-sm text-muted-foreground">Get notified about prediction performance</p>
                </div>
                <Switch />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>System Alerts</Label>
                  <p className="text-sm text-muted-foreground">Critical system notifications</p>
                </div>
                <Switch defaultChecked />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>SMTP Configuration</CardTitle>
              <CardDescription>Configure email server settings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="smtpHost">SMTP Host</Label>
                  <Input id="smtpHost" placeholder="smtp.example.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="smtpPort">SMTP Port</Label>
                  <Input id="smtpPort" placeholder="587" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="smtpUser">SMTP Username</Label>
                  <Input id="smtpUser" placeholder="username" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="smtpPass">SMTP Password</Label>
                  <Input id="smtpPass" type="password" placeholder="********" />
                </div>
              </div>
              <Button variant="outline">
                <Mail className="h-4 w-4 mr-2" />
                Send Test Email
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* Security Settings */}
        <TabsContent value="security" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Authentication</CardTitle>
              <CardDescription>Configure authentication settings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Two-Factor Authentication</Label>
                  <p className="text-sm text-muted-foreground">Require 2FA for admin accounts</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Session Timeout</Label>
                  <p className="text-sm text-muted-foreground">Auto logout after inactivity</p>
                </div>
                <Select defaultValue="30">
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="15">15 minutes</SelectItem>
                    <SelectItem value="30">30 minutes</SelectItem>
                    <SelectItem value="60">1 hour</SelectItem>
                    <SelectItem value="120">2 hours</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Login Attempts</Label>
                  <p className="text-sm text-muted-foreground">Max failed login attempts before lockout</p>
                </div>
                <Select defaultValue="5">
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="3">3 attempts</SelectItem>
                    <SelectItem value="5">5 attempts</SelectItem>
                    <SelectItem value="10">10 attempts</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Password Policy</CardTitle>
              <CardDescription>Set password requirements</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Minimum Length</Label>
                  <p className="text-sm text-muted-foreground">Minimum password length</p>
                </div>
                <Select defaultValue="8">
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="6">6 characters</SelectItem>
                    <SelectItem value="8">8 characters</SelectItem>
                    <SelectItem value="12">12 characters</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Require Uppercase</Label>
                  <p className="text-sm text-muted-foreground">At least one uppercase letter</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Require Numbers</Label>
                  <p className="text-sm text-muted-foreground">At least one number</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Require Special Characters</Label>
                  <p className="text-sm text-muted-foreground">At least one special character</p>
                </div>
                <Switch />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Advanced Settings */}
        <TabsContent value="advanced" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Data Management</CardTitle>
              <CardDescription>Database and cache settings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Auto Backup</Label>
                  <p className="text-sm text-muted-foreground">Automatically backup database daily</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Cache Duration</Label>
                  <p className="text-sm text-muted-foreground">How long to cache API responses</p>
                </div>
                <Select defaultValue="60">
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="30">30 seconds</SelectItem>
                    <SelectItem value="60">1 minute</SelectItem>
                    <SelectItem value="300">5 minutes</SelectItem>
                    <SelectItem value="600">10 minutes</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex gap-4">
                <Button variant="outline">Clear Cache</Button>
                <Button variant="outline">Export Data</Button>
                <Button variant="destructive">Reset Database</Button>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>API Settings</CardTitle>
              <CardDescription>External API configuration</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="footballApiKey">Football Data API Key</Label>
                <Input id="footballApiKey" type="password" placeholder="Your API key" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="sportmonksApiKey">SportMonks API Key</Label>
                <Input id="sportmonksApiKey" type="password" placeholder="Your API key" />
              </div>
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Rate Limiting</Label>
                  <p className="text-sm text-muted-foreground">Max API requests per minute</p>
                </div>
                <Select defaultValue="60">
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="30">30/min</SelectItem>
                    <SelectItem value="60">60/min</SelectItem>
                    <SelectItem value="100">100/min</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/add/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ArrowLeft, User, Mail, Lock, Shield, Save, Loader2 } from "lucide-react"
import Link from "next/link"

export default function AddUserPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    role: "user",
    status: "active",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    
    alert("สร้างผู้ใช้สำเร็จ!")
    setIsLoading(false)
    router.push("/admin/users")
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Link href="/admin/users">
          <Button variant="outline" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">เพิ่มผู้ใช้ใหม่</h1>
          <p className="text-muted-foreground">สร้างบัญชีผู้ใช้ใหม่ในระบบ</p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Personal Info */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="h-5 w-5" />
                  ข้อมูลส่วนตัว
                </CardTitle>
                <CardDescription>กรอกข้อมูลพื้นฐานของผู้ใช้</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">ชื่อ</Label>
                    <Input
                      id="firstName"
                      placeholder="กรอกชื่อ"
                      value={formData.firstName}
                      onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="lastName">นามสกุล</Label>
                    <Input
                      id="lastName"
                      placeholder="กรอกนามสกุล"
                      value={formData.lastName}
                      onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
                      required
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Account Info */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Mail className="h-5 w-5" />
                  ข้อมูลบัญชี
                </CardTitle>
                <CardDescription>ตั้งค่าอีเมลและรหัสผ่านสำหรับเข้าสู่ระบบ</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="email">อีเมล</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="example@email.com"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    required
                  />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="password">รหัสผ่าน</Label>
                    <Input
                      id="password"
                      type="password"
                      placeholder="กรอกรหัสผ่าน"
                      value={formData.password}
                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="confirmPassword">ยืนยันรหัสผ่าน</Label>
                    <Input
                      id="confirmPassword"
                      type="password"
                      placeholder="กรอกรหัสผ่านอีกครั้ง"
                      value={formData.confirmPassword}
                      onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                      required
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Role & Status */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="h-5 w-5" />
                  บทบาทและสถานะ
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>บทบาท</Label>
                  <Select
                    value={formData.role}
                    onValueChange={(value) => setFormData({ ...formData, role: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="เลือกบทบาท" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="user">ผู้ใช้ทั่วไป</SelectItem>
                      <SelectItem value="editor">บรรณาธิการ</SelectItem>
                      <SelectItem value="moderator">ผู้ดูแล</SelectItem>
                      <SelectItem value="admin">ผู้ดูแลระบบ</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>สถานะ</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value) => setFormData({ ...formData, status: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="เลือกสถานะ" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="active">ใช้งาน</SelectItem>
                      <SelectItem value="inactive">ไม่ใช้งาน</SelectItem>
                      <SelectItem value="pending">รอการยืนยัน</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>

{/* Actions */}
            <Card>
              <CardContent className="pt-6 space-y-3">
                <Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      กำลังบันทึก...
                    </>
                  ) : (
                    <>
                      <Save className="mr-2 h-4 w-4" />
                      บันทึกผู้ใช้
                    </>
                  )}
                </Button>
                <Button type="button" variant="outline" className="w-full bg-transparent" onClick={() => router.back()}>
                  ยกเลิก
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { 
  ArrowLeft, 
  TrendingUp, 
  TrendingDown,
  Users, 
  Eye, 
  Clock, 
  Globe,
  Smartphone,
  Monitor,
  Tablet,
  Download,
  Calendar
} from "lucide-react"
import Link from "next/link"

const overviewStats = [
  { title: "ผู้เข้าชมทั้งหมด", value: "1,234,567", change: "+12.5%", trend: "up" },
  { title: "ผู้ใช้ที่ใช้งานอยู่", value: "8,432", change: "+5.2%", trend: "up" },
  { title: "เวลาเฉลี่ยบนเว็บ", value: "4:32", change: "-2.1%", trend: "down" },
  { title: "อัตราตีกลับ", value: "32.5%", change: "-8.3%", trend: "up" },
]

const topPages = [
  { page: "/matches", title: "แมตช์", views: "145,234", unique: "98,432" },
  { page: "/standings", title: "ตารางคะแนน", views: "132,456", unique: "87,654" },
  { page: "/players", title: "นักเตะ", views: "98,123", unique: "65,432" },
  { page: "/news", title: "ข่าว", views: "78,567", unique: "54,321" },
  { page: "/ai-prediction", title: "AI ทำนายผล", views: "56,890", unique: "43,210" },
  { page: "/teams", title: "ทีม", views: "45,678", unique: "32,109" },
  { page: "/compare", title: "เปรียบเทียบ", views: "34,567", unique: "23,456" },
]

const deviceStats = [
  { device: "มือถือ", icon: Smartphone, users: "58%", sessions: "487,234" },
  { device: "คอมพิวเตอร์", icon: Monitor, users: "35%", sessions: "293,456" },
  { device: "แท็บเล็ต", icon: Tablet, users: "7%", sessions: "58,765" },
]

const countryStats = [
  { country: "ไทย", flag: "TH", users: "456,789", percentage: 45 },
  { country: "อังกฤษ", flag: "GB", users: "234,567", percentage: 23 },
  { country: "สหรัฐอเมริกา", flag: "US", users: "123,456", percentage: 12 },
  { country: "ออสเตรเลีย", flag: "AU", users: "87,654", percentage: 8 },
  { country: "อื่นๆ", flag: "XX", users: "123,456", percentage: 12 },
]

const trafficSources = [
  { source: "ค้นหาทั่วไป", users: "456,789", percentage: 45 },
  { source: "โซเชียลมีเดีย", users: "234,567", percentage: 23 },
  { source: "เข้าตรง", users: "198,765", percentage: 19 },
  { source: "อ้างอิง", users: "87,654", percentage: 8 },
  { source: "อีเมล", users: "51,234", percentage: 5 },
]

const dailyData = [
  { date: "จ.", views: 45000, users: 12000 },
  { date: "อ.", views: 52000, users: 14000 },
  { date: "พ.", views: 48000, users: 13000 },
  { date: "พฤ.", views: 61000, users: 16000 },
  { date: "ศ.", views: 58000, users: 15000 },
  { date: "ส.", views: 72000, users: 19000 },
  { date: "อา.", views: 85000, users: 22000 },
]

export default function AnalyticsPage() {
  const [dateRange, setDateRange] = useState("7days")

const maxViews = Math.max(...dailyData.map(d => d.views))

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex items-center gap-4">
          <Link href="/admin">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl md:text-3xl font-bold">รายงานและวิเคราะห์</h1>
            <p className="text-muted-foreground">ข้อมูลการเข้าชมและพฤติกรรมผู้ใช้</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <Select value={dateRange} onValueChange={setDateRange}>
            <SelectTrigger className="w-40">
              <Calendar className="mr-2 h-4 w-4" />
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">วันนี้</SelectItem>
              <SelectItem value="7days">7 วันที่ผ่านมา</SelectItem>
              <SelectItem value="30days">30 วันที่ผ่านมา</SelectItem>
              <SelectItem value="90days">90 วันที่ผ่านมา</SelectItem>
              <SelectItem value="year">ปีนี้</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            ส่งออก
          </Button>
        </div>
      </div>

{/* Overview Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {overviewStats.map((stat) => (
          <Card key={stat.title}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <p className="text-sm text-muted-foreground">{stat.title}</p>
                <div className={`flex items-center gap-1 text-sm ${
                  stat.trend === "up" ? "text-green-500" : "text-red-500"
                }`}>
                  {stat.trend === "up" ? (
                    <TrendingUp className="h-4 w-4" />
                  ) : (
                    <TrendingDown className="h-4 w-4" />
                  )}
                  {stat.change}
                </div>
              </div>
              <p className="text-3xl font-bold mt-2">{stat.value}</p>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Chart */}
      <Card>
        <CardHeader>
          <CardTitle>ภาพรวมการเข้าชม</CardTitle>
          <CardDescription>จำนวนผู้เข้าชมและผู้ใช้ในช่วง 7 วันที่ผ่านมา</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-64">
            <div className="flex items-end justify-between h-full gap-2">
              {dailyData.map((day, index) => (
                <div key={index} className="flex-1 flex flex-col items-center gap-2">
                  <div className="w-full flex flex-col items-center gap-1" style={{ height: '200px' }}>
                    <div 
                      className="w-full bg-primary/20 rounded-t"
                      style={{ height: `${(day.views / maxViews) * 100}%` }}
                    >
                      <div 
                        className="w-full bg-primary rounded-t"
                        style={{ height: `${(day.users / day.views) * 100}%` }}
                      />
                    </div>
                  </div>
                  <span className="text-sm text-muted-foreground">{day.date}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="flex items-center justify-center gap-6 mt-4">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-primary rounded" />
              <span className="text-sm text-muted-foreground">ผู้ใช้</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-primary/20 rounded" />
              <span className="text-sm text-muted-foreground">ยอดเข้าชม</span>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Top Pages */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Eye className="h-5 w-5" />
              หน้ายอดนิยม
            </CardTitle>
            <CardDescription>หน้าที่มีผู้เข้าชมมากที่สุด</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {topPages.map((page, index) => (
                <div key={index} className="flex items-center justify-between py-2 border-b border-border last:border-0">
                  <div>
                    <p className="font-medium">{page.title}</p>
                    <p className="text-sm text-muted-foreground">{page.page}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">{page.views}</p>
                    <p className="text-sm text-muted-foreground">{page.unique} unique</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Device Stats */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Smartphone className="h-5 w-5" />
              อุปกรณ์
            </CardTitle>
            <CardDescription>แยกตามประเภทอุปกรณ์</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {deviceStats.map((device, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <device.icon className="h-5 w-5 text-muted-foreground" />
                      <span className="font-medium">{device.device}</span>
                    </div>
                    <div className="text-right">
                      <span className="font-bold">{device.users}</span>
                      <span className="text-sm text-muted-foreground ml-2">({device.sessions})</span>
                    </div>
                  </div>
                  <div className="h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{ width: device.users }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Country Stats */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Globe className="h-5 w-5" />
              ประเทศ
            </CardTitle>
            <CardDescription>ผู้เข้าชมแยกตามประเทศ</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {countryStats.map((country, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="text-lg">{country.flag === "TH" ? "🇹🇭" : country.flag === "GB" ? "🇬🇧" : country.flag === "US" ? "🇺🇸" : country.flag === "AU" ? "🇦🇺" : "🌍"}</span>
                      <span className="font-medium">{country.country}</span>
                    </div>
                    <span className="font-medium">{country.users}</span>
                  </div>
                  <div className="h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{ width: `${country.percentage}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Traffic Sources */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="h-5 w-5" />
              แหล่งที่มา
            </CardTitle>
            <CardDescription>ช่องทางที่ผู้ใช้เข้ามา</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {trafficSources.map((source, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{source.source}</span>
                    <div>
                      <span className="font-medium">{source.users}</span>
                      <span className="text-sm text-muted-foreground ml-2">({source.percentage}%)</span>
                    </div>
                  </div>
                  <div className="h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{ width: `${source.percentage}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/matches/add/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ArrowLeft, Calendar, MapPin, Trophy, Clock, Save, Loader2 } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

const teams = [
  { id: "1", name: "แมนเชสเตอร์ ซิตี้", logo: "/manchester-city-logo.png" },
  { id: "2", name: "ลิเวอร์พูล", logo: "/liverpool-logo.png" },
  { id: "3", name: "อาร์เซนอล", logo: "/arsenal-logo.png" },
  { id: "4", name: "เชลซี", logo: "/chelsea-football-club-crest.png" },
  { id: "5", name: "แมนเชสเตอร์ ยูไนเต็ด", logo: "/manchester-united-crest.png" },
  { id: "6", name: "สเปอร์ส", logo: "/tottenham-logo.png" },
]

const leagues = [
  { id: "1", name: "พรีเมียร์ลีก" },
  { id: "2", name: "แชมเปี้ยนส์ลีก" },
  { id: "3", name: "เอฟเอคัพ" },
  { id: "4", name: "คาราบาว คัพ" },
]

export default function AddMatchPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    homeTeam: "",
    awayTeam: "",
    league: "",
    date: "",
    time: "",
    venue: "",
    matchweek: "",
    status: "scheduled",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    
    await new Promise((resolve) => setTimeout(resolve, 1500))
    
    alert("สร้างแมตช์สำเร็จ!")
    setIsLoading(false)
    router.push("/admin/matches")
  }

const selectedHomeTeam = teams.find(t => t.id === formData.homeTeam)
  const selectedAwayTeam = teams.find(t => t.id === formData.awayTeam)

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Link href="/admin/matches">
          <Button variant="outline" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">เพิ่มแมตช์ใหม่</h1>
          <p className="text-muted-foreground">กำหนดการแข่งขันใหม่ในระบบ</p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Match Preview */}
            <Card>
              <CardHeader>
                <CardTitle>ตัวอย่างแมตช์</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-center gap-8 py-6">
                  <div className="text-center">
                    {selectedHomeTeam ? (
                      <>
                        <div className="w-20 h-20 mx-auto mb-2 relative">
                          <Image
                            src={selectedHomeTeam.logo || "/placeholder.svg"}
                            alt={selectedHomeTeam.name}
                            fill
                            className="object-contain"
                          />
                        </div>
                        <p className="font-medium">{selectedHomeTeam.name}</p>
                      </>
                    ) : (
                      <>
                        <div className="w-20 h-20 mx-auto mb-2 bg-muted rounded-full flex items-center justify-center">
                          <Trophy className="h-8 w-8 text-muted-foreground" />
                        </div>
                        <p className="text-muted-foreground">ทีมเหย้า</p>
                      </>
                    )}
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-muted-foreground">VS</div>
                    {formData.date && formData.time && (
                      <p className="text-sm text-muted-foreground mt-2">
                        {formData.date} - {formData.time}
                      </p>
                    )}
                  </div>
                  <div className="text-center">
                    {selectedAwayTeam ? (
                      <>
                        <div className="w-20 h-20 mx-auto mb-2 relative">
                          <Image
                            src={selectedAwayTeam.logo || "/placeholder.svg"}
                            alt={selectedAwayTeam.name}
                            fill
                            className="object-contain"
                          />
                        </div>
                        <p className="font-medium">{selectedAwayTeam.name}</p>
                      </>
                    ) : (
                      <>
                        <div className="w-20 h-20 mx-auto mb-2 bg-muted rounded-full flex items-center justify-center">
                          <Trophy className="h-8 w-8 text-muted-foreground" />
                        </div>
                        <p className="text-muted-foreground">ทีมเยือน</p>
                      </>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Teams */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Trophy className="h-5 w-5" />
                  เลือกทีม
                </CardTitle>
                <CardDescription>เลือกทีมเหย้าและทีมเยือน</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>ทีมเหย้า</Label>
                    <Select
                      value={formData.homeTeam}
                      onValueChange={(value) => setFormData({ ...formData, homeTeam: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="เลือกทีมเหย้า" />
                      </SelectTrigger>
                      <SelectContent>
                        {teams.map((team) => (
                          <SelectItem key={team.id} value={team.id} disabled={team.id === formData.awayTeam}>
                            {team.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>ทีมเยือน</Label>
                    <Select
                      value={formData.awayTeam}
                      onValueChange={(value) => setFormData({ ...formData, awayTeam: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="เลือกทีมเยือน" />
                      </SelectTrigger>
                      <SelectContent>
                        {teams.map((team) => (
                          <SelectItem key={team.id} value={team.id} disabled={team.id === formData.homeTeam}>
                            {team.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Date & Time */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calendar className="h-5 w-5" />
                  วันเวลาและสถานที่
                </CardTitle>
                <CardDescription>กำหนดวันเวลาและสนามแข่งขัน</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="date">วันที่</Label>
                    <Input
                      id="date"
                      type="date"
                      value={formData.date}
                      onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="time">เวลา</Label>
                    <Input
                      id="time"
                      type="time"
                      value={formData.time}
                      onChange={(e) => setFormData({ ...formData, time: e.target.value })}
                      required
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="venue">สนามแข่งขัน</Label>
                  <Input
                    id="venue"
                    placeholder="เช่น Etihad Stadium"
                    value={formData.venue}
                    onChange={(e) => setFormData({ ...formData, venue: e.target.value })}
                  />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* League & Matchweek */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Clock className="h-5 w-5" />
                  รายละเอียดการแข่งขัน
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label>ลีก/รายการ</Label>
                  <Select
                    value={formData.league}
                    onValueChange={(value) => setFormData({ ...formData, league: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="เลือกลีก" />
                    </SelectTrigger>
                    <SelectContent>
                      {leagues.map((league) => (
                        <SelectItem key={league.id} value={league.id}>
                          {league.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="matchweek">นัด/สัปดาห์</Label>
                  <Input
                    id="matchweek"
                    placeholder="เช่น 25"
                    value={formData.matchweek}
                    onChange={(e) => setFormData({ ...formData, matchweek: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>สถานะ</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value) => setFormData({ ...formData, status: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="เลือกสถานะ" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="scheduled">กำหนดการ</SelectItem>
                      <SelectItem value="live">กำลังแข่ง</SelectItem>
                      <SelectItem value="finished">จบแล้ว</SelectItem>
                      <SelectItem value="postponed">เลื่อน</SelectItem>
                      <SelectItem value="cancelled">ยกเลิก</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>

{/* Actions */}
            <Card>
              <CardContent className="pt-6 space-y-3">
                <Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      กำลังบันทึก...
                    </>
                  ) : (
                    <>
                      <Save className="mr-2 h-4 w-4" />
                      บันทึกแมตช์
                    </>
                  )}
                </Button>
                <Button type="button" variant="outline" className="w-full bg-transparent" onClick={() => router.back()}>
                  ยกเลิก
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/news/page.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ArrowLeft, FileText, ImageIcon, Tag, Save, Loader2, Eye, Upload } from "lucide-react"
import Link from "next/link"

const categories = [
  { id: "transfer", name: "ข่าวซื้อขาย" },
  { id: "match", name: "ข่าวแมตช์" },
  { id: "injury", name: "ข่าวบาดเจ็บ" },
  { id: "general", name: "ข่าวทั่วไป" },
  { id: "analysis", name: "วิเคราะห์" },
]

const teams = [
  { id: "all", name: "ทุกทีม" },
  { id: "mancity", name: "แมนเชสเตอร์ ซิตี้" },
  { id: "liverpool", name: "ลิเวอร์พูล" },
  { id: "arsenal", name: "อาร์เซนอล" },
  { id: "chelsea", name: "เชลซี" },
  { id: "manutd", name: "แมนเชสเตอร์ ยูไนเต็ด" },
]

export default function WriteNewsPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [isPreview, setIsPreview] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    subtitle: "",
    content: "",
    category: "",
    team: "all",
    status: "draft",
    featuredImage: "",
    tags: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    
    await new Promise((resolve) => setTimeout(resolve, 1500))
    
    alert(formData.status === "published" ? "เผยแพร่บทความสำเร็จ!" : "บันทึกฉบับร่างสำเร็จ!")
    setIsLoading(false)
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/admin">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl md:text-3xl font-bold">เขียนข่าว</h1>
            <p className="text-muted-foreground">สร้างบทความข่าวใหม่</p>
          </div>
        </div>
        <Button variant="outline" onClick={() => setIsPreview(!isPreview)}>
          <Eye className="mr-2 h-4 w-4" />
          {isPreview ? "แก้ไข" : "ตัวอย่าง"}
        </Button>
      </div>

{isPreview ? (
        /* Preview Mode */
        <Card>
          <CardContent className="pt-6">
            <article className="prose prose-invert max-w-none">
              {formData.featuredImage && (
                <div className="w-full h-64 bg-muted rounded-lg mb-6 flex items-center justify-center">
                  <ImageIcon className="h-12 w-12 text-muted-foreground" />
                </div>
              )}
              <h1 className="text-3xl font-bold mb-2">{formData.title || "หัวข้อบทความ"}</h1>
              {formData.subtitle && (
                <p className="text-xl text-muted-foreground mb-6">{formData.subtitle}</p>
              )}
              <div className="flex items-center gap-4 text-sm text-muted-foreground mb-6">
                <span>โดย Admin</span>
                <span>•</span>
                <span>{new Date().toLocaleDateString("th-TH")}</span>
                {formData.category && (
                  <>
                    <span>•</span>
                    <span className="bg-primary/10 text-primary px-2 py-1 rounded">
                      {categories.find(c => c.id === formData.category)?.name}
                    </span>
                  </>
                )}
              </div>
              <div className="whitespace-pre-wrap">
                {formData.content || "เนื้อหาบทความจะแสดงที่นี่..."}
              </div>
              {formData.tags && (
                <div className="flex flex-wrap gap-2 mt-6">
                  {formData.tags.split(",").map((tag, index) => (
                    <span key={index} className="bg-muted px-3 py-1 rounded-full text-sm">
                      #{tag.trim()}
                    </span>
                  ))}
                </div>
              )}
            </article>
          </CardContent>
        </Card>
      ) : (
        /* Edit Mode */
        <form onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Main Form */}
            <div className="lg:col-span-2 space-y-6">
              {/* Content */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    เนื้อหาบทความ
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="title">หัวข้อ</Label>
                    <Input
                      id="title"
                      placeholder="กรอกหัวข้อบทความ"
                      value={formData.title}
                      onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                      required
                      className="text-lg"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="subtitle">หัวข้อรอง (ถ้ามี)</Label>
                    <Input
                      id="subtitle"
                      placeholder="กรอกหัวข้อรอง"
                      value={formData.subtitle}
                      onChange={(e) => setFormData({ ...formData, subtitle: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="content">เนื้อหา</Label>
                    <Textarea
                      id="content"
                      placeholder="เขียนเนื้อหาบทความที่นี่..."
                      value={formData.content}
                      onChange={(e) => setFormData({ ...formData, content: e.target.value })}
                      required
                      rows={15}
                      className="resize-none"
                    />
                  </div>
                </CardContent>
              </Card>

{/* Featured Image */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Upload className="h-5 w-5" />
                    รูปภาพหลัก
                  </CardTitle>
                  <CardDescription>อัปโหลดรูปภาพประกอบบทความ</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="border-2 border-dashed border-border rounded-lg p-8 text-center hover:border-primary/50 transition-colors cursor-pointer">
                    <Upload className="h-10 w-10 mx-auto text-muted-foreground mb-4" />
                    <p className="text-muted-foreground mb-2">ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</p>
                    <p className="text-sm text-muted-foreground">รองรับไฟล์ JPG, PNG, WebP (สูงสุด 5MB)</p>
                    <Input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => {
                        const file = e.target.files?.[0]
                        if (file) {
                          setFormData({ ...formData, featuredImage: file.name })
                        }
                      }}
                    />
                  </div>
                  {formData.featuredImage && (
                    <p className="mt-2 text-sm text-muted-foreground">
                      เลือกไฟล์: {formData.featuredImage}
                    </p>
                  )}
                </CardContent>
              </Card>
            </div>

{/* Sidebar */}
            <div className="space-y-6">
              {/* Publish Settings */}
              <Card>
                <CardHeader>
                  <CardTitle>การเผยแพร่</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label>สถานะ</Label>
                    <Select
                      value={formData.status}
                      onValueChange={(value) => setFormData({ ...formData, status: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="เลือกสถานะ" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="draft">ฉบับร่าง</SelectItem>
                        <SelectItem value="published">เผยแพร่</SelectItem>
                        <SelectItem value="scheduled">ตั้งเวลา</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
              </Card>

{/* Category & Tags */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Tag className="h-5 w-5" />
                    หมวดหมู่และแท็ก
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label>หมวดหมู่</Label>
                    <Select
                      value={formData.category}
                      onValueChange={(value) => setFormData({ ...formData, category: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="เลือกหมวดหมู่" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((cat) => (
                          <SelectItem key={cat.id} value={cat.id}>
                            {cat.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>ทีมที่เกี่ยวข้อง</Label>
                    <Select
                      value={formData.team}
                      onValueChange={(value) => setFormData({ ...formData, team: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="เลือกทีม" />
                      </SelectTrigger>
                      <SelectContent>
                        {teams.map((team) => (
                          <SelectItem key={team.id} value={team.id}>
                            {team.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="tags">แท็ก</Label>
                    <Input
                      id="tags"
                      placeholder="คั่นด้วยเครื่องหมาย ,"
                      value={formData.tags}
                      onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                    />
                    <p className="text-xs text-muted-foreground">เช่น: พรีเมียร์ลีก, ซื้อขาย, ฮาแลนด์</p>
                  </div>
                </CardContent>
              </Card>

{/* Actions */}
              <Card>
                <CardContent className="pt-6 space-y-3">
                  <Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        กำลังบันทึก...
                      </>
                    ) : (
                      <>
                        <Save className="mr-2 h-4 w-4" />
                        {formData.status === "published" ? "เผยแพร่บทความ" : "บันทึกฉบับร่าง"}
                      </>
                    )}
                  </Button>
                  <Button type="button" variant="outline" className="w-full bg-transparent" onClick={() => router.back()}>
                    ยกเลิก
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </form>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, Calendar, Newspaper, TrendingUp, Eye, Activity, ArrowUpRight, ArrowDownRight } from "lucide-react"
import Link from "next/link"

const stats = [
  {
    title: "ผู้ใช้ทั้งหมด",
    value: "12,543",
    change: "+12.5%",
    trend: "up",
    icon: Users,
    description: "เทียบกับเดือนที่แล้ว",
  },
  {
    title: "แมตช์ที่กำลังแข่ง",
    value: "48",
    change: "+8.2%",
    trend: "up",
    icon: Calendar,
    description: "สัปดาห์นี้",
  },
  {
    title: "ข่าวที่เผยแพร่",
    value: "256",
    change: "+23.1%",
    trend: "up",
    icon: Newspaper,
    description: "เดือนนี้",
  },
  {
    title: "ยอดเข้าชม",
    value: "1.2M",
    change: "-2.4%",
    trend: "down",
    icon: Eye,
    description: "เทียบกับสัปดาห์ที่แล้ว",
  },
]

const recentActivities = [
  { action: "ผู้ใช้ใหม่ลงทะเบียน", user: "john@example.com", time: "2 นาทีที่แล้ว" },
  { action: "อัปเดตผลการแข่งขัน", user: "admin", time: "15 นาทีที่แล้ว" },
  { action: "เผยแพร่บทความข่าว", user: "editor", time: "1 ชั่วโมงที่แล้ว" },
  { action: "เปลี่ยนบทบาทผู้ใช้", user: "admin", time: "2 ชั่วโมงที่แล้ว" },
  { action: "สำรองข้อมูลระบบเสร็จสิ้น", user: "system", time: "3 ชั่วโมงที่แล้ว" },
]

const topPages = [
  { page: "/matches", views: "45,234", percentage: 32 },
  { page: "/standings", views: "32,456", percentage: 23 },
  { page: "/players", views: "28,123", percentage: 20 },
  { page: "/news", views: "18,567", percentage: 13 },
  { page: "/ai-prediction", views: "16,890", percentage: 12 },
]

export default function AdminDashboard() {
  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl md:text-3xl font-bold">แดชบอร์ด</h1>
        <p className="text-muted-foreground">ยินดีต้อนรับกลับ ผู้ดูแลระบบ นี่คือสิ่งที่เกิดขึ้นวันนี้</p>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((stat) => (
          <Card key={stat.title}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="p-2 bg-primary/10 rounded-lg">
                  <stat.icon className="h-5 w-5 text-primary" />
                </div>
                <div className={`flex items-center gap-1 text-sm ${
                  stat.trend === "up" ? "text-green-500" : "text-red-500"
                }`}>
                  {stat.trend === "up" ? (
                    <ArrowUpRight className="h-4 w-4" />
                  ) : (
                    <ArrowDownRight className="h-4 w-4" />
                  )}
                  {stat.change}
                </div>
              </div>
              <div className="mt-4">
                <p className="text-2xl font-bold">{stat.value}</p>
                <p className="text-sm text-muted-foreground">{stat.title}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent Activity */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5" />
              กิจกรรมล่าสุด
            </CardTitle>
            <CardDescription>การดำเนินการล่าสุดบนแพลตฟอร์ม</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivities.map((activity, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between py-3 border-b border-border last:border-0"
                >
                  <div>
                    <p className="font-medium">{activity.action}</p>
                    <p className="text-sm text-muted-foreground">โดย {activity.user}</p>
                  </div>
                  <span className="text-sm text-muted-foreground">{activity.time}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Top Pages */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5" />
              หน้ายอดนิยม
            </CardTitle>
            <CardDescription>หน้าที่มีผู้เข้าชมมากที่สุดในสัปดาห์นี้</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {topPages.map((page, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="font-medium">{page.page}</span>
                    <span className="text-muted-foreground">{page.views}</span>
                  </div>
                  <div className="h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full"
                      style={{ width: `${page.percentage}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>การดำเนินการด่วน</CardTitle>
          <CardDescription>งานบริหารทั่วไป</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link href="/admin/users/add" className="p-4 rounded-lg border border-border hover:bg-muted transition-colors text-left">
              <Users className="h-6 w-6 text-primary mb-2" />
              <p className="font-medium">เพิ่มผู้ใช้</p>
              <p className="text-sm text-muted-foreground">สร้างบัญชีใหม่</p>
            </Link>
            <Link href="/admin/matches/add" className="p-4 rounded-lg border border-border hover:bg-muted transition-colors text-left">
              <Calendar className="h-6 w-6 text-primary mb-2" />
              <p className="font-medium">เพิ่มแมตช์</p>
              <p className="text-sm text-muted-foreground">กำหนดการแข่งขันใหม่</p>
            </Link>
            <Link href="/admin/news" className="p-4 rounded-lg border border-border hover:bg-muted transition-colors text-left">
              <Newspaper className="h-6 w-6 text-primary mb-2" />
              <p className="font-medium">เขียนข่าว</p>
              <p className="text-sm text-muted-foreground">เผยแพร่บทความ</p>
            </Link>
            <Link href="/admin/analytics" className="p-4 rounded-lg border border-border hover:bg-muted transition-colors text-left">
              <TrendingUp className="h-6 w-6 text-primary mb-2" />
              <p className="font-medium">ดูรายงาน</p>
              <p className="text-sm text-muted-foreground">ข้อมูลวิเคราะห์</p>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/community/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Search,
  MoreHorizontal,
  Eye,
  Trash2,
  Ban,
  Pin,
  Flag,
  MessageSquare,
  ThumbsUp,
  Clock,
  Filter,
  CheckCircle,
  XCircle,
  AlertTriangle,
} from "lucide-react"

// Mock data for posts
const mockPosts = [
  {
    id: 1,
    title: "แมนซิตี้ vs ลิเวอร์พูล จะเป็นเกมชี้ชะตาแชมป์ฤดูกาลนี้",
    author: { name: "สมชาย แฟนบอล", avatar: "/thai-man-football-fan.jpg" },
    category: "วิเคราะห์แมตช์",
    status: "published",
    likes: 245,
    comments: 89,
    reports: 0,
    isPinned: true,
    createdAt: "2026-01-29 14:30",
  },
  {
    id: 2,
    title: "ฮาแลนด์ vs ซาลาห์ - ศึกดาวซัลโวจะลงเอยที่ใคร?",
    author: { name: "วิชัย ลิเวอร์พูล", avatar: "/thai-man-liverpool-supporter.jpg" },
    category: "พูดคุยนักเตะ",
    status: "published",
    likes: 167,
    comments: 156,
    reports: 2,
    isPinned: false,
    createdAt: "2026-01-29 13:00",
  },
  {
    id: 3,
    title: "โพสต์ที่มีคำไม่เหมาะสม",
    author: { name: "ผู้ใช้ทั่วไป", avatar: "" },
    category: "ทั่วไป",
    status: "flagged",
    likes: 5,
    comments: 12,
    reports: 8,
    isPinned: false,
    createdAt: "2026-01-29 12:00",
  },
  {
    id: 4,
    title: "อาร์เซนอลจะคว้าตัว โอซิเมน มาเสริมทีมได้หรือไม่?",
    author: { name: "ประยุทธ์ ปืนใหญ่", avatar: "/thai-man-arsenal-fan.jpg" },
    category: "ข่าวย้ายทีม",
    status: "published",
    likes: 98,
    comments: 67,
    reports: 0,
    isPinned: false,
    createdAt: "2026-01-29 10:30",
  },
  {
    id: 5,
    title: "โพสต์สแปม ขายของ",
    author: { name: "สแปมเมอร์", avatar: "" },
    category: "ทั่วไป",
    status: "hidden",
    likes: 0,
    comments: 0,
    reports: 15,
    isPinned: false,
    createdAt: "2026-01-29 09:00",
  },
]

export default function AdminCommunityPage() {
  const [posts, setPosts] = useState(mockPosts)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedPost, setSelectedPost] = useState<typeof mockPosts[0] | null>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)

const filteredPosts = posts.filter((post) => {
    const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.author.name.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === "all" || post.status === statusFilter
    return matchesSearch && matchesStatus
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "published":
        return <Badge className="bg-green-500/10 text-green-500">เผยแพร่</Badge>
      case "flagged":
        return <Badge className="bg-amber-500/10 text-amber-500">ถูกรายงาน</Badge>
      case "hidden":
        return <Badge className="bg-red-500/10 text-red-500">ซ่อน</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const handleDelete = (postId: number) => {
    setPosts(posts.filter(p => p.id !== postId))
    setShowDeleteDialog(false)
    setSelectedPost(null)
  }

const handleTogglePin = (postId: number) => {
    setPosts(posts.map(p => p.id === postId ? { ...p, isPinned: !p.isPinned } : p))
  }

const handleToggleStatus = (postId: number, newStatus: string) => {
    setPosts(posts.map(p => p.id === postId ? { ...p, status: newStatus } : p))
  }

const stats = [
    { label: "โพสต์ทั้งหมด", value: posts.length, icon: MessageSquare },
    { label: "เผยแพร่", value: posts.filter(p => p.status === "published").length, icon: CheckCircle },
    { label: "ถูกรายงาน", value: posts.filter(p => p.status === "flagged").length, icon: AlertTriangle },
    { label: "ซ่อน", value: posts.filter(p => p.status === "hidden").length, icon: XCircle },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl md:text-3xl font-bold">จัดการคอมมูนิตี้</h1>
        <p className="text-muted-foreground">จัดการโพสต์และเนื้อหาในชุมชน</p>
      </div>

{/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat, i) => (
          <Card key={i}>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary/10 rounded-lg">
                  <stat.icon className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="text-2xl font-bold">{stat.value}</p>
                  <p className="text-sm text-muted-foreground">{stat.label}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="ค้นหาโพสต์..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue placeholder="กรองสถานะ" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">ทั้งหมด</SelectItem>
                <SelectItem value="published">เผยแพร่</SelectItem>
                <SelectItem value="flagged">ถูกรายงาน</SelectItem>
                <SelectItem value="hidden">ซ่อน</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Posts Table */}
      <Card>
        <CardHeader>
          <CardTitle>โพสต์ทั้งหมด</CardTitle>
          <CardDescription>รายการโพสต์ในระบบ</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {filteredPosts.map((post) => (
              <div
                key={post.id}
                className="flex items-start gap-4 p-4 rounded-lg border border-border hover:bg-muted/50 transition-colors"
              >
                <Avatar className="h-10 w-10">
                  <AvatarImage src={post.author.avatar || "/placeholder.svg"} />
                  <AvatarFallback>{post.author.name[0]}</AvatarFallback>
                </Avatar>

<div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <div className="flex items-center gap-2 flex-wrap">
                        <h3 className="font-semibold truncate">{post.title}</h3>
                        {post.isPinned && (
                          <Badge variant="secondary" className="gap-1">
                            <Pin className="h-3 w-3" />
                            ปักหมุด
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
                        <span>{post.author.name}</span>
                        <span>•</span>
                        <Badge variant="outline" className="text-xs">{post.category}</Badge>
                        <span>•</span>
                        <Clock className="h-3 w-3" />
                        <span>{post.createdAt}</span>
                      </div>
                    </div>
                    {getStatusBadge(post.status)}
                  </div>

<div className="flex items-center justify-between mt-3">
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <ThumbsUp className="h-4 w-4" />
                        {post.likes}
                      </span>
                      <span className="flex items-center gap-1">
                        <MessageSquare className="h-4 w-4" />
                        {post.comments}
                      </span>
                      {post.reports > 0 && (
                        <span className="flex items-center gap-1 text-red-500">
                          <Flag className="h-4 w-4" />
                          {post.reports} รายงาน
                        </span>
                      )}
                    </div>

<DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>
                          <Eye className="h-4 w-4 mr-2" />
                          ดูโพสต์
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleTogglePin(post.id)}>
                          <Pin className="h-4 w-4 mr-2" />
                          {post.isPinned ? "ยกเลิกปักหมุด" : "ปักหมุด"}
                        </DropdownMenuItem>
                        {post.status === "published" ? (
                          <DropdownMenuItem onClick={() => handleToggleStatus(post.id, "hidden")}>
                            <Ban className="h-4 w-4 mr-2" />
                            ซ่อนโพสต์
                          </DropdownMenuItem>
                        ) : (
                          <DropdownMenuItem onClick={() => handleToggleStatus(post.id, "published")}>
                            <CheckCircle className="h-4 w-4 mr-2" />
                            เผยแพร่โพสต์
                          </DropdownMenuItem>
                        )}
                        <DropdownMenuItem
                          className="text-red-500"
                          onClick={() => {
                            setSelectedPost(post)
                            setShowDeleteDialog(true)
                          }}
                        >
                          <Trash2 className="h-4 w-4 mr-2" />
                          ลบโพสต์
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
              </div>
            ))}

{filteredPosts.length === 0 && (
              <div className="text-center py-12">
                <MessageSquare className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground">ไม่พบโพสต์ที่ค้นหา</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Delete Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>ยืนยันการลบโพสต์</DialogTitle>
            <DialogDescription>
              คุณต้องการลบโพสต์ "{selectedPost?.title}" หรือไม่? การกระทำนี้ไม่สามารถย้อนกลับได้
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteDialog(false)}>
              ยกเลิก
            </Button>
            <Button variant="destructive" onClick={() => selectedPost && handleDelete(selectedPost.id)}>
              ลบโพสต์
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/community/reports/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import {
  Flag,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Clock,
  Eye,
  Ban,
  MessageSquare,
  User,
  Trash2,
} from "lucide-react"

// Mock data for reports
const mockReports = [
  {
    id: 1,
    postTitle: "โพสต์ที่มีคำไม่เหมาะสม",
    postId: 3,
    reportedBy: { name: "ผู้แจ้ง 1", avatar: "/thai-man-1.jpg" },
    author: { name: "ผู้ใช้ทั่วไป", avatar: "" },
    reason: "คำหยาบคาย",
    description: "โพสต์มีการใช้คำไม่สุภาพ",
    status: "pending",
    createdAt: "2026-01-29 14:00",
  },
  {
    id: 2,
    postTitle: "โพสต์ที่มีคำไม่เหมาะสม",
    postId: 3,
    reportedBy: { name: "ผู้แจ้ง 2", avatar: "/thai-man-2.jpg" },
    author: { name: "ผู้ใช้ทั่วไป", avatar: "" },
    reason: "เนื้อหาไม่เหมาะสม",
    description: "เนื้อหามีการใช้คำพูดดูถูกผู้อื่น",
    status: "pending",
    createdAt: "2026-01-29 13:30",
  },
  {
    id: 3,
    postTitle: "โพสต์สแปม ขายของ",
    postId: 5,
    reportedBy: { name: "ผู้แจ้ง 3", avatar: "/thai-man-3.jpg" },
    author: { name: "สแปมเมอร์", avatar: "" },
    reason: "สแปม/โฆษณา",
    description: "โพสต์ขายสินค้าที่ไม่เกี่ยวข้องกับฟุตบอล",
    status: "resolved",
    resolvedAction: "ลบโพสต์",
    createdAt: "2026-01-29 10:00",
  },
  {
    id: 4,
    postTitle: "ความเห็นที่ไม่เหมาะสม",
    postId: 2,
    reportedBy: { name: "ผู้แจ้ง 4", avatar: "/thai-man-4.jpg" },
    author: { name: "ผู้ใช้ A", avatar: "" },
    reason: "คำหยาบคาย",
    description: "ความเห็นมีคำหยาบคายหลายคำ",
    status: "dismissed",
    createdAt: "2026-01-29 09:00",
  },
]

export default function AdminReportsPage() {
  const [reports, setReports] = useState(mockReports)
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedReport, setSelectedReport] = useState<typeof mockReports[0] | null>(null)
  const [showActionDialog, setShowActionDialog] = useState(false)
  const [actionType, setActionType] = useState<"resolve" | "dismiss" | null>(null)
  const [actionNote, setActionNote] = useState("")

const filteredReports = reports.filter((report) => {
    return statusFilter === "all" || report.status === statusFilter
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return <Badge className="bg-amber-500/10 text-amber-500">รอตรวจสอบ</Badge>
      case "resolved":
        return <Badge className="bg-green-500/10 text-green-500">ดำเนินการแล้ว</Badge>
      case "dismissed":
        return <Badge className="bg-zinc-500/10 text-zinc-500">ยกเลิก</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const handleAction = (type: "resolve" | "dismiss", report: typeof mockReports[0]) => {
    setSelectedReport(report)
    setActionType(type)
    setShowActionDialog(true)
    setActionNote("")
  }

const confirmAction = () => {
    if (!selectedReport || !actionType) return
    
    setReports(reports.map(r => 
      r.id === selectedReport.id 
        ? { ...r, status: actionType === "resolve" ? "resolved" : "dismissed" }
        : r
    ))
    setShowActionDialog(false)
    setSelectedReport(null)
    setActionType(null)
    setActionNote("")
  }

const stats = [
    { label: "รายงานทั้งหมด", value: reports.length, icon: Flag },
    { label: "รอตรวจสอบ", value: reports.filter(r => r.status === "pending").length, icon: Clock },
    { label: "ดำเนินการแล้ว", value: reports.filter(r => r.status === "resolved").length, icon: CheckCircle },
    { label: "ยกเลิก", value: reports.filter(r => r.status === "dismissed").length, icon: XCircle },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl md:text-3xl font-bold">รายงานจากผู้ใช้</h1>
        <p className="text-muted-foreground">จัดการรายงานเนื้อหาที่ไม่เหมาะสม</p>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center gap-4">
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="กรองสถานะ" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">ทั้งหมด</SelectItem>
                <SelectItem value="pending">รอตรวจสอบ</SelectItem>
                <SelectItem value="resolved">ดำเนินการแล้ว</SelectItem>
                <SelectItem value="dismissed">ยกเลิก</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Reports List */}
      <Card>
        <CardHeader>
          <CardTitle>รายงานทั้งหมด</CardTitle>
          <CardDescription>รายการรายงานจากผู้ใช้</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {filteredReports.map((report) => (
              <div
                key={report.id}
                className="p-4 rounded-lg border border-border hover:bg-muted/50 transition-colors"
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 space-y-3">
                    {/* Report Header */}
                    <div className="flex items-start justify-between">
                      <div>
                        <div className="flex items-center gap-2 mb-1">
                          <Badge variant="outline" className="text-xs">
                            <Flag className="h-3 w-3 mr-1" />
                            {report.reason}
                          </Badge>
                          {getStatusBadge(report.status)}
                        </div>
                        <h3 className="font-semibold">{report.postTitle}</h3>
                      </div>
                    </div>

{/* Report Info */}
                    <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                      <div className="flex items-center gap-2">
                        <User className="h-4 w-4" />
                        <span>แจ้งโดย: {report.reportedBy.name}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MessageSquare className="h-4 w-4" />
                        <span>ผู้โพสต์: {report.author.name}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Clock className="h-4 w-4" />
                        <span>{report.createdAt}</span>
                      </div>
                    </div>

{/* Description */}
                    <p className="text-sm bg-muted/50 p-3 rounded-lg">
                      <span className="font-medium">รายละเอียด: </span>
                      {report.description}
                    </p>

{/* Actions */}
                    {report.status === "pending" && (
                      <div className="flex items-center gap-2">
                        <Button variant="outline" size="sm" className="gap-1 bg-transparent">
                          <Eye className="h-4 w-4" />
                          ดูโพสต์
                        </Button>
                        <Button 
                          size="sm" 
                          className="gap-1"
                          onClick={() => handleAction("resolve", report)}
                        >
                          <CheckCircle className="h-4 w-4" />
                          ดำเนินการ
                        </Button>
                        <Button 
                          variant="ghost" 
                          size="sm" 
                          className="gap-1"
                          onClick={() => handleAction("dismiss", report)}
                        >
                          <XCircle className="h-4 w-4" />
                          ยกเลิก
                        </Button>
                      </div>
                    )}

{report.status === "resolved" && (
                      <Badge variant="secondary" className="text-xs">
                        การดำเนินการ: {report.resolvedAction || "ลบโพสต์"}
                      </Badge>
                    )}
                  </div>
                </div>
              </div>
            ))}

{filteredReports.length === 0 && (
              <div className="text-center py-12">
                <Flag className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground">ไม่มีรายงานที่ตรงกับตัวกรอง</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Action Dialog */}
      <Dialog open={showActionDialog} onOpenChange={setShowActionDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {actionType === "resolve" ? "ดำเนินการกับรายงาน" : "ยกเลิกรายงาน"}
            </DialogTitle>
            <DialogDescription>
              {actionType === "resolve" 
                ? "เลือกการดำเนินการที่ต้องการทำกับโพสต์นี้"
                : "ยืนยันการยกเลิกรายงานนี้"
              }
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            {actionType === "resolve" && (
              <div className="grid grid-cols-2 gap-2">
                <Button variant="outline" className="gap-2 h-auto py-3 flex-col bg-transparent">
                  <Ban className="h-5 w-5 text-amber-500" />
                  <span>ซ่อนโพสต์</span>
                </Button>
                <Button variant="outline" className="gap-2 h-auto py-3 flex-col bg-transparent">
                  <Trash2 className="h-5 w-5 text-red-500" />
                  <span>ลบโพสต์</span>
                </Button>
                <Button variant="outline" className="gap-2 h-auto py-3 flex-col bg-transparent">
                  <AlertTriangle className="h-5 w-5 text-amber-500" />
                  <span>เตือนผู้ใช้</span>
                </Button>
                <Button variant="outline" className="gap-2 h-auto py-3 flex-col bg-transparent">
                  <Ban className="h-5 w-5 text-red-500" />
                  <span>แบนผู้ใช้</span>
                </Button>
              </div>
            )}

<div>
              <label className="text-sm font-medium">บันทึก (ไม่บังคับ)</label>
              <Textarea
                placeholder="เพิ่มบันทึกสำหรับการดำเนินการนี้..."
                value={actionNote}
                onChange={(e) => setActionNote(e.target.value)}
                className="mt-1.5"
              />
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowActionDialog(false)}>
              ยกเลิก
            </Button>
            <Button onClick={confirmAction}>
              ยืนยัน
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/community/banned-words/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import {
  Plus,
  Search,
  Trash2,
  Edit,
  Shield,
  AlertTriangle,
  Ban,
  Filter,
  Upload,
  Download,
  Settings,
} from "lucide-react"

// Mock data for banned words
const initialBannedWords = [
  { id: 1, word: "คำหยาบ1", category: "คำหยาบคาย", action: "block", isActive: true, hitCount: 156 },
  { id: 2, word: "คำหยาบ2", category: "คำหยาบคาย", action: "block", isActive: true, hitCount: 89 },
  { id: 3, word: "สแปม", category: "สแปม", action: "flag", isActive: true, hitCount: 234 },
  { id: 4, word: "ลิงค์ขาย", category: "โฆษณา", action: "flag", isActive: true, hitCount: 45 },
  { id: 5, word: "คำดูถูก", category: "ดูถูก/เหยียด", action: "block", isActive: true, hitCount: 67 },
  { id: 6, word: "คำไม่เหมาะสม", category: "คำหยาบคาย", action: "replace", replacement: "***", isActive: true, hitCount: 123 },
  { id: 7, word: "สแปมเมอร์", category: "สแปม", action: "block", isActive: false, hitCount: 12 },
]

const categories = [
  { value: "คำหยาบคาย", label: "คำหยาบคาย", color: "bg-red-500/10 text-red-500" },
  { value: "สแปม", label: "สแปม", color: "bg-amber-500/10 text-amber-500" },
  { value: "โฆษณา", label: "โฆษณา", color: "bg-blue-500/10 text-blue-500" },
  { value: "ดูถูก/เหยียด", label: "ดูถูก/เหยียด", color: "bg-purple-500/10 text-purple-500" },
]

const actions = [
  { value: "block", label: "บล็อกโพสต์", description: "ไม่อนุญาตให้โพสต์" },
  { value: "flag", label: "ตั้งค่าสถานะ", description: "โพสต์ได้แต่ถูกตรวจสอบ" },
  { value: "replace", label: "แทนที่คำ", description: "แทนที่ด้วยข้อความอื่น" },
]

export default function AdminBannedWordsPage() {
  const [bannedWords, setBannedWords] = useState(initialBannedWords)
  const [searchQuery, setSearchQuery] = useState("")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [selectedWord, setSelectedWord] = useState<typeof initialBannedWords[0] | null>(null)
  const [showImportDialog, setShowImportDialog] = useState(false)

// Form state
  const [newWord, setNewWord] = useState("")
  const [newCategory, setNewCategory] = useState("")
  const [newAction, setNewAction] = useState("block")
  const [newReplacement, setNewReplacement] = useState("")
  const [bulkWords, setBulkWords] = useState("")

const filteredWords = bannedWords.filter((item) => {
    const matchesSearch = item.word.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = categoryFilter === "all" || item.category === categoryFilter
    return matchesSearch && matchesCategory
  })

const getCategoryBadge = (category: string) => {
    const cat = categories.find(c => c.value === category)
    return <Badge className={cat?.color || "bg-zinc-500/10 text-zinc-500"}>{category}</Badge>
  }

const getActionBadge = (action: string) => {
    switch (action) {
      case "block":
        return <Badge className="bg-red-500/10 text-red-500">บล็อก</Badge>
      case "flag":
        return <Badge className="bg-amber-500/10 text-amber-500">ตรวจสอบ</Badge>
      case "replace":
        return <Badge className="bg-blue-500/10 text-blue-500">แทนที่</Badge>
      default:
        return <Badge variant="outline">{action}</Badge>
    }
  }

const handleAddWord = () => {
    if (!newWord.trim() || !newCategory) return

const newItem = {
      id: Date.now(),
      word: newWord.trim(),
      category: newCategory,
      action: newAction,
      replacement: newAction === "replace" ? newReplacement : undefined,
      isActive: true,
      hitCount: 0,
    }

setBannedWords([newItem, ...bannedWords])
    setNewWord("")
    setNewCategory("")
    setNewAction("block")
    setNewReplacement("")
    setShowAddDialog(false)
  }

const handleBulkImport = () => {
    const words = bulkWords.split("\n").filter(w => w.trim())
    const newItems = words.map((word, index) => ({
      id: Date.now() + index,
      word: word.trim(),
      category: newCategory || "คำหยาบคาย",
      action: newAction,
      isActive: true,
      hitCount: 0,
    }))

setBannedWords([...newItems, ...bannedWords])
    setBulkWords("")
    setShowImportDialog(false)
  }

const handleDelete = () => {
    if (!selectedWord) return
    setBannedWords(bannedWords.filter(w => w.id !== selectedWord.id))
    setShowDeleteDialog(false)
    setSelectedWord(null)
  }

const handleToggleActive = (id: number) => {
    setBannedWords(bannedWords.map(w => 
      w.id === id ? { ...w, isActive: !w.isActive } : w
    ))
  }

const stats = [
    { label: "คำต้องห้ามทั้งหมด", value: bannedWords.length, icon: Shield },
    { label: "เปิดใช้งาน", value: bannedWords.filter(w => w.isActive).length, icon: Ban },
    { label: "ถูกบล็อกทั้งหมด", value: bannedWords.reduce((sum, w) => sum + w.hitCount, 0), icon: AlertTriangle },
  ]

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">คำต้องห้าม</h1>
          <p className="text-muted-foreground">จัดการคำหยาบและคำต้องห้ามในระบบ</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="gap-2 bg-transparent" onClick={() => setShowImportDialog(true)}>
            <Upload className="h-4 w-4" />
            นำเข้า
          </Button>
          <Button variant="outline" className="gap-2 bg-transparent">
            <Download className="h-4 w-4" />
            ส่งออก
          </Button>
          <Button className="gap-2" onClick={() => setShowAddDialog(true)}>
            <Plus className="h-4 w-4" />
            เพิ่มคำ
          </Button>
        </div>
      </div>

{/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {stats.map((stat, i) => (
          <Card key={i}>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary/10 rounded-lg">
                  <stat.icon className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="text-2xl font-bold">{stat.value}</p>
                  <p className="text-sm text-muted-foreground">{stat.label}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="ค้นหาคำ..."
                className="pl-9"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select value={categoryFilter} onValueChange={setCategoryFilter}>
              <SelectTrigger className="w-full sm:w-[180px]">
                <Filter className="h-4 w-4 mr-2" />
                <SelectValue placeholder="หมวดหมู่" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">ทั้งหมด</SelectItem>
                {categories.map((cat) => (
                  <SelectItem key={cat.value} value={cat.value}>{cat.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Words List */}
      <Card>
        <CardHeader>
          <CardTitle>รายการคำต้องห้าม</CardTitle>
          <CardDescription>คำที่ถูกบล็อกหรือกรองในระบบ</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {filteredWords.map((item) => (
              <div
                key={item.id}
                className={`flex items-center justify-between p-4 rounded-lg border transition-colors ${
                  item.isActive ? "border-border hover:bg-muted/50" : "border-dashed border-muted bg-muted/30"
                }`}
              >
                <div className="flex items-center gap-4">
                  <Switch
                    checked={item.isActive}
                    onCheckedChange={() => handleToggleActive(item.id)}
                  />
                  <div>
                    <div className="flex items-center gap-2">
                      <span className={`font-medium ${!item.isActive && "text-muted-foreground line-through"}`}>
                        {item.word}
                      </span>
                      {getCategoryBadge(item.category)}
                      {getActionBadge(item.action)}
                      {item.replacement && (
                        <span className="text-sm text-muted-foreground">
                          → {item.replacement}
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">
                      ถูกบล็อก {item.hitCount} ครั้ง
                    </p>
                  </div>
                </div>

<div className="flex items-center gap-2">
                  <Button variant="ghost" size="icon">
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="text-red-500 hover:text-red-600"
                    onClick={() => {
                      setSelectedWord(item)
                      setShowDeleteDialog(true)
                    }}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}

{filteredWords.length === 0 && (
              <div className="text-center py-12">
                <Shield className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground">ไม่พบคำที่ค้นหา</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Add Word Dialog */}
      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>เพิ่มคำต้องห้าม</DialogTitle>
            <DialogDescription>
              เพิ่มคำที่ต้องการบล็อกหรือกรองในระบบ
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div>
              <Label>คำที่ต้องการเพิ่ม</Label>
              <Input
                placeholder="พิมพ์คำที่ต้องการบล็อก..."
                value={newWord}
                onChange={(e) => setNewWord(e.target.value)}
                className="mt-1.5"
              />
            </div>

<div>
              <Label>หมวดหมู่</Label>
              <Select value={newCategory} onValueChange={setNewCategory}>
                <SelectTrigger className="mt-1.5">
                  <SelectValue placeholder="เลือกหมวดหมู่" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((cat) => (
                    <SelectItem key={cat.value} value={cat.value}>{cat.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div>
              <Label>การดำเนินการ</Label>
              <Select value={newAction} onValueChange={setNewAction}>
                <SelectTrigger className="mt-1.5">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {actions.map((action) => (
                    <SelectItem key={action.value} value={action.value}>
                      <div>
                        <div className="font-medium">{action.label}</div>
                        <div className="text-xs text-muted-foreground">{action.description}</div>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{newAction === "replace" && (
              <div>
                <Label>แทนที่ด้วย</Label>
                <Input
                  placeholder="เช่น *** หรือ [ถูกลบ]"
                  value={newReplacement}
                  onChange={(e) => setNewReplacement(e.target.value)}
                  className="mt-1.5"
                />
              </div>
            )}
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
              ยกเลิก
            </Button>
            <Button onClick={handleAddWord}>
              เพิ่มคำ
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Import Dialog */}
      <Dialog open={showImportDialog} onOpenChange={setShowImportDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>นำเข้าคำต้องห้าม</DialogTitle>
            <DialogDescription>
              นำเข้าหลายคำพร้อมกัน (แต่ละคำขึ้นบรรทัดใหม่)
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div>
              <Label>หมวดหมู่</Label>
              <Select value={newCategory} onValueChange={setNewCategory}>
                <SelectTrigger className="mt-1.5">
                  <SelectValue placeholder="เลือกหมวดหมู่" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((cat) => (
                    <SelectItem key={cat.value} value={cat.value}>{cat.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div>
              <Label>รายการคำ</Label>
              <Textarea
                placeholder="คำที่ 1
คำที่ 2
คำที่ 3"
                value={bulkWords}
                onChange={(e) => setBulkWords(e.target.value)}
                className="mt-1.5 min-h-[150px]"
              />
              <p className="text-xs text-muted-foreground mt-1">
                {bulkWords.split("\n").filter(w => w.trim()).length} คำ
              </p>
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowImportDialog(false)}>
              ยกเลิก
            </Button>
            <Button onClick={handleBulkImport}>
              นำเข้า
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Delete Dialog */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>ยืนยันการลบ</AlertDialogTitle>
            <AlertDialogDescription>
              คุณต้องการลบคำ "{selectedWord?.word}" ออกจากรายการหรือไม่?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
              ลบ
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/community/settings/page.tsx" isMerged="true"
"use client"

export default function AdminCommunitySettingsPage() {
  // General settings
  const [allowNewPosts, setAllowNewPosts] = useState(true)
  const [allowComments, setAllowComments] = useState(true)
  const [requireApproval, setRequireApproval] = useState(false)
  const [allowAnonymous, setAllowAnonymous] = useState(false)

// Post limits
  const [maxPostsPerDay, setMaxPostsPerDay] = useState("10")
  const [maxCommentsPerHour, setMaxCommentsPerHour] = useState("20")
  const [minAccountAge, setMinAccountAge] = useState("0")

// Content moderation
  const [autoModeration, setAutoModeration] = useState(true)
  const [strictMode, setStrictMode] = useState(false)
  const [hideOnReport, setHideOnReport] = useState("5")

// Notifications
  const [notifyOnReport, setNotifyOnReport] = useState(true)
  const [notifyOnFlag, setNotifyOnFlag] = useState(true)
  const [notifyEmail, setNotifyEmail] = useState("admin@example.com")

// Spam protection
  const [enableCaptcha, setEnableCaptcha] = useState(true)
  const [linkLimit, setLinkLimit] = useState("2")
  const [duplicateCheck, setDuplicateCheck] = useState(true)

const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsSaving(false)
  }

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* General Settings */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              ตั้งค่าทั่วไป
            </CardTitle>
            <CardDescription>การตั้งค่าพื้นฐานสำหรับคอมมูนิตี้</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>อนุญาตให้สร้างโพสต์ใหม่</Label>
                <p className="text-sm text-muted-foreground">ผู้ใช้สามารถสร้างกระทู้ใหม่ได้</p>
              </div>
              <Switch checked={allowNewPosts} onCheckedChange={setAllowNewPosts} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>อนุญาตให้แสดงความคิดเห็น</Label>
                <p className="text-sm text-muted-foreground">ผู้ใช้สามารถแสดงความคิดเห็นได้</p>
              </div>
              <Switch checked={allowComments} onCheckedChange={setAllowComments} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>ต้องอนุมัติก่อนเผยแพร่</Label>
                <p className="text-sm text-muted-foreground">โพสต์ต้องผ่านการอนุมัติจาก Admin</p>
              </div>
              <Switch checked={requireApproval} onCheckedChange={setRequireApproval} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>อนุญาตโพสต์แบบไม่ระบุตัวตน</Label>
                <p className="text-sm text-muted-foreground">ผู้ใช้สามารถโพสต์โดยไม่แสดงชื่อ</p>
              </div>
              <Switch checked={allowAnonymous} onCheckedChange={setAllowAnonymous} />
            </div>
          </CardContent>
        </Card>

{/* Post Limits */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              ข้อจำกัดการโพสต์
            </CardTitle>
            <CardDescription>กำหนดข้อจำกัดเพื่อป้องกันสแปม</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div>
              <Label>จำนวนโพสต์สูงสุดต่อวัน</Label>
              <Input
                type="number"
                value={maxPostsPerDay}
                onChange={(e) => setMaxPostsPerDay(e.target.value)}
                className="mt-1.5"
              />
              <p className="text-xs text-muted-foreground mt-1">0 = ไม่จำกัด</p>
            </div>

<div>
              <Label>จำนวนความคิดเห็นสูงสุดต่อชั่วโมง</Label>
              <Input
                type="number"
                value={maxCommentsPerHour}
                onChange={(e) => setMaxCommentsPerHour(e.target.value)}
                className="mt-1.5"
              />
              <p className="text-xs text-muted-foreground mt-1">0 = ไม่จำกัด</p>
            </div>

<div>
              <Label>อายุบัญชีขั้นต่ำ (วัน)</Label>
              <Input
                type="number"
                value={minAccountAge}
                onChange={(e) => setMinAccountAge(e.target.value)}
                className="mt-1.5"
              />
              <p className="text-xs text-muted-foreground mt-1">
                บัญชีที่สร้างใหม่ต้องรออายุบัญชีถึงจำนวนวันที่กำหนดก่อนโพสต์ได้
              </p>
            </div>
          </CardContent>
        </Card>

{/* Content Moderation */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              การกรองเนื้อหา
            </CardTitle>
            <CardDescription>ตั้งค่าระบบกรองเนื้อหาอัตโนมัติ</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>เปิดใช้การกรองอัตโนมัติ</Label>
                <p className="text-sm text-muted-foreground">กรองคำหยาบและเนื้อหาไม่เหมาะสม</p>
              </div>
              <Switch checked={autoModeration} onCheckedChange={setAutoModeration} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>โหมดเข้มงวด</Label>
                <p className="text-sm text-muted-foreground">บล็อกเนื้อหาที่น่าสงสัยทั้งหมด</p>
              </div>
              <Switch checked={strictMode} onCheckedChange={setStrictMode} />
            </div>

<div>
              <Label>ซ่อนโพสต์เมื่อถูกรายงาน (ครั้ง)</Label>
              <Input
                type="number"
                value={hideOnReport}
                onChange={(e) => setHideOnReport(e.target.value)}
                className="mt-1.5"
              />
              <p className="text-xs text-muted-foreground mt-1">
                โพสต์จะถูกซ่อนอัตโนมัติเมื่อถูกรายงานถึงจำนวนที่กำหนด
              </p>
            </div>
          </CardContent>
        </Card>

{/* Notifications */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5" />
              การแจ้งเตือน
            </CardTitle>
            <CardDescription>ตั้งค่าการแจ้งเตือนสำหรับ Admin</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>แจ้งเตือนเมื่อมีการรายงาน</Label>
                <p className="text-sm text-muted-foreground">รับการแจ้งเตือนเมื่อมีรายงานใหม่</p>
              </div>
              <Switch checked={notifyOnReport} onCheckedChange={setNotifyOnReport} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>แจ้งเตือนเมื่อมีการตั้งค่าสถานะ</Label>
                <p className="text-sm text-muted-foreground">รับการแจ้งเตือนเมื่อระบบตรวจพบเนื้อหาน่าสงสัย</p>
              </div>
              <Switch checked={notifyOnFlag} onCheckedChange={setNotifyOnFlag} />
            </div>

<div>
              <Label>อีเมลสำหรับรับการแจ้งเตือน</Label>
              <Input
                type="email"
                value={notifyEmail}
                onChange={(e) => setNotifyEmail(e.target.value)}
                className="mt-1.5"
              />
            </div>
          </CardContent>
        </Card>

{/* Spam Protection */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Ban className="h-5 w-5" />
              ป้องกันสแปม
            </CardTitle>
            <CardDescription>ตั้งค่าการป้องกันสแปมและบอท</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="space-y-0.5">
                  <Label>เปิดใช้ CAPTCHA</Label>
                  <p className="text-sm text-muted-foreground">ต้องยืนยันว่าไม่ใช่บอทก่อนโพสต์</p>
                </div>
                <Switch checked={enableCaptcha} onCheckedChange={setEnableCaptcha} />
              </div>

<div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="space-y-0.5">
                  <Label>ตรวจสอบโพสต์ซ้ำ</Label>
                  <p className="text-sm text-muted-foreground">บล็อกโพสต์ที่มีเนื้อหาซ้ำกัน</p>
                </div>
                <Switch checked={duplicateCheck} onCheckedChange={setDuplicateCheck} />
              </div>

<div className="p-4 rounded-lg border">
                <Label>จำกัดลิงก์ต่อโพสต์</Label>
                <Input
                  type="number"
                  value={linkLimit}
                  onChange={(e) => setLinkLimit(e.target.value)}
                  className="mt-1.5"
                />
                <p className="text-xs text-muted-foreground mt-1">0 = ไม่อนุญาตลิงก์</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/sportmonks.ts" isMerged="true"
// API-Football Integration
// Documentation: https://www.api-football.com/documentation-v3
// Premier League ID = 39 (English Premier League in API-Football)

const API_BASE = "https://v3.football.api-sports.io"
const PREMIER_LEAGUE_ID = 39
const CURRENT_SEASON = 2024 // 2024-2025 season

// For backwards compatibility
const CURRENT_SEASON_ID = CURRENT_SEASON

// Team name translations
const teamNamesThai: Record<string, string> = {
  "Manchester City": "แมนเชสเตอร์ ซิตี้",
  Arsenal: "อาร์เซนอล",
  Liverpool: "ลิเวอร์พูล",
  "Aston Villa": "แอสตัน วิลล่า",
  "Tottenham Hotspur": "ท็อตแนม ฮอทสเปอร์",
  Tottenham: "ท็อตแนม ฮอทสเปอร์",
  Chelsea: "เชลซี",
  "Newcastle United": "นิวคาสเซิล ยูไนเต็ด",
  Newcastle: "นิวคาสเซิล ยูไนเต็ด",
  "Manchester United": "แมนเชสเตอร์ ยูไนเต็ด",
  "West Ham United": "เวสต์แฮม ยูไนเต็ด",
  "West Ham": "เวสต์แฮม ยูไนเต็ด",
  "Crystal Palace": "คริสตัล พาเลซ",
  "Brighton & Hove Albion": "ไบรท์ตัน",
  Brighton: "ไบรท์ตัน",
  "AFC Bournemouth": "บอร์นมัธ",
  Bournemouth: "บอร์นมัธ",
  Fulham: "ฟูแล่ม",
  "Wolverhampton Wanderers": "วูล์ฟแฮมป์ตัน",
  Wolves: "วูล์ฟแฮมป์ตัน",
  Everton: "เอฟเวอร์ตัน",
  "Brentford FC": "เบรนท์ฟอร์ด",
  Brentford: "เบรนท์ฟอร์ด",
  "Nottingham Forest": "น็อตติงแฮม ฟอเรสต์",
  "Leicester City": "เลสเตอร์ ซิตี้",
  Leicester: "เลสเตอร์ ซิตี้",
  "Ipswich Town": "อิปสวิช ทาวน์",
  Ipswich: "อิปสวิช ทาวน์",
  Southampton: "เซาแธมป์ตัน",
}

export function translateTeamName(name: string): string {
  if (!name) return name
  if (teamNamesThai[name]) return teamNamesThai[name]

for (const [key, value] of Object.entries(teamNamesThai)) {
    if (name.toLowerCase().includes(key.toLowerCase())) {
      return value
    }
  }
  return name
}

async function fetchFromAPI(endpoint: string) {
  const apiKey = process.env.API_FOOTBALL_KEY

if (!apiKey) {
    throw new Error(
      "API_FOOTBALL_KEY is not configured. Please add your API-Football key to environment variables. Get your key from https://www.api-football.com/"
    )
  }

const url = `${API_BASE}${endpoint}`

const response = await fetch(url, {
    headers: {
      "x-apisports-key": apiKey,
    },
    next: { revalidate: 300 }, // Cache for 5 minutes
  })

if (!response.ok) {
    const errorText = await response.text()
    console.error("API-Football Error:", errorText)
    throw new Error(`API-Football error: ${response.status}`)
  }

const data = await response.json()

// Check for API errors in response
  if (data.errors && Object.keys(data.errors).length > 0) {
    console.error("API-Football Error:", data.errors)
    throw new Error(`API-Football error: ${JSON.stringify(data.errors)}`)
  }

return data
}

// Get Premier League standings
export async function getStandings(season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/standings?league=${PREMIER_LEAGUE_ID}&season=${season}`)

if (!data.response || data.response.length === 0) {
    return []
  }

// Transform to match expected format
  const standings = data.response[0]?.league?.standings?.[0] || []

return standings.map((team: any) => ({
    position: team.rank,
    participant_id: team.team.id,
    participant: {
      id: team.team.id,
      name: team.team.name,
      image_path: team.team.logo,
    },
    points: team.points,
    games_played: team.all.played,
    won: team.all.win,
    draw: team.all.draw,
    lost: team.all.lose,
    goals_for: team.all.goals.for,
    goals_against: team.all.goals.against,
    goal_difference: team.goalsDiff,
    form: team.form,
    description: team.description,
  }))
}

// Get fixtures (matches)
export async function getFixtures(
  params: {
    seasonId?: number
    round?: string
    from?: string
    to?: string
  } = {}
) {
  const season = params.seasonId || CURRENT_SEASON
  let endpoint = `/fixtures?league=${PREMIER_LEAGUE_ID}&season=${season}`

if (params.round) {
    endpoint += `&round=Regular Season - ${params.round}`
  }
  if (params.from) {
    endpoint += `&from=${params.from}`
  }
  if (params.to) {
    endpoint += `&to=${params.to}`
  }

const data = await fetchFromAPI(endpoint)

// Transform to match expected format
  return (data.response || []).map((fixture: any) => ({
    id: fixture.fixture.id,
    starting_at: fixture.fixture.date,
    state: {
      id: mapStatusToStateId(fixture.fixture.status.short),
      name: fixture.fixture.status.long,
      short_name: fixture.fixture.status.short,
    },
    round: {
      id: fixture.league.round,
      name: fixture.league.round,
    },
    venue: fixture.fixture.venue
      ? {
          id: fixture.fixture.venue.id,
          name: fixture.fixture.venue.name,
          city: fixture.fixture.venue.city,
        }
      : null,
    participants: [
      {
        id: fixture.teams.home.id,
        name: fixture.teams.home.name,
        image_path: fixture.teams.home.logo,
        meta: { location: "home" },
      },
      {
        id: fixture.teams.away.id,
        name: fixture.teams.away.name,
        image_path: fixture.teams.away.logo,
        meta: { location: "away" },
      },
    ],
    scores: [
      {
        participant_id: fixture.teams.home.id,
        score: { goals: fixture.goals.home },
      },
      {
        participant_id: fixture.teams.away.id,
        score: { goals: fixture.goals.away },
      },
    ],
  }))
}

// Map API-Football status to state ID
function mapStatusToStateId(status: string): number {
  const statusMap: Record<string, number> = {
    TBD: 21,
    NS: 1,
    "1H": 13,
    HT: 14,
    "2H": 15,
    ET: 16,
    BT: 17,
    P: 18,
    SUSP: 11,
    INT: 12,
    FT: 3,
    AET: 4,
    PEN: 5,
    PST: 6,
    CANC: 7,
    ABD: 8,
    AWD: 9,
    WO: 10,
    LIVE: 2,
  }
  return statusMap[status] || 1
}

// Get all teams in Premier League
export async function getTeams(season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/teams?league=${PREMIER_LEAGUE_ID}&season=${season}`)

return (data.response || []).map((item: any) => ({
    id: item.team.id,
    name: item.team.name,
    image_path: item.team.logo,
    venue: item.venue
      ? {
          id: item.venue.id,
          name: item.venue.name,
          city: item.venue.city,
          capacity: item.venue.capacity,
          image_path: item.venue.image,
        }
      : null,
  }))
}

// Get top scorers
export async function getTopScorers(season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/players/topscorers?league=${PREMIER_LEAGUE_ID}&season=${season}`)

return (data.response || []).map((item: any, index: number) => ({
    position: index + 1,
    player: {
      id: item.player.id,
      name: item.player.name,
      image_path: item.player.photo,
      nationality: item.player.nationality,
    },
    participant: {
      id: item.statistics[0]?.team?.id,
      name: item.statistics[0]?.team?.name,
      image_path: item.statistics[0]?.team?.logo,
    },
    total: item.statistics[0]?.goals?.total || 0,
    type_id: 208,
  }))
}

// Get top assists
export async function getTopAssists(season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/players/topassists?league=${PREMIER_LEAGUE_ID}&season=${season}`)

// Get team statistics for clean sheets
export async function getTopCleanSheets(season: number = CURRENT_SEASON) {
  // Get standings which include team statistics
  const standingsData = await getStandings(season)

// For clean sheets, we need to get team statistics
  const teamsWithCleanSheets = await Promise.all(
    standingsData.slice(0, 10).map(async (team: any) => {
      try {
        const stats = await fetchFromAPI(
          `/teams/statistics?league=${PREMIER_LEAGUE_ID}&season=${season}&team=${team.participant_id}`
        )
        return {
          teamId: team.participant_id,
          teamName: team.participant?.name || "",
          teamLogo: team.participant?.image_path || "",
          cleanSheets: stats.response?.clean_sheet?.total || 0,
        }
      } catch {
        return {
          teamId: team.participant_id,
          teamName: team.participant?.name || "",
          teamLogo: team.participant?.image_path || "",
          cleanSheets: 0,
        }
      }
    })
  )

return teamsWithCleanSheets.sort((a, b) => b.cleanSheets - a.cleanSheets)
}

// Get fixture predictions
export async function getPredictions(fixtureId: string) {
  const data = await fetchFromAPI(`/predictions?fixture=${fixtureId}`)

if (!data.response || data.response.length === 0) {
    return null
  }

const prediction = data.response[0]
  return {
    predictions: prediction.predictions,
    teams: prediction.teams,
    comparison: prediction.comparison,
    h2h: prediction.h2h,
  }
}

// Get head to head
export async function getHeadToHead(team1: string, team2: string) {
  const data = await fetchFromAPI(`/fixtures/headtohead?h2h=${team1}-${team2}&last=10`)

return (data.response || []).map((fixture: any) => ({
    id: fixture.fixture.id,
    starting_at: fixture.fixture.date,
    participants: [
      {
        id: fixture.teams.home.id,
        name: fixture.teams.home.name,
        image_path: fixture.teams.home.logo,
        meta: { location: "home" },
      },
      {
        id: fixture.teams.away.id,
        name: fixture.teams.away.name,
        image_path: fixture.teams.away.logo,
        meta: { location: "away" },
      },
    ],
    scores: [
      {
        participant_id: fixture.teams.home.id,
        score: { goals: fixture.goals.home },
      },
      {
        participant_id: fixture.teams.away.id,
        score: { goals: fixture.goals.away },
      },
    ],
  }))
}

// Get team statistics
export async function getTeamStats(teamId: string, season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/teams/statistics?league=${PREMIER_LEAGUE_ID}&season=${season}&team=${teamId}`)
  return data.response || null
}

// Get rounds
export async function getRounds(season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/fixtures/rounds?league=${PREMIER_LEAGUE_ID}&season=${season}`)

return (data.response || []).map((round: string, index: number) => ({
    id: index + 1,
    name: round,
  }))
}

// Helper to format date in Thai
export function formatDateThai(dateString: string): string {
  const date = new Date(dateString)
  const thaiMonths = [
    "ม.ค.",
    "ก.พ.",
    "มี.ค.",
    "เม.ย.",
    "พ.ค.",
    "มิ.ย.",
    "ก.ค.",
    "ส.ค.",
    "ก.ย.",
    "ต.ค.",
    "พ.ย.",
    "ธ.ค.",
  ]
  const day = date.getDate()
  const month = thaiMonths[date.getMonth()]
  const year = date.getFullYear() + 543
  const hours = date.getHours().toString().padStart(2, "0")
  const minutes = date.getMinutes().toString().padStart(2, "0")

return `${day} ${month} ${year} ${hours}:${minutes} น.`
}

// Helper to get time ago in Thai
export function getTimeAgoThai(dateString: string): string {
  const date = new Date(dateString)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMins / 60)
  const diffDays = Math.floor(diffHours / 24)

if (diffMins < 60) return `${diffMins} นาทีที่แล้ว`
  if (diffHours < 24) return `${diffHours} ชม. ที่แล้ว`
  if (diffDays < 7) return `${diffDays} วันที่แล้ว`
  return formatDateThai(dateString)
}

// Status translation
export function translateStatus(
  stateId: number,
  stateName?: string
): { short: string; long: string } {
  const statusMap: Record<number, { short: string; long: string }> = {
    1: { short: "NS", long: "ยังไม่เริ่ม" },
    2: { short: "LIVE", long: "กำลังแข่ง" },
    3: { short: "FT", long: "จบเกม" },
    4: { short: "AET", long: "จบหลังต่อเวลา" },
    5: { short: "PEN", long: "จบหลังดวลโทษ" },
    6: { short: "PST", long: "เลื่อนแข่ง" },
    7: { short: "CANC", long: "ยกเลิก" },
    8: { short: "ABD", long: "ยกเลิกกลางคัน" },
    9: { short: "AWD", long: "ตัดสินให้ชนะ" },
    10: { short: "WO", long: "ชนะโดยวอล์กโอเวอร์" },
    11: { short: "SUSP", long: "ถูกระงับ" },
    12: { short: "INT", long: "หยุดชั่วคราว" },
    13: { short: "1H", long: "ครึ่งแรก" },
    14: { short: "HT", long: "พักครึ่ง" },
    15: { short: "2H", long: "ครึ่งหลัง" },
    16: { short: "ET", long: "ต่อเวลา" },
    17: { short: "BT", long: "พัก" },
    18: { short: "P", long: "ดวลจุดโทษ" },
    21: { short: "TBD", long: "รอกำหนด" },
  }
  return statusMap[stateId] || { short: stateName || "UNK", long: stateName || "ไม่ทราบ" }
}

// Get player details and statistics
export async function getPlayerStats(playerId: string, season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(`/players?id=${playerId}&season=${season}`)

if (!data.response || data.response.length === 0) {
    return null
  }

const player = data.response[0]
  return {
    id: player.player.id,
    name: player.player.name,
    firstname: player.player.firstname,
    lastname: player.player.lastname,
    image_path: player.player.photo,
    nationality: player.player.nationality,
    height: player.player.height,
    weight: player.player.weight,
    age: player.player.age,
    birth: player.player.birth,
    position: player.statistics[0]?.games?.position,
    teams: player.statistics.map((stat: any) => ({
      id: stat.team.id,
      name: stat.team.name,
      logo: stat.team.logo,
    })),
    statistics: player.statistics[0] || {},
  }
}

// Get player's transfers
export async function getPlayerTransfers(playerId: string) {
  const data = await fetchFromAPI(`/transfers?player=${playerId}`)

return (data.response || []).map((transfer: any) => ({
    date: transfer.date,
    type: transfer.type,
    fromteam: {
      id: transfer.teams.out.id,
      name: transfer.teams.out.name,
      logo: transfer.teams.out.logo,
    },
    toteam: {
      id: transfer.teams.in.id,
      name: transfer.teams.in.name,
      logo: transfer.teams.in.logo,
    },
  }))
}

// Search players by name
export async function searchPlayers(name: string, season: number = CURRENT_SEASON) {
  const data = await fetchFromAPI(
    `/players?league=${PREMIER_LEAGUE_ID}&season=${season}&search=${encodeURIComponent(name)}`
  )

return (data.response || []).map((item: any) => ({
    id: item.player.id,
    name: item.player.name,
    image_path: item.player.photo,
    nationality: item.player.nationality,
    position: item.statistics[0]?.games?.position,
    teams: item.statistics.map((stat: any) => ({
      id: stat.team.id,
      name: stat.team.name,
      logo: stat.team.logo,
    })),
  }))
}

export { PREMIER_LEAGUE_ID, CURRENT_SEASON_ID }
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: Bebas Neue, ui-sans-serif, system-ui, sans-serif;
  
  /* Elite Luxury theme - Deep Black, Rich Amber Gold, Crimson */
  --color-background: #09090b;
  --color-foreground: #fafafa;
  --color-card: #101013;
  --color-card-foreground: #fafafa;
  --color-popover: #141418;
  --color-popover-foreground: #fafafa;
  --color-primary: #d4a520;
  --color-primary-foreground: #09090b;
  --color-secondary: #18181b;
  --color-secondary-foreground: #fafafa;
  --color-muted: #1c1c20;
  --color-muted-foreground: #a1a1aa;
  --color-accent: #991b1b;
  --color-accent-foreground: #fafafa;
  --color-destructive: #dc2626;
  --color-destructive-foreground: #fafafa;
  --color-border: #27272a;
  --color-input: #18181b;
  --color-ring: #d4a520;
  --color-chart-1: #d4a520;
  --color-chart-2: #991b1b;
  --color-chart-3: #059669;
  --color-chart-4: #e5b830;
  --color-chart-5: #dc2626;
  --color-sidebar: #0b0b0e;
  --color-sidebar-foreground: #fafafa;
  --color-sidebar-primary: #d4a520;
  --color-sidebar-primary-foreground: #09090b;
  --color-sidebar-accent: #141418;
  --color-sidebar-accent-foreground: #fafafa;
  --color-sidebar-border: #27272a;
  --color-sidebar-ring: #d4a520;
  
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* Dark Theme Override - Pitch black with rich warm amber gold */
.dark {
  --color-background: #030304;
  --color-foreground: #ffffff;
  --color-card: #08080a;
  --color-card-foreground: #ffffff;
  --color-popover: #0c0c0f;
  --color-popover-foreground: #ffffff;
  --color-primary: #e5b830;
  --color-primary-foreground: #030304;
  --color-secondary: #111114;
  --color-secondary-foreground: #ffffff;
  --color-muted: #151518;
  --color-muted-foreground: #a8a8b0;
  --color-accent: #b91c1c;
  --color-accent-foreground: #ffffff;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #ffffff;
  --color-border: #1f1f23;
  --color-input: #111114;
  --color-ring: #e5b830;
  --color-chart-1: #e5b830;
  --color-chart-2: #b91c1c;
  --color-chart-3: #10b981;
  --color-chart-4: #d4a520;
  --color-chart-5: #ef4444;
  --color-sidebar: #050507;
  --color-sidebar-foreground: #ffffff;
  --color-sidebar-primary: #e5b830;
  --color-sidebar-primary-foreground: #030304;
  --color-sidebar-accent: #0f0f12;
  --color-sidebar-accent-foreground: #ffffff;
  --color-sidebar-border: #1f1f23;
  --color-sidebar-ring: #e5b830;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.font-display {
  font-family: "Bebas Neue", sans-serif;
}

/* Live pulse animation */
@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-live-pulse {
  animation: live-pulse 1.5s ease-in-out infinite;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar - dark style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4a520;
}

.dark ::-webkit-scrollbar-track {
  background: #050507;
}

.dark ::-webkit-scrollbar-thumb {
  background: #222226;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #e5b830;
}

/* Ken Burns zoom effect for hero backgrounds */
@keyframes ken-burns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.1) translate(-1%, -1%);
  }
}

.animate-ken-burns {
  animation: ken-burns 6s ease-out forwards;
}

/* Slide up animation for text reveals */
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* Progress fill animation for slide indicators */
@keyframes progress-fill {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.animate-progress-fill {
  animation: progress-fill linear forwards;
}

/* Scan lines effect */
@keyframes scan-lines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.animate-scan-lines {
  animation: scan-lines 8s linear infinite;
}

/* Glitch effect for transitions */
@keyframes glitch {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(-2px, 2px);
  }
  20% {
    clip-path: inset(92% 0 1% 0);
    transform: translate(2px, -2px);
  }
  40% {
    clip-path: inset(43% 0 1% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(2px, -2px);
  }
  80% {
    clip-path: inset(54% 0 7% 0);
    transform: translate(-2px, 2px);
  }
  100% {
    clip-path: inset(58% 0 43% 0);
    transform: translate(2px, -2px);
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}
[V0_FILE]typescriptreact:file="app/worldcup-2026/page.tsx" isMerged="true"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Globe,
  Calendar,
  Trophy,
  Users,
  MapPin,
  Star,
  Clock,
  Flag,
  ChevronRight,
  Sparkles,
  Target,
  Zap,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"

// ข้อมูลทีมที่ผ่านเข้ารอบ (อัปเดตล่าสุด)
const qualifiedTeams = {
  pot1: [
    { name: "สหรัฐอเมริกา", flag: "🇺🇸", confederation: "CONCACAF", status: "เจ้าภาพ" },
    { name: "เม็กซิโก", flag: "🇲🇽", confederation: "CONCACAF", status: "เจ้าภาพ" },
    { name: "แคนาดา", flag: "🇨🇦", confederation: "CONCACAF", status: "เจ้าภาพ" },
    { name: "อาร์เจนตินา", flag: "🇦🇷", confederation: "CONMEBOL", status: "แชมป์โลก" },
    { name: "ฝรั่งเศส", flag: "🇫🇷", confederation: "UEFA", status: "รองแชมป์โลก" },
    { name: "บราซิล", flag: "🇧🇷", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
    { name: "อังกฤษ", flag: "🇬🇧", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "สเปน", flag: "🇪🇸", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
  ],
  pot2: [
    { name: "เยอรมนี", flag: "🇩🇪", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "โปรตุเกส", flag: "🇵🇹", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "เนเธอร์แลนด์", flag: "🇳🇱", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "เบลเยียม", flag: "🇧🇪", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "อิตาลี", flag: "🇮🇹", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "โครเอเชีย", flag: "🇭🇷", confederation: "UEFA", status: "ผ่านรอบคัดเลือก" },
    { name: "อุรุกวัย", flag: "🇺🇾", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
    { name: "โคลอมเบีย", flag: "🇨🇴", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
  ],
  pot3: [
    { name: "ญี่ปุ่น", flag: "🇯🇵", confederation: "AFC", status: "ผ่านรอบคัดเลือก" },
    { name: "เกาหลีใต้", flag: "🇰🇷", confederation: "AFC", status: "ผ่านรอบคัดเลือก" },
    { name: "ออสเตรเลีย", flag: "🇦🇺", confederation: "AFC", status: "ผ่านรอบคัดเลือก" },
    { name: "ซาอุดีอาระเบีย", flag: "🇸🇦", confederation: "AFC", status: "ผ่านรอบคัดเลือก" },
    { name: "อิหร่าน", flag: "🇮🇷", confederation: "AFC", status: "ผ่านรอบคัดเลือก" },
    { name: "โมร็อกโก", flag: "🇲🇦", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
    { name: "เซเนกัล", flag: "🇸🇳", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
    { name: "ไนจีเรีย", flag: "🇳🇬", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
  ],
  pot4: [
    { name: "เอกวาดอร์", flag: "🇪🇨", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
    { name: "ปารากวัย", flag: "🇵🇾", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
    { name: "เวเนซุเอลา", flag: "🇻🇪", confederation: "CONMEBOL", status: "ผ่านรอบคัดเลือก" },
    { name: "คอสตาริกา", flag: "🇨🇷", confederation: "CONCACAF", status: "ผ่านรอบคัดเลือก" },
    { name: "จาเมกา", flag: "🇯🇲", confederation: "CONCACAF", status: "ผ่านรอบคัดเลือก" },
    { name: "แคเมอรูน", flag: "🇨🇲", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
    { name: "กานา", flag: "🇬🇭", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
    { name: "ตูนิเซีย", flag: "🇹🇳", confederation: "CAF", status: "ผ่านรอบคัดเลือก" },
  ],
}

// สนามแข่งขัน
const venues = [
  { city: "นิวยอร์ก/นิวเจอร์ซีย์", stadium: "MetLife Stadium", capacity: "82,500", country: "USA", matches: "รอบชิงชนะเลิศ" },
  { city: "ลอสแองเจลิส", stadium: "SoFi Stadium", capacity: "70,240", country: "USA", matches: "รอบรองชนะเลิศ" },
  { city: "ดัลลัส", stadium: "AT&T Stadium", capacity: "80,000", country: "USA", matches: "รอบรองชนะเลิศ" },
  { city: "ไมอามี่", stadium: "Hard Rock Stadium", capacity: "65,326", country: "USA", matches: "รอบ 8 ทีม" },
  { city: "แอตแลนตา", stadium: "Mercedes-Benz Stadium", capacity: "71,000", country: "USA", matches: "รอบ 8 ทีม" },
  { city: "เม็กซิโกซิตี้", stadium: "Estadio Azteca", capacity: "87,523", country: "MEX", matches: "แมตช์เปิดสนาม" },
  { city: "โทรอนโต", stadium: "BMO Field", capacity: "45,736", country: "CAN", matches: "รอบแบ่งกลุ่ม" },
  { city: "แวนคูเวอร์", stadium: "BC Place", capacity: "54,500", country: "CAN", matches: "รอบแบ่งกลุ่ม" },
]

// กำหนดการสำคัญ
const keyDates = [
  { date: "13 ธันวาคม 2025", event: "การจับสลากแบ่งกลุ่ม", location: "ลอสแองเจลิส, สหรัฐอเมริกา", status: "upcoming" },
  { date: "11 มิถุนายน 2026", event: "แมตช์เปิดสนาม", location: "เม็กซิโกซิตี้, เม็กซิโก", status: "upcoming" },
  { date: "12 มิ.ย. - 28 มิ.ย. 2026", event: "รอบแบ่งกลุ่ม", location: "16 เมือง", status: "upcoming" },
  { date: "29 มิ.ย. - 2 ก.ค. 2026", event: "รอบ 32 ทีม", location: "16 เมือง", status: "upcoming" },
  { date: "5-6 กรกฎาคม 2026", event: "รอบ 16 ทีม", location: "8 เมือง", status: "upcoming" },
  { date: "9-10 กรกฎาคม 2026", event: "รอบ 8 ทีม", location: "4 เมือง", status: "upcoming" },
  { date: "14-15 กรกฎาคม 2026", event: "รอบรองชนะเลิศ", location: "ดัลลัส & ลอสแองเจลิส", status: "upcoming" },
  { date: "19 กรกฎาคม 2026", event: "รอบชิงชนะเลิศ", location: "นิวยอร์ก/นิวเจอร์ซีย์", status: "final" },
]

// ไฮไลต์และจุดน่าสนใจ
const highlights = [
  {
    icon: Users,
    title: "48 ทีม",
    description: "ครั้งแรกในประวัติศาสตร์ที่ขยายเป็น 48 ทีม จากเดิม 32 ทีม",
  },
  {
    icon: Globe,
    title: "3 ประเทศเจ้าภาพ",
    description: "สหรัฐอเมริกา, เม็กซิโก และแคนาดา ร่วมเป็นเจ้าภาพ",
  },
  {
    icon: MapPin,
    title: "16 เมือง",
    description: "จัดแข่งขันใน 16 เมืองทั่ว 3 ประเทศ รวม 104 แมตช์",
  },
  {
    icon: Trophy,
    title: "รูปแบบใหม่",
    description: "12 กลุ่ม กลุ่มละ 4 ทีม อันดับ 1-2 และอันดับ 3 ที่ดีที่สุด 8 ทีมผ่านเข้ารอบ",
  },
]

// ดาวเด่นที่น่าจับตามอง
const starsToWatch = [
  { name: "Kylian Mbappé", team: "ฝรั่งเศส", position: "กองหน้า", image: "/players/mbappe.jpg" },
  { name: "Erling Haaland", team: "นอร์เวย์", position: "กองหน้า", image: "/players/haaland.webp" },
  { name: "Jude Bellingham", team: "อังกฤษ", position: "กองกลาง", image: "/players/bellingham.jpg" },
  { name: "Vinícius Jr", team: "บราซิล", position: "ปีก", image: "/players/vinicius.jpg" },
  { name: "Lionel Messi", team: "อาร์เจนตินา", position: "กองหน้า", image: "/players/messi.jpg" },
]

export default function WorldCup2026Page() {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="relative overflow-hidden">
        {/* Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-accent/10" />
        <div className="absolute inset-0 bg-[url('/worldcup-pattern.png')] opacity-5" />
        
        {/* Animated particles */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-20 left-10 w-4 h-4 bg-primary/30 rounded-full animate-float" />
          <div className="absolute top-40 right-20 w-6 h-6 bg-primary/20 rounded-full animate-float-delayed" />
          <div className="absolute bottom-40 left-1/4 w-3 h-3 bg-accent/30 rounded-full animate-float" />
        </div>

<div className="container mx-auto px-4 py-20 md:py-32 relative z-10">
          <div className="text-center max-w-4xl mx-auto">
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 backdrop-blur-sm rounded-full text-sm font-medium text-primary border border-primary/20 mb-6">
              <Globe className="w-4 h-4" />
              FIFA World Cup 2026
              <Sparkles className="w-4 h-4" />
            </div>

{/* Title */}
            <h1 className="text-5xl md:text-7xl font-display tracking-tight mb-6">
              <span className="text-foreground">WORLD CUP</span>
              <br />
              <span className="text-primary">2026</span>
            </h1>

{/* Subtitle */}
            <p className="text-xl md:text-2xl text-muted-foreground mb-4">
              United 2026 - สหรัฐอเมริกา | เม็กซิโก | แคนาดา
            </p>

<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
              มหกรรมฟุตบอลโลกครั้งยิ่งใหญ่ที่สุดในประวัติศาสตร์ กับ 48 ทีมชาติ ใน 3 ประเทศ
            </p>

{/* Countdown or Date */}
            <div className="flex flex-wrap justify-center gap-4 mb-12">
              <div className="bg-card/80 backdrop-blur-sm border border-border/50 rounded-xl px-6 py-4 text-center">
                <p className="text-3xl md:text-4xl font-display text-primary">11</p>
                <p className="text-sm text-muted-foreground">มิ.ย. 2026</p>
              </div>
              <div className="bg-card/80 backdrop-blur-sm border border-border/50 rounded-xl px-6 py-4 text-center">
                <p className="text-3xl md:text-4xl font-display text-foreground">-</p>
                <p className="text-sm text-muted-foreground">ถึง</p>
              </div>
              <div className="bg-card/80 backdrop-blur-sm border border-border/50 rounded-xl px-6 py-4 text-center">
                <p className="text-3xl md:text-4xl font-display text-primary">19</p>
                <p className="text-sm text-muted-foreground">ก.ค. 2026</p>
              </div>
            </div>

{/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
              {[
                { value: "48", label: "ทีมชาติ" },
                { value: "104", label: "แมตช์" },
                { value: "16", label: "เมืองเจ้าภาพ" },
                { value: "39", label: "วัน" },
              ].map((stat, i) => (
                <div key={i} className="bg-muted/50 rounded-lg p-4">
                  <p className="text-2xl md:text-3xl font-display text-primary">{stat.value}</p>
                  <p className="text-sm text-muted-foreground">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

{/* Highlights Section */}
      <section className="py-16 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <Zap className="w-3 h-3 mr-1" />
              ไฮไลต์
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display">จุดเด่นของทัวร์นาเมนต์</h2>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {highlights.map((item, i) => (
              <Card key={i} className="border-border/50 hover:border-primary/50 transition-all hover:shadow-lg hover:shadow-primary/5 group">
                <CardContent className="p-6 text-center">
                  <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
                    <item.icon className="w-8 h-8 text-primary" />
                  </div>
                  <h3 className="text-2xl font-display text-primary mb-2">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Tournament Format Section */}
      <section className="py-16 bg-muted/30 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <Target className="w-3 h-3 mr-1" />
              รูปแบบการแข่งขัน
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display">รูปแบบใหม่ 48 ทีม</h2>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
            <Card className="border-primary/30 bg-primary/5">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-sm font-bold">1</span>
                  รอบแบ่งกลุ่ม
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
                    12 กลุ่ม กลุ่มละ 4 ทีม
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
                    แต่ละทีมแข่ง 3 นัด
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
                    รวม 48 แมตช์
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-accent/30 bg-accent/5">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="w-8 h-8 bg-accent text-accent-foreground rounded-full flex items-center justify-center text-sm font-bold">2</span>
                  ทีมผ่านเข้ารอบ
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                    อันดับ 1 และ 2 ทุกกลุ่ม (24 ทีม)
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                    อันดับ 3 ที่ดีที่สุด 8 ทีม
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                    รวม 32 ทีมเข้ารอบน็อคเอาท์
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="w-8 h-8 bg-muted text-foreground rounded-full flex items-center justify-center text-sm font-bold">3</span>
                  รอบน็อคเอาท์
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                    รอบ 32 ทีม → 16 แมตช์
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                    รอบ 16, 8, รองฯ, ชิงฯ
                  </li>
                  <li className="flex items-start gap-2">
                    <ChevronRight className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                    รวม 56 แมตช์น็อคเอาท์
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Teams Section */}
      <section className="py-16 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <Flag className="w-3 h-3 mr-1" />
              ทีมที่ผ่านเข้ารอบ
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display mb-4">โถจับสลาก (คาดการณ์)</h2>
            <p className="text-muted-foreground">รายชื่อทีมที่ผ่านเข้ารอบและคาดว่าจะอยู่ในแต่ละโถ</p>
          </div>

{Object.entries(qualifiedTeams).map(([pot, teams]) => (
              <TabsContent key={pot} value={pot}>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {teams.map((team, i) => (
                    <Card key={i} className="border-border/50 hover:border-primary/50 transition-colors">
                      <CardContent className="p-4 text-center">
                        <span className="text-4xl mb-2 block">{team.flag}</span>
                        <h3 className="font-semibold text-sm mb-1">{team.name}</h3>
                        <Badge variant="secondary" className="text-xs mb-1">
                          {team.confederation}
                        </Badge>
                        {team.status === "เจ้าภาพ" && (
                          <Badge variant="default" className="text-xs block mt-1">
                            เจ้าภาพ
                          </Badge>
                        )}
                        {team.status === "แชมป์โลก" && (
                          <Badge className="text-xs block mt-1 bg-primary/20 text-primary border-primary/30">
                            แชมป์โลก
                          </Badge>
                        )}
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </section>

{/* Key Dates Section */}
      <section className="py-16 bg-muted/30 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <Calendar className="w-3 h-3 mr-1" />
              กำหนดการ
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display">ตารางเวลาสำคัญ</h2>
          </div>

<div className="max-w-3xl mx-auto">
            <div className="relative">
              {/* Timeline line */}
              <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-border md:-translate-x-1/2" />

{keyDates.map((item, i) => (
                <div key={i} className={`relative flex items-center mb-8 ${i % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"}`}>
                  {/* Timeline dot */}
                  <div className="absolute left-4 md:left-1/2 w-3 h-3 bg-primary rounded-full md:-translate-x-1/2 z-10" />
                  
                  {/* Content */}
                  <div className={`ml-12 md:ml-0 md:w-1/2 ${i % 2 === 0 ? "md:pr-12 md:text-right" : "md:pl-12"}`}>
                    <Card className={`border-border/50 ${item.status === "final" ? "border-primary bg-primary/5" : ""}`}>
                      <CardContent className="p-4">
                        <div className="flex items-center gap-2 mb-2 justify-start md:justify-end">
                          {i % 2 !== 0 && <Clock className="w-4 h-4 text-primary md:hidden" />}
                          <span className="text-sm font-medium text-primary">{item.date}</span>
                          {i % 2 === 0 && <Clock className="w-4 h-4 text-primary hidden md:block" />}
                        </div>
                        <h3 className="font-semibold mb-1">{item.event}</h3>
                        <p className="text-sm text-muted-foreground flex items-center gap-1">
                          <MapPin className="w-3 h-3" />
                          {item.location}
                        </p>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

{/* Venues Section */}
      <section className="py-16 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <MapPin className="w-3 h-3 mr-1" />
              สนามแข่งขัน
            </Badge>
            <h2 className="text-3xl md:text-4xl font-display">สถานที่จัดการแข่งขัน</h2>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            {venues.map((venue, i) => (
              <Card key={i} className="border-border/50 hover:border-primary/50 transition-colors overflow-hidden group">
                <div className="h-32 bg-gradient-to-br from-muted to-muted/50 relative overflow-hidden">
                  <div className="absolute inset-0 bg-primary/10 group-hover:bg-primary/20 transition-colors" />
                  <div className="absolute bottom-2 right-2">
                    <Badge variant="secondary" className="text-xs">
                      {venue.country}
                    </Badge>
                  </div>
                </div>
                <CardContent className="p-4">
                  <h3 className="font-semibold text-sm mb-1">{venue.stadium}</h3>
                  <p className="text-xs text-muted-foreground mb-2">{venue.city}</p>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-muted-foreground">
                      <Users className="w-3 h-3 inline mr-1" />
                      {venue.capacity}
                    </span>
                    <Badge variant="outline" className="text-xs">
                      {venue.matches}
                    </Badge>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 bg-gradient-to-br from-primary/10 via-background to-accent/10 border-t border-border">
        <div className="container mx-auto px-4 text-center">
          <Globe className="w-16 h-16 text-primary mx-auto mb-6" />
          <h2 className="text-3xl md:text-4xl font-display mb-4">พร้อมลุ้นไปกับฟุตบอลโลก 2026?</h2>
          <p className="text-muted-foreground max-w-xl mx-auto mb-8">
            ติดตามข่าวสาร รอบคัดเลือก และเตรียมพร้อมสำหรับทัวร์นาเมนต์ที่ยิ่งใหญ่ที่สุดในประวัติศาสตร์
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button asChild size="lg" className="h-12 px-8 rounded-lg shadow-lg shadow-primary/20">
              <Link href="/ai-prediction">
                <Star className="w-4 h-4 mr-2" />
                ทำนายผลด้วย AI
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="h-12 px-8 rounded-lg bg-transparent">
              <Link href="/news">
                ติดตามข่าวสาร
              </Link>
            </Button>
          </div>
        </div>
      </section>

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  User,
  Menu,
  Brain,
  ChevronDown,
  Trophy,
  Calendar,
  PlayCircle,
  Clock,
  CheckCircle,
  List,
  X,
  Newspaper,
  BarChart3,
  Flame,
  Users,
  Globe,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"
import { Sheet, SheetContent, SheetTrigger, SheetClose } from "@/components/ui/sheet"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"

interface NavigationProps {
  isLoggedIn?: boolean
  userName?: string
}

export function Navigation({ isLoggedIn = false, userName }: NavigationProps) {
  const pathname = usePathname()

const mainNavLinks = [
    { href: "/", label: "หน้าแรก" },
    { href: "/ai-prediction", label: "AI ทำนายผล", icon: Brain },
    { href: "/worldcup-2026", label: "World Cup 2026", icon: Globe, highlight: true },
  ]

const matchSubLinks = [
    { href: "/matches?filter=live", label: "กำลังแข่ง", icon: PlayCircle },
    { href: "/matches?filter=upcoming", label: "กำลังจะแข่ง", icon: Clock },
    { href: "/matches?filter=finished", label: "แข่งจบแล้ว", icon: CheckCircle },
    { href: "/matches", label: "ทั้งหมด", icon: List },
  ]

const rightNavLinks = [
    { href: "/heatmap", label: "Heat Map", icon: Flame },
    { href: "/community", label: "ชุมชน", icon: Users },
  ]

const isMatchesActive = pathname.startsWith("/matches")
  const isNewsActive = pathname.startsWith("/news") || pathname.startsWith("/players")

return (
    <nav className="sticky top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border/50">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 group">
            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/20 group-hover:shadow-primary/40 transition-shadow">
              <span className="font-display text-xl text-primary-foreground">FA</span>
            </div>
            <div className="hidden sm:block">
              <span className="font-display text-2xl text-foreground tracking-wide">FootballAI</span>
              <p className="text-[10px] text-muted-foreground -mt-1">วิเคราะห์ฟุตบอลอัจฉริยะ</p>
            </div>
          </Link>

{/* Center Navigation */}
          <div className="hidden lg:flex items-center gap-1">
            {mainNavLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`px-4 py-2 text-sm font-medium transition-colors rounded-lg flex items-center gap-1.5 ${
                  pathname === link.href
                    ? "text-primary bg-primary/10"
                    : link.highlight
                      ? "text-primary hover:bg-primary/10 border border-primary/30"
                      : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                }`}
              >
                {link.icon && <link.icon className="w-4 h-4" />}
                {link.label}
              </Link>
            ))}

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  className={`px-4 py-2 text-sm font-medium transition-colors rounded-lg flex items-center gap-1 ${
                    isMatchesActive
                      ? "text-primary bg-primary/10"
                      : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                  }`}
                >
                  <Calendar className="w-4 h-4 mr-1" />
                  โปรแกรม
                  <ChevronDown className="w-3 h-3" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="center" className="w-56">
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger className="gap-2">
                    <Calendar className="w-4 h-4" />
                    <span>โปรแกรมการแข่งขัน</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuSubContent className="w-48">
                    {matchSubLinks.map((link) => (
                      <DropdownMenuItem key={link.href} asChild>
                        <Link href={link.href} className="gap-2 cursor-pointer">
                          {link.icon && <link.icon className="w-4 h-4" />}
                          {link.label}
                        </Link>
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuSubContent>
                </DropdownMenuSub>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                  <Link href="/standings" className="gap-2 cursor-pointer">
                    <Trophy className="w-4 h-4" />
                    ตารางคะแนน
                  </Link>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

{rightNavLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`px-4 py-2 text-sm font-medium transition-colors rounded-lg flex items-center gap-1 ${
                  pathname === link.href
                    ? "text-primary bg-primary/10"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                }`}
              >
                {link.icon && <link.icon className="w-4 h-4" />}
                {link.label}
              </Link>
            ))}

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  className={`px-4 py-2 text-sm font-medium transition-colors rounded-lg flex items-center gap-1 ${
                    isNewsActive
                      ? "text-primary bg-primary/10"
                      : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                  }`}
                >
                  <Newspaper className="w-4 h-4 mr-1" />
                  ข่าว
                  <ChevronDown className="w-3 h-3" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="center" className="w-48">
                <DropdownMenuItem asChild>
                  <Link href="/news" className="gap-2 cursor-pointer">
                    <Newspaper className="w-4 h-4" />
                    ข่าวฟุตบอล
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                  <Link href="/players" className="gap-2 cursor-pointer">
                    <BarChart3 className="w-4 h-4" />
                    สถิตินักเตะ
                  </Link>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

{/* Right side - Theme Toggle & Auth */}
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <Sheet>
              <SheetTrigger asChild className="lg:hidden">
                <Button variant="ghost" size="icon" className="rounded-lg">
                  <Menu className="w-5 h-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-80 bg-background border-border">
                <div className="flex items-center justify-between mb-8">
                  <span className="font-display text-2xl">เมนู</span>
                  <SheetClose asChild>
                    <Button variant="ghost" size="icon" className="rounded-lg">
                      <X className="w-5 h-5" />
                    </Button>
                  </SheetClose>
                </div>
                <div className="flex flex-col gap-1">
                  {mainNavLinks.map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      className={`px-4 py-3 text-base font-medium transition-colors rounded-xl ${
                        pathname === link.href
                          ? "text-primary bg-primary/10"
                          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                      }`}
                    >
                      {link.label}
                    </Link>
                  ))}

<div className="border-t border-border my-2" />
                  <p className="px-4 py-2 text-xs text-muted-foreground uppercase tracking-wider">การแข่งขัน</p>
                  {matchSubLinks.map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-xl flex items-center gap-2"
                    >
                      {link.icon && <link.icon className="w-4 h-4" />}
                      {link.label}
                    </Link>
                  ))}
                  <Link
                    href="/standings"
                    className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-xl flex items-center gap-2"
                  >
                    <Trophy className="w-4 h-4" />
                    ตารางคะแนน
                  </Link>

<div className="border-t border-border my-2" />
                  {rightNavLinks.map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      className={`px-4 py-3 text-base font-medium transition-colors rounded-xl flex items-center gap-2 ${
                        pathname === link.href
                          ? "text-primary bg-primary/10"
                          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                      }`}
                    >
                      {link.icon && <link.icon className="w-4 h-4" />}
                      {link.label}
                    </Link>
                  ))}

<div className="border-t border-border my-2" />
                  <p className="px-4 py-2 text-xs text-muted-foreground uppercase tracking-wider">ข่าวและสถิติ</p>
                  <Link
                    href="/news"
                    className={`px-4 py-2 text-sm transition-colors rounded-xl flex items-center gap-2 ${
                      pathname === "/news"
                        ? "text-primary bg-primary/10"
                        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                    }`}
                  >
                    <Newspaper className="w-4 h-4" />
                    ข่าวฟุตบอล
                  </Link>
                  <Link
                    href="/players"
                    className={`px-4 py-2 text-sm transition-colors rounded-xl flex items-center gap-2 ${
                      pathname === "/players"
                        ? "text-primary bg-primary/10"
                        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                    }`}
                  >
                    <BarChart3 className="w-4 h-4" />
                    สถิตินักเตะ
                  </Link>
                </div>
              </SheetContent>
            </Sheet>

{isLoggedIn ? (
              <Button asChild variant="ghost" size="sm" className="rounded-lg gap-2">
                <Link href="/profile">
                  <User className="w-4 h-4" />
                  <span className="hidden sm:inline">{userName || "โปรไฟล์"}</span>
                </Link>
              </Button>
            ) : (
              <>
                <Button asChild variant="ghost" size="sm" className="rounded-lg hidden sm:flex">
                  <Link href="/login">เข้าสู่ระบบ</Link>
                </Button>
                <Button
                  asChild
                  size="sm"
                  className="rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/20"
                >
                  <Link href="/register">สมัครสมาชิก</Link>
                </Button>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/worldcup-banner.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { X, ChevronRight, Sparkles, Trophy, Flame } from "lucide-react"

export function WorldCupBanner() {
  const [isVisible, setIsVisible] = useState(true)
  const [dismissed, setDismissed] = useState(false)

useEffect(() => {
    const isDismissed = sessionStorage.getItem("wc2026-banner-dismissed")
    if (isDismissed) {
      setDismissed(true)
      setIsVisible(false)
    }
  }, [])

const handleDismiss = () => {
    setIsVisible(false)
    setDismissed(true)
    sessionStorage.setItem("wc2026-banner-dismissed", "true")
  }

if (!isVisible || dismissed) return null

return (
    <div className="relative overflow-hidden bg-gradient-to-r from-[#0d1b2a] via-[#1b263b] to-[#0d1b2a]">
      {/* Animated gradient overlay */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_50%,rgba(212,165,32,0.15),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_80%_50%,rgba(220,38,38,0.1),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_0%,rgba(212,165,32,0.1),transparent_70%)]" />
      </div>

{/* Animated shine effect */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -inset-[100%] animate-[shine_3s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12" />
      </div>

{/* Floating icons */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1 left-[5%] text-primary/20 animate-pulse">
          <Trophy className="w-4 h-4" />
        </div>
        <div className="absolute top-2 left-[15%] text-primary/15 animate-pulse delay-300">
          <Sparkles className="w-3 h-3" />
        </div>
        <div className="absolute top-1 right-[12%] text-primary/20 animate-pulse delay-500">
          <Flame className="w-4 h-4" />
        </div>
        <div className="absolute top-2 right-[22%] text-primary/15 animate-pulse delay-700">
          <Trophy className="w-3 h-3" />
        </div>
      </div>

<div className="container mx-auto px-4 py-2.5 md:py-3 relative z-10">
        <div className="flex items-center justify-between gap-3">
          {/* Left: Icon and Title */}
          <div className="flex items-center gap-3 flex-1 min-w-0">
            {/* Trophy Icon with glow */}
            <div className="relative hidden sm:block flex-shrink-0">
              <div className="absolute inset-0 bg-primary/40 rounded-full blur-md animate-pulse" />
              <div className="relative w-9 h-9 bg-gradient-to-br from-primary via-yellow-500 to-primary rounded-full flex items-center justify-center shadow-lg">
                <Trophy className="w-4 h-4 text-primary-foreground" />
              </div>
            </div>

{/* Text */}
            <div className="flex items-center gap-2 flex-wrap min-w-0">
              <div className="flex items-center gap-1.5">
                <Sparkles className="w-3.5 h-3.5 text-primary animate-pulse sm:hidden" />
                <span className="font-display text-sm md:text-base tracking-wide text-white whitespace-nowrap">
                  FIFA WORLD CUP
                </span>
                <span className="font-display text-sm md:text-base text-primary">2026</span>
              </div>
              <div className="hidden md:flex items-center gap-1.5 text-white/60 text-xs">
                <span>|</span>
                <span>🇺🇸 🇨🇦 🇲🇽</span>
                <span>|</span>
                <span>48 ทีม</span>
                <span>|</span>
                <span>มิ.ย.-ก.ค. 2026</span>
              </div>
              <span className="md:hidden text-xs text-white/60">48 ทีม | 3 ประเทศ</span>
            </div>
          </div>

{/* Right: Badge and CTA */}
          <div className="flex items-center gap-2 flex-shrink-0">
            {/* Hot badge */}
            <div className="hidden lg:flex items-center gap-1 px-2 py-1 bg-red-500/20 border border-red-500/30 rounded-full">
              <Flame className="w-3 h-3 text-red-400 animate-pulse" />
              <span className="text-[10px] font-medium text-red-400 uppercase tracking-wider">HOT</span>
            </div>

{/* CTA Button */}
            <Button
              asChild
              size="sm"
              className="h-7 md:h-8 px-3 md:px-4 rounded-full bg-gradient-to-r from-primary to-yellow-500 hover:from-primary/90 hover:to-yellow-500/90 text-primary-foreground font-medium shadow-lg shadow-primary/30 group"
            >
              <Link href="/worldcup-2026" className="flex items-center gap-1">
                <span className="text-xs font-semibold">ดูรายละเอียด</span>
                <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
              </Link>
            </Button>

{/* Close */}
            <button
              onClick={handleDismiss}
              className="p-1 rounded-full hover:bg-white/10 transition-colors text-white/40 hover:text-white/80"
              aria-label="ปิด"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

{/* Bottom gradient line */}
      <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary/60 to-transparent" />

{/* Keyframes for shine animation */}
      <style jsx>{`
        @keyframes shine {
          0% { transform: translateX(-100%) skewX(-12deg); }
          100% { transform: translateX(200%) skewX(-12deg); }
        }
      `}</style>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/worldcup-popup.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { X, Trophy, Calendar, MapPin, Sparkles } from "lucide-react"

export function WorldCupPopup() {
  const [isOpen, setIsOpen] = useState(false)

useEffect(() => {
    // Check if popup was already shown in this session
    const hasSeenPopup = sessionStorage.getItem("wc2026-popup-seen")
    if (!hasSeenPopup) {
      // Show popup after a short delay
      const timer = setTimeout(() => {
        setIsOpen(true)
      }, 1500)
      return () => clearTimeout(timer)
    }
  }, [])

const handleClose = () => {
    setIsOpen(false)
    sessionStorage.setItem("wc2026-popup-seen", "true")
  }

const handleExplore = () => {
    sessionStorage.setItem("wc2026-popup-seen", "true")
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300"
        onClick={handleClose}
      />

{/* Modal */}
      <div className="relative w-full max-w-md bg-gradient-to-b from-[#0d1b2a] to-[#1b263b] rounded-2xl shadow-2xl shadow-primary/20 border border-primary/20 overflow-hidden animate-in zoom-in-95 fade-in duration-300">
        {/* Close button */}
        <button
          onClick={handleClose}
          className="absolute top-3 right-3 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white/60 hover:text-white"
          aria-label="ปิด"
        >
          <X className="w-5 h-5" />
        </button>

{/* Decorative elements */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute -top-20 -left-20 w-40 h-40 bg-primary/20 rounded-full blur-3xl" />
          <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-red-500/10 rounded-full blur-3xl" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(ellipse_at_center,rgba(212,165,32,0.1),transparent_70%)]" />
        </div>

{/* Content */}
        <div className="relative z-10 p-6 md:p-8 text-center">
          {/* Trophy Icon with glow */}
          <div className="relative mx-auto w-20 h-20 mb-4">
            <div className="absolute inset-0 bg-primary/40 rounded-full blur-xl animate-pulse" />
            <div className="relative w-full h-full bg-gradient-to-br from-primary via-yellow-400 to-primary rounded-full flex items-center justify-center shadow-lg shadow-primary/50">
              <Trophy className="w-10 h-10 text-primary-foreground" />
            </div>
            <div className="absolute -top-1 -right-1">
              <Sparkles className="w-5 h-5 text-primary animate-pulse" />
            </div>
          </div>

{/* Logo/Title */}
          <div className="mb-2">
            <h2 className="font-display text-2xl md:text-3xl tracking-wider text-white">
              FIFA WORLD CUP
            </h2>
            <div className="flex items-center justify-center gap-2 mt-1">
              <span className="font-display text-3xl md:text-4xl bg-gradient-to-r from-primary via-yellow-400 to-primary bg-clip-text text-transparent">
                2026
              </span>
            </div>
          </div>

{/* Host countries */}
          <div className="flex items-center justify-center gap-2 text-2xl mb-4">
            <span>🇺🇸</span>
            <span>🇨🇦</span>
            <span>🇲🇽</span>
          </div>

{/* Welcome text */}
          <p className="text-white/80 text-sm md:text-base mb-6">
            มหกรรมฟุตบอลโลกครั้งยิ่งใหญ่ที่สุดในประวัติศาสตร์
            <br />
            <span className="text-primary font-medium">48 ทีม | 104 แมตช์ | 3 ประเทศ</span>
          </p>

{/* Stats */}
          <div className="grid grid-cols-3 gap-3 mb-6">
            <div className="bg-white/5 border border-white/10 rounded-xl p-3">
              <Trophy className="w-5 h-5 text-primary mx-auto mb-1" />
              <div className="text-lg font-bold text-white">48</div>
              <div className="text-[10px] text-white/60 uppercase tracking-wider">ทีม</div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-3">
              <Calendar className="w-5 h-5 text-primary mx-auto mb-1" />
              <div className="text-lg font-bold text-white">104</div>
              <div className="text-[10px] text-white/60 uppercase tracking-wider">แมตช์</div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-3">
              <MapPin className="w-5 h-5 text-primary mx-auto mb-1" />
              <div className="text-lg font-bold text-white">16</div>
              <div className="text-[10px] text-white/60 uppercase tracking-wider">สนาม</div>
            </div>
          </div>

{/* Countdown hint */}
          <div className="bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 rounded-lg px-4 py-2 mb-6 border border-primary/20">
            <p className="text-xs text-white/70">
              เริ่มการแข่งขัน <span className="text-primary font-semibold">11 มิถุนายน 2026</span>
            </p>
          </div>

{/* CTA Buttons */}
          <div className="space-y-3">
            <Button
              asChild
              className="w-full h-12 bg-gradient-to-r from-primary to-yellow-500 hover:from-primary/90 hover:to-yellow-500/90 text-primary-foreground font-semibold text-base rounded-xl shadow-lg shadow-primary/30"
              onClick={handleExplore}
            >
              <Link href="/worldcup-2026">
                สำรวจฟุตบอลโลก 2026
              </Link>
            </Button>

<button
              onClick={handleClose}
              className="w-full py-3 text-sm text-white/60 hover:text-white transition-colors"
            >
              ไว้ทีหลัง
            </button>
          </div>
        </div>

{/* Bottom decorative line */}
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-primary to-transparent" />
      </div>
    </div>
  )
}119:Tdab3a,[V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { motion } from "framer-motion"
import { Mail, Lock, ArrowRight, LogIn } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"

export function LoginForm() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

setTimeout(() => {
      toast({
        title: "เข้าสู่ระบบสำเร็จ",
        description: "ยินดีต้อนรับกลับมา!",
      })
      setIsLoading(false)
      router.push("/profile")
    }, 1500)
  }

return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
      <Card className="w-full max-w-md mx-auto border-border/50 shadow-xl">
        <CardHeader className="space-y-2 text-center pb-6">
          <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
            <LogIn className="w-7 h-7 text-primary" />
          </div>
          <CardTitle className="text-2xl font-display">เข้าสู่ระบบ</CardTitle>
          <CardDescription>กรอกข้อมูลเพื่อเข้าสู่ระบบบัญชีของคุณ</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">อีเมล</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="email"
                  type="email"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">รหัสผ่าน</Label>
                <Link href="/forgot-password" className="text-xs text-primary hover:underline">
                  ลืมรหัสผ่าน?
                </Link>
              </div>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="password"
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<Button type="submit" className="w-full h-11 mt-2" disabled={isLoading}>
              {isLoading ? (
                "กำลังเข้าสู่ระบบ..."
              ) : (
                <>
                  เข้าสู่ระบบ
                  <ArrowRight className="ml-2 w-4 h-4" />
                </>
              )}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="justify-center border-t border-border pt-6">
          <p className="text-sm text-muted-foreground">
            ยังไม่มีบัญชี?{" "}
            <Link href="/register" className="text-primary hover:underline font-medium">
              สมัครสมาชิก
            </Link>
          </p>
        </CardFooter>
      </Card>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/register-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { motion } from "framer-motion"
import { Mail, Lock, User, ArrowRight, UserPlus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"

export function RegisterForm() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (password !== confirmPassword) {
      toast({
        title: "เกิดข้อผิดพลาด",
        description: "รหัสผ่านไม่ตรงกัน",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

setTimeout(() => {
      toast({
        title: "สมัครสมาชิกสำเร็จ",
        description: "ยินดีต้อนรับสู่ FootballAI!",
      })
      setIsLoading(false)
      router.push("/profile")
    }, 1500)
  }

return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
      <Card className="w-full max-w-md mx-auto border-border/50 shadow-xl">
        <CardHeader className="space-y-2 text-center pb-6">
          <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
            <UserPlus className="w-7 h-7 text-primary" />
          </div>
          <CardTitle className="text-2xl font-display">สมัครสมาชิก</CardTitle>
          <CardDescription>สร้างบัญชีใหม่เพื่อเริ่มใช้งาน FootballAI</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">ชื่อผู้ใช้</Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="name"
                  type="text"
                  placeholder="ชื่อของคุณ"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">อีเมล</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="email"
                  type="email"
                  placeholder="your@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="password">รหัสผ่าน</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="password"
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">ยืนยันรหัสผ่าน</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                <Input
                  id="confirmPassword"
                  type="password"
                  placeholder="••••••••"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<Button type="submit" className="w-full h-11 mt-2" disabled={isLoading}>
              {isLoading ? (
                "กำลังสมัครสมาชิก..."
              ) : (
                <>
                  สมัครสมาชิก
                  <ArrowRight className="ml-2 w-4 h-4" />
                </>
              )}
            </Button>
          </form>
        </CardContent>
        <CardFooter className="justify-center border-t border-border pt-6">
          <p className="text-sm text-muted-foreground">
            มีบัญชีอยู่แล้ว?{" "}
            <Link href="/login" className="text-primary hover:underline font-medium">
              เข้าสู่ระบบ
            </Link>
          </p>
        </CardFooter>
      </Card>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { LoginForm } from "@/components/login-form"

export default function LoginPage() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />
      <main className="flex-1 flex items-center justify-center py-12 px-4">
        <LoginForm />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { RegisterForm } from "@/components/register-form"

export default function RegisterPage() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation />
      <main className="flex-1 flex items-center justify-center py-12 px-4">
        <RegisterForm />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { ProfilePage } from "@/components/profile-page"

export default function Profile() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navigation isLoggedIn userName="สมชาย ใจดี" />
      <main className="flex-1">
        <ProfilePage />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/match-card.tsx" isMerged="true"
import { Card, CardHeader } from "@/components/ui/card"
import { Clock } from "lucide-react"

interface MatchCardProps {
  homeTeam: string
  awayTeam: string
  time: string
  league: string
  homeLogo?: string
  awayLogo?: string
}

export function MatchCard({ homeTeam, awayTeam, time, league }: MatchCardProps) {
  return (
    <Card className="border-border/50 hover:border-primary/50 transition-colors cursor-pointer">
      <CardHeader className="space-y-4">
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground flex items-center gap-2">
            <Clock className="w-4 h-4" />
            {time}
          </span>
          <span className="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">{league}</span>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-muted rounded-full" />
            <span className="font-display text-lg">{homeTeam}</span>
          </div>
          <span className="text-2xl font-bold text-muted-foreground">VS</span>
          <div className="flex items-center gap-3">
            <span className="font-display text-lg">{awayTeam}</span>
            <div className="w-12 h-12 bg-muted rounded-full" />
          </div>
        </div>
      </CardHeader>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/team-card.tsx" isMerged="true"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"
import { Star } from "lucide-react"

interface TeamCardProps {
  name: string
  points: number
  logo?: string
}

export function TeamCard({ name, points }: TeamCardProps) {
  return (
    <Card className="border-border/50 hover:border-primary/50 transition-colors cursor-pointer">
      <CardHeader className="space-y-2">
        <div className="w-16 h-16 bg-muted rounded-full mx-auto" />
        <CardTitle className="text-center text-base">{name}</CardTitle>
        <div className="flex items-center justify-center gap-2 text-primary">
          <Star className="w-4 h-4 fill-current" />
          <span className="font-bold">{points} คะแนน</span>
        </div>
      </CardHeader>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/teams/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/teams/[id]/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Star, MapPin, Calendar, Trophy, Users } from "lucide-react"

export default function TeamDetailPage() {
  const players = [
    { name: "เควิน เดอ บรอยน์", position: "กองกลาง", number: 17, rating: 91 },
    { name: "เออร์ลิง ฮาลันด์", position: "กองหน้า", number: 9, rating: 92 },
    { name: "ฟิล โฟเด้น", position: "กองกลาง", number: 47, rating: 87 },
    { name: "เรอูเบน ดิอาส", position: "กองหลัง", number: 3, rating: 88 },
  ]

return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto space-y-8">
          <Card className="border-border/50">
            <CardHeader className="space-y-6">
              <div className="flex flex-col md:flex-row items-center gap-6">
                <div className="w-32 h-32 bg-muted rounded-full" />
                <div className="space-y-3 text-center md:text-left flex-1">
                  <h1 className="text-4xl font-display">แมนเชสเตอร์ ซิตี้</h1>
                  <div className="flex flex-wrap gap-4 justify-center md:justify-start text-muted-foreground">
                    <div className="flex items-center gap-2">
                      <MapPin className="w-4 h-4" />
                      <span>แมนเชสเตอร์, อังกฤษ</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Calendar className="w-4 h-4" />
                      <span>ก่อตั้ง 1880</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Star className="w-4 h-4 fill-primary text-primary" />
                      <span className="font-bold">90/100</span>
                    </div>
                  </div>
                </div>
                <Button className="gap-2">
                  <Star className="w-4 h-4" />
                  ติดตามทีม
                </Button>
              </div>
            </CardHeader>
          </Card>

<Tabs defaultValue="overview" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="overview">ภาพรวม</TabsTrigger>
              <TabsTrigger value="squad">รายชื่อนักเตะ</TabsTrigger>
              <TabsTrigger value="stats">สถิติ</TabsTrigger>
            </TabsList>

<Card className="border-border/50">
                <CardHeader>
                  <CardTitle>เกี่ยวกับทีม</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground leading-relaxed">
                    แมนเชสเตอร์ ซิตี้ เป็นหนึ่งในสโมสรฟุตบอลที่ประสบความสำเร็จสูงสุดในอังกฤษ
                    มีความโดดเด่นด้วยรูปแบบการเล่นที่สวยงามและคว้าแชมป์พรีเมียร์ลีกมาแล้วหลายสมัย ภายใต้การคุมทีมของเป๊ป กวาร์ดิโอลา
                    ทีมได้รับการยกย่องว่าเป็นหนึ่งในทีมที่ดีที่สุดในยุโรป
                  </p>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="squad" className="space-y-4">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle>นักเตะประจำทีม</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {players.map((player, i) => (
                      <div
                        key={i}
                        className="flex items-center justify-between p-4 rounded-lg border border-border/50 hover:border-primary/50 transition-colors"
                      >
                        <div className="flex items-center gap-4">
                          <div className="w-12 h-12 bg-muted rounded-full" />
                          <div>
                            <p className="font-semibold">{player.name}</p>
                            <p className="text-sm text-muted-foreground">
                              {player.position} • #{player.number}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 text-primary">
                          <Star className="w-4 h-4 fill-current" />
                          <span className="font-bold">{player.rating}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="stats" className="space-y-4">
              <Card className="border-border/50">
                <CardHeader>
                  <CardTitle>สถิติฤดูกาลนี้</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">แข่งไปแล้ว</span>
                      <span className="font-bold">28 นัด</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">ชนะ</span>
                      <span className="font-bold">20 นัด</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">เสมอ</span>
                      <span className="font-bold">5 นัด</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">แพ้</span>
                      <span className="font-bold">3 นัด</span>
                    </div>
                    <div className="flex justify-between text-sm pt-2 border-t border-border/50">
                      <span className="text-muted-foreground">ประตูที่ยิงได้</span>
                      <span className="font-bold text-primary">65 ประตู</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">ประตูที่เสีย</span>
                      <span className="font-bold">22 ประตู</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/players/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/compare/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeftRight, Trophy, Target, Users } from "lucide-react"

export default function ComparePage() {
  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto space-y-8">
          <div className="space-y-2">
            <h1 className="text-5xl font-display">เปรียบเทียบ</h1>
            <p className="text-lg text-muted-foreground">เปรียบเทียบสถิติระหว่างทีมหรือนักเตะ</p>
          </div>

<Card className="border-border/50">
            <CardHeader>
              <CardTitle>เลือกทีมหรือนักเตะเพื่อเปรียบเทียบ</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
                <div className="space-y-2">
                  <label className="text-sm font-medium">ทีม/นักเตะ 1</label>
                  <Select defaultValue="mancity">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="mancity">แมนเชสเตอร์ ซิตี้</SelectItem>
                      <SelectItem value="arsenal">อาร์เซนอล</SelectItem>
                      <SelectItem value="liverpool">ลิเวอร์พูล</SelectItem>
                      <SelectItem value="realmadrid">เรอัล มาดริด</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">ทีม/นักเตะ 2</label>
                  <Select defaultValue="arsenal">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="mancity">แมนเชสเตอร์ ซิตี้</SelectItem>
                      <SelectItem value="arsenal">อาร์เซนอล</SelectItem>
                      <SelectItem value="liverpool">ลิเวอร์พูล</SelectItem>
                      <SelectItem value="realmadrid">เรอัล มาดริด</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card className="border-border/50 bg-gradient-to-br from-primary/5 to-transparent">
              <CardHeader className="text-center space-y-4">
                <div className="w-24 h-24 bg-muted rounded-full mx-auto" />
                <div>
                  <CardTitle className="text-2xl font-display">แมนเชสเตอร์ ซิตี้</CardTitle>
                  <p className="text-sm text-muted-foreground mt-1">พรีเมียร์ลีก</p>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ประตูยิงได้</span>
                    <span className="font-bold text-lg">78</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ประตูเสีย</span>
                    <span className="font-bold text-lg">28</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ชนะ</span>
                    <span className="font-bold text-lg">22</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">เสมอ</span>
                    <span className="font-bold text-lg">4</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">แพ้</span>
                    <span className="font-bold text-lg">2</span>
                  </div>
                  <div className="flex justify-between items-center pt-3 border-t border-border/50">
                    <span className="text-sm text-muted-foreground">คะแนน</span>
                    <span className="font-bold text-2xl text-primary">70</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-border/50 bg-gradient-to-br from-primary/5 to-transparent">
              <CardHeader className="text-center space-y-4">
                <div className="w-24 h-24 bg-muted rounded-full mx-auto" />
                <div>
                  <CardTitle className="text-2xl font-display">อาร์เซนอล</CardTitle>
                  <p className="text-sm text-muted-foreground mt-1">พรีเมียร์ลีก</p>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ประตูยิงได้</span>
                    <span className="font-bold text-lg">72</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ประตูเสีย</span>
                    <span className="font-bold text-lg">32</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">ชนะ</span>
                    <span className="font-bold text-lg">20</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">เสมอ</span>
                    <span className="font-bold text-lg">6</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-muted-foreground">แพ้</span>
                    <span className="font-bold text-lg">2</span>
                  </div>
                  <div className="flex justify-between items-center pt-3 border-t border-border/50">
                    <span className="text-sm text-muted-foreground">คะแนน</span>
                    <span className="font-bold text-2xl text-primary">66</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<Card className="border-border/50">
            <CardHeader>
              <CardTitle>สถิติเปรียบเทียบ</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">ประตูเฉลี่ย/นัด</span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm font-bold min-w-[3rem] text-right">2.79</span>
                  <div className="flex-1 flex gap-1">
                    <div className="h-8 bg-primary rounded-l" style={{ width: "60%" }} />
                    <div className="h-8 bg-primary/30 rounded-r" style={{ width: "40%" }} />
                  </div>
                  <span className="text-sm font-bold min-w-[3rem]">2.57</span>
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">ครองบอล %</span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm font-bold min-w-[3rem] text-right">65%</span>
                  <div className="flex-1 flex gap-1">
                    <div className="h-8 bg-primary rounded-l" style={{ width: "65%" }} />
                    <div className="h-8 bg-primary/30 rounded-r" style={{ width: "35%" }} />
                  </div>
                  <span className="text-sm font-bold min-w-[3rem]">58%</span>
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">ความแม่นยำการส่งบอล %</span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm font-bold min-w-[3rem] text-right">88%</span>
                  <div className="flex-1 flex gap-1">
                    <div className="h-8 bg-primary rounded-l" style={{ width: "52%" }} />
                    <div className="h-8 bg-primary/30 rounded-r" style={{ width: "48%" }} />
                  </div>
                  <span className="text-sm font-bold min-w-[3rem]">86%</span>
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">การยิงโดนกรอบ</span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm font-bold min-w-[3rem] text-right">210</span>
                  <div className="flex-1 flex gap-1">
                    <div className="h-8 bg-primary rounded-l" style={{ width: "55%" }} />
                    <div className="h-8 bg-primary/30 rounded-r" style={{ width: "45%" }} />
                  </div>
                  <span className="text-sm font-bold min-w-[3rem]">195</span>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="border-border/50">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2">
                  <Trophy className="w-5 h-5 text-primary" />
                  ฟอร์มล่าสุด
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div>
                    <p className="text-xs text-muted-foreground mb-2">แมนเชสเตอร์ ซิตี้</p>
                    <div className="flex gap-1">
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        D
                      </div>
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                    </div>
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground mb-2">อาร์เซนอล</p>
                    <div className="flex gap-1">
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        D
                      </div>
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        W
                      </div>
                      <div className="w-8 h-8 bg-gray-500 rounded flex items-center justify-center text-white text-xs font-bold">
                        D
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2">
                  <Target className="w-5 h-5 text-primary" />
                  ดาวซัลโวของทีม
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">ฮาลันด์</span>
                    <span className="font-bold">28</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm">ซากา</span>
                    <span className="font-bold">18</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-border/50">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2">
                  <Users className="w-5 h-5 text-primary" />
                  มูลค่าทีม
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">แมนเชสเตอร์ ซิตี้</span>
                    <span className="font-bold">€1.2B</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm">อาร์เซนอล</span>
                    <span className="font-bold">€980M</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/search-input.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

export function SearchInput({ placeholder }: { placeholder: string }) {
  return (
    <div className="relative">
      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
      <Input placeholder={placeholder} className="pl-10 h-12 text-base" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]png:file="public/haaland-football-action.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haaland-football-action-cMk1f9W8Ygaspa2hEvOdsDnKy7VX6e.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}