"use client";

import { useState, useEffect, use, useCallback, useRef } from "react";
import { useRouter } from "next/navigation";
import { motion } from "motion/react";
import { api } from "@/lib/api/client";
import { Pagination } from "@/components/ui/pagination";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  CheckCircle,
  FileText,
  Download,
  RefreshCw,
  ArrowLeft,
  TrendingUp,
  Users,
  AlertOctagon,
  Eye,
} from "lucide-react";

interface TaskDetail {
  id: number;
  name: string;
  period: string;
  status: string;
  total_employees: number;
  matched_count: number;
  exception_count: number;
  created_at: string;
  completed_at: string | null;
}

interface ReconciliationResult {
  task_id: number;
  period: string;
  total_employees: number;
  matched_employees: number;
  exception_count: number;
  exceptions_by_type: Record<string, number>;
  exceptions_by_severity: Record<string, number>;
  execution_time_ms: number;
  completed_at: string;
}

interface ExceptionItem {
  id: number;
  exception_type: string;
  severity: "low" | "medium" | "high" | "critical";
  status: string;
  employee_id: string;
  employee_name: string;
  description: string;
  salary_amount: number | null;
  social_security_amount: number | null;
  tax_amount: number | null;
  bank_amount: number | null;
  difference_amount: number | null;
}

interface MatchedItem {
  employee_id: string;
  employee_name: string;
  salary_amount: number | null;
  social_security_amount: number | null;
  tax_amount: number | null;
  net_salary: number | null;
}

const severityConfig = {
  low: { label: "低", bg: "bg-blue-100 dark:bg-blue-900/40", text: "text-blue-700 dark:text-blue-300" },
  medium: { label: "中", bg: "bg-yellow-100 dark:bg-yellow-900/40", text: "text-yellow-700 dark:text-yellow-300" },
  high: { label: "高", bg: "bg-orange-100 dark:bg-orange-900/40", text: "text-orange-700 dark:text-orange-300" },
  critical: { label: "严重", bg: "bg-red-100 dark:bg-red-900/40", text: "text-red-700 dark:text-red-300" },
};

const typeLabels: Record<string, string> = {
  amount_mismatch: "金额不一致",
  missing_record: "记录缺失",
  duplicate_record: "重复记录",
  format_error: "格式错误",
  logic_error: "逻辑错误",
  rule_violation: "规则违规",
  threshold_exceeded: "阈值超限",
  missing_employee: "员工缺失",
  extra_employee: "多余员工",
  amount_difference: "金额差异",
  zero_amount: "金额为零",
  negative_amount: "负数金额",
  unusual_amount: "金额异常",
  duplicate_employee: "重复员工",
  bank_mismatch: "银行不匹配",
  bank_missing: "银行记录缺失",
  bank_extra: "银行多余记录",
  AMOUNT_MISMATCH: "金额不一致",
  MISSING_RECORD: "记录缺失",
  DUPLICATE_RECORD: "重复记录",
  FORMAT_ERROR: "格式错误",
  LOGIC_ERROR: "逻辑错误",
  RULE_VIOLATION: "规则违规",
  THRESHOLD_EXCEEDED: "阈值超限",
  MISSING_EMPLOYEE: "员工缺失",
  EXTRA_EMPLOYEE: "多余员工",
  AMOUNT_DIFFERENCE: "金额差异",
  ZERO_AMOUNT: "金额为零",
  NEGATIVE_AMOUNT: "负数金额",
  UNUSUAL_AMOUNT: "金额异常",
  DUPLICATE_EMPLOYEE: "重复员工",
  BANK_MISMATCH: "银行不匹配",
  BANK_MISSING: "银行记录缺失",
  BANK_EXTRA: "银行多余记录",
};

