"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Languages, MapPin } from "lucide-react";
import Link from "next/link";

import { DashboardMasterRowActions } from "@/app/dashboard/_components/dashboard-master-row-actions";

import { ActiveInactiveBadge } from "@/components/shared/status-pill";
import type { ZoneBulkLan, ZoneRow } from "./schema";

const DELETE_HREF = "/dashboard/master/zones/delete";

function ZoneActions({ row }: { row: ZoneRow }) {
  const base = `/dashboard/master/zones/${row.id}`;

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

type BulkColumnHandlers = {
  lan: ZoneBulkLan;
  checkedIds: Set<number>;
  translations: Record<number, string>;
  onToggleChecked: (id: number, checked: boolean) => void;
  onTranslationChange: (id: number, value: string) => void;
};

export function createZoneColumns(bulk?: BulkColumnHandlers | null): ColumnDef<ZoneRow>[] {
  const columns: ColumnDef<ZoneRow>[] = [
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ row }) => (
        <div className="space-y-1 min-w-[180px]">
          <Link
            href={`/dashboard/master/zones/${row.original.id}`}
            className="font-medium text-primary hover:underline"
          >
            <span data-zone-name>{row.original.name}</span>
          </Link>
          {row.original.nameAr ? (
            <span className="inline-flex items-center gap-1 text-muted-foreground text-xs" dir="rtl">
              <Languages className="size-3 shrink-0" />
              {row.original.nameAr}
            </span>
          ) : null}
          {row.original.lat && row.original.lng ? (
            <span className="flex items-center gap-1 text-muted-foreground text-[10px]">
              <MapPin className="size-3" />
              {row.original.lat}, {row.original.lng}
            </span>
          ) : null}
        </div>
      ),
    },
  ];

  if (bulk) {
    columns.push({
      id: "bulkUpdate",
      header: "Bulk Update",
      enableColumnFilter: false,
      cell: ({ row }) => {
        const id = row.original.id;
        const checked = bulk.checkedIds.has(id);
        return (
          <div className="flex min-w-[220px] items-center gap-2">
            <Checkbox
              checked={checked}
              onCheckedChange={(value) => bulk.onToggleChecked(id, value === true)}
            />
            <Input
              value={bulk.translations[id] ?? ""}
              onChange={(event) => bulk.onTranslationChange(id, event.target.value)}
              dir={bulk.lan === "ar" ? "rtl" : "ltr"}
              className="h-8 bg-background text-xs"
              placeholder={bulk.lan === "ar" ? "Arabic name" : "Dutch name"}
            />
          </div>
        );
      },
    });
  }

  columns.push(
    {
      accessorKey: "code",
      header: "Code",
      cell: ({ row }) => (
        <span className="inline-flex rounded-md border bg-muted/50 px-2 py-0.5 font-mono font-semibold text-xs uppercase">
          {row.original.code}
        </span>
      ),
    },
    {
      accessorKey: "countryId",
      header: "Country",
      cell: ({ row }) => (
        <div className="space-y-0.5">
          <span className="font-medium text-sm">{row.original.countryName}</span>
          <span className="text-muted-foreground text-xs">{row.original.countryCode}</span>
        </div>
      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <ActiveInactiveBadge status={row.original.status} label={row.original.statusLabel} />
      ),
    },
    {
      accessorKey: "dateAdded",
      header: "Date added",
      enableColumnFilter: false,
      cell: ({ row }) => (
        <span className="text-muted-foreground text-sm whitespace-nowrap">
          {row.original.dateAdded}
        </span>
      ),
    },
    {
      id: "options",
      header: () => <span className="block w-full text-right">Options</span>,
      cell: ({ row }) => <ZoneActions row={row.original} />,
      enableSorting: false,
    },
  );

  return columns;
}