"use client"

import * as React from "react"
import { ClipboardList, FileSpreadsheet, RefreshCw, X } from "lucide-react"
import { useParams } from "next/navigation"

import { resolveCustomerTenant } from "@/app/customer/_lib/resolve-customer-tenant"
import { ReportLoadingPanel } from "@/app/customer/[tenant]/reports/_shared/components/report-loading-panel"
import { DatePicker } from "@/components/date-range-picker"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

import { formatAccounting, formatPlainAmount } from "@/lib/format/numbers";
import { usePibPivotReport } from "../_lib/use-pib-pivot-report"
import {
  PIB_PIVOT_ASSET_COLUMNS,
  PIB_PIVOT_LOAN_BUCKET,
  PIB_WORKBOOK_TABS,
  pivotAssetTotal,
  pivotInferredValue,
  pivotUnmappedCount,
  type PibPivotAssetBucketKey,
  type PibPivotBucketKey,
  type PibPivotRow,
  type PibWorkbookTabId,
} from "../_lib/pib-pivot-data"
import {
  PibPivotDetailDialog,
  type PibPivotDetailTarget,
} from "./pib-pivot-detail-dialog"

function formatMoney(value: number | null | undefined, empty = ""): string {
  return formatAccounting(value, empty)
}

function aumClass(value: number | null | undefined): string {
  if (value == null) return "text-muted-foreground/40"
  if (value < 0) return "text-red-600 dark:text-red-400"
  if (value === 0) return "text-muted-foreground/50"
  return "tabular-nums text-foreground"
}

function PivotHeaderCell({
  code,
  label,
  className,
}: {
  code?: string
  label: string
  className?: string
}) {
  return (
    <th
      title={code ? `${code} — ${label}` : label}
      style={{ top: 0, height: PIVOT_LABEL_HEADER_HEIGHT }}
      className={cn(
        "sticky border-b bg-muted px-2 py-0 align-bottom font-medium text-xs whitespace-nowrap text-foreground",
        className
      )}
    >
      <div className="flex h-full flex-col justify-end gap-0.5 pb-1">
        <span className="leading-tight">{label}</span>
        {code ? (
          <span className="font-normal font-mono text-[10px] leading-none text-muted-foreground">
            {code}
          </span>
        ) : (
          <span className="h-2.5" aria-hidden />
        )}
      </div>
    </th>
  )
}

const PIVOT_STICKY_COLS = [
  { key: "residency", label: "Residency", width: 110 },
  { key: "rm", label: "RM", width: 52 },
  { key: "acType", label: "Ac Type", width: 64 },
  { key: "jurisdiction", label: "Jurisdic", width: 72 },
  { key: "bank", label: "Bank", width: 128 },
  { key: "client", label: "Client", width: 160 },
] as const

type PivotDimKey = (typeof PIVOT_STICKY_COLS)[number]["key"]
type PivotColumnFilters = Record<PivotDimKey, string>

const EMPTY_PIVOT_COLUMN_FILTERS: PivotColumnFilters = {
  residency: "",
  rm: "",
  acType: "",
  jurisdiction: "",
  bank: "",
  client: "",
}

/** Must match rendered label-header row height (incl. B410 code line). */
const PIVOT_LABEL_HEADER_HEIGHT = 40
const PIVOT_FILTER_HEADER_TOP = PIVOT_LABEL_HEADER_HEIGHT

function pivotDimValues(row: PibPivotRow): readonly string[] {
  return [row.residency, row.rm, row.acType, row.jurisdiction, row.bank, row.client]
}

function shouldShowPivotDim(
  row: PibPivotRow,
  previous: PibPivotRow | undefined,
  dimIndex: number
): boolean {
  if (!previous) {
    return true
  }

  const dims = pivotDimValues(row)
  const prevDims = pivotDimValues(previous)
  for (let i = 0; i <= dimIndex; i++) {
    if (dims[i] !== prevDims[i]) {
      return true
    }
  }

  return false
}

function stickyLeft(index: number): number {
  return PIVOT_STICKY_COLS.slice(0, index).reduce((sum, col) => sum + col.width, 0)
}

function customerGroupKey(row: PibPivotRow): string {
  const id = row.customerId
  if (id != null && id > 0) {
    return `id:${id}`
  }
  const name = row.client.trim().toLowerCase()
  return name !== "" ? `name:${name}` : `row:${row.bank}|${row.rm}|${row.acType}`
}

