import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
import Link from "next/link"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { GameIcon } from "@/lib/game-icons"
import { mockGames, mockPlayers, mockShops } from "@/lib/mock"

export default function HomePage() {
  return (
    <div className="container mx-auto py-8 px-4 space-y-12">
      <section className="relative overflow-hidden rounded-3xl bg-linear-to-b from-primary/10 via-primary/5 to-transparent px-6 py-16 md:py-24 text-center">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
          <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
        </div>
        <div className="relative z-10 space-y-6">
          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">找到你的游戏搭档</h1>
          <p className="text-lg md:text-xl text-muted-foreground max-w-xl mx-auto">
            找人一起打游戏，从这里开始
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-3 pt-2">
            <Button size="lg" className="rounded-full px-8" asChild>
              <Link href="/search">
                <Search className="mr-2 h-4 w-4" />
                找人陪玩
              </Link>
            </Button>
            <Button size="lg" variant="outline" className="rounded-full px-8" asChild>
              <Link href="/community">逛逛社区</Link>
            </Button>
          </div>
        </div>
      </section>

      <section>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">游戏分类</h2>
          <Button variant="ghost" size="sm" asChild>
            <Link href="/search">
              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
            </Link>
          </Button>
        </div>
        <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
          {mockGames.map((game) => (
            <Link
              key={game.id}
              href={`/search?game=${encodeURIComponent(game.name)}`}
              className="flex flex-col items-center gap-2 rounded-lg border p-3 hover:bg-accent/50 transition-colors"
            >
              <GameIcon name={game.icon} className="h-6 w-6" />
              <span className="text-xs font-medium text-center">{game.name}</span>
            </Link>
          ))}
        </div>
      </section>

      <section>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">推荐打手</h2>
          <Button variant="ghost" size="sm" asChild>
            <Link href="/search">
              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
            </Link>
          </Button>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {mockPlayers.map((player) => (
            <Card key={player.id} className="hover:shadow-md transition-shadow">
              <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
                <Avatar className="h-12 w-12">
                  <AvatarImage src={player.user.avatar} />
                  <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <CardTitle className="text-base">{player.user.nickname}</CardTitle>
                  <div className="flex items-center gap-2 mt-1">
                    <div className="flex items-center text-sm">
                      <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
                      {player.rating}
                    </div>
                    <span className="text-xs text-muted-foreground">{player.totalOrders} 单</span>
                    <Badge
                      variant={player.status === "available" ? "default" : "secondary"}
                      className="text-[10px] px-1.5 py-0"
                    >
                      {player.status === "available"
                        ? "可接单"
                        : player.status === "busy"
                          ? "忙碌"
                          : "离线"}
                    </Badge>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pb-3">
                <div className="flex flex-wrap gap-1">
                  {player.tags.map((tag) => (
                    <Badge key={tag} variant="outline" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                </div>
                {player.shopName && (
                  <p className="text-xs text-muted-foreground mt-2">所属店铺: {player.shopName}</p>
                )}
              </CardContent>
              <CardFooter className="pt-0">
                <Button variant="outline" size="sm" className="w-full" asChild>
                  <Link href={`/player/${player.id}`}>查看详情</Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </section>

      <section>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">热门店铺</h2>
          <Button variant="ghost" size="sm" asChild>
            <Link href="/search">
              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
            </Link>
          </Button>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          {mockShops.map((shop) => (
            <Card key={shop.id} className="hover:shadow-md transition-shadow">
              <CardHeader>
                <CardTitle className="text-lg">{shop.name}</CardTitle>
                <p className="text-sm text-muted-foreground">{shop.description}</p>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm">
                  <div className="flex items-center">
                    <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
                    {shop.rating}
                  </div>
                  <div className="flex items-center text-muted-foreground">
                    <ShoppingBag className="h-3.5 w-3.5 mr-0.5" />
                    {shop.totalOrders} 单
                  </div>
                  <span className="text-muted-foreground">{shop.playerCount} 名打手</span>
                </div>
              </CardContent>
              <CardFooter>
                <Button variant="outline" size="sm" asChild>
                  <Link href={`/shop/${shop.id}`}>进入店铺</Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </section>
    </div>
  )
}