import { App, Button, Input, Modal, Select } from "antd";
import { IconButton } from "@/components/ui/base/buttons";
import type { ColumnsType } from "antd/es/table";
import { Download, Eye, Play, Search } from "lucide-react";
import { saveAs } from "file-saver";
import { useEffect, useRef, useState } from "react";
import { useSearchParams } from "react-router";

import { PaginationBar } from "@/components/layout/workspace-page";
import { MediaPreview } from "@/components/media-preview";
import { formatCredits } from "@/constant/credits";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { exportAdminApiLogs, listAdminApiLogs, type ApiCallLog } from "@/services/api/auth";
import { ApiLogDetailDrawer } from "../components/api-log-detail-drawer";
import { AdminPageFrame } from "../components/admin-shell";
import { AdminBatchBar, AdminDataTable, AdminExportButton, AdminFilterChip, AdminStatusBadge, AdminTableEmpty } from "../components/admin-ui";

export default function LogsPage() {
    const { message } = App.useApp();
    const [searchParams, setSearchParams] = useSearchParams();
    const keyword = searchParams.get("filter") || "";
    const status = normalizeStatus(searchParams.get("status"));
    const recordType = searchParams.get("recordType") === "download" ? "download" : searchParams.get("recordType") === "all" ? "all" : "request";
    const page = positiveInt(searchParams.get("page"), 1);
    const pageSize = normalizePageSize(searchParams.get("pageSize"));
    const debouncedKeyword = useDebouncedValue(keyword);
    const [logs, setLogs] = useState<ApiCallLog[]>([]);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(true);
    const [selectedIds, setSelectedIds] = useState<string[]>([]);
    const [detailLogId, setDetailLogId] = useState<string | null>(null);
    const [mediaPreview, setMediaPreview] = useState<{ url: string; kind: "image" | "video"; title: string } | null>(null);
    const requestSequence = useRef(0);
    const hasFilters = Boolean(keyword || status !== "all" || recordType !== "request");

    const updateUrl = (patch: Record<string, string | number>, replace = false) => {
        const next = new URLSearchParams(searchParams);
        Object.entries(patch).forEach(([key, value]) => {
            const isDefault = (key === "filter" && value === "") || (key === "status" && value === "all") || (key === "page" && value === 1) || (key === "pageSize" && value === 20);
            if (isDefault) next.delete(key);
            else next.set(key, String(value));
        });
        setSearchParams(next, { replace });
    };

    useEffect(() => {
        const sequence = ++requestSequence.current;
        setLoading(true);
        void listAdminApiLogs({ recordType, keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status, page, pageSize })
            .then((result) => {
                if (sequence !== requestSequence.current) return;
                setLogs(result.logs);
                setTotal(result.total);
                setSelectedIds([]);
                if (result.total > 0 && result.logs.length === 0 && page > 1) updateUrl({ page: 1 }, true);
            })
            .catch((error) => sequence === requestSequence.current && message.error(error instanceof Error ? error.message : "读取请求明细失败"))
            .finally(() => sequence === requestSequence.current && setLoading(false));
    }, [debouncedKeyword, status, recordType, page, pageSize]);

    const columns: ColumnsType<ApiCallLog> = [
        { title: "时间", width: 168, render: (_, log) => formatTime(log.startedAt || log.createdAt) },
        {
            title: "用户",
            width: 180,
            render: (_, log) => (
                <div className="min-w-0">
                    <div className="truncate font-medium text-foreground/85">{log.userDisplayName || log.userAccount || "未知用户"}</div>
                    <div className="truncate text-xs text-foreground/45">{log.userAccount ? `@${log.userAccount}` : "账号未记录"}</div>
                </div>
            ),
        },
        {
            title: "渠道 / 模型",
            width: 230,
            render: (_, log) => (
                <div className="min-w-0">
                    <div className="truncate text-foreground/78">{log.channelName || "未记录渠道"}</div>
                    <div className="truncate text-xs text-foreground/45" title={log.model}>
                        {log.model || "未识别模型"}
                    </div>
                </div>
            ),
        },
        { title: "能力", dataIndex: "capability", width: 88, render: capabilityText },
        { title: "结果", width: 118, render: (_, log) => <MediaResult log={log} onPreview={(url, kind) => setMediaPreview({ url, kind, title: `${capabilityText(log.capability)}结果` })} /> },
        { title: "请求阶段 / 状态", width: 160, render: (_, log) => <CallStatus log={log} /> },
        {
            title: "错误信息",
            width: 260,
            render: (_, log) =>
                log.status === "failed" || log.error || log.errorCode ? (
                    <div className="min-w-0" title={[log.errorCode, log.error].filter(Boolean).join(" · ")}>
                        <div className="truncate text-xs font-medium text-red-500">{log.errorCode || `HTTP ${log.statusCode || "失败"}`}</div>
                        <div className="line-clamp-2 text-xs leading-5 text-foreground/55">{log.error || "上游未返回错误详情"}</div>
                    </div>
                ) : (
                    <span className="text-foreground/30">--</span>
                ),
        },
        { title: "耗时", dataIndex: "durationMs", width: 112, render: (value) => <span className="tabular-nums">{formatDuration(value)}</span> },
        { title: "积分计费", width: 145, render: (_, log) => <BillingSummary log={log} /> },
        {
            title: "Tokens",
            width: 166,
            render: (_, log) =>
                log.usageAvailable ? (
                    <div className="space-y-0.5 text-xs tabular-nums">
                        <div>
                            <span className="text-foreground/40">输入</span> {log.inputTokens.toLocaleString()}
                        </div>
                        <div>
                            <span className="text-foreground/40">输出</span> {log.outputTokens.toLocaleString()}
                        </div>
                        {log.cachedTokens > 0 ? (
                            <div>
                                <span className="text-foreground/40">缓存</span> {log.cachedTokens.toLocaleString()}
                            </div>
                        ) : null}
                    </div>
                ) : (
                    <span className="text-foreground/35">未返回</span>
                ),
        },
    ];

    return (
        <AdminPageFrame
            title="请求明细"
            description="模型生成与结果下载记录；仅计费调用扣除积分"
            actions={
                <AdminExportButton
                    exportFile={() => exportAdminApiLogs({ recordType, keyword: debouncedKeyword || undefined, status: status === "all" ? undefined : status })}
                    fileName={() => `请求明细-${new Date().toISOString().slice(0, 10)}.csv`}
                    label="导出当前筛选"
                    successMessage="已按当前筛选导出请求明细"
                    errorMessage="导出请求明细失败"
                />
            }
        >
            <AdminDataTable
                toolbar={
                    <Input
                        allowClear
                        className="app-list-search"
                        prefix={<Search className="size-4 text-foreground/40" />}
                        value={keyword}
                        placeholder="搜索用户、渠道、模型、路径或请求号"
                        onChange={(event) => updateUrl({ filter: event.target.value, page: 1 }, true)}
                    />
                }
                toolbarActiveFilters={
                    <>
                        {keyword ? <AdminFilterChip label={`搜索：${keyword}`} onRemove={() => updateUrl({ filter: "", page: 1 })} /> : null}
                        {status !== "all" ? <AdminFilterChip label={`结果：${status === "succeeded" ? "成功" : "失败"}`} onRemove={() => updateUrl({ status: "all", page: 1 })} /> : null}
                    </>
                }
                toolbarFilters={
                    <>
                    <Select aria-label="明细类型" className="w-32" value={recordType} onChange={(value) => updateUrl({ recordType: value, page: 1 })} options={[{ label: "仅请求", value: "request" }, { label: "仅下载", value: "download" }, { label: "全部明细", value: "all" }]} />
                    <Select
                        className="w-32"
                        value={status}
                        onChange={(value) => updateUrl({ status: value, page: 1 })}
                        options={[
                            { label: "全部结果", value: "all" },
                            { label: "成功", value: "succeeded" },
                            { label: "失败", value: "failed" },
                        ]}
                    />
                    </>
                }
                toolbarActive={hasFilters}
                onReset={() => updateUrl({ filter: "", status: "all", recordType: "request", page: 1 })}
                batchActions={
                    <AdminBatchBar count={selectedIds.length} onClear={() => setSelectedIds([])}>
                        <AdminExportButton
                            type="primary"
                            size="small"
                            exportFile={() => exportAdminApiLogs({ recordType, ids: selectedIds })}
                            fileName={() => `请求明细-已选${selectedIds.length}条.csv`}
                            label="导出已选"
                            successMessage={`已导出选中的 ${selectedIds.length} 条请求明细`}
                            errorMessage="导出请求明细失败"
                        />
                    </AdminBatchBar>
                }
                skeletonColumns={10}
                table={{
                    className: "app-data-table",
                    size: "small",
                    rowKey: "id",
                    loading,
                    rowSelection: { selectedRowKeys: selectedIds, preserveSelectedRowKeys: false, onChange: (keys) => setSelectedIds(keys.map(String)) },
                    onRow: (log) => ({
                        onClick: (event) => {
                            if ((event.target as HTMLElement).closest("button,a,input,.ant-checkbox-wrapper")) return;
                            setDetailLogId(log.id);
                        },
                        className: "admin-table-clickable-row",
                    }),
                    columns,
                    dataSource: logs,
                    pagination: false,
                    scroll: { x: 1600 },
                }}
                empty={<AdminTableEmpty filtered={hasFilters} />}
                footer={<PaginationBar alwaysShow current={page} pageSize={pageSize} total={total} onChange={(nextPage, nextSize) => updateUrl({ page: nextSize !== pageSize ? 1 : nextPage, pageSize: nextSize })} />}
            />
            <ApiLogDetailDrawer logId={detailLogId} onClose={() => setDetailLogId(null)} onLogUpdated={(next) => setLogs((items) => items.map((item) => (item.id === next.id ? next : item)))} />
            <Modal
                title={mediaPreview?.title || "媒体预览"}
                open={Boolean(mediaPreview)}
                width={880}
                onCancel={() => setMediaPreview(null)}
                footer={
                    mediaPreview ? (
                        <Button icon={<Download className="size-4" />} onClick={() => downloadMedia(mediaPreview.url, mediaPreview.kind)}>
                            下载原文件
                        </Button>
                    ) : null
                }
                destroyOnHidden
            >
                {mediaPreview ? (
                    <MediaPreview
                        src={mediaPreview.url}
                        kind={mediaPreview.kind}
                        alt={mediaPreview.title}
                        controls={mediaPreview.kind === "video"}
                        className="max-h-[72vh] w-full bg-black object-contain"
                        fallbackClassName="min-h-[360px] rounded-lg bg-black/90 text-white/55"
                    />
                ) : null}
            </Modal>
        </AdminPageFrame>
    );
}

