"use client";

import { useFormContext, useWatch } from "react-hook-form";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { formatMoney } from "./transaction-form-summary";

import type { ModuleTransactionFormValues } from "@/components/form/schemas/module-transaction-schema";


function SummaryRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-baseline justify-between gap-4 py-2">
      <span className="text-muted-foreground text-xs">{label}</span>
      <span
        className={cn(
          "text-right font-medium text-foreground text-sm",
          mono && "font-mono text-[0.8125rem] tracking-tight tabular-nums",
        )}
      >
        {value || "—"}
      </span>
    </div>
  );
}

export function TransactionFormSummarySidebar() {
  const { control } = useFormContext<ModuleTransactionFormValues>();
  const watched = useWatch({ control });

  const ticker = watched.ticker?.trim();
  const bank = watched.bank?.trim();
  const transaction = watched.transaction?.trim();
  const execution = watched.execution_type?.trim();
  const currency = watched.currency?.trim() || watched.p_currency?.trim() || "—";
  const assetLabel = [watched.a_class, watched.a_type].filter(Boolean).join(" · ");

  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">
        <div className="border-b border-border/50 bg-muted/25 px-5 py-4">
          <div className="flex items-center justify-between gap-2">
            <p className="font-medium text-muted-foreground text-[11px] uppercase tracking-wider">Live preview</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>
          <p className="mt-3 font-mono font-semibold text-2xl tracking-tight">{ticker || "—"}</p>
          <p className="mt-1.5 text-muted-foreground text-sm leading-snug">
            {assetLabel || "Instrument details pending"}
          </p>
          <div className="mt-3 flex flex-wrap gap-1.5">
            {transaction ? (
              <Badge variant="secondary" className="font-normal text-[11px]">
                {transaction}
              </Badge>
            ) : null}
            {execution ? (
              <Badge variant="outline" className="font-normal text-[11px]">
                {execution}
              </Badge>
            ) : null}
          </div>
        </div>

        <div className="px-5 py-4">
          <SummaryRow label="Bank" value={bank || "—"} />
          <SummaryRow label="Trade date" value={watched.t_date || "—"} mono />
          <SummaryRow label="Placement" value={watched.p_date || "—"} mono />
          <SummaryRow label="Reference" value={watched.r_no || "—"} mono />
        </div>

        <div className="border-t border-border/50 bg-gradient-to-br from-primary/5 via-transparent to-transparent px-5 py-5">
          <p className="text-muted-foreground text-xs uppercase tracking-wider">Notional</p>
          <p className="mt-2 font-mono font-semibold text-3xl tracking-tight tabular-nums">
            {formatMoney(watched.amount)}
          </p>
          <p className="mt-0.5 font-medium text-muted-foreground text-sm">{currency}</p>
          <div className="mt-5 grid grid-cols-2 gap-3">
            <div className="rounded-lg border border-border/50 bg-muted/20 px-3 py-2.5">
              <p className="text-muted-foreground text-[11px] uppercase tracking-wide">Quantity</p>
              <p className="mt-1 font-mono font-medium text-sm tabular-nums">{formatMoney(watched.quantity)}</p>
            </div>
            <div className="rounded-lg border border-border/50 bg-muted/20 px-3 py-2.5">
              <p className="text-muted-foreground text-[11px] uppercase tracking-wide">Price</p>
              <p className="mt-1 font-mono font-medium text-sm tabular-nums">{formatMoney(watched.price)}</p>
            </div>
          </div>
        </div>
      </div>
    </aside>
  );
}