import { useTranslation } from "react-i18next";
import type { CategoryDelta } from "../../shared/types";

export interface ComparePeriodTableProps {
  rows: CategoryDelta[];
  /** Label for the "previous" monthly column (e.g. "March 2026" or "2025"). */
  previousLabel: string;
  /** Label for the "current" monthly column (e.g. "April 2026" or "2026"). */
  currentLabel: string;
  /** Optional label for the previous cumulative window (YTD). Falls back to previousLabel. */
  cumulativePreviousLabel?: string;
  /** Optional label for the current cumulative window (YTD). Falls back to currentLabel. */
  cumulativeCurrentLabel?: string;
}

function formatCurrency(amount: number, language: string): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    maximumFractionDigits: 0,
  }).format(amount);
}

function formatSignedCurrency(amount: number, language: string): string {
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    maximumFractionDigits: 0,
    signDisplay: "always",
  }).format(amount);
}

function formatPct(pct: number | null, language: string): string {
  if (pct === null) return "—";
  return new Intl.NumberFormat(language === "fr" ? "fr-CA" : "en-CA", {
    style: "percent",
    maximumFractionDigits: 1,
    signDisplay: "always",
  }).format(pct / 100);
}

function variationColor(value: number): string {
  // Compare report deals with expenses (abs values): spending more is negative
  // for the user, spending less is positive. Mirror that colour convention
  // consistently so the eye parses the delta sign at a glance.
  if (value > 0) return "var(--negative, #ef4444)";
  if (value < 0) return "var(--positive, #10b981)";
  return "";
}

