import CloudSyncOutlined from "@mui/icons-material/CloudSyncOutlined";
import FileDownloadOutlined from "@mui/icons-material/FileDownloadOutlined";
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TextField from "@mui/material/TextField";
import { useState } from "react";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
import {
    EMPTY_RECHARGE_SUMMARY,
    formatAmount,
    formatMicroMoney,
    formatTime,
    formatUsdMinor,
    rechargeSourceTone,
    rechargeTypeLabel,
} from "../format.js";

const SOURCE_FILTERS = [
    { label: "全部来源", value: "" },
    { label: "谷歌充值", value: "google_play_recharge" },
    { label: "三方充值", value: "third_party" },
    { label: "币商充值", value: "coin_seller" },
];

const KPI_CARDS = [
    { filter: "", key: "total", label: "充值总和", tone: "total" },
    { filter: "google_play_recharge", key: "googlePlay", label: "谷歌充值", tone: "google" },
    { filter: "third_party", key: "thirdParty", label: "三方充值", tone: "thirdparty" },
    { filter: "coin_seller", key: "coinSeller", label: "币商充值", tone: "coinseller" },
];

export function FinanceRechargeDetailList({
    bills,
    error,
    exporting,
    filters,
    googlePaidRefreshing,
    loading,
    onExport,
    onFiltersChange,
    onRefreshGooglePaid,
    onReload,
    options,
    regions,
    summary,
    summaryLoading,
}) {
    const [showCoinColumns, setShowCoinColumns] = useState(false);
    const items = bills.items || [];
    const page = Number(bills.page || filters.page || 1);
    const pageSize = Number(bills.pageSize || 50);
    const total = Number(bills.total || 0);
    const hasNextPage = page * pageSize < total;
    const regionOptions = regions || [];
    const visibleColumnCount = showCoinColumns ? 9 : 7;
    const pendingGoogleTxIds = items
        .filter((item) => item.rechargeType === "google_play_recharge" && !item.paidSyncedAtMs)
        .map((item) => item.transactionId)
        .filter(Boolean);

    return (
        <section className="finance-panel finance-list">
            <RechargeKpiBand
                activeFilter={filters.rechargeType || ""}
                loading={summaryLoading}
                showCoins={showCoinColumns}
                summary={summary}
                onSelect={(value) => onFiltersChange({ rechargeType: value })}
            />
            <div className="finance-filterbar">
                <TextField
                    className="finance-filterbar__field"
                    label="APP"
                    select
                    value={filters.appCode}
                    onChange={(event) => onFiltersChange({ appCode: event.target.value, regionId: "" })}
                >
                    <MenuItem value="">全部 APP</MenuItem>
                    {options.apps.map((app) => (
                        <MenuItem key={app.appCode} value={app.appCode}>
                            {app.appName || app.appCode}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className="finance-filterbar__field"
                    disabled={!filters.appCode}
                    label="区域"
                    select
                    title={filters.appCode ? "" : "先选择 APP"}
                    value={filters.regionId}
                    onChange={(event) => onFiltersChange({ regionId: event.target.value })}
                >
                    <MenuItem value="">全部区域</MenuItem>
                    {regionOptions.map((region) => (
                        <MenuItem key={region.regionId} value={String(region.regionId)}>
                            {region.name || region.regionCode || region.regionId}
                        </MenuItem>
                    ))}
                </TextField>
                <TextField
                    className="finance-filterbar__field"
                    label="充值来源"
                    select
                    value={filters.rechargeType || ""}
                    onChange={(event) => onFiltersChange({ rechargeType: event.target.value })}
                >
                    {SOURCE_FILTERS.map((source) => (
                        <MenuItem key={source.value} value={source.value}>
                            {source.label}
                        </MenuItem>
                    ))}
                </TextField>
                <TimeRangeFilter
                    label="充值时间 · 中国时区"
                    value={filters.timeRange}
                    onChange={(timeRange) => onFiltersChange({ timeRange })}
                />
                <TextField
                    className="finance-filterbar__field finance-filterbar__field--search"
                    label="订单搜索"
                    placeholder="交易号 / 三方单号 / 凭证号"
                    value={filters.keyword}
                    onChange={(event) => onFiltersChange({ keyword: event.target.value })}
                />
            </div>
            <div className="finance-actionbar">
                <div className="finance-actionbar__presets">
                    {timePresets().map((preset) => (
                        <button
                            className={[
                                "finance-chip",
                                isPresetActive(filters.timeRange, preset) ? "finance-chip--active" : "",
                            ]
                                .filter(Boolean)
                                .join(" ")}
                            key={preset.label}
                            type="button"
                            onClick={() => onFiltersChange({ timeRange: preset.range })}
                        >
                            {preset.label}
                        </button>
                    ))}
                </div>
                <div className="finance-actionbar__actions">
                    <label className="finance-switch-field">
                        <AdminSwitch
                            checked={showCoinColumns}
                            label="金币显示"
                            onChange={(event) => setShowCoinColumns(event.target.checked)}
                        />
                        <span>金币显示</span>
                    </label>
                    <Button
                        disabled={googlePaidRefreshing || !filters.appCode || !pendingGoogleTxIds.length}
                        size="small"
                        startIcon={<CloudSyncOutlined fontSize="small" />}
                        title={filters.appCode ? "查询本页谷歌订单的用户实付币种和金额" : "先选择 APP 后可查询"}
                        variant="outlined"
                        onClick={() => onRefreshGooglePaid(pendingGoogleTxIds)}
                    >
                        {googlePaidRefreshing ? "查询中…" : "查询谷歌实付"}
                    </Button>
                    <Button
                        disabled={exporting || !filters.appCode}
                        size="small"
                        startIcon={<FileDownloadOutlined fontSize="small" />}
                        title={
                            filters.appCode ? "按当前筛选导出全部明细（CSV，可用 Excel 打开）" : "先选择 APP 后可导出"
                        }
                        variant="contained"
                        onClick={onExport}
                    >
                        {exporting ? "导出中…" : "导出报表"}
                    </Button>
                    <Button
                        size="small"
                        startIcon={<RefreshOutlined fontSize="small" />}
                        variant="outlined"
                        onClick={onReload}
                    >
                        刷新
                    </Button>
                </div>
            </div>
            {error ? <div className="finance-error">{error}</div> : null}
            {loading && !items.length ? <div className="finance-skeleton" /> : null}
            {!loading || items.length ? (
                <TableContainer className="finance-table-wrap">
                    <Table
                        className={[
                            "finance-table",
                            "finance-table--recharge-details",
                            showCoinColumns ? "finance-table--recharge-details-with-coins" : "",
                        ]
                            .filter(Boolean)
                            .join(" ")}
                        size="small"
                        stickyHeader
                    >
                        <TableHead>
                            <TableRow>
                                <TableCell className="finance-time-cell">充值时间</TableCell>
                                <TableCell>APP</TableCell>
                                <TableCell>充值来源</TableCell>
                                <TableCell>充值订单号</TableCell>
                                {showCoinColumns ? <TableCell align="right">充值金币</TableCell> : null}
                                {showCoinColumns ? <TableCell>金币换算</TableCell> : null}
                                <TableCell align="right">账单金额</TableCell>
                                <TableCell align="right">用户实付</TableCell>
                                <TableCell align="right">三方税率扣款</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {items.length ? (
                                items.map((item) => (
                                    <TableRow hover key={item.id || item.transactionId}>
                                        <TableCell className="finance-time-cell">
                                            {formatTime(item.createdAtMs)}
                                        </TableCell>
                                        <TableCell>{appName(item, options.apps)}</TableCell>
                                        <TableCell>
                                            <SourceBadge rechargeType={item.rechargeType} />
                                        </TableCell>
                                        <TableCell className="finance-order-cell">
                                            <Stacked
                                                primary={item.transactionId || "-"}
                                                secondary={secondaryOrderNo(item)}
                                            />
                                        </TableCell>
                                        {showCoinColumns ? (
                                            <TableCell align="right">
                                                <AmountText value={item.coinAmount}>
                                                    {coinText(item.coinAmount)}
                                                </AmountText>
                                            </TableCell>
                                        ) : null}
                                        {showCoinColumns ? <TableCell>{exchangeText(item)}</TableCell> : null}
                                        <TableCell align="right">
                                            <AmountText value={item.usdMinorAmount}>{billAmountText(item)}</AmountText>
                                        </TableCell>
                                        <TableCell align="right">
                                            <AmountText value={item.userPaidAmountMicro}>
                                                {userPaidText(item)}
                                            </AmountText>
                                        </TableCell>
                                        <TableCell align="right">{taxDeductionText(item)}</TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell align="center" colSpan={visibleColumnCount}>
                                        当前筛选条件下没有账单
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </TableContainer>
            ) : null}
            <div className="finance-pagination">
                <span className="finance-pagination__meta">
                    共 {formatAmount(total)} 笔 · 第 {page} / {Math.max(1, Math.ceil(total / pageSize))} 页
                </span>
                <div className="finance-pagination__buttons">
                    <Button
                        disabled={page <= 1 || loading}
                        size="small"
                        variant="outlined"
                        onClick={() => onFiltersChange({ page: page - 1 })}
                    >
                        上一页
                    </Button>
                    <Button
                        disabled={!hasNextPage || loading}
                        size="small"
                        variant="outlined"
                        onClick={() => onFiltersChange({ page: page + 1 })}
                    >
                        下一页
                    </Button>
                </div>
            </div>
        </section>
    );
}

function RechargeKpiBand({ activeFilter, loading, onSelect, showCoins, summary }) {
    const data = summary || EMPTY_RECHARGE_SUMMARY;
    const totalUsd = Number(data.total?.usdMinorAmount) || 0;
    return (
        <div className="finance-kpi-band">
            {KPI_CARDS.map(({ filter, key, label, tone }) => {
                const bucket = data[key] || { billCount: 0, coinAmount: 0, usdMinorAmount: 0 };
                const active = activeFilter === filter;
                return (
                    <button
                        className={["finance-kpi", `finance-kpi--${tone}`, active ? "finance-kpi--active" : ""]
                            .filter(Boolean)
                            .join(" ")}
                        key={key}
                        title={filter ? `点击只看${label}` : "点击查看全部来源"}
                        type="button"
                        onClick={() => onSelect(active && filter ? "" : filter)}
                    >
                        <span className="finance-kpi__label">{label}</span>
                        <strong className="finance-kpi__value">
                            {loading ? "…" : formatUsdMinor(bucket.usdMinorAmount, "USD")}
                        </strong>
                        <small className="finance-kpi__meta">
                            {loading ? "统计中" : kpiMetaText(bucket, key, totalUsd, showCoins)}
                        </small>
                    </button>
                );
            })}
        </div>
    );
}

function kpiMetaText(bucket, key, totalUsd, showCoins) {
    const parts = [`${formatAmount(bucket.billCount)} 笔`];
    if (key !== "total" && totalUsd > 0) {
        const share = ((Number(bucket.usdMinorAmount) || 0) / totalUsd) * 100;
        parts.push(`占比 ${share.toLocaleString("zh-CN", { maximumFractionDigits: 1 })}%`);
    }
    if (showCoins) {
        parts.push(`${formatAmount(bucket.coinAmount)} 金币`);
    }
    return parts.join(" · ");
}

function SourceBadge({ rechargeType }) {
    return (
        <span className={`finance-badge finance-badge--${rechargeSourceTone(rechargeType)}`}>
            {rechargeTypeLabel(rechargeType)}
        </span>
    );
}

function AmountText({ children, value }) {
    const negative = hasNumber(value) && Number(value) < 0;
    return <span className={negative ? "finance-amount finance-amount--negative" : "finance-amount"}>{children}</span>;
}

const DAY_MS = 86_400_000;
const CHINA_OFFSET_MS = 8 * 3_600_000;

function chinaDayStart(timestamp) {
    return Math.floor((timestamp + CHINA_OFFSET_MS) / DAY_MS) * DAY_MS - CHINA_OFFSET_MS;
}

function timePresets() {
    const now = Date.now();
    const todayStart = chinaDayStart(now);
    const chinaNow = new Date(now + CHINA_OFFSET_MS);
    const monthStart = Date.UTC(chinaNow.getUTCFullYear(), chinaNow.getUTCMonth(), 1) - CHINA_OFFSET_MS;
    return [
        { label: "不限", range: { endMs: "", startMs: "" } },
        { label: "今天", range: { endMs: todayStart + DAY_MS, startMs: todayStart } },
        { label: "昨天", range: { endMs: todayStart, startMs: todayStart - DAY_MS } },
        { label: "近7天", range: { endMs: todayStart + DAY_MS, startMs: todayStart - 6 * DAY_MS } },
        { label: "本月", range: { endMs: todayStart + DAY_MS, startMs: monthStart } },
    ];
}

function isPresetActive(timeRange, preset) {
    const current = timeRange || { endMs: "", startMs: "" };
    return (
        String(current.startMs || "") === String(preset.range.startMs || "") &&
        String(current.endMs || "") === String(preset.range.endMs || "")
    );
}

function Stacked({ primary, secondary }) {
    return (
        <span className="finance-stack">
            <span>{primary || "-"}</span>
            <small>{secondary || ""}</small>
        </span>
    );
}

function appName(item, apps) {
    return item.appName || apps.find((app) => app.appCode === item.appCode)?.appName || item.appCode || "-";
}

function secondaryOrderNo(item) {
    return [item.commandId, item.externalRef].filter(Boolean).join(" / ");
}

function coinText(value) {
    const text = formatAmount(value);
    return text === "-" ? "-" : `${text} 金币`;
}

function exchangeText(item) {
    if (hasNumber(item.exchangeCoinAmount) || hasNumber(item.exchangeUsdMinorAmount)) {
        return `${coinText(item.exchangeCoinAmount)} = ${formatUsdMinor(item.exchangeUsdMinorAmount, "USD")}`;
    }
    return formatUsdMinor(item.usdMinorAmount, "USD");
}

function billAmountText(item) {
    if (item.billAmountText) {
        return item.billAmountText;
    }
    const amount = hasNumber(item.billAmountMinor)
        ? item.billAmountMinor
        : hasPositiveNumber(item.providerAmountMinor)
          ? item.providerAmountMinor
          : item.usdMinorAmount;
    return formatUsdMinor(amount, item.currencyCode || "USD");
}

function userPaidText(item) {
    if (item.userPaidText) {
        return item.userPaidText;
    }
    if (hasNonZeroNumber(item.userPaidAmountMicro) && item.userPaidCurrencyCode) {
        return formatMicroMoney(item.userPaidAmountMicro, item.userPaidCurrencyCode);
    }
    if (isGoogleBill(item) && !item.paidSyncedAtMs) {
        return "未同步（点“查询谷歌实付”）";
    }
    if (hasPositiveNumber(item.userPaidAmountMinor)) {
        return formatUsdMinor(item.userPaidAmountMinor, item.userPaidCurrencyCode || item.currencyCode || "USD");
    }
    return "-";
}

function taxDeductionText(item) {
    const currency = item.userPaidCurrencyCode || item.currencyCode || "USD";
    const fee = hasPositiveNumber(item.providerFeeMicro) ? item.providerFeeMicro : 0;
    const tax = hasPositiveNumber(item.providerTaxMicro) ? item.providerTaxMicro : 0;
    const deduction = fee + tax;
    if (deduction > 0) {
        const parts = [formatMicroMoney(deduction, currency)];
        if (hasPositiveNumber(item.userPaidAmountMicro)) {
            const percent = (deduction / item.userPaidAmountMicro) * 100;
            parts.push(`${percent.toLocaleString("zh-CN", { maximumFractionDigits: 2 })}%`);
        }
        return (
            <span className="finance-stack">
                <span>{parts.join(" / ")}</span>
                <small>{deductionBreakdown(fee, tax, currency)}</small>
            </span>
        );
    }
    if (item.taxDeductionText) {
        return item.taxDeductionText;
    }
    if (isGoogleBill(item) && !item.paidSyncedAtMs) {
        return "未同步";
    }
    return "-";
}

function deductionBreakdown(fee, tax, currency) {
    const parts = [];
    if (fee > 0) {
        parts.push(`手续费 ${formatMicroMoney(fee, currency)}`);
    }
    if (tax > 0) {
        parts.push(`税费 ${formatMicroMoney(tax, currency)}`);
    }
    return parts.join(" + ");
}

function isGoogleBill(item) {
    return item.rechargeType === "google_play_recharge" || item.providerCode === "google_play";
}

function hasNumber(value) {
    if (value === null || value === undefined || value === "") {
        return false;
    }
    return Number.isFinite(Number(value));
}

function hasPositiveNumber(value) {
    return hasNumber(value) && Number(value) > 0;
}

function hasNonZeroNumber(value) {
    return hasNumber(value) && Number(value) !== 0;
}