"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Loader2, TrendingUp, TrendingDown, DollarSign } from "lucide-react"
import { getFinancialData } from "@/lib/api"
import { formatNumber, formatLargeNumber, formatDate } from "@/lib/formatters"
import type { FinancialDataResponse } from "@/lib/types"

interface FinancialTablesProps {
    companyId: number
    dataSource: string
}

export function FinancialTables({ companyId, dataSource }: FinancialTablesProps) {
    const [data, setData] = useState<FinancialDataResponse | null>(null)
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState("")

    useEffect(() => {
        async function loadData() {
            setLoading(true)
            setError("")
            try {
                const result = await getFinancialData(companyId, dataSource)
                setData(result)
            } catch (err: any) {
                setError(err.message || "加载财务数据失败")
            } finally {
                setLoading(false)
            }
        }

        loadData()
    }, [companyId, dataSource])

    if (loading) {
        return (
            <Card>
                <CardContent className="pt-6 flex items-center justify-center min-h-[300px]">
                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </CardContent>
            </Card>
        )
    }

    if (error) {
        return (
            <Card>
                <CardContent className="pt-6">
                    <div className="text-center text-destructive">{error}</div>
                </CardContent>
            </Card>
        )
    }

    if (!data) {
        return null
    }

    const isBloomberg = dataSource === 'Bloomberg'
    const TableComponent = isBloomberg ? TransposedFinancialTable : FinancialTable

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <DollarSign className="h-5 w-5" />
                    财务数据
                </CardTitle>
            </CardHeader>
            <CardContent className="space-y-8">
                <div className="space-y-4">
                    <h3 className="text-lg font-semibold flex items-center gap-2">
                        <TrendingUp className="h-4 w-4" />
                        利润表
                    </h3>
                    <TableComponent
                        data={data.income_statement}
                        title="利润表"
                    />
                </div>

                <div className="space-y-4">
                    <h3 className="text-lg font-semibold flex items-center gap-2">
                        <TrendingDown className="h-4 w-4" />
                        资产负债表
                    </h3>
                    <TableComponent
                        data={data.balance_sheet}
                        title="资产负债表"
                    />
                </div>

                <div className="space-y-4">
                    <h3 className="text-lg font-semibold flex items-center gap-2">
                        <DollarSign className="h-4 w-4" />
                        现金流量表
                    </h3>
                    <TableComponent
                        data={data.cash_flow}
                        title="现金流量表"
                    />
                </div>

                <div className="space-y-4">
                    <h3 className="text-lg font-semibold flex items-center gap-2">
                        <TrendingUp className="h-4 w-4" />
                        估值数据
                    </h3>
                    <TableComponent
                        data={data.daily_basic}
                        title="估值数据"
                    />
                </div>
            </CardContent>
        </Card>
    )
}

interface FinancialTableProps {
    data: Record<string, any>[]
    title: string
    icon?: React.ReactNode
}

