/**
 * 화면명: 통수위험 분석
 * 통수위험 분석 결과와 과거 분석이력을 조회하고 지도에 표시한다.
 */
"use client";

import { useEffect, useMemo, useState, useRef } from "react";

import { windowPopupDefinitions } from "@/features/window-popup/model/popup-definitions";
import {
  WINDOW_POPUP_MESSAGE_TYPE,
  type WindowPopupContentProps,
} from "@/features/window-popup/model/types";
import MapPopupDataTable from "@/features/window-popup/ui/map-popup-data-table";
import PopupFooterNote from "@/features/window-popup/ui/popup-footer-note";
import PopupSearchPanel from "@/features/window-popup/ui/popup-search-panel";
import {
  StandardPopupLayout,
  type UiHeadProps,
  UITab,
} from "@common/business_components";
import type { UiTableSort } from "@common/business_components/ui/table";
import { Button } from "@common/components";
import {
  formatWaterRiskHourValue,
  getWaterRiskMinStartDate,
  toWaterRiskApiDateTime,
  toWaterRiskHourValue,
  validateWaterRiskAnalysisPeriod,
  validateWaterRiskRainStartedPeriod,
} from "./water-risk-date-range";

import {
  fetchWaterRiskAreas,
  fetchWaterRiskMapView,
  fetchWaterRiskResults,
} from "./water-risk-client";
import {
  buildWaterRiskStatusLabel,
  EMPTY_WATER_RISK_SESSION_SNAPSHOT,
  isWaterRiskDanger,
  type WaterRiskAreaOption,
  type WaterRiskResultPage,
  type WaterRiskResultRow,
  type WaterRiskSessionSnapshot,
  type WaterRiskStatus,
} from "./water-risk-types";

import LoadingOverlay from "@/components/ui/loading-bar";

type WaterRiskResultMode = "current" | "history";

/**
 * 과거이력 검색조건이다. 시각 값은 모두 시간 단위 입력값(yyyy-MM-ddTHH:00)이며
 * 시작·종료 정시를 모두 포함해 조회한다. 현재 탭은 중점관리지역만 이 값을 쓴다.
 */
type ResultFilters = {
  ctpvCd: string;
  sggCd: string;
  areaId: string;
  riskStatus: "ALL" | WaterRiskStatus;
  /** 과거이력 분석시각 기간 시작. 비우면 분석시각 조건을 적용하지 않는다. */
  analysisFrom: string;
  /** 과거이력 분석시각 기간 종료. 시작과 함께 입력한다. */
  analysisTo: string;
  /** 과거이력 강우시각(강우 시작 일시) 기간 시작. 필수이며 기본은 최근 1년 시작일 00시다. */
  rainStartedFrom: string;
  /** 과거이력 강우시각(강우 시작 일시) 기간 종료. 필수이며 기본은 현재 정시다. */
  rainStartedTo: string;
};

/** 과거이력 시각 범위 입력 키. 분석시각·강우시각 입력을 같은 모양으로 그릴 때 쓴다. */
type HourRangeKeys =
  | { fromKey: "analysisFrom"; toKey: "analysisTo" }
  | { fromKey: "rainStartedFrom"; toKey: "rainStartedTo" };

const WATER_RISK_PAGE_SIZE = 10;
const EMPTY_RESULT_PAGE: WaterRiskResultPage = {
  items: [],
  analysisBaseAt: null,
  total: 0,
  page: 0,
  size: WATER_RISK_PAGE_SIZE,
  totalPages: 0,
};

type WaterRiskTableRow = Record<string, unknown> & {
  sourceRow: WaterRiskResultRow;
  rowNo: number;
  sidoName: string;
  sggName: string;
  areaName: string;
  /** 대표실행 분석기준시각(excn.anls_crtr_dt)을 yyyy.MM.dd HH:mm으로 표시한 값 */
  analysisBaseAt: string;
  rainStartedAt: string;
  currentAccumRainQty: string;
  forecastRainQty: string;
  maxFloodingAt: string;
  maxFloodingFlow: string;
  riskStatus: WaterRiskResultRow["riskStatus"];
};

