"use client"

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 } from "@/components/ui/card"
import { listGames, listOrders, listPlayers, listPosts } from "@/lib/api"
import { roleLabels } from "@/lib/constants"
import type { Game, Player, Post } from "@/lib/types"
import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"

export default function CommunityPage() {
  const [games, setGames] = useState<Game[]>([])
  const [players, setPlayers] = useState<Player[]>([])
  const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
  const [posts, setPosts] = useState<Post[]>([])
  const [postsLoading, setPostsLoading] = useState(true)

  const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
  const [selectedGame, setSelectedGame] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false

    Promise.all([listGames(), listPlayers(), Promise.resolve(listOrders()), listPosts()])
      .then(([gamesItems, playersItems, ordersItems, postsItems]) => {
        if (cancelled) return
        setGames(gamesItems)
        setPlayers(playersItems)
        setOrders(ordersItems)
        setPosts(postsItems)
        setPostsLoading(false)
      })
      .catch(() => {
        if (cancelled) return
        setGames([])
        setPlayers([])
        setOrders([])
        setPosts([])
        setPostsLoading(false)
      })

    return () => {
      cancelled = true
    }
  }, [])

  const filteredPosts = posts
    .filter((post) => {
      if (!selectedGame) return true
      return post.tags.includes(selectedGame)
    })
    .sort((a, b) => {
      if (sortMode === "latest") {
        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      }
      const scoreA = a.likeCount + a.commentCount
      const scoreB = b.likeCount + b.commentCount
      return scoreB - scoreA
    })

  return (
    <div className="container mx-auto py-8 px-4 max-w-2xl">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">社区</h1>
        <Button asChild>
          <Link href="/post/new">
            <PenSquare className="mr-1 h-4 w-4" />
            发帖
          </Link>
        </Button>
      </div>

      <div className="flex flex-col gap-4 mb-6">
        <div className="flex items-center gap-2">
          <Button
            variant={sortMode === "latest" ? "default" : "outline"}
            size="sm"
            onClick={() => setSortMode("latest")}
          >
            最新
          </Button>
          <Button
            variant={sortMode === "hot" ? "default" : "outline"}
            size="sm"
            onClick={() => setSortMode("hot")}
          >
            最热
          </Button>
        </div>
        <div className="flex flex-wrap gap-2">
          {games.map((game) => (
            <Badge
              key={game.id}
              variant={selectedGame === game.name ? "default" : "outline"}
              className="cursor-pointer hover:bg-primary/80 transition-colors px-3 py-1"
              onClick={() => setSelectedGame(selectedGame === game.name ? null : game.name)}
            >
              {game.name}
            </Badge>
          ))}
        </div>
      </div>

      <div className="flex flex-col gap-4">
        {postsLoading ? (
          <div className="text-center py-12 text-muted-foreground">加载中...</div>
        ) : filteredPosts.length === 0 ? (
          <div className="text-center py-12 text-muted-foreground">暂无帖子</div>
        ) : (
          filteredPosts.map((post) =>
            (() => {
              const linkedOrder = post.linkedOrderId
                ? orders.find((order) => order.id === post.linkedOrderId)
                : null
              const linkedPlayer = linkedOrder
                ? players.find((player) => player.id === linkedOrder.playerId)
                : null

              return (
                <Link key={post.id} href={`/post/${post.id}`} className="block">
                  <Card className="hover:shadow-md transition-shadow gap-4">
                    <CardHeader>
                      <div className="flex items-center gap-3">
                        <Avatar className="h-9 w-9">
                          <AvatarImage src={post.author.avatar} />
                          <AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium">{post.author.nickname}</span>
                            <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                              {roleLabels[post.authorRole]}
                            </Badge>
                            {post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
                          </div>
                          <span className="text-xs text-muted-foreground">
                            {new Date(post.createdAt).toLocaleDateString("zh-CN")}
                          </span>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <h3 className="font-semibold mb-1">{post.title}</h3>
                      <p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
                      {post.tags.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-2">
                          {post.tags.map((tag) => (
                            <Badge key={tag} variant="secondary" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      )}
                      {post.linkedOrderId && (
                        <div className="mt-2 rounded-lg border bg-muted/30 px-3 py-2 text-xs text-muted-foreground space-y-1.5">
                          <div className="flex items-center gap-1.5">
                            <ClipboardList className="h-3.5 w-3.5" />
                            关联订单秀单
                          </div>
                          {linkedOrder && (
                            <div className="pl-5">
                              <p>
                                {linkedOrder.service.gameName} · {linkedOrder.service.title}
                              </p>
                              <p>
                                {linkedOrder.playerName}
                                {linkedPlayer ? ` · ${linkedPlayer.rating}` : ""}
                              </p>
                            </div>
                          )}
                        </div>
                      )}
                    </CardContent>
                    <CardFooter className="text-sm text-muted-foreground gap-4">
                      <span className="flex items-center gap-1">
                        <Heart
                          className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`}
                        />
                        {post.likeCount}
                      </span>
                      <span className="flex items-center gap-1">
                        <MessageCircle className="h-4 w-4" />
                        {post.commentCount}
                      </span>
                    </CardFooter>
                  </Card>
                </Link>
              )
            })(),
          )
        )}
      </div>
    </div>
  )
}