"use client"

import { ArrowLeft, Lock, Star } from "lucide-react"
import Link from "next/link"
import { use, useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { submitReview } from "@/lib/api/reviews"
import { notifyInfo, notifySuccess } from "@/lib/toast"
import { useAuthStore } from "@/store/auth"
import { useOrderStore } from "@/store/orders"
import { useReviewStore } from "@/store/reviews"

export default function ReviewPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
  const userId = useAuthStore((state) => state.user?.id)
  const allReviews = useReviewStore((state) => state.reviews)
  // The selector returns the raw store array and useMemo derives the subset.
  // This keeps useSyncExternalStore snapshots stable across render checks.
  // Inline filter inside the selector creates a new array reference each call
  // and can cause infinite re-render loops in Zustand v5 (pmndrs/zustand#3155).
  const reviews = useMemo(() => allReviews.filter((item) => item.orderId === id), [allReviews, id])
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [content, setContent] = useState("")

  if (!order) {
    return (
      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
        订单不存在
      </div>
    )
  }

  const hasSubmitted = Boolean(userId && reviews.some((review) => review.fromUserId === userId))
  const isRevealed = reviews.length >= 2 && reviews.every((review) => !review.sealed)

  if (order.status !== "pending_review") {
    return (
      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
        <h2 className="text-xl font-bold">当前阶段不可评价</h2>
        <p className="text-sm text-muted-foreground">仅待评价状态的订单可以提交评价。</p>
        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
          返回订单详情
        </Link>
      </div>
    )
  }

  if (hasSubmitted && !isRevealed) {
    return (
      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
        <Lock className="h-12 w-12 mx-auto text-muted-foreground" />
        <h2 className="text-xl font-bold">评价已提交</h2>
        <p className="text-sm text-muted-foreground">等待对方提交评价中</p>
        <p className="text-sm text-muted-foreground">双方都提交评价后将同时揭晓</p>
        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
          返回订单详情
        </Link>
      </div>
    )
  }

  if (hasSubmitted && isRevealed) {
    return (
      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
        <h2 className="text-xl font-bold">评价已揭晓</h2>
        <p className="text-sm text-muted-foreground">双方评价已同步公开，可在订单详情查看。</p>
        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
          返回订单详情
        </Link>
      </div>
    )
  }

  return (
    <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
      <Link
        href={`/order/${id}`}
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" />
        返回订单
      </Link>

      <Card className="hover:shadow-[var(--shadow-card)]">
        <CardHeader>
          <CardTitle>评价服务</CardTitle>
          <p className="text-sm text-muted-foreground">
            {order.service.title} · {order.playerName}
          </p>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>评分</Label>
            <div className="flex gap-1">
              {[1, 2, 3, 4, 5].map((star) => (
                <button
                  key={star}
                  type="button"
                  onClick={() => setRating(star)}
                  onMouseEnter={() => setHoverRating(star)}
                  onMouseLeave={() => setHoverRating(0)}
                  className="p-0.5"
                >
                  <Star
                    className={`h-8 w-8 transition-colors ${
                      star <= (hoverRating || rating)
                        ? "fill-yellow-400 text-yellow-400"
                        : "text-muted"
                    }`}
                  />
                </button>
              ))}
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="review-content">评价内容（可选）</Label>
            <Textarea
              id="review-content"
              placeholder="分享你的体验..."
              value={content}
              onChange={(e) => setContent(e.target.value)}
              rows={4}
            />
          </div>

          <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground flex items-start gap-2">
            <Lock className="h-4 w-4 shrink-0 mt-0.5" />
            <span>评价采用密封机制：你的评价将在双方都提交后同时揭晓。</span>
          </div>

          <Button
            className="w-full"
            disabled={rating === 0 || !userId}
            onClick={() => {
              if (!userId) {
                notifyInfo("请先登录")
                return
              }

              const decision = submitReview({
                orderId: id,
                rating,
                content,
              })

              if (decision.ok) {
                notifySuccess("评价已提交")
                return
              }

              notifyInfo(decision.message ?? "评价提交失败")
            }}
          >
            提交评价
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}