import { ScrollText } from "lucide-react";

import { CustomerPageShell } from "@/app/customer/_components/customer-page-shell";
import { OrderBlotterScopeRefresh } from "@/app/customer/[tenant]/order-blotter/_components/order-blotter-scope-refresh";
import { OrderBlotterExportButton, OrderBlotterTable } from "@/app/dashboard/order-blotter/_components/order-blotter-table";
import { fetchCustomerOrderBlotter } from "@/lib/order-blotter/order-blotter-server-api";
import { ErrorBanner } from "@/components/shared/error-banner";
import { customerUrl } from "@/lib/tenant";

type PageProps = {
  params: Promise<{ tenant: string }>;
};

export default async function CustomerOrderBlotterPage({ params }: PageProps) {
  const { tenant } = await params;
  const { rows, errorMessage } = await fetchCustomerOrderBlotter(tenant);
  const basePath = customerUrl(tenant, "/order-blotter");

  return (
    <CustomerPageShell>
      <OrderBlotterScopeRefresh />
      <div className="flex flex-col gap-3 md:gap-4">
        <div className="flex flex-col gap-2 border-b pb-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-center gap-2">
            <ScrollText className="size-5 text-violet-600" />
            <h1 className="font-semibold text-base tracking-tight">Order blotter</h1>
          </div>
          <OrderBlotterExportButton data={rows} />
        </div>
        <ErrorBanner message={errorMessage} className="mb-2" />
        <OrderBlotterTable data={rows} basePath={basePath} />
      </div>
    </CustomerPageShell>
  );
}