export default function TaskResultPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: taskId } = use(params);
  const router = useRouter();

  const [task, setTask] = useState<TaskDetail | null>(null);
  const [result, setResult] = useState<ReconciliationResult | null>(null);
  const [exceptions, setExceptions] = useState<ExceptionItem[]>([]);
  const [matchedRecords, setMatchedRecords] = useState<MatchedItem[]>([]);
  const [matchedTotal, setMatchedTotal] = useState(0);
  const [matchedPage, setMatchedPage] = useState(1);
  const [matchedPageSize, setMatchedPageSize] = useState(10);
  const [loading, setLoading] = useState(true);
  const [matchedLoading, setMatchedLoading] = useState(false);
  const [exceptionDetailOpen, setExceptionDetailOpen] = useState(false);
  const [selectedException, setSelectedException] = useState<ExceptionItem | null>(null);
  const [matchedDetailOpen, setMatchedDetailOpen] = useState(false);
  const [selectedMatched, setSelectedMatched] = useState<MatchedItem | null>(null);

  const fetchResultRef = useRef<(() => Promise<void>) | undefined>(undefined);

  const fetchTaskDetail = useCallback(async () => {
    try {
      const res = await api.get<TaskDetail>(`/api/tasks/${taskId}`);
      setTask(res.data);
      
      if (res.data.status === "COMPLETED" && fetchResultRef.current) {
        fetchResultRef.current();
      }
    } catch (error) {
      console.error("获取任务详情失败", error);
    } finally {
      setLoading(false);
    }
  }, [taskId]);

  const fetchResult = useCallback(async () => {
    try {
      const res = await api.get<ReconciliationResult>(`/api/reconciliation/result/${taskId}`);
      setResult(res.data);
    } catch (error) {
      console.error("获取对账结果失败", error);
    }
  }, [taskId]);

  // Store fetchResult in ref to avoid circular dependency
  useEffect(() => {
    fetchResultRef.current = fetchResult;
  }, [fetchResult]);

  const fetchExceptions = useCallback(async () => {
    try {
      const res = await api.get<{ items: ExceptionItem[] }>(`/api/exceptions/`, {
        params: { task_id: taskId, page_size: 100 },
      });
      setExceptions(res.data.items || []);
    } catch (error) {
      console.error("获取异常列表失败", error);
    }
  }, [taskId]);

  const fetchMatchedRecords = useCallback(async () => {
    setMatchedLoading(true);
    try {
      const res = await api.get<{ items: MatchedItem[]; total: number }>(`/api/reconciliation/matched/${taskId}`, {
        params: { page: matchedPage, page_size: matchedPageSize },
      });
      setMatchedRecords(res.data.items || []);
      setMatchedTotal(res.data.total || 0);
    } catch (error) {
      console.error("获取已匹配列表失败", error);
    } finally {
      setMatchedLoading(false);
    }
  }, [taskId, matchedPage, matchedPageSize]);

  function onMatchedPageChange(newPage: number, newPageSize: number) {
    setMatchedPage(newPage);
    if (newPageSize !== matchedPageSize) {
      setMatchedPageSize(newPageSize);
    }
    fetchMatchedRecords();
  }

  useEffect(() => {
    if (taskId) {
      fetchTaskDetail();
      fetchExceptions();
      fetchMatchedRecords();
    }
  }, [taskId, fetchTaskDetail, fetchExceptions, fetchMatchedRecords]);

  async function handleExport() {
    try {
      const res = await api.get<Blob>(`/api/exports/task/${taskId}`, {
        responseType: "blob",
      });
      const url = window.URL.createObjectURL(res.data);
      const a = document.createElement("a");
      a.href = url;
      a.download = `对账结果_${task?.period || taskId}.xlsx`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error("导出失败", error);
    }
  }

  async function handleExportKingdee() {
    try {
      const res = await api.get<Blob>(`/api/exports/kingdee/${taskId}`, {
        responseType: "blob",
      });
      const url = window.URL.createObjectURL(res.data);
      const a = document.createElement("a");
      a.href = url;
      a.download = `金蝶凭证_${task?.period || taskId}.xlsx`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (error) {
      console.error("导出金蝶凭证失败", error);
    }
  }

  if (loading) {
    return (
      <div className="min-h-full flex items-center justify-center">
        <div className="flex items-center gap-2 text-muted-foreground">
          <RefreshCw className="h-5 w-5 animate-spin" />
          加载中...
        </div>
      </div>
    );
  }

  if (!task) {
    return (
      <div className="min-h-full flex items-center justify-center">
        <Card className="max-w-md">
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">任务不存在</p>
            <Button className="mt-4 btn-press" onClick={() => router.back()}>
              返回
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  const matchRate = task.total_employees > 0
    ? ((task.matched_count / task.total_employees) * 100).toFixed(1)
    : "0.0";

  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 0.06 },
    },
  };

  const item = {
    hidden: { opacity: 0, y: 8 },
    show: { opacity: 1, y: 0, transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] as const } },
  };

  return (
    <div className="min-h-full p-6 lg:p-8 max-w-7xl mx-auto space-y-6">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
        className="flex items-center justify-between"
      >
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-muted">
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-heading-1 text-foreground">{task.name}</h1>
            <p className="text-muted-foreground mt-1">
              对账期间: {task.period}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="outline" onClick={handleExport} className="btn-press">
            <Download className="h-4 w-4 mr-2" />
            导出结果
          </Button>
          <Button variant="outline" onClick={handleExportKingdee} className="btn-press">
            <FileText className="h-4 w-4 mr-2" />
            导出金蝶凭证
          </Button>
        </div>
      </motion.div>

      {/* Stats Cards */}
      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="grid grid-cols-2 lg:grid-cols-4 gap-4"
      >
        <motion.div variants={item}>
          <Card className="hover-lift">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-caption text-muted-foreground uppercase tracking-wide">总人数</p>
                  <p className="text-3xl font-semibold mt-1">{task.total_employees}</p>
                </div>
                <div className="p-2.5 rounded-lg bg-blue-50 dark:bg-blue-950/30">
                  <Users className="w-5 h-5 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        <motion.div variants={item}>
          <Card className="hover-lift">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-caption text-muted-foreground uppercase tracking-wide">匹配人数</p>
                  <p className="text-3xl font-semibold mt-1 text-emerald-600">{task.matched_count}</p>
                </div>
                <div className="p-2.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30">
                  <CheckCircle className="w-5 h-5 text-emerald-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        <motion.div variants={item}>
          <Card className="hover-lift">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-caption text-muted-foreground uppercase tracking-wide">异常数量</p>
                  <p className="text-3xl font-semibold mt-1 text-red-600">{task.exception_count}</p>
                </div>
                <div className="p-2.5 rounded-lg bg-red-50 dark:bg-red-950/30">
                  <AlertOctagon className="w-5 h-5 text-red-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        <motion.div variants={item}>
          <Card className="hover-lift">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-caption text-muted-foreground uppercase tracking-wide">匹配率</p>
                  <p className="text-3xl font-semibold mt-1">{matchRate}%</p>
                </div>
                <div className="p-2.5 rounded-lg bg-violet-50 dark:bg-violet-950/30">
                  <TrendingUp className="w-5 h-5 text-violet-600" />
                </div>
              </div>
              {/* Progress bar */}
              <div className="mt-3 h-2 bg-muted rounded-full overflow-hidden">
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: `${matchRate}%` }}
                  transition={{ duration: 0.8, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
                  className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400"
                />
              </div>
            </CardContent>
          </Card>
        </motion.div>
      </motion.div>

      {/* Tabs */}
      <motion.div
        initial={{ opacity: 0, y: 8 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
      >
        <Tabs defaultValue="overview" className="space-y-4">
          <TabsList className="bg-muted/50">
            <TabsTrigger value="overview" className="data-[state=active]:bg-background">概览统计</TabsTrigger>
            <TabsTrigger value="exceptions" className="data-[state=active]:bg-background">
              异常列表
              {task.exception_count > 0 && (
                <Badge variant="destructive" className="ml-2">
                  {task.exception_count}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="matched" className="data-[state=active]:bg-background">已匹配列表</TabsTrigger>
          </TabsList>

          {/* Overview Tab */}
          <TabsContent value="overview" className="space-y-4">
            <div className="grid lg:grid-cols-2 gap-4">
              {/* Exception Types */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-base font-medium">异常类型分布</CardTitle>
                </CardHeader>
                <CardContent>
                  {result?.exceptions_by_type && Object.keys(result.exceptions_by_type).length > 0 ? (
                    <div className="space-y-3">
                      {Object.entries(result.exceptions_by_type).map(([type, count]) => (
                        <div key={type} className="flex items-center justify-between">
                          <span className="text-sm text-muted-foreground">
                            {typeLabels[type] || typeLabels[type.toLowerCase()] || typeLabels[type.toUpperCase()] || type}
                          </span>
                          <Badge variant="secondary">{count}</Badge>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-sm text-muted-foreground">暂无数据</p>
                  )}
                </CardContent>
              </Card>

              {/* Severity Distribution */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-base font-medium">严重程度分布</CardTitle>
                </CardHeader>
                <CardContent>
                  {result?.exceptions_by_severity && Object.keys(result.exceptions_by_severity).length > 0 ? (
                    <div className="flex flex-wrap gap-3">
                      {["critical", "high", "medium", "low"].map((severity) => {
                        const count = result.exceptions_by_severity[severity] || 0;
                        const config = severityConfig[severity as keyof typeof severityConfig];
                        return (
                          <div key={severity} className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${config.bg}`}>
                            <div className={`w-2 h-2 rounded-full bg-current ${config.text}`} />
                            <span className={`text-sm font-medium ${config.text}`}>
                              {config.label}: {count}
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  ) : (
                    <p className="text-sm text-muted-foreground">暂无数据</p>
                  )}
                </CardContent>
              </Card>
            </div>

            {/* Execution Info */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-base font-medium">执行信息</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  <div>
                    <p className="text-caption text-muted-foreground">创建时间</p>
                    <p className="text-sm font-medium mt-1">{new Date(task.created_at).toLocaleString()}</p>
                  </div>
                  <div>
                    <p className="text-caption text-muted-foreground">完成时间</p>
                    <p className="text-sm font-medium mt-1">
                      {task.completed_at ? new Date(task.completed_at).toLocaleString() : "-"}
                    </p>
                  </div>
                  {result && (
                    <>
                      <div>
                        <p className="text-caption text-muted-foreground">执行时间</p>
                        <p className="text-sm font-medium mt-1">{result.execution_time_ms?.toFixed(0) || '-'}ms</p>
                      </div>
                      <div>
                        <p className="text-caption text-muted-foreground">结果生成时间</p>
                        <p className="text-sm font-medium mt-1">
                          {result.completed_at ? new Date(result.completed_at).toLocaleString() : "-"}
                        </p>
                      </div>
                    </>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Exceptions Tab */}
          <TabsContent value="exceptions">
            <Card>
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base font-medium">异常列表</CardTitle>
                  <Badge variant="secondary">{exceptions.length} 条记录</Badge>
                </div>
              </CardHeader>
              <CardContent className="p-0">
                {exceptions.length === 0 ? (
                  <div className="py-16 text-center">
                    <div className="w-16 h-16 rounded-full bg-emerald-50 dark:bg-emerald-950/30 mx-auto mb-4 flex items-center justify-center">
                      <CheckCircle className="w-8 h-8 text-emerald-500" />
                    </div>
                    <p className="text-lg font-medium text-foreground">完美匹配!</p>
                    <p className="text-sm text-muted-foreground mt-1">所有记录都匹配成功</p>
                  </div>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>员工</TableHead>
                        <TableHead>类型</TableHead>
                        <TableHead>严重程度</TableHead>
                        <TableHead>描述</TableHead>
                        <TableHead className="text-right">差异金额</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {exceptions.map((exc) => (
                        <TableRow
                          key={exc.id}
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={() => {
                            setSelectedException(exc);
                            setExceptionDetailOpen(true);
                          }}
                        >
                          <TableCell>
                            <div>
                              <div className="font-medium">{exc.employee_name}</div>
                              <div className="text-xs text-muted-foreground">{exc.employee_id}</div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant="outline" className="font-normal">
                              {typeLabels[exc.exception_type] || typeLabels[exc.exception_type.toLowerCase()] || typeLabels[exc.exception_type.toUpperCase()] || exc.exception_type}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Badge className={`${severityConfig[exc.severity].bg} ${severityConfig[exc.severity].text}`}>
                              {severityConfig[exc.severity].label}
                            </Badge>
                          </TableCell>
                          <TableCell className="max-w-[250px]">
                            <span className="truncate block">{exc.description}</span>
                          </TableCell>
                          <TableCell className="text-right">
                            {exc.difference_amount != null && (
                              <span className={exc.difference_amount > 0 ? "text-red-600" : "text-emerald-600"}>
                                {exc.difference_amount > 0 ? "+" : ""}
                                {exc.difference_amount.toFixed(2)}
                              </span>
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* Matched Tab */}
          <TabsContent value="matched">
            <Card>
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base font-medium">已匹配列表</CardTitle>
                  <Badge variant="secondary">{matchedTotal} 条记录</Badge>
                </div>
              </CardHeader>
              <CardContent>
                {matchedTotal > 0 && (
                  <div className="mb-4">
                    <Pagination
                      total={matchedTotal}
                      page={matchedPage}
                      pageSize={matchedPageSize}
                      onChange={onMatchedPageChange}
                    />
                  </div>
                )}
                {matchedLoading ? (
                  <div className="flex items-center justify-center py-8">
                    <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
                  </div>
                ) : matchedRecords.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-muted-foreground">暂无已匹配记录</p>
                  </div>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>员工</TableHead>
                        <TableHead className="text-right">应发工资</TableHead>
                        <TableHead className="text-right">社保</TableHead>
                        <TableHead className="text-right">个税</TableHead>
                        <TableHead className="text-right">实发工资</TableHead>
                        <TableHead className="w-[60px]">操作</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {matchedRecords.map((record, index) => (
                        <TableRow
                          key={`${record.employee_id}-${index}`}
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={() => {
                            setSelectedMatched(record);
                            setMatchedDetailOpen(true);
                          }}
                        >
                          <TableCell>
                            <div>
                              <div className="font-medium">{record.employee_name}</div>
                              <div className="text-xs text-muted-foreground">{record.employee_id}</div>
                            </div>
                          </TableCell>
                          <TableCell className="text-right">
                            {record.salary_amount != null ? record.salary_amount.toFixed(2) : "-"}
                          </TableCell>
                          <TableCell className="text-right">
                            {record.social_security_amount != null ? record.social_security_amount.toFixed(2) : "-"}
                          </TableCell>
                          <TableCell className="text-right">
                            {record.tax_amount != null ? record.tax_amount.toFixed(2) : "-"}
                          </TableCell>
                          <TableCell className="text-right font-medium">
                            {record.net_salary != null ? record.net_salary.toFixed(2) : "-"}
                          </TableCell>
                          <TableCell>
                            <Eye className="h-4 w-4 text-muted-foreground" />
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </motion.div>

      {/* 异常详情弹窗 */}
      <Dialog open={exceptionDetailOpen} onOpenChange={setExceptionDetailOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>异常详情</DialogTitle>
          </DialogHeader>
          {selectedException && (
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-caption text-muted-foreground">员工姓名</p>
                  <p className="font-medium">{selectedException.employee_name}</p>
                </div>
                <div>
                  <p className="text-caption text-muted-foreground">员工ID</p>
                  <p className="font-medium">{selectedException.employee_id}</p>
                </div>
                <div>
                  <p className="text-caption text-muted-foreground">异常类型</p>
                  <Badge variant="outline">
                    {typeLabels[selectedException.exception_type] || typeLabels[selectedException.exception_type.toLowerCase()] || typeLabels[selectedException.exception_type.toUpperCase()] || selectedException.exception_type}
                  </Badge>
                </div>
                <div>
                  <p className="text-caption text-muted-foreground">严重程度</p>
                  <Badge className={`${severityConfig[selectedException.severity].bg} ${severityConfig[selectedException.severity].text}`}>
                    {severityConfig[selectedException.severity].label}
                  </Badge>
                </div>
              </div>

              <div className="border-t pt-4">
                <h4 className="font-medium mb-3">金额详情</h4>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {selectedException.salary_amount != null && (
                    <div className="p-3 rounded-lg bg-muted/50">
                      <p className="text-caption text-muted-foreground">工资</p>
                      <p className="font-mono font-medium mt-1">{selectedException.salary_amount.toFixed(2)}</p>
                    </div>
                  )}
                  {selectedException.social_security_amount != null && (
                    <div className="p-3 rounded-lg bg-muted/50">
                      <p className="text-caption text-muted-foreground">社保</p>
                      <p className="font-mono font-medium mt-1">{selectedException.social_security_amount.toFixed(2)}</p>
                    </div>
                  )}
                  {selectedException.tax_amount != null && (
                    <div className="p-3 rounded-lg bg-muted/50">
                      <p className="text-caption text-muted-foreground">个税</p>
                      <p className="font-mono font-medium mt-1">{selectedException.tax_amount.toFixed(2)}</p>
                    </div>
                  )}
                  {selectedException.bank_amount != null && (
                    <div className="p-3 rounded-lg bg-muted/50">
                      <p className="text-caption text-muted-foreground">银行</p>
                      <p className="font-mono font-medium mt-1">{selectedException.bank_amount.toFixed(2)}</p>
                    </div>
                  )}
                </div>
                {selectedException.difference_amount != null && (
                  <div className="mt-4 p-4 rounded-lg bg-muted/50">
                    <p className="text-caption text-muted-foreground">差异金额</p>
                    <p className={`text-2xl font-mono font-semibold mt-1 ${selectedException.difference_amount > 0 ? "text-red-600" : "text-emerald-600"}`}>
                      {selectedException.difference_amount > 0 ? "+" : ""}
                      {selectedException.difference_amount.toFixed(2)}
                    </p>
                  </div>
                )}
              </div>

              <div className="border-t pt-4">
                <div className="space-y-3">
                  <div>
                    <p className="text-caption text-muted-foreground mb-1">描述</p>
                    <p>{selectedException.description}</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 已匹配记录明细弹窗 */}
      <Dialog open={matchedDetailOpen} onOpenChange={setMatchedDetailOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>已匹配记录明细</DialogTitle>
          </DialogHeader>
          {selectedMatched && (
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-caption text-muted-foreground">员工姓名</p>
                  <p className="font-medium">{selectedMatched.employee_name}</p>
                </div>
                <div>
                  <p className="text-caption text-muted-foreground">员工ID</p>
                  <p className="font-medium">{selectedMatched.employee_id}</p>
                </div>
              </div>

              <div className="border-t pt-4">
                <h4 className="font-medium mb-3">金额详情</h4>
                <div className="space-y-3">
                  <div className="flex justify-between items-center p-3 rounded-lg bg-muted/50">
                    <span className="text-muted-foreground">应发工资</span>
                    <span className="font-mono font-medium">
                      {selectedMatched.salary_amount != null ? selectedMatched.salary_amount.toFixed(2) : "-"}
                    </span>
                  </div>
                  <div className="flex justify-between items-center p-3 rounded-lg bg-muted/50">
                    <span className="text-muted-foreground">社保</span>
                    <span className="font-mono font-medium">
                      {selectedMatched.social_security_amount != null ? selectedMatched.social_security_amount.toFixed(2) : "-"}
                    </span>
                  </div>
                  <div className="flex justify-between items-center p-3 rounded-lg bg-muted/50">
                    <span className="text-muted-foreground">个税</span>
                    <span className="font-mono font-medium">
                      {selectedMatched.tax_amount != null ? selectedMatched.tax_amount.toFixed(2) : "-"}
                    </span>
                  </div>
                  <div className="flex justify-between items-center p-3 rounded-lg bg-primary/10 border border-primary/20">
                    <span className="font-medium">实发工资</span>
                    <span className="font-mono font-semibold text-lg">
                      {selectedMatched.net_salary != null ? selectedMatched.net_salary.toFixed(2) : "-"}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}