"use client";

/**
 * ScenarioCompareTable — 6.2 «Сравнение сценариев». One row per scenario
 * (base / aggressive / conservative): deficit-index · demand · supply · вывод.
 * Reads the same by_scenario forecasts as ScenarioCards at the target horizon.
 */

import styles from "@/app/site-finder/analysis/[cad]/ptica/ptica.module.css";
import type {
  ScenarioKey,
  ReportScenarios,
  ScenariosSummary,
} from "@/types/forecast";
import {
  SCENARIO_ORDER,
  deficitForScenario,
  deficitTone,
  deficitVerdict,
  fmtInt,
  fmtSignedDeficit,
  pickHorizonForecast,
} from "./scenario-helpers";

interface Props {
  scenarios: ReportScenarios;
  scenariosSummary: ScenariosSummary | null;
  targetHorizon: number;
}

const SCENARIO_SHORT: Record<ScenarioKey, string> = {
  base: "Базовый",
  aggressive: "Агрессивный",
  conservative: "Консервативный",
};

const DEFICIT_TONE_CLASS = {
  good: styles.numPos,
  bad: styles.numNeg,
  warn: styles.numNeg,
  neutral: "",
} as const;

export function ScenarioCompareTable({
  scenarios,
  scenariosSummary,
  targetHorizon,
}: Props) {
  // #1871 P1 — when backend collapses 3 scenarios into one, the compare-table
  // row-per-scenario layout is meaningless (three identical rows). The
  // ScenarioCards block above already shows the single «Базовый» card + the
  // backend-sourced caveat — render nothing here.
  if (scenarios.scenarios_collapsed === true) return null;

  const present = SCENARIO_ORDER.filter(
    (k) => scenarios.by_scenario[k] != null || scenariosSummary != null,
  );
  if (present.length === 0) return null;

  return (
    <>
      <div className={styles.sectionLabel}>
        6.2 · <b>сравнение сценариев</b>
      </div>
      <div className={styles.panel}>
        <table className={styles.dtable}>
          <thead>
            <tr>
              <th>Сценарий</th>
              <th className={styles.thNum}>Дефицит-индекс</th>
              <th className={styles.thNum}>Спрос</th>
              <th className={styles.thNum}>Предлож.</th>
              <th>Вывод</th>
            </tr>
          </thead>
          <tbody>
            {present.map((key) => {
              const sc = scenarios.by_scenario[key];
              const di = deficitForScenario(
                key,
                scenarios,
                scenariosSummary,
                targetHorizon,
              );
              const fc = sc
                ? pickHorizonForecast(sc.forecasts, targetHorizon)
                : null;
              const value = di.value;
              const tone = value != null ? deficitTone(value) : "neutral";
              return (
                <tr key={key}>
                  <td>{SCENARIO_SHORT[key]}</td>
                  <td className={`${styles.tdNum} ${DEFICIT_TONE_CLASS[tone]}`}>
                    {value != null ? fmtSignedDeficit(value) : "—"}
                  </td>
                  <td className={styles.tdNum}>
                    {fc ? fmtInt(fc.projected_demand_units) : "—"}
                  </td>
                  <td className={styles.tdNum}>
                    {fc ? fmtInt(fc.projected_supply_units) : "—"}
                  </td>
                  <td>{value != null ? deficitVerdict(value) : "—"}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}
