import { FavoriteButton } from "@/components/favorite-button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Separator } from "@/components/ui/separator"
import { StatusBadge } from "@/components/ui/status-badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getPlayerById, listReviewsByTargetUser, listServicesByPlayer } from "@/lib/api"
import { Clock, Gamepad2, MapPin, MessageSquare, ShoppingBag, Star } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"

export default async function PlayerDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const player = await getPlayerById(id)

  if (!player) {
    notFound()
  }

  const playerReviews = await listReviewsByTargetUser(player.id)
  const playerServices =
    player.services && player.services.length > 0
      ? player.services
      : await listServicesByPlayer(player.id)
  return (
    <div className="container mx-auto py-8 px-4 max-w-5xl">
      <div className="flex flex-col md:flex-row gap-8 mb-8">
        <div className="flex-shrink-0">
          <Avatar className="w-32 h-32 border border-border shadow-sm">
            <AvatarImage src={player.user.avatar} alt={player.user.nickname} />
            <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
          </Avatar>
        </div>

        <div className="flex-grow space-y-4">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold flex items-center gap-3">
                {player.user.nickname}
                <StatusBadge
                  status={
                    player.status === "available"
                      ? "success"
                      : player.status === "busy"
                        ? "warning"
                        : "neutral"
                  }
                  className="text-sm font-normal"
                >
                  {player.status === "available"
                    ? "可接单"
                    : player.status === "busy"
                      ? "忙碌中"
                      : "离线"}
                </StatusBadge>
              </h1>
              <div className="flex items-center gap-2 mt-2 text-muted-foreground">
                <div className="flex items-center text-warning">
                  <Star className="w-4 h-4 fill-warning" />
                  <span className="ml-1 font-medium text-foreground">{player.rating}</span>
                </div>
                <Separator orientation="vertical" className="h-4" />
                <span>接单 {player.totalOrders}</span>
                <Separator orientation="vertical" className="h-4" />
                <span>完成率 {(player.completionRate * 100).toFixed(0)}%</span>
              </div>
            </div>

            {player.shopId && (
              <Link href={`/shop/${player.shopId}`}>
                <Button variant="outline" className="gap-2">
                  <ShoppingBag className="w-4 h-4" />
                  所属店铺: {player.shopName}
                </Button>
              </Link>
            )}
            <FavoriteButton initialFavorited={false} targetType="player" targetId={player.id} />
          </div>

          {player.user.bio ? (
            <div className="bg-muted/50 p-4 rounded-xl border border-border/50">
              <p className="text-sm leading-relaxed">{player.user.bio}</p>
            </div>
          ) : (
            <EmptyState className="min-h-[120px] p-6" title="暂无个人简介" />
          )}

          <div className="flex flex-wrap gap-2">
            {player.tags.map((tag) => (
              <Badge key={tag} variant="secondary" className="px-3 py-1">
                {tag}
              </Badge>
            ))}
          </div>
        </div>
      </div>

      <Tabs defaultValue="services" className="space-y-6">
        <TabsList variant="line">
          <TabsTrigger value="services">服务列表 ({playerServices.length})</TabsTrigger>
          <TabsTrigger value="reviews">评价 ({playerReviews.length})</TabsTrigger>
        </TabsList>

        <TabsContent value="services" className="mt-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {playerServices.map((service) => (
              <Card key={service.id} className="flex flex-col h-full">
                <CardHeader>
                  <div className="flex justify-between items-start">
                    <Badge variant="info" className="font-normal">
                      {service.gameName}
                    </Badge>
                    <div className="text-lg font-bold text-primary">
                      ¥{service.price}{" "}
                      <span className="text-sm text-muted-foreground font-normal">
                        / {service.unit}
                      </span>
                    </div>
                  </div>
                  <CardTitle className="mt-2 text-xl">{service.title}</CardTitle>
                  <CardDescription className="line-clamp-2 mt-1">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="flex-grow space-y-3 text-sm">
                  {service.rankRange && (
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <MapPin className="w-4 h-4" />
                      <span>段位: {service.rankRange}</span>
                    </div>
                  )}
                  <div className="flex items-start gap-2 text-muted-foreground">
                    <Clock className="w-4 h-4 mt-0.5" />
                    <div className="flex flex-col">
                      {service.availability.map((time) => (
                        <span key={time}>{time}</span>
                      ))}
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button className="w-full" asChild>
                    <Link href={`/order/new?serviceId=${service.id}`}>立即下单</Link>
                  </Button>
                </CardFooter>
              </Card>
            ))}
            {playerServices.length === 0 && (
              <div className="col-span-full">
                <EmptyState
                  title="暂无服务"
                  description="该陪玩尚未添加任何服务项"
                  icon={Gamepad2}
                />
              </div>
            )}
          </div>
        </TabsContent>

        <TabsContent value="reviews" className="mt-6">
          <div className="space-y-6">
            {playerReviews.length > 0 ? (
              playerReviews.map((review) => (
                <Card key={review.id}>
                  <CardContent className="p-6">
                    <div className="flex items-start gap-4">
                      <Avatar>
                        <AvatarImage src="" alt={review.fromUserName} />
                        <AvatarFallback>{review.fromUserName[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-grow space-y-2">
                        <div className="flex justify-between items-start">
                          <div>
                            <div className="font-medium">{review.fromUserName}</div>
                            <div className="text-xs text-muted-foreground">
                              {new Date(review.createdAt).toLocaleDateString()}
                            </div>
                          </div>
                          <div className="flex items-center text-warning">
                            {[1, 2, 3, 4, 5].map((star) => (
                              <Star
                                key={star}
                                className={`w-4 h-4 ${star <= review.rating ? "fill-warning" : "text-muted stroke-muted-foreground"}`}
                              />
                            ))}
                          </div>
                        </div>
                        <p className="text-sm text-foreground/90">{review.content}</p>
                        {review.sealed && (
                          <StatusBadge status="success" className="text-xs font-normal">
                            平台认证评价
                          </StatusBadge>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              <EmptyState title="暂无评价" description="还没有收到任何评价" icon={MessageSquare} />
            )}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