export default function ComparePeriodTable({
  rows,
  previousLabel,
  currentLabel,
  cumulativePreviousLabel,
  cumulativeCurrentLabel,
}: ComparePeriodTableProps) {
  const { t, i18n } = useTranslation();

  const monthPrevLabel = previousLabel;
  const monthCurrLabel = currentLabel;
  const ytdPrevLabel = cumulativePreviousLabel ?? previousLabel;
  const ytdCurrLabel = cumulativeCurrentLabel ?? currentLabel;

  // Totals across all rows (there is no parent/child structure in compare mode).
  const totals = rows.reduce(
    (acc, r) => ({
      monthCurrent: acc.monthCurrent + r.currentAmount,
      monthPrevious: acc.monthPrevious + r.previousAmount,
      monthDelta: acc.monthDelta + r.deltaAbs,
      ytdCurrent: acc.ytdCurrent + r.cumulativeCurrentAmount,
      ytdPrevious: acc.ytdPrevious + r.cumulativePreviousAmount,
      ytdDelta: acc.ytdDelta + r.cumulativeDeltaAbs,
    }),
    { monthCurrent: 0, monthPrevious: 0, monthDelta: 0, ytdCurrent: 0, ytdPrevious: 0, ytdDelta: 0 },
  );
  const totalMonthPct =
    totals.monthPrevious !== 0 ? (totals.monthDelta / Math.abs(totals.monthPrevious)) * 100 : null;
  const totalYtdPct =
    totals.ytdPrevious !== 0 ? (totals.ytdDelta / Math.abs(totals.ytdPrevious)) * 100 : null;

  return (
    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
        <table className="w-full text-sm">
          <thead className="sticky top-0 z-20">
            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
              <th
                rowSpan={2}
                className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom sticky left-0 bg-[var(--card)] z-30 min-w-[180px]"
              >
                {t("reports.highlights.category")}
              </th>
              <th
                colSpan={4}
                className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]"
              >
                {t("reports.bva.monthly")}
              </th>
              <th
                colSpan={4}
                className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]"
              >
                {t("reports.bva.ytd")}
              </th>
            </tr>
            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
                <div>{t("reports.compare.currentAmount")}</div>
                <div className="text-[10px] font-normal opacity-70">{monthCurrLabel}</div>
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                <div>{t("reports.compare.previousAmount")}</div>
                <div className="text-[10px] font-normal opacity-70">{monthPrevLabel}</div>
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                {t("reports.bva.dollarVar")}
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                {t("reports.bva.pctVar")}
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
                <div>{t("reports.compare.currentAmount")}</div>
                <div className="text-[10px] font-normal opacity-70">{ytdCurrLabel}</div>
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                <div>{t("reports.compare.previousAmount")}</div>
                <div className="text-[10px] font-normal opacity-70">{ytdPrevLabel}</div>
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                {t("reports.bva.dollarVar")}
              </th>
              <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                {t("reports.bva.pctVar")}
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 ? (
              <tr>
                <td
                  colSpan={9}
                  className="px-3 py-4 text-center text-[var(--muted-foreground)] italic"
                >
                  {t("reports.empty.noData")}
                </td>
              </tr>
            ) : (
              <>
                {rows.map((row) => (
                  <tr
                    key={`${row.categoryId ?? "uncat"}-${row.categoryName}`}
                    className="border-b border-[var(--border)]/50 hover:bg-[var(--muted)]/40"
                  >
                    <td className="px-3 py-1.5 sticky left-0 bg-[var(--card)] z-10">
                      <span className="flex items-center gap-2">
                        <span
                          className="w-2.5 h-2.5 rounded-full shrink-0"
                          style={{ backgroundColor: row.categoryColor }}
                        />
                        {row.categoryName}
                      </span>
                    </td>
                    {/* Monthly block */}
                    <td className="text-right px-3 py-1.5 border-l border-[var(--border)]/50 tabular-nums">
                      {formatCurrency(row.currentAmount, i18n.language)}
                    </td>
                    <td className="text-right px-3 py-1.5 tabular-nums">
                      {formatCurrency(row.previousAmount, i18n.language)}
                    </td>
                    <td
                      className="text-right px-3 py-1.5 tabular-nums font-medium"
                      style={{ color: variationColor(row.deltaAbs) }}
                    >
                      {formatSignedCurrency(row.deltaAbs, i18n.language)}
                    </td>
                    <td
                      className="text-right px-3 py-1.5 tabular-nums"
                      style={{ color: variationColor(row.deltaAbs) }}
                    >
                      {formatPct(row.deltaPct, i18n.language)}
                    </td>
                    {/* Cumulative YTD block */}
                    <td className="text-right px-3 py-1.5 border-l border-[var(--border)]/50 tabular-nums">
                      {formatCurrency(row.cumulativeCurrentAmount, i18n.language)}
                    </td>
                    <td className="text-right px-3 py-1.5 tabular-nums">
                      {formatCurrency(row.cumulativePreviousAmount, i18n.language)}
                    </td>
                    <td
                      className="text-right px-3 py-1.5 tabular-nums font-medium"
                      style={{ color: variationColor(row.cumulativeDeltaAbs) }}
                    >
                      {formatSignedCurrency(row.cumulativeDeltaAbs, i18n.language)}
                    </td>
                    <td
                      className="text-right px-3 py-1.5 tabular-nums"
                      style={{ color: variationColor(row.cumulativeDeltaAbs) }}
                    >
                      {formatPct(row.cumulativeDeltaPct, i18n.language)}
                    </td>
                  </tr>
                ))}
                {/* Grand totals row */}
                <tr className="border-t-2 border-[var(--border)] font-bold text-sm bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))]">
                  <td className="px-3 py-3 sticky left-0 bg-[color-mix(in_srgb,var(--muted)_20%,var(--card))] z-10">
                    {t("reports.compare.totalRow")}
                  </td>
                  <td className="text-right px-3 py-3 border-l border-[var(--border)]/50 tabular-nums">
                    {formatCurrency(totals.monthCurrent, i18n.language)}
                  </td>
                  <td className="text-right px-3 py-3 tabular-nums">
                    {formatCurrency(totals.monthPrevious, i18n.language)}
                  </td>
                  <td
                    className="text-right px-3 py-3 tabular-nums"
                    style={{ color: variationColor(totals.monthDelta) }}
                  >
                    {formatSignedCurrency(totals.monthDelta, i18n.language)}
                  </td>
                  <td
                    className="text-right px-3 py-3 tabular-nums"
                    style={{ color: variationColor(totals.monthDelta) }}
                  >
                    {formatPct(totalMonthPct, i18n.language)}
                  </td>
                  <td className="text-right px-3 py-3 border-l border-[var(--border)]/50 tabular-nums">
                    {formatCurrency(totals.ytdCurrent, i18n.language)}
                  </td>
                  <td className="text-right px-3 py-3 tabular-nums">
                    {formatCurrency(totals.ytdPrevious, i18n.language)}
                  </td>
                  <td
                    className="text-right px-3 py-3 tabular-nums"
                    style={{ color: variationColor(totals.ytdDelta) }}
                  >
                    {formatSignedCurrency(totals.ytdDelta, i18n.language)}
                  </td>
                  <td
                    className="text-right px-3 py-3 tabular-nums"
                    style={{ color: variationColor(totals.ytdDelta) }}
                  >
                    {formatPct(totalYtdPct, i18n.language)}
                  </td>
                </tr>
              </>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}