function positiveInt(value: string | null, fallback: number) {
    const parsed = Number(value);
    return Number.isInteger(parsed) && parsed > 0 ? parsed : fallback;
}
function normalizePageSize(value: string | null) {
    const parsed = positiveInt(value, 20);
    return [20, 50, 100].includes(parsed) ? parsed : 20;
}
function normalizeStatus(value: string | null): "all" | "succeeded" | "failed" {
    return value === "succeeded" || value === "failed" ? value : "all";
}
function formatTime(value?: string) {
    return value ? new Date(value).toLocaleString("zh-CN", { hour12: false }) : "--";
}
function capabilityText(value: string) {
    return ({ text: "文本", image: "图片", video: "视频", audio: "音频" } as Record<string, string>)[value] || "未知";
}
function formatDuration(value: number) {
    if (value < 1_000) return `${value} ms`;
    if (value < 60_000) return `${(value / 1_000).toFixed(value < 10_000 ? 1 : 0)} 秒`;
    const minutes = Math.floor(value / 60_000);
    const seconds = Math.round((value % 60_000) / 1_000);
    return `${minutes} 分 ${seconds} 秒`;
}

function BillingSummary({ log }: { log: ApiCallLog }) {
    if (!log.billable) return <span className="text-foreground/45">不计费</span>;
    if (!log.billingAvailable) return <span className="text-foreground/35">未扣积分</span>;
    const status = log.billingStatus || "reserved";
    const statusLabel = ({ settled: "已结算", refunded: "已退回", uncertain: "待核对", running: "运行中", reserved: "已预授权" } as const)[status];
    return (
        <div>
            <div className="tabular-nums">{formatCredits(log.billingAmountMicrocredits)} 积分</div>
            <div className="text-xs text-foreground/40">{statusLabel}</div>
        </div>
    );
}