function FinancialTable({ data, title }: FinancialTableProps) {
    if (!data || data.length === 0) {
        return (
            <div className="text-center text-muted-foreground py-8">
                暂无{title}数据
            </div>
        )
    }

    // 获取所有列名（排除 id, code, ticker, market, update_date 等元数据列）
    const excludeColumns = ['id', 'code', 'ticker', 'market', 'update_date', 'ts_code']
    const columns = Object.keys(data[0]).filter(key => !excludeColumns.includes(key))

    return (
        <div className="rounded-md border">
            <div className="overflow-x-auto">
                <Table>
                    <TableHeader>
                        <TableRow>
                            {columns.map((column) => (
                                <TableHead key={column} className="whitespace-nowrap">
                                    {formatColumnName(column)}
                                </TableHead>
                            ))}
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {data.map((row, idx) => (
                            <TableRow key={idx}>
                                {columns.map((column) => (
                                    <TableCell key={column} className="text-right tabular-nums" style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' }}>
                                        {formatCellValue(column, row[column])}
                                    </TableCell>
                                ))}
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <div className="px-4 py-2 text-xs text-muted-foreground border-t">
                共 {data.length} 条记录
            </div>
        </div>
    )
}

function TransposedFinancialTable({ data, title }: FinancialTableProps) {
    if (!data || data.length === 0) {
        return (
            <div className="text-center text-muted-foreground py-8">
                暂无{title}数据
            </div>
        )
    }

    // 1. 提取所有日期 (Headers)
    // 假设 data 是按时间倒序排列的 (API通常如此)
    // 如果不是，建议在这里做个sort
    const sortedData = [...data].sort((a, b) =>
        new Date(b.end_date).getTime() - new Date(a.end_date).getTime()
    )
    const dates = sortedData.map(row => row['end_date']).filter(Boolean)

    // 2. 提取所有指标 (Rows)
    const excludeColumns = ['id', 'code', 'ticker', 'market', 'update_date', 'ts_code', 'end_date']
    // 从第一行获取所有指标key
    const indicators = Object.keys(sortedData[0]).filter(key => !excludeColumns.includes(key))

    return (
        <div className="rounded-md border">
            <div className="overflow-x-auto">
                <Table>
                    <TableHeader>
                        <TableRow>
                            {/* 第一列：指标名称 */}
                            <TableHead className="whitespace-nowrap w-[200px] min-w-[150px] sticky left-0 bg-background z-10 border-r shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">
                                指标 / 报告期
                            </TableHead>
                            {/* 其他列：日期 */}
                            {dates.map((date, idx) => (
                                <TableHead key={idx} className="whitespace-nowrap text-right px-4 min-w-[120px]">
                                    {formatDate(date)}
                                </TableHead>
                            ))}
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {indicators.map((indicator) => (
                            <TableRow key={indicator}>
                                {/* 指标名 */}
                                <TableCell className="font-medium sticky left-0 bg-background z-10 border-r shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">
                                    {formatColumnName(indicator)}
                                </TableCell>
                                {/* 值 */}
                                {sortedData.map((row, rowIdx) => (
                                    <TableCell key={rowIdx} className="text-right px-4 tabular-nums" style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' }}>
                                        {formatCellValue(indicator, row[indicator])}
                                    </TableCell>
                                ))}
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <div className="px-4 py-2 text-xs text-muted-foreground border-t">
                共 {indicators.length} 个指标
            </div>
        </div>
    )
}

// 格式化列名
function formatColumnName(column: string): string {
    const nameMap: Record<string, string> = {
        'end_date': '报告期',
        // Common
        'revenue': '营业收入',
        'net_income': '净利润',
        // Balance Sheet
        'total_assets': '总资产',
        'total_liabilities': '总负债',
        'total_equity': '股东权益',
        'cash': '货币资金',
        'inventory': '存货',
        'receivables': '应收账款',
        'prepayment': '预付款项',
        'fixed_assets': '固定资产',
        'long_term_investments': '长期投资',
        'accounts_payable': '应付账款',
        'short_term_debt': '短期借款',
        'long_term_debt': '长期借款',
        'deferred_revenue': '递延收入',
        'goodwill': '商誉',
        // Income
        'sga_exp': '销售管理费用',
        'selling_marketing_exp': '销售费用',
        'ga_exp': '管理费用',
        'rd_exp': '研发费用',
        'depreciation': '折旧',
        'operating_profit': '营业利润',
        // Cash Flow
        'ocf': '经营现金流',
        'capex': '资本支出',
        'dividends': '分红支付',
        'fcf': '自由现金流',
        // Metrics
        'pe': '市盈率(PE)',
        'pb': '市净率(PB)',
        'market_cap': '市值',
        'price': '最新股价',
        'roe': 'ROE',
        'roa': 'ROA',
    }
    return nameMap[column] || column
}

// 格式化单元格值
function formatCellValue(column: string, value: any): string {
    if (value === null || value === undefined) {
        return '-'
    }

    // 日期列
    if (column.includes('date')) {
        return formatDate(value)
    }

    // 数值列
    if (typeof value === 'number') {
        // 比率和百分比（PE、PB等）
        if (column.includes('ratio') || column.includes('pe') || column.includes('pb') || column.includes('margin') || column.includes('roe') || column.includes('roa') || column.includes('rate')) {
            return formatNumber(value)
        }
        // 大数字（金额、市值等）
        return formatLargeNumber(value)
    }

    return String(value)
}