"use client";
import * as React from "react";
import { type ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Ellipsis, Pencil, Trash } from "lucide-react";
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header";
import { DeleteEvaluationsDialog } from "./delete-check-lists-dialog";
import { EditEvaluationSheet } from "./update-check-list-sheet";
import { DropdownMenu, DropdownMenuShortcut, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";


export interface GeneralEvaluationRow {
  id: number;
  serialNumber: string;
  category: string;
  inspectionItem: string;
  remarks: string | null;
  isActive: boolean;
  createdAt: Date;
  updatedAt: Date;
}

export function getGeneralEvaluationColumns(): ColumnDef<GeneralEvaluationRow>[] {
  return [
    // Checkbox 
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
          onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
          aria-label="select all"
          className="translate-y-0.5"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(v) => row.toggleSelected(!!v)}
          aria-label="select row"
          className="translate-y-0.5"
        />
      ),
      size: 40,
      enableSorting: false,
      enableHiding: false,
    },

    // ░░░ Serial Number ░░░
    {
      accessorKey: "serialNumber",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="시리얼" />,
      cell: ({ row }) => row.getValue("serialNumber"),
      size: 120,
    },

    // ░░░ Category ░░░
    {
      accessorKey: "category",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="카테고리" />,
      cell: ({ row }) => <Badge>{row.getValue("category")}</Badge>,
      size: 120,
    },

    // ░░░ Inspection Item ░░░
    {
      accessorKey: "inspectionItem",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="점검 항목" />,
      cell: ({ row }) => (
        <div className="truncate max-w-[300px]" title={row.getValue<string>("inspectionItem")!}>
          {row.getValue("inspectionItem") as string}
        </div>
      ),
      size: 300,
    },

    // ░░░ Remarks ░░░
    {
      accessorKey: "remarks",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="비고" />,
      cell: ({ row }) => row.getValue("remarks") ?? <span className="text-muted-foreground">-</span>,
      size: 200,
    },

    // ░░░ 활성 ░░░
    {
      accessorKey: "isActive",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="활성" />,
      cell: ({ row }) => (row.getValue("isActive") ? <Badge variant="default">활성</Badge> : <Badge variant="secondary">비활성</Badge>),
      size: 80,
    },

    // ░░░ Actions ░░░
    {
      id: "actions",
      enableHiding: false,
      size: 80,
      cell: function Cell({ row }) {
        const record = row.original;
        const [openEdit, setOpenEdit] = React.useState(false);
        const [openDelete, setOpenDelete] = React.useState(false);

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                aria-label="Open menu"
                variant="ghost"
                className="flex size-8 p-0 data-[state=open]:bg-muted"
              >
                <Ellipsis className="size-4" aria-hidden="true" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-40">
              <DropdownMenuItem
                onSelect={() => setOpenEdit(true)}
              >
                {/* <Pencil className="mr-2 size-4" /> */}
                수정하기
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onSelect={() => setOpenDelete(true)}
              >
                {/* <Trash className="mr-2 size-4" /> */}
                삭제하기
                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuContent>
            <EditEvaluationSheet open={openEdit} onOpenChange={setOpenEdit} evaluation={record} />
            <DeleteEvaluationsDialog
              open={openDelete}
              onOpenChange={setOpenDelete}
              evaluations={[record]}
              showTrigger={false}
            />
          </DropdownMenu>
        );
      },
    },
  ];
}
