"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 { getShopIncomeStats } from "@/lib/api"
import type { ShopIncomeStats } from "@/lib/api/shops"
import { listWalletTransactions } from "@/lib/api/transactions"
import { toApiError } from "@/lib/errors"
import { useMyShop } from "@/lib/hooks/use-my-shop"
import type { WalletTransaction } from "@/lib/types"
import { ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
import { useEffect, useState } from "react"

const emptyStats: ShopIncomeStats = {
  monthlyIncome: "0",
  pendingSettlement: "0",
  totalWithdrawn: "0",
  totalOrders: 0,
  completedOrders: 0,
}

export default function ShopIncomePage() {
  const { shop, loading, error } = useMyShop()

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

  useEffect(() => {
    if (!shop) return
    const shopId = shop.id

    let cancelled = false

    async function load() {
      setIsLoading(true)
      setLoadError(null)
      try {
        const [nextStats, nextTransactions] = await Promise.all([
          getShopIncomeStats(shopId),
          listWalletTransactions({ offset: 0, limit: 1000 }),
        ])
        if (cancelled) return
        setStats(nextStats)
        setTransactions(nextTransactions)
      } catch (error) {
        if (cancelled) return
        setLoadError(toApiError(error).msg)
      } finally {
        if (!cancelled) setIsLoading(false)
      }
    }

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

  if (loading) {
    return <div className="text-sm text-muted-foreground">加载中...</div>
  }

  if (error) {
    return <div className="text-sm text-muted-foreground">{error}</div>
  }

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

  const relatedTransactions = transactions.filter(
    (transaction) => transaction.type === "income" || transaction.type === "withdrawal",
  )

  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">¥{stats.monthlyIncome}</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">¥{stats.pendingSettlement}</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">¥{stats.totalWithdrawn}</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>
  )
}