/** Contiguous same-customer runs (rows are already sorted by client). */
function buildCustomerGroupMeta(rows: PibPivotRow[]) {
  const size = new Array<number>(rows.length).fill(1)
  const indexInGroup = new Array<number>(rows.length).fill(0)

  let i = 0
  while (i < rows.length) {
    const key = customerGroupKey(rows[i])
    let j = i + 1
    while (j < rows.length && customerGroupKey(rows[j]) === key) {
      j++
    }
    const groupSize = j - i
    for (let k = i; k < j; k++) {
      size[k] = groupSize
      indexInGroup[k] = k - i
    }
    i = j
  }

  return { size, indexInGroup }
}

function nAmount(value: number | null | undefined): number {
  return value == null || !Number.isFinite(value) ? 0 : value
}

function sumPivotColumnTotals(rows: PibPivotRow[]) {
  const assets = Object.fromEntries(
    PIB_PIVOT_ASSET_COLUMNS.map((c) => [c.key, 0])
  ) as Record<(typeof PIB_PIVOT_ASSET_COLUMNS)[number]["key"], number>

  let total = 0
  let loanLiability = 0
  let pickUp = 0

  for (const row of rows) {
    for (const col of PIB_PIVOT_ASSET_COLUMNS) {
      assets[col.key] += nAmount(row[col.key] as number | null)
    }
    total += pivotAssetTotal(row)
    loanLiability += nAmount(row.loanLiability)
    pickUp += nAmount(row.pickUpTotalFromSumm)
  }

  return { assets, total, loanLiability, pickUp }
}

function isDrillableAmount(value: number | null | undefined): value is number {
  return value != null && Number.isFinite(value) && value !== 0
}

function hasActivePivotColumnFilters(filters: PivotColumnFilters): boolean {
  return PIVOT_STICKY_COLS.some((col) => filters[col.key].trim() !== "")
}

function filterPivotRows(rows: PibPivotRow[], filters: PivotColumnFilters): PibPivotRow[] {
  if (!hasActivePivotColumnFilters(filters)) {
    return rows
  }

  return rows.filter((row) =>
    PIVOT_STICKY_COLS.every((col) => {
      const query = filters[col.key].trim().toLowerCase()
      if (!query) return true
      return String(row[col.key] ?? "")
        .toLowerCase()
        .includes(query)
    })
  )
}

function pivotHasMeta(rows: PibPivotRow[]): {
  pickUp: boolean
  error: boolean
  classification: boolean
  flags: boolean
} {
  let pickUp = false
  let error = false
  let classification = false
  let flags = false
  for (const row of rows) {
    if (row.pickUpTotalFromSumm != null && row.pickUpTotalFromSumm !== 0) pickUp = true
    if (row.error != null) error = true
    if (row.classification.trim() !== "") classification = true
    const f = row.flags
    if (f.aa || f.kc || f.dr || f.in || f.tm) flags = true
    if (pickUp && error && classification && flags) break
  }
  return { pickUp, error, classification, flags }
}

function PivotAmountCell({
  value,
  unmappedCount,
  inferredValue,
  canDrill,
  drillTitle,
  onDrill,
}: {
  value: number | null
  unmappedCount: number
  inferredValue: number
  canDrill: boolean
  drillTitle?: string
  onDrill?: () => void
}) {
  const hasUnmapped = unmappedCount > 0
  const cellTotal = value ?? 0
  const unmappedTitle = hasUnmapped
    ? unmappedCount === 1
      ? `1 holding inferred (${formatMoney(inferredValue)} of ${formatMoney(cellTotal)})`
      : `${unmappedCount} holdings inferred (${formatMoney(inferredValue)} of ${formatMoney(cellTotal)})`
    : undefined

  return (
    <div className="flex items-center justify-end gap-1">
      {hasUnmapped ? (
        <span
          className="size-1.5 shrink-0 rounded-full bg-amber-500 ring-2 ring-amber-500/25"
          title={unmappedTitle}
          aria-label={unmappedTitle}
        />
      ) : null}
      {canDrill && onDrill ? (
        <button
          type="button"
          className={cn(
            "text-right underline-offset-2 hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            hasUnmapped && "font-medium text-amber-900 dark:text-amber-200"
          )}
          title={drillTitle ?? unmappedTitle}
          onClick={onDrill}
        >
          {formatMoney(value)}
        </button>
      ) : (
        <span
          className={cn(hasUnmapped && "font-medium text-amber-900 dark:text-amber-200")}
          title={unmappedTitle}
        >
          {formatMoney(value)}
        </span>
      )}
    </div>
  )
}

