"use client";

import { useChanged } from "@/hooks/use-changed";
import { isApiSuccess } from "@/lib/api-messages";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { Loader2 } from "lucide-react";
import { HTTP_TIMEOUT_MS } from "@/config/timeouts";
import { requestDashboardApi } from "@/lib/dashboard-api-client";
import { DataTableHeaderActions, downloadCsv } from "@/app/dashboard/_components/data-table";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { buildUniqueIsinHref, type UniqueIsinRouteState } from "./constants";
import type { UniqueIsinLiveCorporate, UniqueIsinRow } from "./schema";
import { toastApiError } from "@/lib/toast-api-error";

const ACCUMULATOR_LIVE_HREF = "/dashboard/master-table/unique-isin/accumulator-live";
const STRUCTURE_LIVE_HREF = "/dashboard/master-table/unique-isin/structure-live";
const TRANSACTION_LIVE_HREF = "/dashboard/master-table/unique-isin/transaction-live";

function exportUniqueIsinCsv(rows: UniqueIsinRow[]) {
  downloadCsv({
    filename: "unique-isin",
    headers: ["ISIN"],
    rows,
    toRow: (row) => [row.isin],
  });
}

type UniqueIsinHeaderActionsProps = {
  data: UniqueIsinRow[];
  corporates: UniqueIsinLiveCorporate[];
  selectedCorporateId: string;
  routeState: UniqueIsinRouteState;
};

export function UniqueIsinHeaderActions({
  data,
  corporates,
  selectedCorporateId,
  routeState,
}: UniqueIsinHeaderActionsProps) {
  const [corporateId, setCorporateId] = useState(selectedCorporateId);
  const [isAccumulatorPending, startAccumulatorTransition] = useTransition();
  const [isStructurePending, startStructureTransition] = useTransition();
  const [isTransactionPending, startTransactionTransition] = useTransition();
  const router = useRouter();

  const isBusy = isAccumulatorPending || isStructurePending || isTransactionPending;

  if (useChanged(selectedCorporateId)) setCorporateId(selectedCorporateId);

  const handleCorporateChange = (nextCorporateId: string) => {
    setCorporateId(nextCorporateId);
    router.replace(
      buildUniqueIsinHref({
        ...routeState,
        corporateId: nextCorporateId,
      }),
      { scroll: false },
    );
  };

  const runLiveUpdate = (
    start: typeof startAccumulatorTransition,
    href: string,
    fallbackError: string,
    successFallback: string,
  ) => {
    if (!corporateId) {
      toast.error("Please select a corporate.");
      return;
    }

    start(async () => {
      try {
        const result = await requestDashboardApi<{ status?: string; message?: string }>({
          url: href,
          method: "POST",
          body: { corporate_id: corporateId },
          timeoutMs: HTTP_TIMEOUT_MS.widget,
          fallbackError,
          validate: (payload) => isApiSuccess(payload),
        });
        toast.success(result.message ?? successFallback);
        router.refresh();
      } catch (error) {
        toastApiError(error, fallbackError);
      }
    });
  };

  return (
    <DataTableHeaderActions
      exportLabel="Export CSV"
      onExport={() => exportUniqueIsinCsv(data)}
      prefixActions={
        <>
          <Select
            value={corporateId || undefined}
            onValueChange={handleCorporateChange}
            disabled={isBusy || corporates.length === 0}
          >
            <SelectTrigger
              id="live-corporate-id"
              size="sm"
              className="h-8 w-[240px]"
              aria-label="Select corporate"
            >
              <SelectValue placeholder="Select Corporate" />
            </SelectTrigger>
            <SelectContent>
              {corporates.map((corporate) => (
                <SelectItem key={corporate.id} value={corporate.id}>
                  {corporate.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            size="sm"
            className="gap-1.5 border-amber-600 text-amber-800 hover:bg-amber-50"
            onClick={() =>
              runLiveUpdate(
                startAccumulatorTransition,
                ACCUMULATOR_LIVE_HREF,
                "Could not update accumulator live.",
                "Accumulator live updated.",
              )
            }
            disabled={isBusy}
          >
            {isAccumulatorPending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              "Update accumulator live"
            )}
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="gap-1.5 border-emerald-600 text-emerald-800 hover:bg-emerald-50"
            onClick={() =>
              runLiveUpdate(
                startStructureTransition,
                STRUCTURE_LIVE_HREF,
                "Could not update structure live.",
                "Structure live updated.",
              )
            }
            disabled={isBusy}
          >
            {isStructurePending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              "Update structure live"
            )}
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="gap-1.5 border-sky-600 text-sky-800 hover:bg-sky-50"
            onClick={() =>
              runLiveUpdate(
                startTransactionTransition,
                TRANSACTION_LIVE_HREF,
                "Could not update transaction live.",
                "Transaction live updated.",
              )
            }
            disabled={isBusy}
          >
            {isTransactionPending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              "Update transaction live"
            )}
          </Button>
        </>
      }
    />
  );
}