"use client"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { requestWithAuth } from "@/lib/api"
import { listWalletTransactions } from "@/lib/api/transactions"
import { isActiveOrder, isCompletedOrder } from "@/lib/domain/order-filters"
import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
import { toApiError } from "@/lib/errors"
import type { WalletTransaction } from "@/lib/types"
import { useAuthStore } from "@/store/auth"
import { useOrderStore } from "@/store/orders"
import { useShopStore } from "@/store/shops"
import { ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
import { useEffect, useState } from "react"

export default function ShopIncomePage() {
  const userId = useAuthStore((state) => state.user?.id)
  const shops = useShopStore((state) => state.shops)
  const orders = useOrderStore((state) => state.orders)
  const shop = resolveOwnerShop(userId, shops)

  const [transactions, setTransactions] = useState<WalletTransaction[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [loadError, setLoadError] = useState<string | null>(null)

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

    let cancelled = false

    async function load() {
      setIsLoading(true)
      setLoadError(null)
      try {
        const res = await requestWithAuth(() => listWalletTransactions({ offset: 0, limit: 1000 }))
        if (cancelled) return
        if (!res) {
          setLoadError("请先登录")
          setTransactions([])
          return
        }
        setTransactions(res)
      } catch (error) {
        if (cancelled) return
        setLoadError(toApiError(error).msg)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }

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

  if (!shop) {
    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
  }

  const shopOrders = orders.filter((order) => order.shopId === shop?.id)
  const completedOrders = shopOrders.filter((o) => isCompletedOrder(o.status))
  const totalIncome = completedOrders.reduce((acc, order) => acc + order.totalPrice, 0)

  const currentMonth = new Date().getMonth()
  const thisMonthIncome = completedOrders
    .filter((o) => new Date(o.completedAt || "").getMonth() === currentMonth)
    .reduce((acc, order) => acc + order.totalPrice, 0)

  const pendingSettlement = shopOrders
    .filter(
      (o) =>
        isActiveOrder(o.status) && o.status !== "pending_payment" && o.status !== "pending_accept",
    )
    .reduce((acc, order) => acc + order.totalPrice, 0)

  const shopOrderIds = new Set(shopOrders.map((order) => order.id))
  const relatedTransactions = transactions.filter((transaction) => {
    if (transaction.type === "withdrawal") return true
    if (transaction.type !== "income") return false
    const match = transaction.description.match(/ord[-\d]+/)
    if (!match) return false
    return shopOrderIds.has(match[0])
  })

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
      <h1 className="text-2xl font-bold">收入统计</h1>

      <div className="grid gap-4 sm:grid-cols-3">
        <Card className="hover:shadow-card-hover">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">总收入</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">¥{totalIncome.toFixed(2)}</div>
          </CardContent>
        </Card>
        <Card className="hover:shadow-card-hover">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">本月收入</CardTitle>
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">¥{thisMonthIncome.toFixed(2)}</div>
          </CardContent>
        </Card>
        <Card className="hover:shadow-card-hover">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">待结算</CardTitle>
            <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">¥{pendingSettlement.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

      <Card className="hover:shadow-card-hover">
        <CardHeader>
          <CardTitle>交易明细</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>类型</TableHead>
                <TableHead>描述</TableHead>
                <TableHead>金额</TableHead>
                <TableHead>时间</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">
                    加载中...
                  </TableCell>
                </TableRow>
              ) : loadError ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-destructive text-sm">
                    {loadError}
                  </TableCell>
                </TableRow>
              ) : relatedTransactions.length > 0 ? (
                relatedTransactions.map((transaction) => (
                  <TableRow key={transaction.id}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        {Number(transaction.amount) > 0 ? (
                          <ArrowDownLeft className="h-4 w-4 text-green-500" />
                        ) : (
                          <ArrowUpRight className="h-4 w-4 text-red-500" />
                        )}
                        <Badge variant={Number(transaction.amount) > 0 ? "default" : "secondary"}>
                          {transaction.type === "topup"
                            ? "充值"
                            : transaction.type === "payment"
                              ? "支付"
                              : transaction.type === "income"
                                ? "收入"
                                : transaction.type === "withdrawal"
                                  ? "提现"
                                  : "退款"}
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>{transaction.description}</TableCell>
                    <TableCell
                      className={Number(transaction.amount) > 0 ? "text-green-600" : "text-red-600"}
                    >
                      {Number(transaction.amount) > 0 ? "+" : ""}
                      {transaction.amount}
                    </TableCell>
                    <TableCell>{new Date(transaction.createdAt).toLocaleString()}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">
                    暂无交易记录
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}