function PivotSheet({
  rows,
  onCellClick,
  onFilterStatsChange,
}: {
  rows: PibPivotRow[]
  onCellClick?: (target: PibPivotDetailTarget) => void
  onFilterStatsChange?: (stats: { visible: number; total: number; active: boolean }) => void
}) {
  const [columnFilters, setColumnFilters] = React.useState<PivotColumnFilters>(EMPTY_PIVOT_COLUMN_FILTERS)
  const visibleRows = React.useMemo(
    () => filterPivotRows(rows, columnFilters),
    [rows, columnFilters]
  )
  const columnTotals = React.useMemo(() => sumPivotColumnTotals(visibleRows), [visibleRows])
  const customerGroups = React.useMemo(
    () => buildCustomerGroupMeta(visibleRows),
    [visibleRows]
  )
  const filtersActive = hasActivePivotColumnFilters(columnFilters)
  const meta = pivotHasMeta(rows)

  React.useEffect(() => {
    onFilterStatsChange?.({
      visible: visibleRows.length,
      total: rows.length,
      active: filtersActive,
    })
  }, [visibleRows.length, rows.length, filtersActive, onFilterStatsChange])

  const setCol = (key: PivotDimKey, value: string) => {
    setColumnFilters((prev) => ({ ...prev, [key]: value }))
  }

  const clearFilters = () => setColumnFilters(EMPTY_PIVOT_COLUMN_FILTERS)

  const openDetail = (
    row: PibPivotRow,
    bucket: PibPivotBucketKey,
    bucketLabel: string,
    cellValue: number
  ) => {
    const customerId = row.customerId ?? 0
    if (!onCellClick || customerId <= 0 || row.bank.trim() === "") {
      return
    }
    onCellClick({
      bucket,
      bucketLabel,
      customerId,
      bank: row.bank,
      client: row.client,
      cellValue,
    })
  }

  const cellPad = "px-2 py-1.5"
  const trailingBlankCount =
    PIB_PIVOT_ASSET_COLUMNS.length +
    2 +
    (meta.pickUp ? 1 : 0) +
    (meta.error ? 1 : 0) +
    (meta.classification ? 1 : 0) +
    (meta.flags ? 5 : 0)

  return (
    <div className="min-h-0 flex-1 overflow-auto">
      <table className="w-max min-w-full caption-bottom border-collapse text-sm leading-snug">
        <thead>
          <tr>
            {PIVOT_STICKY_COLS.map((col, i) => {
              const isLast = i === PIVOT_STICKY_COLS.length - 1
              return (
                <th
                  key={col.key}
                  style={{
                    left: stickyLeft(i),
                    width: col.width,
                    minWidth: col.width,
                    maxWidth: col.width,
                    top: 0,
                    height: PIVOT_LABEL_HEADER_HEIGHT,
                  }}
                  className={cn(
                    "sticky z-40 border-b bg-muted px-2 py-0 text-left align-bottom font-medium text-xs whitespace-nowrap",
                    isLast && "border-r shadow-[2px_0_4px_-2px_rgba(0,0,0,0.15)]"
                  )}
                >
                  <div className="flex h-full flex-col justify-end pb-1">
                    <span className="leading-tight">{col.label}</span>
                    <span className="h-2.5" aria-hidden />
                  </div>
                </th>
              )
            })}
            {PIB_PIVOT_ASSET_COLUMNS.map((c) => (
              <PivotHeaderCell
                key={`${c.code}-${c.shortLabel}`}
                code={c.code}
                label={c.compactLabel}
                className="sticky z-30 text-right"
              />
            ))}
            <PivotHeaderCell label="TOTAL" className="sticky z-30 text-right font-semibold" />
            <PivotHeaderCell label="Loan / Liability" className="sticky z-30 text-right" />
            {meta.pickUp ? (
              <PivotHeaderCell label="Pick up" className="sticky z-30 min-w-[5.5rem] text-right" />
            ) : null}
            {meta.error ? (
              <PivotHeaderCell label="Error" className="sticky z-30 text-right" />
            ) : null}
            {meta.classification ? (
              <PivotHeaderCell label="Classification" className="sticky z-30" />
            ) : null}
            {meta.flags
              ? (["AA", "KC", "DR", "IN", "TM"] as const).map((flag) => (
                  <th
                    key={flag}
                    style={{ top: 0, height: PIVOT_LABEL_HEADER_HEIGHT }}
                    className="sticky z-30 w-8 border-b bg-muted px-1 py-0 text-center align-bottom font-medium text-[10px] whitespace-nowrap"
                  >
                    <div className="flex h-full flex-col justify-end pb-1">
                      <span className="leading-tight">{flag}</span>
                      <span className="h-2.5" aria-hidden />
                    </div>
                  </th>
                ))
              : null}
          </tr>
          <tr className="bg-muted/40">
            {PIVOT_STICKY_COLS.map((col, i) => {
              const isLast = i === PIVOT_STICKY_COLS.length - 1
              return (
                <th
                  key={`filter-${col.key}`}
                  style={{
                    left: stickyLeft(i),
                    width: col.width,
                    minWidth: col.width,
                    maxWidth: col.width,
                    top: PIVOT_FILTER_HEADER_TOP,
                  }}
                  className={cn(
                    "sticky z-40 border-b bg-muted/95 p-0.5 align-middle font-normal backdrop-blur-sm",
                    isLast && "border-r shadow-[2px_0_4px_-2px_rgba(0,0,0,0.15)]"
                  )}
                >
                  <Input
                    value={columnFilters[col.key]}
                    onChange={(e) => setCol(col.key, e.target.value)}
                    placeholder="Filter…"
                    aria-label={`Filter ${col.label}`}
                    className="h-7 min-w-0 rounded-md border-border/70 bg-background px-1.5 text-xs font-normal shadow-none placeholder:font-normal placeholder:text-muted-foreground/60"
                  />
                </th>
              )
            })}
            <th
              colSpan={trailingBlankCount}
              style={{ top: PIVOT_FILTER_HEADER_TOP }}
              className="sticky z-30 border-b bg-muted/95 px-2 py-0.5 text-left align-middle font-normal backdrop-blur-sm"
            >
              {filtersActive ? (
                <button
                  type="button"
                  onClick={clearFilters}
                  className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
                >
                  <X className="size-3.5" />
                  Clear filters ({visibleRows.length}/{rows.length})
                </button>
              ) : (
                <span className="text-xs text-muted-foreground">Filter by column</span>
              )}
            </th>
          </tr>
        </thead>
        <tbody>
          {visibleRows.length === 0 ? (
            <tr>
              <td
                colSpan={PIVOT_STICKY_COLS.length + trailingBlankCount}
                className="px-4 py-8 text-center text-muted-foreground text-xs"
              >
                {filtersActive ? "No pivot rows match these column filters." : "No pivot data."}
              </td>
            </tr>
          ) : (
            visibleRows.map((row, rowIndex) => {
              const total = pivotAssetTotal(row)
              const previous = rowIndex > 0 ? visibleRows[rowIndex - 1] : undefined
              const dimValues = pivotDimValues(row)
              // When filtering, keep non-client dims visible — blanking is confusing on a subset.
              const alwaysShowDims = filtersActive
              const groupSize = customerGroups.size[rowIndex] ?? 1
              const groupIndex = customerGroups.indexInGroup[rowIndex] ?? 0
              const isMultiCustomer = groupSize >= 2
              const isGroupStart = isMultiCustomer && groupIndex === 0
              const isGroupCont = isMultiCustomer && groupIndex > 0

              return (
                <tr
                  key={`${row.customerId ?? "x"}-${row.bank}-${row.client}-${row.rm}-${rowIndex}`}
                  className={cn(
                    "border-b border-border/50 last:border-0",
                    isGroupStart && "border-t border-t-border/80",
                    isMultiCustomer && "bg-muted/[0.18]"
                  )}
                >
                  {PIVOT_STICKY_COLS.map((col, i) => {
                    const isLast = i === PIVOT_STICKY_COLS.length - 1
                    const isClient = col.key === "client"
                    // Always show client name — blanking it on multi-bank rows looks like missing data.
                    const showDim = isClient
                      ? true
                      : alwaysShowDims || shouldShowPivotDim(row, previous, i)
                    const text = showDim ? dimValues[i] : ""
                    return (
                      <td
                        key={col.key}
                        style={{
                          left: stickyLeft(i),
                          width: col.width,
                          minWidth: col.width,
                          maxWidth: col.width,
                        }}
                        title={
                          isClient && isGroupCont
                            ? row.client || undefined
                            : text || undefined
                        }
                        className={cn(
                          "sticky z-20 overflow-hidden text-ellipsis px-2 py-1.5 text-xs whitespace-nowrap",
                          isMultiCustomer ? "bg-muted/30" : "bg-card",
                          isClient && isMultiCustomer && "border-l-2 border-l-emerald-600/50",
                          col.key === "bank" && showDim && "font-medium",
                          isClient &&
                            row.clientHighlight &&
                            showDim &&
                            "bg-amber-100 font-medium dark:bg-amber-950",
                          isClient && showDim && "font-medium",
                          isLast && "border-r shadow-[2px_0_4px_-2px_rgba(0,0,0,0.12)]"
                        )}
                      >
                        {text}
                      </td>
                    )
                  })}
                  {PIB_PIVOT_ASSET_COLUMNS.map((c) => {
                    const v = row[c.key] as number | null
                    const unmappedCount = pivotUnmappedCount(row, c.key as PibPivotAssetBucketKey)
                    const inferredValue = pivotInferredValue(row, c.key as PibPivotAssetBucketKey)
                    const canDrill =
                      onCellClick &&
                      (row.customerId ?? 0) > 0 &&
                      isDrillableAmount(v)
                    return (
                      <td
                        key={`${c.code}-${c.shortLabel}`}
                        className={cn(
                          cellPad,
                          "text-right whitespace-nowrap",
                          aumClass(v),
                          unmappedCount > 0 && "bg-amber-50/70 dark:bg-amber-950/20"
                        )}
                      >
                        <PivotAmountCell
                          value={v}
                          unmappedCount={unmappedCount}
                          inferredValue={inferredValue}
                          canDrill={Boolean(canDrill)}
                          drillTitle={`View ${c.shortLabel} holdings`}
                          onDrill={
                            canDrill
                              ? () => openDetail(row, c.key, c.shortLabel, v)
                              : undefined
                          }
                        />
                      </td>
                    )
                  })}
                  <td className={cn(cellPad, "text-right font-semibold tabular-nums whitespace-nowrap")}>
                    {formatMoney(total)}
                  </td>
                  <td className={cn(cellPad, "text-right whitespace-nowrap", aumClass(row.loanLiability))}>
                    {onCellClick &&
                    (row.customerId ?? 0) > 0 &&
                    isDrillableAmount(row.loanLiability) ? (
                      <button
                        type="button"
                        className="w-full text-right underline-offset-2 hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        title="View loan / liability holdings"
                        onClick={() =>
                          openDetail(
                            row,
                            PIB_PIVOT_LOAN_BUCKET,
                            "Loan / Liability",
                            row.loanLiability as number
                          )
                        }
                      >
                        {formatMoney(row.loanLiability)}
                      </button>
                    ) : (
                      formatMoney(row.loanLiability)
                    )}
                  </td>
                  {meta.pickUp ? (
                    <td className={cn(cellPad, "text-right tabular-nums whitespace-nowrap")}>
                      {formatMoney(row.pickUpTotalFromSumm)}
                    </td>
                  ) : null}
                  {meta.error ? (
                    <td
                      className={cn(
                        cellPad,
                        "text-right tabular-nums text-muted-foreground whitespace-nowrap"
                      )}
                    >
                      {row.error == null ? "" : String(row.error)}
                    </td>
                  ) : null}
                  {meta.classification ? (
                    <td
                      className={cn(cellPad, "max-w-[7rem] truncate whitespace-nowrap")}
                      title={row.classification || undefined}
                    >
                      {row.classification}
                    </td>
                  ) : null}
                  {meta.flags ? (
                    <>
                      <td className="px-0.5 py-0.5 text-center text-[10px] text-muted-foreground">
                        {row.flags.aa}
                      </td>
                      <td className="px-0.5 py-0.5 text-center text-[10px] text-muted-foreground">
                        {row.flags.kc}
                      </td>
                      <td className="px-0.5 py-0.5 text-center text-[10px] text-muted-foreground">
                        {row.flags.dr}
                      </td>
                      <td className="px-0.5 py-0.5 text-center text-[10px] text-muted-foreground">
                        {row.flags.in}
                      </td>
                      <td className="px-0.5 py-0.5 text-center text-[10px] text-muted-foreground">
                        {row.flags.tm}
                      </td>
                    </>
                  ) : null}
                </tr>
              )
            })
          )}
        </tbody>
        {visibleRows.length > 0 ? (
          <tfoot>
            <tr className="border-t-2 border-border">
              {PIVOT_STICKY_COLS.map((col, i) => {
                const isLast = i === PIVOT_STICKY_COLS.length - 1
                const isFirst = i === 0
                return (
                  <td
                    key={`total-${col.key}`}
                    style={{
                      left: stickyLeft(i),
                      width: col.width,
                      minWidth: col.width,
                      maxWidth: col.width,
                      bottom: 0,
                    }}
                    className={cn(
                      "sticky z-30 bg-muted px-2 py-1.5 text-xs font-semibold whitespace-nowrap",
                      isLast && "border-r shadow-[2px_0_4px_-2px_rgba(0,0,0,0.12)]"
                    )}
                  >
                    {isFirst ? "Total" : ""}
                  </td>
                )
              })}
              {PIB_PIVOT_ASSET_COLUMNS.map((c) => {
                const v = columnTotals.assets[c.key]
                return (
                  <td
                    key={`total-${c.key}`}
                    className={cn(
                      cellPad,
                      "sticky bottom-0 z-20 bg-muted text-right font-semibold tabular-nums whitespace-nowrap",
                      aumClass(v)
                    )}
                  >
                    {formatMoney(v)}
                  </td>
                )
              })}
              <td
                className={cn(
                  cellPad,
                  "sticky bottom-0 z-20 bg-muted text-right font-semibold tabular-nums whitespace-nowrap"
                )}
              >
                {formatMoney(columnTotals.total)}
              </td>
              <td
                className={cn(
                  cellPad,
                  "sticky bottom-0 z-20 bg-muted text-right font-semibold tabular-nums whitespace-nowrap",
                  aumClass(columnTotals.loanLiability)
                )}
              >
                {formatMoney(columnTotals.loanLiability)}
              </td>
              {meta.pickUp ? (
                <td
                  className={cn(
                    cellPad,
                    "sticky bottom-0 z-20 bg-muted text-right font-semibold tabular-nums whitespace-nowrap"
                  )}
                >
                  {formatMoney(columnTotals.pickUp)}
                </td>
              ) : null}
              {meta.error ? (
                <td className="sticky bottom-0 z-20 bg-muted px-2 py-1.5" />
              ) : null}
              {meta.classification ? (
                <td className="sticky bottom-0 z-20 bg-muted px-2 py-1.5" />
              ) : null}
              {meta.flags
                ? (["aa", "kc", "dr", "in", "tm"] as const).map((flag) => (
                    <td key={`total-flag-${flag}`} className="sticky bottom-0 z-20 bg-muted px-0.5 py-0.5" />
                  ))
                : null}
            </tr>
          </tfoot>
        ) : null}
      </table>
    </div>
  )
}

