"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { StatusBadge, type StatusBadgeProps } from "@/components/ui/status-badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { listOrders } from "@/lib/api"
import { statusLabels } from "@/lib/constants"
import { isActiveOrder, isCompletedOrder, isDisputedOrder } from "@/lib/domain/order-filters"
import { toApiError } from "@/lib/errors"
import { useMyShop } from "@/lib/hooks/use-my-shop"
import { notifyInfo } from "@/lib/toast"
import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
import Link from "next/link"
import { useEffect, useMemo, useState } from "react"

const orderStatusVariants: Record<string, StatusBadgeProps["status"]> = {
  pending_payment: "warning",
  pending_accept: "info",
  in_progress: "success",
  pending_close: "info",
  pending_review: "info",
  disputed: "destructive",
  completed: "success",
  cancelled: "neutral",
}

export default function ShopOrdersPage() {
  const { shop, loading, error } = useMyShop()
  const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
  const [ordersLoading, setOrdersLoading] = useState(true)

  useEffect(() => {
    if (!shop) return

    let cancelled = false

    listOrders({ role: "owner" })
      .then((items) => {
        if (cancelled) return
        setOrders(items)
      })
      .catch((error) => {
        if (cancelled) return
        notifyInfo(toApiError(error).msg)
      })
      .finally(() => {
        if (cancelled) return
        setOrdersLoading(false)
      })

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

  const shopOrders = useMemo(
    () => (shop ? orders.filter((order) => order.shopId === shop.id) : []),
    [orders, shop],
  )

  if (loading) {
    return (
      <div className="container mx-auto max-w-6xl px-4 py-8">
        <EmptyState title="店铺信息加载中" icon={Clock} />
      </div>
    )
  }

  if (error) {
    return (
      <div className="container mx-auto max-w-6xl px-4 py-8">
        <EmptyState title="店铺信息加载失败" description={error} icon={AlertCircle} />
      </div>
    )
  }

  if (!shop) {
    return (
      <div className="container mx-auto max-w-6xl px-4 py-8">
        <EmptyState title="当前账号没有可管理的店铺" icon={ListOrdered} />
      </div>
    )
  }

  const totalOrders = shopOrders.length
  const activeOrders = shopOrders.filter((o) => isActiveOrder(o.status)).length
  const completedOrders = shopOrders.filter((o) => isCompletedOrder(o.status)).length
  const disputedOrders = shopOrders.filter((o) => isDisputedOrder(o.status)).length

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">订单总览</h1>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card className="border-border/80 shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">总订单</CardTitle>
            <ListOrdered className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalOrders}</div>
          </CardContent>
        </Card>
        <Card className="border-border/80 shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">进行中</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{activeOrders}</div>
          </CardContent>
        </Card>
        <Card className="border-border/80 shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">已完成</CardTitle>
            <CheckCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{completedOrders}</div>
          </CardContent>
        </Card>
        <Card className="border-border/80 shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">争议订单</CardTitle>
            <AlertCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{disputedOrders}</div>
          </CardContent>
        </Card>
      </div>

      <Card className="border-border/80 shadow-sm">
        <CardHeader>
          <CardTitle>订单列表</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>服务名称</TableHead>
                <TableHead>客户</TableHead>
                <TableHead>打手</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>金额</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {ordersLoading ? (
                <TableRow>
                  <TableCell colSpan={7} className="py-6">
                    <EmptyState title="订单加载中" icon={Clock} className="min-h-[180px]" />
                  </TableCell>
                </TableRow>
              ) : shopOrders.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="py-6">
                    <EmptyState
                      title="暂无订单"
                      description="店铺产生订单后会出现在这里。"
                      icon={ListOrdered}
                      className="min-h-[180px]"
                    />
                  </TableCell>
                </TableRow>
              ) : (
                shopOrders.map((order) => (
                  <TableRow key={order.id}>
                    <TableCell className="font-medium">{order.service.title}</TableCell>
                    <TableCell>{order.consumerId}</TableCell>
                    <TableCell>{order.playerId}</TableCell>
                    <TableCell>
                      <StatusBadge status={orderStatusVariants[order.status] ?? "neutral"}>
                        {statusLabels[order.status]}
                      </StatusBadge>
                    </TableCell>
                    <TableCell className="font-medium tabular-nums">¥{order.totalPrice}</TableCell>
                    <TableCell className="text-muted-foreground">
                      {new Date(order.createdAt).toLocaleDateString()}
                    </TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="sm" asChild>
                        <Link href={`/order/${order.id}`}>查看</Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}