function MediaResult({ log, onPreview }: { log: ApiCallLog; onPreview: (url: string, kind: "image" | "video") => void }) {
    const url = log.mediaPreviewUrl;
    const kind = log.mediaPreviewKind;
    const [unavailableUrl, setUnavailableUrl] = useState("");
    if (!url || (kind !== "image" && kind !== "video")) return <span className="text-foreground/30">--</span>;
    const previewUnavailable = unavailableUrl === url;
    return (
        <div className="flex w-[90px] items-center gap-1.5">
            <button
                type="button"
                title={previewUnavailable ? "预览不可用，素材可能已删除" : `预览${kind === "video" ? "视频" : "图片"}`}
                aria-label={previewUnavailable ? "预览不可用，素材可能已删除" : `预览${kind === "video" ? "视频" : "图片"}`}
                disabled={previewUnavailable}
                className="group relative h-11 w-16 shrink-0 overflow-hidden rounded border border-border/75 bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                onClick={() => onPreview(url, kind)}
            >
                <MediaPreview src={url} kind={kind} alt="生成结果" loading="lazy" className="size-full object-cover" fallbackClassName="text-white/55" fallbackLabel="预览不可用" onUnavailable={() => setUnavailableUrl(url)} />
                {!previewUnavailable ? (
                    <span className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition group-hover:bg-black/35 group-hover:opacity-100 group-focus-visible:bg-black/35 group-focus-visible:opacity-100">
                        {kind === "video" ? <Play className="size-4 fill-current" /> : <Eye className="size-4" />}
                    </span>
                ) : null}
                {!previewUnavailable && log.mediaCount > 1 ? <span className="absolute bottom-0.5 right-0.5 rounded-sm bg-black/65 px-1 text-[var(--fs-micro)] leading-4 text-white">{log.mediaCount}</span> : null}
            </button>
            <IconButton size="sm" variant="ghost" icon={Download} onClick={() => downloadMedia(url, kind)} title="下载原文件" aria-label="下载原文件" />
        </div>
    );
}

function downloadMedia(url: string, kind: "image" | "video") {
    saveAs(url, `api-call-${kind}.${kind === "video" ? "mp4" : "png"}`);
}

function CallStatus({ log }: { log: ApiCallLog }) {
    const providerStatus = log.providerStatus?.toLowerCase();
    const processing = ["queued", "pending", "processing", "running", "in_progress"].includes(providerStatus || "");
    const failed = log.status === "failed" || ["failed", "cancelled", "expired"].includes(providerStatus || "");
    return (
        <div>
            <div className="mb-1 text-xs font-medium text-foreground/70">{requestKindText(log.requestKind)}</div>
            <AdminStatusBadge label={failed ? "失败" : processing ? "处理中" : "成功"} tone={failed ? "error" : processing ? "warning" : "success"} />
            {log.capability === "video" ? <div className="mt-1 text-xs tabular-nums text-foreground/45">已轮询 {log.pollCount || 0} 次</div> : null}
        </div>
    );
}

function requestKindText(value: ApiCallLog["requestKind"]) {
    const labels: Partial<Record<ApiCallLog["requestKind"], string>> = { create: "模型生成", poll: "状态查询", download: "结果下载", repair: "结果修复" };
    return labels[value] || "上游请求";
}