"use client";

import React, { useMemo } from "react";
import {
  Box,
  Typography,
  Chip,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@mui/material";
import { FormatListBulleted } from "@mui/icons-material";
import dayjs from "dayjs";
import { getAreaColor } from "./utils";
import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
import { LeakageResultDetail } from "./types";

interface Props {
  result: LeakageResultDetail | null;
}

const RecognitionResults: React.FC<Props> = ({ result }) => {
  const sortedRows = useMemo(() => {
    if (!result?.rows) return [];
    return [...result.rows].sort(
      (a, b) => b.LeakageFlow_m3_per_s - a.LeakageFlow_m3_per_s,
    );
  }, [result]);

  if (!result || !sortedRows.length) {
    return (
      <Box className="flex flex-col items-center justify-center h-full text-gray-400 p-4">
        <Box className="mb-4">
          <svg
            width="80"
            height="80"
            viewBox="0 0 80 80"
            fill="none"
            className="opacity-40"
          >
            <rect
              x="10"
              y="20"
              width="60"
              height="45"
              rx="2"
              stroke="currentColor"
              strokeWidth="2"
            />
            <line
              x1="10"
              y1="30"
              x2="70"
              y2="30"
              stroke="currentColor"
              strokeWidth="2"
            />
          </svg>
        </Box>
        <Typography variant="body2">暂无识别结果</Typography>
        <Typography variant="body2" className="mt-1">
          请先加载方案或执行识别分析
        </Typography>
      </Box>
    );
  }

  return (
    <Box className="h-full overflow-auto p-1">
      {/* 方案详情卡片 */}
      <Box className="mb-4 space-y-3">
        <Box className="flex items-center justify-between px-1">
          <Box className="flex items-center gap-2">
            <Box className="w-1 h-4 bg-blue-600 rounded-full" />
            <Typography
              variant="h6"
              className="font-bold text-gray-900 truncate"
              sx={{ fontSize: "1.1rem" }}
              title={result.scheme_name || ""}
            >
              {result.scheme_name || "漏损识别结果"}
            </Typography>
          </Box>
          {result.username && (
            <Chip
              label={result.username}
              size="small"
              sx={{
                height: 24,
                backgroundColor: "#f3f4f6",
                color: "#4b5563",
                border: "none",
                fontWeight: 500,
              }}
            />
          )}
        </Box>

        <Box className="grid grid-cols-2 gap-3">
          {/* 方案时间 */}
          <Box className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-3 border border-blue-200 shadow-sm">
            <Typography
              variant="caption"
              className="text-blue-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
            >
              方案时间
            </Typography>
            <Typography variant="body2" className="font-bold text-blue-900">
              {dayjs(result.scheme_start_time || result.create_time).format(
                "MM-DD HH:mm",
              )}
            </Typography>
          </Box>

          {/* 总漏损流量 */}
          <Box className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-3 border border-orange-200 shadow-sm">
            <Typography
              variant="caption"
              className="text-orange-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
            >
              总漏损流量
            </Typography>
            <Typography variant="body2" className="font-bold text-orange-900">
              {(() => {
                const val = (result.scheme_detail as any)?.algorithm_params
                  ?.q_sum;
                const unit = String(
                  (result.scheme_detail as any)?.algorithm_params?.q_sum_unit ||
                    "m3/s",
                );
                const qSumM3h = toM3h(Number(val), unit);
                return Number.isFinite(qSumM3h)
                  ? `${qSumM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                  : "-";
              })()}
            </Typography>
          </Box>

          {/* 分区数量 */}
          <Box className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-3 border border-green-200 shadow-sm">
            <Typography
              variant="caption"
              className="text-green-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
            >
              分区数量
            </Typography>
            <Typography variant="body2" className="font-bold text-green-900">
              {(result.scheme_detail as any)?.result_summary?.area_count ??
                result.areas?.length ??
                0}{" "}
              个
            </Typography>
          </Box>

          {/* 最大漏损 */}
          <Box className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-3 border border-purple-200 shadow-sm">
            <Typography
              variant="caption"
              className="text-purple-700 font-semibold block mb-1 text-xs uppercase tracking-wide"
            >
              最大漏损
            </Typography>
            <Typography variant="body2" className="font-bold text-purple-900">
              {(() => {
                const maxL = (result.scheme_detail as any)?.result_summary
                  ?.max_leakage;
                const maxLeakageM3h = toM3h(Number(maxL), "m3/s");
                return Number.isFinite(maxLeakageM3h)
                  ? `${maxLeakageM3h.toFixed(3)} ${FLOW_DISPLAY_UNIT}`
                  : "-";
              })()}
            </Typography>
          </Box>
        </Box>
      </Box>

      {/* 漏损列表 */}
      <Box className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden">
        <Box className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-white">
          <Box className="flex items-center gap-2">
            <FormatListBulleted className="text-blue-600 w-5 h-5" />
            <Typography variant="subtitle1" className="font-bold text-gray-800">
              区域漏损列表
            </Typography>
          </Box>
          <Chip
            size="small"
            label={`${sortedRows.length} 条`}
            sx={{
              height: 22,
              backgroundColor: "rgba(37, 99, 235, 0.08)",
              color: "#2563eb",
              fontWeight: 600,
              fontSize: "0.75rem",
              border: "none",
            }}
          />
        </Box>
        <Table size="small">
          <TableHead>
            <TableRow sx={{ backgroundColor: "#f8fafc" }}>
              <TableCell
                sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pl: 3 }}
              >
                区域
              </TableCell>
              <TableCell
                align="right"
                sx={{ fontWeight: 600, color: "#64748b", py: 1.5 }}
              >
                漏损量占比 (%)
              </TableCell>
              <TableCell
                align="right"
                sx={{ fontWeight: 600, color: "#64748b", py: 1.5, pr: 3 }}
              >
                漏损量 ({FLOW_DISPLAY_UNIT})
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {sortedRows.map((row) => (
              <TableRow
                key={row.Area}
                hover
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell sx={{ pl: 3, py: 1.2 }}>
                  <Box className="flex items-center gap-2">
                    <Box
                      className="w-2 h-2 rounded-full"
                      sx={{ backgroundColor: getAreaColor(row.Area) }}
                    />
                    <Typography
                      variant="body2"
                      className="font-medium text-gray-700"
                    >
                      {row.Area}
                    </Typography>
                  </Box>
                </TableCell>
                <TableCell align="right" sx={{ py: 1.2, color: "#475569" }}>
                  {(row.LeakageRatio * 100).toFixed(3)}
                </TableCell>
                <TableCell
                  align="right"
                  sx={{ pr: 3, py: 1.2, fontWeight: 500, color: "#334155" }}
                >
                  {toM3h(Number(row.LeakageFlow_m3_per_s), "m3/s").toFixed(3)}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Box>
    </Box>
  );
};

export default RecognitionResults;