"use client"

import { ArrowLeft, Lock, Star } from "lucide-react"
import Link from "next/link"
import { use, 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 { useOrderStore } from "@/store/orders"

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 updateOrderStatus = useOrderStore((state) => state.updateOrderStatus)
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [content, setContent] = useState("")
  const [submitted, setSubmitted] = useState(false)

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

  if (submitted) {
    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>
    )
  }

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

      <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}
            onClick={() => {
              updateOrderStatus(id, "completed")
              setSubmitted(true)
            }}
          >
            提交评价
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}