"use client";

import type { ColumnDef } from "@tanstack/react-table";
import Link from "next/link";
import { Icons } from "@/components/icons";
import { DataTableColumnHeader } from "@/components/ui/table/data-table-column-header";
import { formatDate } from "@/lib/format";
import type { Option } from "@/types/data-table";
import type { Announcement } from "../api/types";
import { AnnouncementActionMenu } from "./announcement-action-menu";
import { AnnouncementStatusBadge } from "./announcement-status-badge";

const statusOptions: Option[] = [
  { value: "draft", label: "ร่าง" },
  { value: "pending_review", label: "รอตรวจสอบ" },
  { value: "approved", label: "อนุมัติแล้ว" },
  { value: "published", label: "เผยแพร่แล้ว" },
  { value: "returned", label: "ส่งกลับแก้ไข" },
  { value: "rejected", label: "ไม่อนุมัติ" },
  { value: "archived", label: "ไม่แสดง" },
];

const pinOptions: Option[] = [{ value: "pinned", label: "ปักหมุด" }];

export function getAnnouncementColumns({
  currentUserId,
  permissions,
}: {
  currentUserId: string;
  permissions: readonly string[];
}): ColumnDef<Announcement>[] {
  return [
    {
      id: "pin",
      accessorFn: (row) => (row.is_pin ? "pinned" : ""),
      header: () => <span className="sr-only">ปักหมุด</span>,
      cell: ({ row }) => (
        <div className="flex justify-center">
          {row.original.is_pin ? (
            <span
              className="text-primary inline-flex h-8 w-8 items-center justify-center rounded-full border bg-white"
              aria-label="ประกาศปักหมุด"
              title="ประกาศปักหมุด"
            >
              <Icons.exclusive className="h-4 w-4" />
            </span>
          ) : (
            <span className="text-muted-foreground">-</span>
          )}
        </div>
      ),
      meta: {
        label: "การปักหมุด",
        variant: "select" as const,
        options: pinOptions,
        headerClassName: "w-[72px] px-3 text-center",
        cellClassName: "w-[72px] px-3 text-center",
      },
      enableColumnFilter: true,
      enableSorting: false,
      size: 50,
      minSize: 50,
      maxSize: 50,
    },
    {
      id: "search",
      accessorKey: "title",
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title="หัวข้อประกาศ"
          className="w-full justify-start"
        />
      ),
      cell: ({ row }) => (
        <div className="flex min-w-0 flex-col gap-1">
          <Link
            href={`/dashboard/announcements/${row.original.id}`}
            className="truncate font-medium hover:underline"
          >
            {row.original.title}
          </Link>
          <span className="text-muted-foreground line-clamp-2 text-xs leading-5">
            {row.original.content}
          </span>
        </div>
      ),
      meta: {
        label: "หัวข้อประกาศ",
        placeholder: "ค้นหาจากหัวข้อหรือเนื้อหาประกาศ",
        variant: "text" as const,
        icon: Icons.search,
      },
      enableColumnFilter: true,
      enableHiding: false,
      size: 260,
      minSize: 220,
      maxSize: 220,
    },
    {
      id: "status",
      accessorKey: "status",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="สถานะ" />
      ),
      cell: ({ row }) => <AnnouncementStatusBadge status={row.original.status} />,
      meta: {
        label: "สถานะ",
        variant: "select" as const,
        options: statusOptions,
      },
      enableColumnFilter: true,
      size: 150,
      minSize: 150,
      maxSize: 170,
    },
    {
      id: "published_at",
      accessorKey: "published_at",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="วันที่เผยแพร่" />
      ),
      cell: ({ row }) => (
        <span className="block whitespace-nowrap">
          {row.original.published_at ? formatDate(row.original.published_at) : "-"}
        </span>
      ),
      size: 150,
      minSize: 150,
      maxSize: 170,
    },
    {
      id: "end_date",
      accessorKey: "end_date",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="วันสิ้นสุด" />
      ),
      cell: ({ row }) => (
        <span className="block whitespace-nowrap">
          {row.original.end_date ? formatDate(row.original.end_date) : "ไม่กำหนด"}
        </span>
      ),
      size: 150,
      minSize: 150,
      maxSize: 170,
    },
    {
      id: "created_by_name",
      accessorKey: "created_by_name",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="ผู้สร้าง" />
      ),
      cell: ({ row }) => (
        <span className="block truncate">{row.original.created_by_name ?? "-"}</span>
      ),
      size: 180,
      minSize: 180,
      maxSize: 220,
    },
    {
      id: "actions",
      header: () => <span className="sr-only">จัดการ</span>,
      cell: ({ row }) => (
        <div className="flex justify-end">
          <AnnouncementActionMenu
            announcement={row.original}
            currentUserId={currentUserId}
            permissions={permissions}
          />
        </div>
      ),
      meta: {
        label: "จัดการ",
        headerClassName: "w-[64px] px-3 text-right",
        cellClassName: "w-[64px] px-3 text-right",
      },
      enableSorting: false,
      enableHiding: false,
      size: 50,
      minSize: 50,
      maxSize: 50,
    },
  ];
}
