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

'use client';

import { Panel } from '@/components/ui/panel';
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 InspectorCard(props: {
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
      <p className="text-[color:var(--terminal-muted)]">{props.label}</p>
      <p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
    </div>
  );
}

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

export function StatementRowInspector(props: StatementRowInspectorProps) {
  const selection = props.selection;

  return (
    <Panel
      title="Row Details"
      subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
      variant="surface"
    >
      {!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-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
            <InspectorCard label="Label" value={selection.row.label} />
            <InspectorCard label="Key" value={selection.row.key} />
            <InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
            <InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
          </div>

          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
            <InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
            <InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
          </div>

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

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

          {selection.detailRows.length > 0 ? (
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
              <p className="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-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 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="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>
            )
          ) : (
            <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-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
            <InspectorCard label="Label" value={selection.row.label} />
            <InspectorCard label="Key" value={selection.row.key} />
            <InspectorCard label="Parent Surface" value={selection.parentSurfaceRow?.label ?? selection.row.parentSurfaceKey} />
            <InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
          </div>

          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
            <InspectorCard label="Concept Key" value={selection.row.conceptKey} />
            <InspectorCard label="QName" value={selection.row.qname} />
          </div>

          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
            <InspectorCard label="Local Name" value={selection.row.localName} />
            <InspectorCard label="Source Fact IDs" value={selection.row.sourceFactIds.length > 0 ? selection.row.sourceFactIds.join(', ') : 'n/a'} />
          </div>

          <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
            <p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
            <p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
          </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="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>
      )}
    </Panel>
  );
}