"use client"

import { AlertTriangle, ArrowLeft, Clock, FileText } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { use, useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { mockDisputes, mockOrders } from "@/lib/mock-data"

const disputeStatusLabels: Record<string, string> = {
  open: "已提交",
  reviewing: "审核中",
  resolved: "已解决",
  appealed: "申诉中",
}

export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const order = mockOrders.find((o) => o.id === id)
  const existingDispute = mockDisputes.find((d) => d.orderId === id)
  const [reason, setReason] = 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 (existingDispute) {
    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>
            <div className="flex items-center justify-between">
              <CardTitle>争议详情</CardTitle>
              <Badge variant="outline">{disputeStatusLabels[existingDispute.status]}</Badge>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <FileText className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">发起人:</span>
                {existingDispute.initiatorName}
              </div>
              <div className="flex items-center gap-2 text-sm">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">提交时间:</span>
                {new Date(existingDispute.createdAt).toLocaleString("zh-CN")}
              </div>
            </div>
            <Separator />
            <div>
              <Label className="text-muted-foreground">争议原因</Label>
              <p className="mt-1 text-sm">{existingDispute.reason}</p>
            </div>
            {existingDispute.evidence.length > 0 && (
              <div>
                <Label className="text-muted-foreground">证据截图</Label>
                <div className="mt-1 flex gap-2">
                  {existingDispute.evidence.map((url) => (
                    <div
                      key={url}
                      className="relative h-20 w-20 rounded border overflow-hidden bg-muted"
                    >
                      <Image src={url} alt="证据截图" fill className="object-cover" />
                    </div>
                  ))}
                </div>
              </div>
            )}
            {existingDispute.result && (
              <>
                <Separator />
                <div>
                  <Label className="text-muted-foreground">仲裁结果</Label>
                  <p className="mt-1 text-sm font-medium">
                    {existingDispute.result === "full_refund"
                      ? "全额退款"
                      : existingDispute.result === "full_payment"
                        ? "全额支付给打手"
                        : "部分退款"}
                  </p>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    )
  }

  if (submitted) {
    return (
      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
        <AlertTriangle className="h-12 w-12 mx-auto text-yellow-500" />
        <h2 className="text-xl font-bold">争议已提交</h2>
        <p className="text-sm text-muted-foreground">
          平台将在 3 个工作日内审核你的争议申请，期间聊天会话仍可使用。
        </p>
        <Button asChild>
          <Link href={`/order/${id}`}>返回订单</Link>
        </Button>
      </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 className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-yellow-500" />
            发起争议
          </CardTitle>
          <p className="text-sm text-muted-foreground">
            {order.service.title} · {order.playerName}
          </p>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="dispute-reason">争议原因</Label>
            <Textarea
              id="dispute-reason"
              placeholder="请详细描述你遇到的问题..."
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              rows={4}
            />
          </div>

          <div className="space-y-2">
            <Label>上传证据截图</Label>
            <div className="border-2 border-dashed rounded-md p-6 text-center text-sm text-muted-foreground">
              点击或拖拽上传截图（最多5张）
            </div>
          </div>

          <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1">
            <p>· 提交争议后，订单资金将继续托管</p>
            <p>· 聊天记录将作为证据保留</p>
            <p>· 平台将在 3 个工作日内审核</p>
            <p>· 对仲裁结果不满可申诉一次</p>
          </div>

          <Button className="w-full" disabled={!reason.trim()} onClick={() => setSubmitted(true)}>
            提交争议
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}