"use client";

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

import { DashboardMasterRowActions } from "@/app/dashboard/_components/dashboard-master-row-actions";
import { MasterReviewStatusCell } from "@/app/dashboard/_components/master-review-status-cell";
import { ImagePreview } from "@/components/ui/image-preview";
import { Input } from "@/components/ui/input";

import { ActiveReviewBadge } from "@/components/shared/status-pill";
import type { CommodityNameRow } from "./schema";
import { useChanged } from "@/hooks/use-changed";

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

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

function PriorityCell({
  id,
  initialValue,
  onPriorityChange,
}: {
  id: number;
  initialValue: number | string;
  onPriorityChange: (id: number, priority: string) => void;
}) {
  const [value, setValue] = React.useState(String(initialValue ?? "0"));

  // Re-sync when the server sends a new row value; local typing wins until then.
  if (useChanged(initialValue)) {
    setValue(String(initialValue ?? "0"));
  }

  return (
    <Input
      type="number"
      min={0}
      className="h-8 w-14 bg-background text-center text-xs tabular-nums"
      value={value}
      onChange={(event) => {
        const next = event.target.value;
        setValue(next);
        onPriorityChange(id, next);
      }}
    />
  );
}

function CommodityNameActions({ row }: { row: CommodityNameRow }) {
  const base = `/dashboard/master/commodity-name/${row.id}`;

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

function CommodityNameCell({ row }: { row: CommodityNameRow }) {
  const base = `/dashboard/master/commodity-name/${row.id}`;

  const nameContent = (
    <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 object-cover" />
        </div>
      ) : null}
      <Link href={base} className="font-medium text-primary hover:underline">
        {row.masterName}
      </Link>
    </div>
  );

  return (
    <MasterReviewStatusCell
      id={row.id}
      masterName={row.masterName}
      editHref={base}
      status={row.status}
      changeStatusUrl={CHANGE_STATUS_HREF}
      fallbackError="Commodity name status could not be changed."
      defaultSuccessMessage="Commodity name status changed"
      nameContent={nameContent}
    />
  );
}

export function createCommodityNameColumns({
  onPriorityChange,
}: PriorityHandlers): ColumnDef<CommodityNameRow>[] {
  return [
    {
      accessorKey: "masterName",
      header: "Commodity name",
      cell: ({ row }) => <CommodityNameCell 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 }) => (
        <PriorityCell
          id={row.original.id}
          initialValue={row.original.priority}
          onPriorityChange={onPriorityChange}
        />
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <CommodityNameActions row={row.original} />,
      enableSorting: false,
    },
  ];
}