Neon-Desk/components/financials/statement-row-inspector.tsx

"use client";

import type {
  DetailFinancialRow,
  DimensionBreakdownRow,
  FinancialStatementPeriod,
  FinancialSurfaceKind,
  SurfaceFinancialRow,
} from "@/lib/types";
import type { ResolvedStatementSelection } from "@/lib/financials/statement-view-model";

type StatementRowInspectorProps = {
  selection: ResolvedStatementSelection | null;
  dimensionRows: DimensionBreakdownRow[];
  periods: FinancialStatementPeriod[];
  surfaceKind: Extract<
    FinancialSurfaceKind,
    "income_statement" | "balance_sheet" | "cash_flow_statement"
  >;
  renderValue: (
    row: SurfaceFinancialRow | DetailFinancialRow,
    periodId: string,
    previousPeriodId: string | null,
  ) => string;
  renderDimensionValue: (
    value: number | null,
    rowKey: string,
    unit: SurfaceFinancialRow["unit"],
  ) => string;
};

function InspectorField(props: { label: string; value: string }) {
  return (
    <div className="py-1.5">
      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
        {props.label}
      </p>
      <p className="text-sm font-medium text-[color:var(--terminal-bright)]">
        {props.value}
      </p>
    </div>
  );
}

function renderList(values: string[] | null | undefined) {
  return (values ?? []).length > 0 ? (values ?? []).join(", ") : "n/a";
}

export function StatementRowInspector(props: StatementRowInspectorProps) {
  const selection = props.selection;
  const parentSurfaceLabel =
    selection?.kind === "detail"
      ? (selection.parentSurfaceRow?.label ??
        (selection.row.parentSurfaceKey === "unmapped"
          ? "Unmapped / Residual"
          : selection.row.parentSurfaceKey))
      : null;

  return (
    <section className="border-t border-[color:var(--line-weak)] pt-4">
      <header className="mb-3">
        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
          Row Details
        </h3>
        <p className="text-xs text-[color:var(--terminal-muted)]">
          Inspect compact-surface resolution, raw drill-down rows, and
          dimensional evidence.
        </p>
      </header>

      {!selection ? (
        <p className="text-sm text-[color:var(--terminal-muted)]">
          Select a compact surface row or raw detail row to inspect details.
        </p>
      ) : selection.kind === "surface" ? (
        <div className="space-y-4 text-sm">
          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
            <InspectorField label="Label" value={selection.row.label} />
            <InspectorField label="Key" value={selection.row.key} />
            <InspectorField
              label="Resolution"
              value={selection.row.resolutionMethod ?? "direct"}
            />
            <InspectorField
              label="Confidence"
              value={selection.row.confidence ?? "high"}
            />
          </div>

          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
            <InspectorField
              label="Source Row Keys"
              value={renderList(selection.row.sourceRowKeys)}
            />
            <InspectorField
              label="Source Concepts"
              value={renderList(selection.row.sourceConcepts)}
            />
          </div>

          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
            <InspectorField
              label="Source Fact IDs"
              value={
                (selection.row.sourceFactIds ?? []).length > 0
                  ? (selection.row.sourceFactIds ?? []).join(", ")
                  : "n/a"
              }
            />
            <InspectorField
              label="Warning Codes"
              value={renderList(selection.row.warningCodes ?? [])}
            />
          </div>

          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
            <InspectorField
              label="Child Surface Rows"
              value={
                selection.childSurfaceRows.length > 0
                  ? selection.childSurfaceRows
                      .map((row) => row.label)
                      .join(", ")
                  : "None"
              }
            />
            <InspectorField
              label="Raw Detail Rows"
              value={String(selection.detailRows.length)}
            />
          </div>

          {selection.detailRows.length > 0 ? (
            <div className="border-t border-[color:var(--line-weak)] pt-3">
              <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
                Raw Detail Labels
              </p>
              <div className="mt-2 flex flex-wrap gap-2">
                {selection.detailRows.map((row) => (
                  <span
                    key={`${selection.row.key}-${row.key}`}
                    className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
                  >
                    {row.label}
                  </span>
                ))}
              </div>
            </div>
          ) : null}

          {selection.row.hasDimensions ? (
            props.dimensionRows.length === 0 ? (
              <p className="text-sm text-[color:var(--terminal-muted)]">
                No dimensional facts were returned for the selected compact row.
              </p>
            ) : (
              <div className="border-t border-[color:var(--line-weak)] pt-3">
                <div className="data-table-wrap">
                  <table className="data-table min-w-[760px]">
                    <thead>
                      <tr>
                        <th>Period</th>
                        <th>Axis</th>
                        <th>Member</th>
                        <th>Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      {props.dimensionRows.map((row, index) => (
                        <tr
                          key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}
                        >
                          <td>
                            {props.periods.find(
                              (period) => period.id === row.periodId,
                            )?.periodLabel ?? row.periodId}
                          </td>
                          <td>{row.axis}</td>
                          <td>{row.member}</td>
                          <td>
                            {props.renderDimensionValue(
                              row.value,
                              selection.row.key,
                              selection.row.unit,
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )
          ) : (
            <p className="text-sm text-[color:var(--terminal-muted)]">
              No dimensional drill-down is available for this compact surface
              row.
            </p>
          )}
        </div>
      ) : (
        <div className="space-y-4 text-sm">
          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
            <InspectorField label="Label" value={selection.row.label} />
            <InspectorField label="Key" value={selection.row.key} />
            <InspectorField
              label="Parent Surface"
              value={parentSurfaceLabel ?? selection.row.parentSurfaceKey}
            />
            <InspectorField
              label="Residual"
              value={selection.row.residualFlag ? "Yes" : "No"}
            />
          </div>

          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
            <InspectorField
              label="Concept Key"
              value={selection.row.conceptKey}
            />
            <InspectorField label="QName" value={selection.row.qname} />
          </div>

          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
            <InspectorField
              label="Local Name"
              value={selection.row.localName}
            />
            <InspectorField
              label="Source Fact IDs"
              value={
                (selection.row.sourceFactIds ?? []).length > 0
                  ? (selection.row.sourceFactIds ?? []).join(", ")
                  : "n/a"
              }
            />
          </div>

          <div className="border-t border-[color:var(--line-weak)] pt-3">
            <InspectorField
              label="Dimensions Summary"
              value={renderList(selection.row.dimensionsSummary)}
            />
          </div>

          {props.dimensionRows.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">
              No dimensional facts were returned for the selected raw detail
              row.
            </p>
          ) : (
            <div className="border-t border-[color:var(--line-weak)] pt-3">
              <div className="data-table-wrap">
                <table className="data-table min-w-[760px]">
                  <thead>
                    <tr>
                      <th>Period</th>
                      <th>Axis</th>
                      <th>Member</th>
                      <th>Value</th>
                    </tr>
                  </thead>
                  <tbody>
                    {props.dimensionRows.map((row, index) => (
                      <tr
                        key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}
                      >
                        <td>
                          {props.periods.find(
                            (period) => period.id === row.periodId,
                          )?.periodLabel ?? row.periodId}
                        </td>
                        <td>{row.axis}</td>
                        <td>{row.member}</td>
                        <td>
                          {props.renderDimensionValue(
                            row.value,
                            selection.row.key,
                            props.surfaceKind === "balance_sheet"
                              ? "currency"
                              : "currency",
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      )}
    </section>
  );
}