"use client"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
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 { AlertCircle, 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="container mx-auto max-w-6xl px-4 py-8">
        <EmptyState title="收入信息加载中" icon={CreditCard} />
      </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={CreditCard} />
      </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="border-border/80 shadow-sm">
          <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="border-border/80 shadow-sm">
          <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="border-border/80 shadow-sm">
          <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="border-border/80 shadow-sm">
        <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="py-6">
                    <EmptyState title="交易加载中" icon={CreditCard} className="min-h-[180px]" />
                  </TableCell>
                </TableRow>
              ) : loadError ? (
                <TableRow>
                  <TableCell colSpan={4} className="py-6">
                    <EmptyState
                      title="交易加载失败"
                      description={loadError}
                      icon={AlertCircle}
                      className="min-h-[180px]"
                    />
                  </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-success" />
                        ) : (
                          <ArrowUpRight className="h-4 w-4 text-destructive" />
                        )}
                        <Badge variant={Number(transaction.amount) > 0 ? "success" : "destructive"}>
                          {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-success" : "text-destructive"
                      }
                    >
                      {Number(transaction.amount) > 0 ? "+" : ""}
                      {transaction.amount}
                    </TableCell>
                    <TableCell>{new Date(transaction.createdAt).toLocaleString()}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={4} className="py-6">
                    <EmptyState
                      title="暂无交易记录"
                      icon={CreditCard}
                      className="min-h-[180px] border-dashed"
                    />
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}