const WATER_RISK_RESULT_HEADLIST: UiHeadProps[] = [
  {
    id: "rowNo",
    title: "순번",
    widthPercent: 5,
    sortable: true,
    sortKey: "rowNumber",
  },
  {
    id: "sidoName",
    title: "시도",
    widthPercent: 7,
    sortable: true,
    sortKey: "ctpvName",
  },
  { id: "sggName", title: "시군구", widthPercent: 7, sortable: true },
  { id: "areaName", title: "중점관리지역", widthPercent: 12, sortable: true },
  // 대표실행 분석기준시각. 컬럼 id가 백엔드 정렬 키(analysisBaseAt)와 같다.
  { id: "analysisBaseAt", title: "분석시각", widthPercent: 11, sortable: true },
  {
    id: "rainStartedAt",
    title: "강우시작시각",
    widthPercent: 11,
    sortable: true,
  },
  {
    id: "currentAccumRainQty",
    title: "누적강우량(mm)",
    widthPercent: 9,
    align: "right",
    sortable: true,
  },
  {
    id: "forecastRainQty",
    title: "예측강우량(mm)",
    widthPercent: 9,
    align: "right",
    sortable: true,
  },
  {
    id: "maxFloodingAt",
    title: "최대 침수 예상시점",
    widthPercent: 11,
    sortable: true,
  },
  {
    id: "maxFloodingFlow",
    title: "최대 침수유량(m³/s)",
    widthPercent: 9,
    align: "right",
    sortable: true,
  },
  // "위험(매핑관로없음)" 문구가 들어가도록 기존보다 넓게 둔다.
  { id: "riskStatus", title: "위험 여부", widthPercent: 9 },
];

const formatOptionalNumber = (
  value: number | null | undefined,
  digits: number,
) => (value == null ? "-" : value.toFixed(digits));

/** 브라우저 로컬 날짜를 API의 yyyy-MM-dd 형식으로 변환한다. */
const formatLocalDate = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

/** 현재 로컬시각을 API가 조회할 정시 yyyy-MM-ddTHH:00:00으로 내림한다. */
const formatCurrentAnalysisHour = (date: Date) =>
  `${formatLocalDate(date)}T${String(date.getHours()).padStart(2, "0")}:00:00`;

/** API 분석기준시간을 화면의 yyyy.MM.dd HH:mm 형식으로 표시한다. */
const formatAnalysisBaseAt = (value?: string | null) => {
  if (!value || value === "-") return "-";
  const normalized = value.replace("T", " ");
  const [date = "", time = ""] = normalized.split(" ");
  return `${date.replaceAll("-", ".")} ${time.slice(0, 5)}`.trim();
};

/** 최초 진입과 검색 초기화에 사용하는 기본 조회조건이다. 강우시각은 최근 1년이다. */
const buildDefaultResultFilters = (): ResultFilters => {
  const now = new Date();
  return {
    ctpvCd: "ALL",
    sggCd: "ALL",
    areaId: "ALL",
    riskStatus: "ALL",
    // 분석시각 기간은 선택 조건이므로 기본·초기화 상태는 비워 둔다.
    analysisFrom: "",
    analysisTo: "",
    // 강우시각은 필수 조건이다. 365일 전 00시 ~ 현재 정시(종료일 포함 최대 366일)를 기본으로 한다.
    rainStartedFrom: `${getWaterRiskMinStartDate(formatLocalDate(now))!}T00:00`,
    rainStartedTo: formatWaterRiskHourValue(now),
  };
};

/** 부모 지도 창으로 통수위험 선택 메시지를 전달한다. */
const postMessageToOpener = (
  type: string,
  payload?: Record<string, unknown>,
) => {
  if (typeof window === "undefined" || !window.opener) return;
  window.opener.postMessage({ type, payload }, window.location.origin);
};

/** 위험 여부에 맞는 기존 팝업 badge 스타일을 반환한다. 위험(매핑관로없음)도 위험 배지를 쓴다. */
const getRiskBadgeClassName = (riskStatus: WaterRiskStatus) =>
  isWaterRiskDanger(riskStatus) ? "sn-popup-badge-danger" : "sn-popup-badge-normal";

