"use client";

import * as React from "react";
import type { ColumnDef } from "@tanstack/react-table";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

import { DashboardMasterRowActions } from "@/app/dashboard/_components/dashboard-master-row-actions";
import { Button } from "@/components/ui/button";
import { ImagePreview } from "@/components/ui/image-preview";
import { Input } from "@/components/ui/input";
import { dashboardCsrfHeader } from "@/lib/csrf.client";

import { ActiveReviewBadge } from "@/components/shared/status-pill";
import type { SecurityNameRow, SecurityNameStatus } from "./schema";

const CHANGE_STATUS_HREF = "/dashboard/master/security-name/change-status";
const DELETE_HREF = "/dashboard/master/security-name/delete";

type PriorityHandlers = {
  priorities: Record<number, number>;
  onPriorityChange: (id: number, priority: number) => void;
};

function SecurityNameActions({ row }: { row: SecurityNameRow }) {
  const base = `/dashboard/master/security-name/${row.id}`;

  return (
    <DashboardMasterRowActions
      editHref={base}
      editAriaLabel="Update security name"
      deleteUrl={DELETE_HREF}
      entityId={row.id}
      entityName={row.masterName}
      entityLabel="security name"
      fallbackError="Security name could not be deleted."
      defaultSuccessMessage="Security name deleted."
    />
  );
}

function SecurityNameCell({ row }: { row: SecurityNameRow }) {
  const router = useRouter();
  const [pendingStatus, setPendingStatus] = React.useState<SecurityNameStatus | null>(null);
  const base = `/dashboard/master/security-name/${row.id}`;

  const changeStatus = async (status: SecurityNameStatus) => {
    setPendingStatus(status);

    try {
      const response = await fetch(CHANGE_STATUS_HREF, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          ...dashboardCsrfHeader(),
        },
        body: JSON.stringify({ id: row.id, status }),
      });
      const data = (await response.json().catch(() => null)) as {
        status?: string;
        message?: string;
      } | null;

      if (!response.ok || data?.status !== "success") {
        throw new Error(data?.message ?? "Security name status could not be changed.");
      }

      toast.success(data.message ?? "Security name status changed");
      router.refresh();
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : "Security name status could not be changed.",
      );
    } finally {
      setPendingStatus(null);
    }
  };

  const nameBlock = (
    <div className="flex items-center gap-3 min-w-[200px]">
      {row.imageUrl ? (
        <div className="relative size-9 shrink-0 overflow-hidden rounded-md border bg-white">
          <ImagePreview src={row.imageUrl} alt="" className="size-full p-0.5" />
        </div>
      ) : null}
      <Link href={base} className="font-medium text-primary hover:underline">
        {row.masterName}
      </Link>
    </div>
  );

  if (row.status !== "R") {
    return nameBlock;
  }

  return (
    <div className="space-y-2">
      {nameBlock}
      <p className="text-amber-800 text-xs font-medium">Under review</p>
      <div className="flex flex-wrap gap-1">
        <Button
          type="button"
          size="sm"
          variant="secondary"
          className="h-7 text-xs"
          disabled={pendingStatus !== null}
          onClick={() => changeStatus("A")}
        >
          {pendingStatus === "A" ? "Approving..." : "Approve"}
        </Button>
        <Button
          type="button"
          size="sm"
          variant="outline"
          className="h-7 text-xs"
          disabled={pendingStatus !== null}
          onClick={() => changeStatus("I")}
        >
          {pendingStatus === "I" ? "Saving..." : "Inactive"}
        </Button>
      </div>
    </div>
  );
}

export function createSecurityNameColumns({
  priorities,
  onPriorityChange,
}: PriorityHandlers): ColumnDef<SecurityNameRow>[] {
  return [
    {
      accessorKey: "masterName",
      header: "Security name",
      cell: ({ row }) => <SecurityNameCell row={row.original} />,
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <ActiveReviewBadge
          status={row.original.status}
          label={row.original.statusLabel}
        />
      ),
    },
    {
      id: "priority",
      header: "Priority",
      enableColumnFilter: false,
      cell: ({ row }) => {
        const id = row.original.id;
        const value = priorities[id] ?? row.original.priority;

        return (
          <Input
            type="number"
            min={0}
            className="h-8 w-14 bg-background text-center text-xs tabular-nums"
            value={value}
            onChange={(event) => {
              const parsed = Number(event.target.value);
              onPriorityChange(id, Number.isFinite(parsed) ? parsed : 0);
            }}
          />
        );
      },
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <SecurityNameActions row={row.original} />,
      enableSorting: false,
    },
  ];
}