"use client";

import type { StockFormOptions } from "@/app/customer/[tenant]/stock/_lib/stock-form-options";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { StockHoldingsPanel } from "./stock-holdings-panel";
import { TransactionAmountSummarySidebar } from "./transaction-form-summary";

type StockFormSidebarProps = {
  formOptions: StockFormOptions;
  excludeStockId?: string;
};

export function StockFormSidebar({ formOptions, excludeStockId }: StockFormSidebarProps) {
  return (
    <aside className="xl:sticky xl:top-6 xl:self-start">
      <div className="overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm">
        <Tabs defaultValue="preview" className="gap-0">
          <div className="border-b border-border/50 bg-muted/25 px-5 pt-4 pb-0">
            <div className="mb-3 flex items-center justify-between gap-2">
              <p className="font-medium text-muted-foreground text-[11px] uppercase tracking-wider">
                Trade summary
              </p>
              <span className="relative flex size-2">
                <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60" />
                <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
              </span>
            </div>
            <TabsList variant="line" className="h-auto w-full justify-start gap-4 bg-transparent p-0">
              <TabsTrigger value="preview" className="px-0 pb-3">
                Live preview
              </TabsTrigger>
              <TabsTrigger value="holdings" className="px-0 pb-3">
                Holdings
              </TabsTrigger>
            </TabsList>
          </div>
          <TabsContent value="preview" className="mt-0">
            <TransactionAmountSummarySidebar formOptions={formOptions} embedded />
          </TabsContent>
          <TabsContent value="holdings" className="mt-0">
            <StockHoldingsPanel excludeStockId={excludeStockId} />
          </TabsContent>
        </Tabs>
      </div>
    </aside>
  );
}