"use client"

import { Clock, MessageSquare, RefreshCw } from "lucide-react"
import Link from "next/link"
import { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { mockOrders } from "@/lib/mock-data"
import type { OrderStatus } from "@/lib/types"
import { cn } from "@/lib/utils"
import { useAuthStore } from "@/store/auth"

const statusLabels: Record<OrderStatus, string> = {
  pending_payment: "待支付",
  pending_accept: "待接单",
  in_progress: "进行中",
  pending_close: "待结单",
  pending_review: "待评价",
  disputed: "争议中",
  completed: "已完成",
  cancelled: "已取消",
}

const statusColors: Record<OrderStatus, string> = {
  pending_payment: "bg-yellow-100 text-yellow-800",
  pending_accept: "bg-blue-100 text-blue-800",
  in_progress: "bg-green-100 text-green-800",
  pending_close: "bg-orange-100 text-orange-800",
  pending_review: "bg-purple-100 text-purple-800",
  disputed: "bg-red-100 text-red-800",
  completed: "bg-gray-100 text-gray-800",
  cancelled: "bg-gray-100 text-gray-500",
}

type TabFilter = "all" | "active" | "completed" | "disputed"

export default function OrderListPage() {
  const [tab, setTab] = useState<TabFilter>("all")
  const { currentRole } = useAuthStore()

  const filtered = mockOrders.filter((order) => {
    if (tab === "active")
      return ["pending_accept", "in_progress", "pending_close", "pending_review"].includes(
        order.status,
      )
    if (tab === "completed") return order.status === "completed" || order.status === "cancelled"
    if (tab === "disputed") return order.status === "disputed"
    return true
  })

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">我的订单</h1>
        <Badge variant="outline" className="text-xs">
          {currentRole === "consumer"
            ? "消费者视角"
            : currentRole === "player"
              ? "打手视角"
              : "店主视角"}
        </Badge>
      </div>

      <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
        <TabsList>
          <TabsTrigger value="all">全部</TabsTrigger>
          <TabsTrigger value="active">进行中</TabsTrigger>
          <TabsTrigger value="completed">已完成</TabsTrigger>
          <TabsTrigger value="disputed">争议</TabsTrigger>
        </TabsList>

        <TabsContent value={tab} className="mt-4 space-y-3">
          {filtered.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">暂无订单</div>
          ) : (
            filtered.map((order) => (
              <Card key={order.id}>
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-base">{order.service.title}</CardTitle>
                    <Badge className={cn("text-xs", statusColors[order.status])}>
                      {statusLabels[order.status]}
                    </Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    {currentRole === "consumer"
                      ? `打手: ${order.playerName}`
                      : `消费者: ${order.consumerName}`}
                    {order.shopName && ` · ${order.shopName}`}
                  </p>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <span className="font-medium text-foreground">¥{order.totalPrice}</span>
                      <span className="flex items-center gap-1">
                        <Clock className="h-3.5 w-3.5" />
                        {new Date(order.createdAt).toLocaleDateString("zh-CN")}
                      </span>
                    </div>
                    <div className="flex gap-2">
                      {order.status === "in_progress" && (
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/chat/chat1`}>
                            <MessageSquare className="mr-1 h-3.5 w-3.5" />
                            聊天
                          </Link>
                        </Button>
                      )}
                      {order.status === "completed" && (
                        <Button variant="outline" size="sm">
                          <RefreshCw className="mr-1 h-3.5 w-3.5" />
                          再来一单
                        </Button>
                      )}
                      <Button size="sm" asChild>
                        <Link href={`/order/${order.id}`}>查看详情</Link>
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}