"use client"

import { AlertTriangle, ArrowLeft, Clock, FileText, Upload, X } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { type ChangeEvent, use, useEffect, useRef, 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"

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

export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const searchParams = useSearchParams()
  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)
  const [files, setFiles] = useState<string[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)
  const filesRef = useRef<string[]>([])

  useEffect(() => {
    filesRef.current = files
  }, [files])

  useEffect(
    () => () => {
      filesRef.current.forEach((url) => {
        URL.revokeObjectURL(url)
      })
    },
    [],
  )

  const handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = event.target.files
    if (!selectedFiles?.length) return

    setFiles((prev) => {
      const remaining = 5 - prev.length
      if (remaining <= 0) return prev
      const nextUrls = Array.from(selectedFiles)
        .slice(0, remaining)
        .map((file) => URL.createObjectURL(file))
      return [...prev, ...nextUrls]
    })

    event.target.value = ""
  }

  const handleRemoveFile = (index: number) => {
    setFiles((prev) => {
      const removed = prev[index]
      if (removed) URL.revokeObjectURL(removed)
      return prev.filter((_, currentIndex) => currentIndex !== index)
    })
  }

  const handleSubmit = () => {
    setSubmitted(true)
    router.replace(`/dispute/${id}?submitted=1`)
  }

  const showSubmitted = submitted || searchParams.get("submitted") === "1"

  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 (showSubmitted) {
    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>
        <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 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>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              multiple
              className="hidden"
              onChange={handleFileSelect}
            />
            <button
              type="button"
              className="w-full border-2 border-dashed rounded-md p-6 text-center text-sm text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors disabled:opacity-50"
              onClick={() => fileInputRef.current?.click()}
              disabled={files.length >= 5}
            >
              <div className="flex flex-col items-center gap-2">
                <Upload className="h-5 w-5" />
                <span>点击上传截图（最多5张）</span>
              </div>
            </button>
            {files.length > 0 && (
              <div className="grid grid-cols-5 gap-2">
                {files.map((fileUrl, index) => (
                  <div
                    key={fileUrl}
                    className="relative h-16 w-16 rounded border overflow-hidden bg-muted"
                  >
                    <Image
                      src={fileUrl}
                      alt={`证据截图 ${index + 1}`}
                      fill
                      unoptimized
                      className="object-cover"
                    />
                    <button
                      type="button"
                      className="absolute right-0 top-0 rounded-bl bg-background/90 p-0.5"
                      onClick={() => handleRemoveFile(index)}
                    >
                      <X className="h-3 w-3" />
                    </button>
                  </div>
                ))}
              </div>
            )}
            <div className="text-xs 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={handleSubmit}>
            提交争议
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}