"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 { ImagePreview } from "@/components/ui/image-preview";
import { Input } from "@/components/ui/input";

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

const DELETE_HREF = "/dashboard/master/banners/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 BannerActions({ row }: { row: BannerRow }) {
  const base = `/dashboard/master/banners/${row.id}`;

  return (
    <DashboardMasterRowActions
      editHref={base}
      editAriaLabel="Update banner"
      deleteUrl={DELETE_HREF}
      entityId={row.id}
      entityName={row.categoryName || row.fileName || `Banner #${row.id}`}
      entityLabel="banner"
      fallbackError="Banner could not be deleted."
      defaultSuccessMessage="Banner deleted."
    />
  );
}

export function createBannerColumns({
  onPriorityChange,
}: PriorityHandlers): ColumnDef<BannerRow>[] {
  return [
    {
      accessorKey: "fileName",
      header: "Image",
      enableColumnFilter: false,
      cell: ({ row }) => (
        <div className="flex items-center gap-2 min-w-[120px]">
          <div className="relative h-12 w-24 shrink-0 overflow-hidden rounded border bg-muted">
            {row.original.imageUrl ? (
              <ImagePreview src={row.original.imageUrl} alt={row.original.fileName} className="size-full" />
            ) : (
              <div className="flex size-full items-center justify-center text-[10px] text-muted-foreground">
                No preview
              </div>
            )}
          </div>
        </div>
      ),
    },
    {
      accessorKey: "categoryName",
      header: "Category",
      cell: ({ row }) => (
        <Link
          href={`/dashboard/master/banners/${row.original.id}`}
          className="text-sm font-medium text-primary hover:underline"
        >
          {row.original.categoryName}
        </Link>
      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <ActiveReviewBadge
          status={row.original.status}
          label={row.original.statusLabel}
        />
      ),
    },
    {
      accessorKey: "siteLabel",
      header: "Site",
      cell: ({ row }) => (
        <span className="text-sm">{row.original.siteLabel}</span>
      ),
    },
    {
      accessorKey: "dateAdded",
      header: "Date added",
      enableColumnFilter: false,
      cell: ({ row }) => (
        <span className="text-muted-foreground text-sm whitespace-nowrap">
          {row.original.dateAdded}
        </span>
      ),
    },
    {
      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 }) => <BannerActions row={row.original} />,
      enableSorting: false,
    },
  ];
}