npx shadcn@latest add @jengacore/settlement-overview

"use client"

import * as React from "react"
import { FileText } from "lucide-react"

import { Button } from "@/components/ui/button"
import { PageHeader } from "@/components/jc/app-shell"
import { ConfirmDialog } from "@/components/jc/confirm-dialog"
import { SettlementPosition } from "@/components/jc/settlement-position"
import { SettlementWindow } from "@/components/jc/settlement-window"
import { formatAmount } from "@/lib/jengacore/format"

export type Position = { participant: string; fspId: string; currency: string; position: string; netDebitCap: string }

const SAMPLE: Position[] = [
  { participant: "Horn Commercial Bank", fspId: "horncb", currency: "USD", position: "215000", netDebitCap: "250000" },
  { participant: "Horn Commercial Bank", fspId: "horncb", currency: "SLSH", position: "-1200000", netDebitCap: "90000000" },
  { participant: "Sahan Mobile Money", fspId: "sahanmm", currency: "USD", position: "42500.50", netDebitCap: "150000" },
  { participant: "Equity Bank", fspId: "equity", currency: "USD", position: "148900", netDebitCap: "150000" },
]

/** Finance Portal home: the open settlement window and one position card per participant and currency. */
export function SettlementOverview({ positions = SAMPLE }: { positions?: Position[] }) {
  const [closing, setClosing] = React.useState(false)
  return (
    <div className="flex flex-col gap-6">
      <PageHeader
        eyebrow="Settlement · window 1042"
        title="Positions and net debit caps"
        actions={
          <>
            <Button variant="outline">
              <FileText />
              Export report
            </Button>
            <Button onClick={() => setClosing(true)}>Close window</Button>
          </>
        }
      />
      <SettlementWindow windowId="sw_1042" stage="open" times={{ open: "05 Oct 00:00" }} />
      <div className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4">
        {positions.map((p) => (
          <SettlementPosition key={p.fspId + p.currency} {...p} />
        ))}
      </div>
      <ConfirmDialog
        open={closing}
        onOpenChange={setClosing}
        title="Close settlement window 1042?"
        description="Transfers after closing go to window 1043. Settlement files are generated from the closed window."
        details={[
          { label: "Window", value: "sw_1042" },
          { label: "Opened", value: "05 Oct 2026 00:00" },
          { label: "Net USD", value: `${formatAmount("406400.50", "USD")} USD` },
        ]}
        confirmLabel="Close window"
        onConfirm={() => new Promise((r) => setTimeout(r, 600))}
      />
    </div>
  )
}