"use client";

import { History, X } from "lucide-react";

import { OrderBlotterHistoryTimeline } from "@/app/dashboard/order-blotter/_components/order-blotter-history-timeline";
import type { OrderBlotterHistory } from "@/app/dashboard/order-blotter/_components/history-types";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

type OrderBlotterHistorySheetProps = {
  id: number;
  history: OrderBlotterHistory | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function OrderBlotterHistorySheet({
  id,
  history,
  open,
  onOpenChange,
}: OrderBlotterHistorySheetProps) {
  const eventCount = history?.events.length ?? 0;

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        showCloseButton={false}
        className={cn(
          "flex h-dvh w-full flex-col gap-0 overflow-hidden bg-muted/30 p-0",
          "data-[side=right]:sm:max-w-2xl",
        )}
      >
        <div className="shrink-0 space-y-1 border-b border-border/60 bg-card px-4 pt-3 pb-3">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
            Order blotter
          </p>
          <div className="flex items-center justify-between gap-2">
            <SheetTitle className="flex min-w-0 items-center gap-2 text-left text-base font-semibold tracking-tight">
              <span className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-md shadow-primary/25">
                <History className="size-3.5" />
              </span>
              <span className="truncate">Change history #{id}</span>
              <span className="inline-flex shrink-0 items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium tabular-nums text-muted-foreground">
                {eventCount} event{eventCount === 1 ? "" : "s"}
              </span>
            </SheetTitle>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              className="rounded-lg"
              onClick={() => onOpenChange(false)}
              aria-label="Close change history"
            >
              <X className="size-4" />
            </Button>
          </div>
          {history?.orderNumber ? (
            <p className="text-muted-foreground text-xs">
              Order # <span className="font-medium text-foreground">{history.orderNumber}</span>
            </p>
          ) : null}
          <SheetDescription className="sr-only">
            Field-level change history for order blotter register {id}.
          </SheetDescription>
        </div>

        <ScrollArea className="min-h-0 flex-1">
          <div className="p-4">
            {history ? (
              <OrderBlotterHistoryTimeline history={history} />
            ) : (
              <div className="rounded-xl border border-dashed border-border/70 py-12 text-center text-muted-foreground text-sm">
                Change history is unavailable.
              </div>
            )}
          </div>
        </ScrollArea>
      </SheetContent>
    </Sheet>
  );
}