/**
 * 목록 행을 대표 SWMM 실행 ID로 식별한다. 행 하나가 실행 하나이므로 같은 날·지역 행도 겹치지 않는다.
 * 실행 ID가 없는 응답(구 BE)에서는 기존 날짜·시각·지역 조합으로 대체한다.
 */
const buildResultRowKey = (row: WaterRiskResultRow) =>
  row.executionId ||
  [
    row.analysisDate ?? "",
    row.rainStartedAt ?? "",
    row.analysisBaseAt ?? "",
    row.ctpvCd ?? "",
    row.sggCd ?? "",
    row.areaId,
  ].join(":");

/** 실제 통수위험 API를 조회하고 선택 결과를 부모 지도에 전달하는 팝업이다. */
export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
  // 최초 진입과 초기화 모두 현재 정시를 종료로 하는 최근 1년 강우시각을 사용한다.
  const initialFilters = useMemo(() => buildDefaultResultFilters(), []);
  // 과거이력 시각 입력은 현재 정시까지 고를 수 있다. 렌더링마다 다시 계산해 정시가 바뀌면 따라간다.
  const currentHourValue = formatWaterRiskHourValue(new Date());
  const [resultMode, setResultMode] = useState<WaterRiskResultMode>("current");
  const [draftResultFilters, setDraftResultFilters] =
    useState<ResultFilters>(initialFilters);
  const [appliedResultFilters, setAppliedResultFilters] =
    useState<ResultFilters>(initialFilters);
  const [areaOptions, setAreaOptions] = useState<WaterRiskAreaOption[]>([]);
  const [resultPage, setResultPage] =
    useState<WaterRiskResultPage>(EMPTY_RESULT_PAGE);
  const [selectedResultKey, setSelectedResultKey] = useState("");
  const [resultCurrentPage, setResultCurrentPage] = useState(1);
  const [resultSort, setResultSort] = useState<UiTableSort>();
  const [reloadVersion, setReloadVersion] = useState(0);
  const [currentAnalysisBaseAt, setCurrentAnalysisBaseAt] = useState(() =>
    formatCurrentAnalysisHour(new Date()),
  );
  const [isLoading, setIsLoading] = useState(false);
  const [isMapLoading, setIsMapLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    let active = true;
    fetchWaterRiskAreas()
      .then((options) => {
        if (active) setAreaOptions(options);
      })
      .catch((error) => {
        if (!active) return;
        const message =
          error instanceof Error
            ? error.message
            : "중점관리지역 목록을 조회하지 못했습니다.";
        setErrorMessage(message);
      });
    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    let active = true;
    setIsLoading(true);
    setErrorMessage("");
    const isHistory = resultMode === "history";
    // 현재 탭은 진행 중 강우를 오늘까지 최근 1년 강우시작일로 찾고, 과거이력의 적용 기간이 이를 제한하지 않게 분리한다.
    // 과거이력은 적용 시 검증을 통과한 강우시각 기간을 보내며, 강우시작일도 그 날짜로 맞춘다.
    const requestToday = formatLocalDate(new Date());
    const startDate = isHistory
      ? appliedResultFilters.rainStartedFrom.slice(0, 10)
      : getWaterRiskMinStartDate(requestToday)!;
    const endDate = isHistory
      ? appliedResultFilters.rainStartedTo.slice(0, 10)
      : requestToday;
    // 과거이력의 분석시각 기간은 적용 시 검증을 통과한 값이며, 비어 있으면 조건 없이 조회한다.
    const analysisBaseFrom = isHistory
      ? toWaterRiskApiDateTime(appliedResultFilters.analysisFrom)
      : "";
    const analysisBaseTo = isHistory
      ? toWaterRiskApiDateTime(appliedResultFilters.analysisTo)
      : "";
    const rainStartedFrom = isHistory
      ? toWaterRiskApiDateTime(appliedResultFilters.rainStartedFrom)
      : "";
    const rainStartedTo = isHistory
      ? toWaterRiskApiDateTime(appliedResultFilters.rainStartedTo)
      : "";
    fetchWaterRiskResults({
      startDate,
      endDate,
      analysisBaseAt:
        resultMode === "current" ? currentAnalysisBaseAt : undefined,
      analysisBaseFrom: analysisBaseFrom || undefined,
      analysisBaseTo: analysisBaseTo || undefined,
      rainStartedFrom: rainStartedFrom || undefined,
      rainStartedTo: rainStartedTo || undefined,
      ctpvCd:
        resultMode === "current" || appliedResultFilters.ctpvCd === "ALL"
          ? undefined
          : appliedResultFilters.ctpvCd,
      sggCd:
        resultMode === "current" || appliedResultFilters.sggCd === "ALL"
          ? undefined
          : appliedResultFilters.sggCd,
      areaId:
        appliedResultFilters.areaId === "ALL"
          ? undefined
          : appliedResultFilters.areaId,
      riskStatus:
        resultMode === "current" || appliedResultFilters.riskStatus === "ALL"
          ? undefined
          : appliedResultFilters.riskStatus,
      rainEventStatus: resultMode === "current" ? "IN_PROGRESS" : "ENDED",
      page: resultCurrentPage - 1,
      size: WATER_RISK_PAGE_SIZE,
      sort: resultSort,
    })
      .then((page) => {
        if (!active) return;
        setResultPage(page);
        if (page.items.length > 0) {
          setSelectedResultKey(
            (current) => current || buildResultRowKey(page.items[0]!),
          );
        }
      })
      .catch((error) => {
        if (!active) return;
        setResultPage(EMPTY_RESULT_PAGE);
        setErrorMessage(
          error instanceof Error
            ? error.message
            : "통수위험 분석 결과를 조회하지 못했습니다.",
        );
      })
      .finally(() => {
        if (active) setIsLoading(false);
      });
    return () => {
      active = false;
    };
  }, [
    appliedResultFilters,
    currentAnalysisBaseAt,
    reloadVersion,
    resultCurrentPage,
    resultMode,
    resultSort,
  ]);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.origin !== window.location.origin) return;
      if (event.data?.type !== WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SYNC)
        return;

      const nextSnapshot = (event.data.payload ??
        EMPTY_WATER_RISK_SESSION_SNAPSHOT) as WaterRiskSessionSnapshot;
      if (nextSnapshot.selectedAreaId) {
        // 지도에 표시 중인 실행 ID가 있으면 그 행만 선택한다. 같은 지역 첫 행으로 바꾸면 다른 결과가 선택돼 보인다.
        const matchingRow = nextSnapshot.selectedExecutionId
          ? resultPage.items.find(
              (row) => row.executionId === nextSnapshot.selectedExecutionId,
            )
          : resultPage.items.find(
              (row) => row.areaId === nextSnapshot.selectedAreaId,
            );
        if (matchingRow) setSelectedResultKey(buildResultRowKey(matchingRow));
      }
    };

    window.addEventListener("message", handleMessage);
    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_READY);
    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, [resultPage.items]);

  /** 브라우저 X·새로고침 등으로 팝업 문서가 종료되면 부모 지도의 선택결과를 즉시 정리한다. */
  useEffect(() => {
    const notifyPopupClosed = () => {
      postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_CLOSED);
    };
    window.addEventListener("pagehide", notifyPopupClosed);
    window.addEventListener("beforeunload", notifyPopupClosed);
    return () => {
      window.removeEventListener("pagehide", notifyPopupClosed);
      window.removeEventListener("beforeunload", notifyPopupClosed);
    };
  }, []);

  /** 현재 탭의 표시·조회 기준시간을 매 정시에 새 현재시간으로 변경한다. */
  useEffect(() => {
    if (resultMode !== "current" || typeof window === "undefined") return;

    let intervalId: number | undefined;
    const applyCurrentHour = () =>
      setCurrentAnalysisBaseAt(formatCurrentAnalysisHour(new Date()));
    applyCurrentHour();
    const now = new Date();
    const nextRefreshAt = new Date(now);
    nextRefreshAt.setHours(now.getHours() + 1, 0, 0, 0);
    const timeoutId = window.setTimeout(
      () => {
        applyCurrentHour();
        intervalId = window.setInterval(applyCurrentHour, 60 * 60 * 1000);
      },
      Math.max(0, nextRefreshAt.getTime() - now.getTime()),
    );

    return () => {
      window.clearTimeout(timeoutId);
      if (intervalId != null) window.clearInterval(intervalId);
    };
  }, [resultMode]);

  const ctpvOptions = useMemo(() => {
    const unique = new Map<string, string>();
    areaOptions.forEach((option) => {
      if (option.ctpvCd)
        unique.set(option.ctpvCd, option.ctpvName || option.ctpvCd);
    });
    return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
      a.name.localeCompare(b.name, "ko"),
    );
  }, [areaOptions]);

  const sggOptions = useMemo(() => {
    const unique = new Map<string, string>();
    areaOptions
      .filter(
        (option) =>
          draftResultFilters.ctpvCd !== "ALL" &&
          option.ctpvCd === draftResultFilters.ctpvCd,
      )
      .forEach((option) => {
        if (option.sggCd)
          unique.set(option.sggCd, option.sggName || option.sggCd);
      });
    return Array.from(unique, ([code, name]) => ({ code, name })).sort((a, b) =>
      a.name.localeCompare(b.name, "ko"),
    );
  }, [areaOptions, draftResultFilters.ctpvCd]);

  const filteredAreaOptions = useMemo(
    () =>
      areaOptions.filter(
        (option) =>
          (draftResultFilters.ctpvCd !== "ALL" &&
            option.ctpvCd === draftResultFilters.ctpvCd) &&
          (draftResultFilters.sggCd === "ALL" ||
            option.sggCd === draftResultFilters.sggCd),
      ),
    [areaOptions, draftResultFilters.ctpvCd, draftResultFilters.sggCd],
  );

  const resultListTitle =
    resultMode === "current"
      ? "통수위험 분석 결과 목록"
      : "통수위험 과거 이력 목록";
  const tableRows = useMemo<WaterRiskTableRow[]>(
    () =>
      resultPage.items.map((row) => {
        return {
          sourceRow: row,
          rowNo: 0,
          sidoName: row.sidoName || "-",
          sggName: row.sggName || "-",
          areaName: row.areaName,
          analysisBaseAt: formatAnalysisBaseAt(row.analysisBaseAt),
          rainStartedAt: formatAnalysisBaseAt(row.rainStartedAt),
          currentAccumRainQty: formatOptionalNumber(row.currentAccumRainQty, 1),
          forecastRainQty: formatOptionalNumber(row.forecastRainQty, 1),
          maxFloodingAt: formatAnalysisBaseAt(row.maxFloodingAt),
          maxFloodingFlow: formatOptionalNumber(row.maxFloodingFlow, 2),
          riskStatus: row.riskStatus,
        };
      }),
    [resultPage.items],
  );

  /** 검증된 검색조건을 적용하고 첫 페이지를 새로 조회한다. */
  const handleApplyResultFilters = () => {
    if (resultMode === "history") {
      const nowHourValue = formatWaterRiskHourValue(new Date());
      // 분석시각 기간은 선택 조건이다. 입력한 경우에만 시작·종료 짝, 순서, 기간, 현재 정시 이하를 확인한다.
      const analysisPeriodError = validateWaterRiskAnalysisPeriod(
        draftResultFilters.analysisFrom,
        draftResultFilters.analysisTo,
        nowHourValue,
      );
      if (analysisPeriodError) {
        setErrorMessage(analysisPeriodError);
        return;
      }
      // 강우시각 기간은 필수 조건이다. 시작·종료 짝, 순서, 최대 366일, 현재 정시 이하를 확인한다.
      const rainStartedPeriodError = validateWaterRiskRainStartedPeriod(
        draftResultFilters.rainStartedFrom,
        draftResultFilters.rainStartedTo,
        nowHourValue,
      );
      if (rainStartedPeriodError) {
        setErrorMessage(rainStartedPeriodError);
        return;
      }
    }

    setErrorMessage("");
    setResultCurrentPage(1);
    setAppliedResultFilters({ ...draftResultFilters });
    setReloadVersion((version) => version + 1);
  };

  /** 공통 결과표 정렬상태를 적용하고 첫 페이지를 다시 조회한다. */
  const handleSortChange = (nextSort?: UiTableSort) => {
    setResultCurrentPage(1);
    setResultSort(nextSort);
  };

  /** 강우이벤트 상태에 따라 진행중 현재 위험과 종료된 과거 이력을 다시 조회한다. */
  const handleChangeResultMode = (mode: WaterRiskResultMode) => {
    setResultMode(mode);
    setResultCurrentPage(1);
    setResultSort(undefined);
    setResultPage(EMPTY_RESULT_PAGE);
    setSelectedResultKey("");
  };

  /** 늦게 끝난 이전 행 요청이 최신 선택을 덮지 않도록 식별한다. */
  const mapRequestRef = useRef<string>("");

  /** 선택 행의 실제 GeoJSON을 조회한 뒤 부모 지도 창에 전달한다. */
  const handleSelectResultRow = async (row: WaterRiskResultRow) => {
    const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    mapRequestRef.current = requestId;
    postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
      phase: "loading", requestId,
    });
    setSelectedResultKey(buildResultRowKey(row));
    setIsMapLoading(true);
    setErrorMessage("");
    try {
      const mapView = await fetchWaterRiskMapView(row);
      if (mapRequestRef.current !== requestId) return;
      postMessageToOpener(WINDOW_POPUP_MESSAGE_TYPE.WATER_RISK_SELECT_RESULT, {
        requestId,
        areaId: row.areaId,
        resultRow: row,
        mapView,
      });
    } catch (error) {
      if (mapRequestRef.current !== requestId) return;
      setErrorMessage(
        error instanceof Error
          ? error.message
          : "통수위험 지도 결과를 조회하지 못했습니다.",
      );
    } finally {
      if (mapRequestRef.current === requestId) setIsMapLoading(false);
    }
  };

  /**
   * 침수예측현황과 같은 형태(라벨 + 시작 `~` 종료 `datetime-local`)로 과거이력 시각 범위를 그린다.
   * `step=3600`이라 값의 분이 00이면 브라우저가 분 칸을 고정하고, 분이 들어온 경우는 저장 전에 00으로 내린다.
   * 현재 정시 이후는 고를 수 없게 `max`만 둔다(`min`은 step 기준점을 바꾸므로 두지 않는다).
   */
  const renderHourRange = (label: string, { fromKey, toKey }: HourRangeKeys) => (
    <div className="flex shrink-0 items-center gap-2">
      <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
        {label}
      </div>
      <input
        type="datetime-local"
        step={3600}
        max={currentHourValue}
        value={draftResultFilters[fromKey]}
        onChange={(event) => {
          const nextValue = toWaterRiskHourValue(event.target.value);
          setDraftResultFilters((current) => ({ ...current, [fromKey]: nextValue }));
        }}
        aria-label={`${label} 시작`}
        className="h-[3.2rem] w-[17rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
      />
      <span className="text-xl font-medium text-label">~</span>
      <input
        type="datetime-local"
        step={3600}
        max={currentHourValue}
        value={draftResultFilters[toKey]}
        onChange={(event) => {
          const nextValue = toWaterRiskHourValue(event.target.value);
          setDraftResultFilters((current) => ({ ...current, [toKey]: nextValue }));
        }}
        aria-label={`${label} 종료`}
        className="h-[3.2rem] w-[17rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
      />
    </div>
  );

  return (
    <StandardPopupLayout title={windowPopupDefinitions.flowRiskPopup.title}>
      <section
        className={`relative flex min-h-0 flex-1 flex-col gap-[1.2rem] ${
          tableRows.length === 0
            ? "[&_.standard-data-table>.card]:!flex [&_.standard-data-table>.card]:!min-h-0 [&_.standard-data-table>.card]:!flex-1 [&_.standard-data-table>.card]:!flex-col [&_.standard-data-table]:!flex [&_.standard-data-table]:!min-h-0 [&_.standard-data-table]:!flex-1 [&_.standard-data-table]:!flex-col [&_.standard-data-table__scroll>div]:!h-full [&_.standard-data-table__scroll]:!min-h-96 [&_.standard-data-table__scroll]:!flex-1"
            : ""
        }`}
      >
        <LoadingOverlay isLoading={isLoading || isMapLoading} />
        <div className="flex flex-wrap items-center justify-between gap-3">
          <UITab
            variant="underline"
            defaultValue="current"
            tabList={[
              { value: "current", label: "현재" },
              { value: "history", label: "과거분석이력" },
            ]}
            onValueChange={(value) =>
              handleChangeResultMode(value as WaterRiskResultMode)
            }
          />
          {resultMode === "current" ? (
            <div className="flex items-center gap-2 text-xl">
              <span className="font-medium text-label">분석기준시간</span>
              <strong className="font-semibold text-primary">
                {formatAnalysisBaseAt(currentAnalysisBaseAt)}
              </strong>
            </div>
          ) : null}
        </div>

        <PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
          {/* 과거이력 검색조건 순서: 시도 → 시군구 → 중점관리지역 → 분석시각 → 강우시각 → 위험상태 */}
          {resultMode === "history" ? (
            <>
              <label className="flex shrink-0 items-center gap-2">
                <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
                  시도
                </div>
                <select
                  value={draftResultFilters.ctpvCd}
                  onChange={(event) =>
                    setDraftResultFilters((current) => ({
                      ...current,
                      ctpvCd: event.target.value,
                      sggCd: "ALL",
                      areaId: "ALL",
                    }))
                  }
                  aria-label="시도"
                  className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
                >
                  <option value="ALL">전체</option>
                  {ctpvOptions.map((option) => (
                    <option key={option.code} value={option.code}>
                      {option.name}
                    </option>
                  ))}
                </select>
              </label>

              <label className="flex shrink-0 items-center gap-2">
                <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
                  시군구
                </div>
                <select
                  value={draftResultFilters.sggCd}
                  onChange={(event) =>
                    setDraftResultFilters((current) => ({
                      ...current,
                      sggCd: event.target.value,
                      areaId: "ALL",
                    }))
                  }
                  aria-label="시군구"
                  className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
                >
                  <option value="ALL">전체</option>
                  {sggOptions.map((option) => (
                    <option key={option.code} value={option.code}>
                      {option.name}
                    </option>
                  ))}
                </select>
              </label>
            </>
          ) : null}

          <label className="flex shrink-0 items-center gap-2">
            <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
              중점관리지역
            </div>
            <select
              value={draftResultFilters.areaId}
              onChange={(event) =>
                setDraftResultFilters((current) => ({
                  ...current,
                  areaId: event.target.value,
                }))
              }
              aria-label="중점관리지역"
              className="h-[3.2rem] w-[18rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
            >
              <option value="ALL">전체</option>
              {(resultMode === "current"
                ? areaOptions
                : filteredAreaOptions
              ).map((option) => (
                <option
                  key={`${option.ctpvCd}:${option.sggCd}:${option.areaId}`}
                  value={option.areaId}
                >
                  {option.areaName}
                </option>
              ))}
            </select>
          </label>

          {resultMode === "history" ? (
            <>
              {/* 분석시각(선택)·강우시각(필수): 시간 단위로만 고르며 시작·종료 정시를 모두 포함해 조회한다. */}
              {renderHourRange("분석시각", {
                fromKey: "analysisFrom",
                toKey: "analysisTo",
              })}
              {renderHourRange("강우시각", {
                fromKey: "rainStartedFrom",
                toKey: "rainStartedTo",
              })}
              <label className="flex shrink-0 items-center gap-2">
                <div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
                  위험상태
                </div>
                <select
                  value={draftResultFilters.riskStatus}
                  onChange={(event) =>
                    setDraftResultFilters((current) => ({
                      ...current,
                      riskStatus: event.target
                        .value as ResultFilters["riskStatus"],
                    }))
                  }
                  aria-label="위험상태"
                  className="h-[3.2rem] w-[14rem] rounded-md border border-input bg-field px-3 text-xl text-foreground outline-none focus:ring-2 focus:ring-ring"
                >
                  <option value="ALL">전체</option>
                  <option value="DANGER">위험</option>
                  <option value="DANGER_UNMAPPED">위험(매핑관로없음)</option>
                  <option value="NORMAL">정상</option>
                </select>
              </label>
            </>
          ) : null}

          <div className="flex min-w-fit flex-1 items-center justify-end gap-2">
            <Button
              type="button"
              color="primary"
              onClick={handleApplyResultFilters}
            >
              조회
            </Button>
            <Button
              type="button"
              color="white"
              onClick={() => {
                // 초기화 시점의 기본기간·전체 조건으로 첫 페이지를 다시 조회한다.
                const defaultFilters = buildDefaultResultFilters();
                setDraftResultFilters(defaultFilters);
                setAppliedResultFilters(defaultFilters);
                setResultCurrentPage(1);
                setSelectedResultKey("");
                setErrorMessage("");
                setReloadVersion((version) => version + 1);
              }}
            >
              초기화
            </Button>
          </div>
        </PopupSearchPanel>

        {errorMessage ? (
          <div role="alert" className="shrink-0 px-1 text-xl text-destructive">
            {errorMessage}
          </div>
        ) : null}

        <MapPopupDataTable
          rows={tableRows}
          headlist={WATER_RISK_RESULT_HEADLIST}
          title={resultListTitle}
          total={resultPage.total}
          page={resultCurrentPage}
          pageSize={WATER_RISK_PAGE_SIZE}
          onPageChange={setResultCurrentPage}
          rowId={(row) => buildResultRowKey(row.sourceRow)}
          selectedRowId={selectedResultKey}
          onRowClick={(row) => void handleSelectResultRow(row.sourceRow)}
          renderCell={(row, headId) =>
            headId === "riskStatus" ? (
              <span
                className={`sn-popup-badge min-w-[5.6rem] whitespace-nowrap ${getRiskBadgeClassName(row.riskStatus)}`}
              >
                {buildWaterRiskStatusLabel(row.riskStatus)}
              </span>
            ) : undefined
          }
          scrollMode="horizontal"
          // 분석시각 컬럼 추가로 기존 124rem보다 넓힌다.
          minTableWidth="136rem"
          emptyMessage="조회된 결과가 없습니다."
          sort={resultSort}
          onSortChange={handleSortChange}
        />

        {/*
          인수테스트 요구: 판정 기준을 목록 머리글 오른쪽에서 침수예측현황과 같은 하단 위치로 옮기고,
          분석 원천·실행 주기·침수 항목 설명을 글머리표로 함께 표시한다.
        */}
        <PopupFooterNote
          items={[
            <>
              분석 결과 관로의 Capacity(통수능) 값이 0.8 이상이 1개라도 있으면{" "}
              <span className="font-bold text-[#ff1c15]">위험</span>, 매핑되지
              않은 관로만 0.8 이상이면{" "}
              <span className="font-bold text-[#ff1c15]">위험(매핑관로없음)</span>,
              없으면 <span className="font-bold text-[#1677ff]">정상</span>
            </>,
            "통수능이 위험에 해당하지만 지도화면에 해당 관로를 매핑할 수 없을 때, 빨간색 관로는 보이지 않을 수 있습니다.",
            "분석 실행 시기 : 통수위험은 관측강우가 0mm이상으로 강우가 발생시 1시간 주기로 분석 자동실행",
            "분석 방법 : 기상청 향후 6시간 예측강우를 20개소 중점관리지역의 관망모델(SWMM모델)에 연동하여 관로 통수량을 분석하여 통수위험여부를 분석",
            "최대 침수예상시점과 최대침수유량은 맨홀 월류량이 있을때 그 시점과 값이 나타나는것입니다.",
          ]}
        />
      </section>
    </StandardPopupLayout>
  );
}