"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { StatusBadge } from "@/components/ui/status-badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { listChatSessions, listOrders } from "@/lib/api"
import { statusLabels } from "@/lib/constants"
import {
  isActiveOrder,
  isCompletedOrder,
  isDisputedOrder,
  isPendingDispatch,
} from "@/lib/domain/order-filters"
import { useMyShop } from "@/lib/hooks/use-my-shop"
import type { OrderStatus, UserRole } from "@/lib/types"
import { useAuthStore } from "@/store/auth"
import { ClipboardList, Clock, MessageSquare, RefreshCw } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"

type OrderStatusBadgeVariant = "success" | "warning" | "info" | "neutral" | "destructive"

const statusVariants: Record<OrderStatus, OrderStatusBadgeVariant> = {
  pending_payment: "warning",
  pending_accept: "info",
  in_progress: "success",
  pending_close: "info",
  pending_review: "info",
  disputed: "destructive",
  completed: "success",
  cancelled: "neutral",
}

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

const consumerTabs = [
  { value: "all", label: "全部" },
  { value: "active", label: "进行中" },
  { value: "completed", label: "已完成" },
  { value: "disputed", label: "争议" },
]

const playerTabs = [
  { value: "all", label: "全部" },
  { value: "pending", label: "待接单" },
  { value: "active", label: "进行中" },
  { value: "completed", label: "已完成" },
]

const ownerTabs = [
  { value: "all", label: "全部" },
  { value: "pending", label: "待派单" },
  { value: "active", label: "进行中" },
  { value: "completed", label: "已完成" },
  { value: "disputed", label: "争议" },
]

function getOrderRole(role: UserRole): "consumer" | "player" | "owner" | undefined {
  if (role === "consumer" || role === "player" || role === "owner") {
    return role
  }
  return undefined
}

export default function OrderListPage() {
  const { currentRole, user } = useAuthStore()
  const {
    shop: ownerShop,
    loading: shopLoading,
    error: shopError,
  } = useMyShop(currentRole === "owner")

  if (currentRole === "owner" && shopLoading) {
    return (
      <div className="container mx-auto max-w-3xl px-4 py-8">
        <EmptyState title="加载中" description="正在读取店铺订单视角..." icon={RefreshCw} />
      </div>
    )
  }

  if (currentRole === "owner" && shopError) {
    return (
      <div className="container mx-auto max-w-3xl px-4 py-8">
        <EmptyState title="无法读取订单" description={shopError} icon={ClipboardList} />
      </div>
    )
  }

  return (
    <OrderListContent
      key={currentRole}
      currentRole={currentRole}
      userId={user?.id}
      ownerShopId={ownerShop?.id}
    />
  )
}

function OrderListContent({
  currentRole,
  userId,
  ownerShopId,
}: {
  currentRole: UserRole
  userId?: string
  ownerShopId?: string
}) {
  const orderRole = getOrderRole(currentRole)
  const [tab, setTab] = useState<TabFilter | "pending">("all")
  const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
  const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])

  useEffect(() => {
    let cancelled = false

    if (!orderRole) {
      return () => {
        cancelled = true
      }
    }

    void (async () => {
      try {
        const items = await Promise.resolve(listOrders({ role: orderRole }))
        if (cancelled) return
        setOrders(items)
      } catch {
        if (cancelled) return
        setOrders([])
      }
    })()

    return () => {
      cancelled = true
    }
  }, [orderRole])

  useEffect(() => {
    let cancelled = false

    void (async () => {
      try {
        const items = await Promise.resolve(listChatSessions())
        if (cancelled) return
        setSessions(items)
      } catch {
        if (cancelled) return
        setSessions([])
      }
    })()

    return () => {
      cancelled = true
    }
  }, [])

  const tabs =
    currentRole === "consumer" ? consumerTabs : currentRole === "player" ? playerTabs : ownerTabs

  const roleFiltered = orders.filter((order) => {
    if (currentRole === "consumer") return userId ? order.consumerId === userId : false
    if (currentRole === "player") return userId ? order.playerId === userId : false
    return ownerShopId ? order.shopId === ownerShopId : false
  })

  const filtered = roleFiltered.filter((order) => {
    if (tab === "pending") return isPendingDispatch(order.status)
    if (tab === "active") return isActiveOrder(order.status)
    if (tab === "completed") return isCompletedOrder(order.status, { includeCancelled: true })
    if (tab === "disputed") return isDisputedOrder(order.status)
    return true
  })

  return (
    <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">我的订单</h1>
        <Badge variant="outline" className="text-xs">
          {currentRole === "consumer"
            ? "客户视角"
            : currentRole === "player"
              ? "打手视角"
              : currentRole === "owner"
                ? "店主视角"
                : "管理员视角"}
        </Badge>
      </div>

      {!orderRole ? (
        <EmptyState
          title="当前身份暂不支持订单视角"
          description="切换到客户、打手或店主身份后可查看对应订单。"
          icon={ClipboardList}
        />
      ) : (
        <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter | "pending")}>
          <TabsList variant="line">
            {tabs.map((item) => (
              <TabsTrigger key={item.value} value={item.value}>
                {item.label}
              </TabsTrigger>
            ))}
          </TabsList>

          <TabsContent value={tab} className="mt-4 space-y-4">
            {filtered.length === 0 ? (
              <EmptyState
                title="暂无订单"
                description="当前筛选下还没有订单记录。"
                icon={ClipboardList}
              />
            ) : (
              filtered.map((order) => (
                <Card key={order.id} className="border-border/80 shadow-sm">
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-base">{order.service.title}</CardTitle>
                      <StatusBadge
                        status={statusVariants[order.status]}
                        className="text-xs font-normal"
                      >
                        {statusLabels[order.status]}
                      </StatusBadge>
                    </div>
                    <p className="text-sm text-muted-foreground">{order.service.title}</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">
                        {(() => {
                          if (order.status !== "in_progress" && order.status !== "pending_close") {
                            return null
                          }
                          const session = sessions.find(
                            (item) => item.type === "order" && item.orderId === order.id,
                          )
                          if (!session) return null
                          return (
                            <Button variant="outline" size="sm" asChild>
                              <Link href={`/chat/${session.id}`}>
                                <MessageSquare className="mr-1 h-3.5 w-3.5" />
                                聊天
                              </Link>
                            </Button>
                          )
                        })()}
                        {order.status === "completed" && (
                          <Button variant="outline" size="sm" asChild>
                            <Link href={`/order/new?serviceId=${order.service.id}`}>
                              <RefreshCw className="mr-1 h-3.5 w-3.5" />
                              再来一单
                            </Link>
                          </Button>
                        )}
                        <Button size="sm" asChild>
                          <Link href={`/order/${order.id}`}>查看详情</Link>
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))
            )}
          </TabsContent>
        </Tabs>
      )}
    </div>
  )
}