function PlaceholderSheet({ label }: { label: string }) {
  return (
    <div className="flex min-h-[20rem] flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
      <FileSpreadsheet className="size-10 text-muted-foreground/40" />
      <p className="font-medium text-sm">{label}</p>
      <p className="max-w-sm text-muted-foreground text-xs">
        Empty for now — only the Pivot sheet is live.
      </p>
    </div>
  )
}

function WorkbookTabs({
  active,
  onChange,
}: {
  active: PibWorkbookTabId
  onChange: (id: PibWorkbookTabId) => void
}) {
  const readyTabs = PIB_WORKBOOK_TABS.filter((tab) => tab.ready)
  // Only Pivot is live — skip the sheet strip until more tabs ship.
  if (readyTabs.length <= 1) {
    return null
  }

  return (
    <div className="shrink-0 border-t bg-muted/30">
      <div
        className="flex items-end gap-0.5 overflow-x-auto px-2 pt-1.5 pb-0"
        role="tablist"
        aria-label="Workbook sheets"
      >
        {readyTabs.map((tab) => {
          const isActive = tab.id === active
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={isActive}
              onClick={() => onChange(tab.id)}
              className={cn(
                "relative -mb-px shrink-0 truncate rounded-t-md border px-3 py-1.5 text-left text-xs transition-colors",
                isActive
                  ? "z-10 border-b-background border-border bg-background font-medium text-foreground shadow-sm"
                  : "border-transparent text-muted-foreground hover:bg-muted/80 hover:text-foreground"
              )}
              title={tab.label}
            >
              {tab.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

export function PibReportView() {
  const params = useParams<{ tenant?: string }>()
  const tenant =
    typeof params?.tenant === "string" && params.tenant.trim()
      ? params.tenant.trim()
      : resolveCustomerTenant()
  const [refreshKey, setRefreshKey] = React.useState(0)
  const [asOfDate, setAsOfDate] = React.useState("")
  const reportQueryString = React.useMemo(() => {
    if (!asOfDate.trim()) return ""
    const qs = new URLSearchParams()
    qs.set("as_of_date", asOfDate.trim())
    return qs.toString()
  }, [asOfDate])
  const { report, isLoading, errorMessage } = usePibPivotReport(tenant, reportQueryString, refreshKey)
  const [activeTab, setActiveTab] = React.useState<PibWorkbookTabId>("pivot")
  const [detailTarget, setDetailTarget] = React.useState<PibPivotDetailTarget | null>(null)
  const [filterStats, setFilterStats] = React.useState({
    visible: 0,
    total: 0,
    active: false,
  })
  const onFilterStatsChange = React.useCallback(
    (stats: { visible: number; total: number; active: boolean }) => {
      setFilterStats(stats)
    },
    []
  )
  const activeMeta = PIB_WORKBOOK_TABS.find((t) => t.id === activeTab)

  const title = report?.title ?? "PIB Advisory — Pivot"
  const periodLabel = report?.periodLabel ?? "Loading…"
  const currencyNote = report?.currencyNote ?? ""
  const dataSource = report?.dataSource ?? "live"
  const totalAssetsAdvisedUsd = report?.totalAssetsAdvisedUsd ?? 0
  const assignedAssetsUsd = report?.assignedAssetsUsd ?? 0
  const inferredAssetsUsd = report?.inferredAssetsUsd ?? 0
  const loanLiabilityUsd = report?.loanLiabilityUsd ?? 0
  const reportingCurrency = report?.defaultCurrencyCode ?? "USD"
  const pivotRows = report?.pivotRows ?? []
  const noSnapshot = dataSource === "missing"
  const rowCountLabel = noSnapshot
    ? "No snapshot"
    : filterStats.active
      ? `${formatPlainAmount(filterStats.visible)} of ${formatPlainAmount(filterStats.total)} pivot rows`
      : `${formatPlainAmount(pivotRows.length)} pivot row${pivotRows.length === 1 ? "" : "s"}`
  const sourceBadge =
    isLoading ? "Loading" : dataSource === "backup" ? "Snapshot" : dataSource === "missing" ? "No snapshot" : "Live"

  return (
    <div className="flex h-[calc(100dvh-8rem)] min-w-0 w-full flex-col gap-3 overflow-hidden">
      <header className="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <ClipboardList className="size-5 text-emerald-700 dark:text-emerald-400" />
            <h1 className="font-semibold text-xl tracking-tight">{title}</h1>
            <Badge variant="secondary">{sourceBadge}</Badge>
          </div>
          <p className="text-muted-foreground text-sm">
            {periodLabel}
            {currencyNote ? ` · ${currencyNote}` : ""}
          </p>
          {errorMessage ? <p className="text-destructive text-sm">{errorMessage}</p> : null}
        </div>
        <div className="flex shrink-0 flex-wrap items-center gap-2">
          <div className="flex items-center gap-1.5">
            <DatePicker
              value={asOfDate}
              placeholder="As of date (live)"
              align="end"
              className="h-9 w-[10.5rem]"
              onChange={(value) => setAsOfDate(value)}
            />
            {asOfDate ? (
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-9 shrink-0"
                aria-label="Clear as-of date (use live data)"
                onClick={() => setAsOfDate("")}
              >
                <X className="size-4" />
              </Button>
            ) : null}
          </div>
          <Button
            type="button"
            variant="outline"
            size="icon"
            className="size-9 shrink-0"
            aria-label="Refresh report"
            onClick={() => setRefreshKey((key) => key + 1)}
          >
            <RefreshCw className={cn("size-4", isLoading && "animate-spin")} />
          </Button>
        </div>
      </header>

      <div className="overflow-hidden rounded-xl border border-border/80 bg-card shadow-sm">
        <div className="flex items-center gap-x-5 gap-y-1 overflow-x-auto px-4 py-2.5 sm:px-5">
          <span className="shrink-0 font-semibold text-[11px] text-emerald-700 uppercase tracking-wider dark:text-emerald-400">
            B410_7001T — Total assets advised
          </span>
          <ul className="flex min-w-max items-center gap-x-5 gap-y-1 text-sm tabular-nums">
            <li className="shrink-0 whitespace-nowrap" title="Portfolio-wide (all clients in scope)">
              <span className="font-bold text-foreground">{reportingCurrency}</span>
              <span className="text-muted-foreground"> </span>
              <span className="font-semibold text-emerald-700 dark:text-emerald-400">
                {formatMoney(totalAssetsAdvisedUsd)}
              </span>
            </li>
            <li className="shrink-0 whitespace-nowrap" title="Holdings with assigned PIB class · portfolio-wide">
              <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
                Assigned
              </span>
              <span className="ml-1.5 font-semibold text-foreground">
                {formatMoney(assignedAssetsUsd)}
              </span>
            </li>
            <li
              className="shrink-0 whitespace-nowrap"
              title="Holdings bucketed from AC rules only · portfolio-wide"
            >
              <span className="inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider text-amber-700 dark:text-amber-400">
                <span className="inline-block size-1.5 rounded-full bg-amber-500" aria-hidden />
                Inferred
              </span>
              <span className="ml-1.5 font-semibold text-amber-800 dark:text-amber-300">
                {formatMoney(inferredAssetsUsd)}
              </span>
            </li>
            <li
              className="shrink-0 whitespace-nowrap"
              title="Loan / liability (excluded from total assets advised) · portfolio-wide"
            >
              <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
                Loan / liability
              </span>
              <span
                className={cn(
                  "ml-1.5 font-semibold",
                  loanLiabilityUsd < 0
                    ? "text-red-600 dark:text-red-400"
                    : "text-foreground"
                )}
              >
                {formatMoney(loanLiabilityUsd)}
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-background shadow-sm">
        <div className="flex shrink-0 items-center justify-between gap-2 border-b bg-muted/30 px-3 py-1.5">
          <div className="flex items-center gap-2 text-xs">
            <FileSpreadsheet className="size-3.5 text-emerald-700 dark:text-emerald-400" />
            <span className="font-medium">{activeMeta?.label ?? activeTab}</span>
          </div>
          <span className="flex flex-wrap items-center justify-end gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground">
            <span>
              {rowCountLabel}
              {activeTab === "pivot" ? " · click an amount to view holdings" : ""}
            </span>
            {activeTab === "pivot" ? (
              <>
                <span className="inline-flex items-center gap-1" title="Holding has no ISIN PIB assignment — bucket inferred from AC">
                  <span className="inline-block size-1.5 rounded-full bg-amber-500" aria-hidden />
                  inferred PIB
                </span>
                <span
                  className="inline-flex items-center gap-1"
                  title="Negative market value (accounting style)"
                >
                  <span className="font-medium tabular-nums text-red-600 dark:text-red-400" aria-hidden>
                    (0.00)
                  </span>
                  negative value
                </span>
              </>
            ) : null}
          </span>
        </div>

        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
          {activeTab === "pivot" ? (
            <ReportLoadingPanel
              loading={isLoading}
              label="Loading PIB pivot…"
              minHeightClassName="min-h-0"
              className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", isLoading && "pointer-events-none")}
            >
              {pivotRows.length === 0 && !isLoading ? (
                <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
                  <FileSpreadsheet className="size-10 text-muted-foreground/40" />
                  <p className="font-medium text-sm">
                    {noSnapshot ? "No snapshot for this date" : "No pivot data"}
                  </p>
                  <p className="max-w-sm text-muted-foreground text-xs">
                    {noSnapshot ? (
                      <>
                        There is no Overall Summary backup for{" "}
                        <span className="font-medium text-foreground">{asOfDate}</span>. Clear the
                        date to view live holdings, or pick another snapshot day.
                      </>
                    ) : (
                      <>
                        Assign PIB classes in ISIN Asset Master and ensure overall summary rows are
                        stamped with <code className="font-mono">pib_class</code>.
                      </>
                    )}
                  </p>
                </div>
              ) : (
                <PivotSheet
                  rows={pivotRows}
                  onCellClick={setDetailTarget}
                  onFilterStatsChange={onFilterStatsChange}
                />
              )}
            </ReportLoadingPanel>
          ) : (
            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
              <PlaceholderSheet label={activeMeta?.label ?? activeTab} />
            </div>
          )}
        </div>

        <PibPivotDetailDialog
          target={detailTarget}
          asOfDate={asOfDate}
          open={detailTarget != null}
          onOpenChange={(open) => {
            if (!open) setDetailTarget(null)
          }}
        />

        <WorkbookTabs active={activeTab} onChange={setActiveTab} />
      </div>
    </div>
  )
}