"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { Edit, Paperclip } from "lucide-react"
import { formatCurrency, formatDate, formatDateTime } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
import { 
  TechSalesVendorQuotations, 
  TECH_SALES_QUOTATION_STATUS_CONFIG
} from "@/db/schema"
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"

interface QuotationWithRfqCode extends TechSalesVendorQuotations {
  rfqCode?: string;
  materialCode?: string;
  dueDate?: Date;
  rfqStatus?: string;
  itemName?: string;
  projNm?: string;
  quotationCode?: string | null;
  quotationVersion?: number | null;
  rejectionReason?: string | null;
  acceptedAt?: Date | null;
  attachmentCount?: number;
}

interface GetColumnsProps {
  router: AppRouterInstance;
  openAttachmentsSheet: (rfqId: number) => void;
}

export function getColumns({ router, openAttachmentsSheet }: GetColumnsProps): ColumnDef<QuotationWithRfqCode>[] {
  return [
    {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="모두 선택"
        className="translate-y-0.5"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="행 선택"
        className="translate-y-0.5"
      />
    ),
    enableSorting: false,
    enableHiding: false,
    },
    {
      accessorKey: "id",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="ID" />
      ),
      cell: ({ row }) => (
        <div className="w-20">
          <span className="font-mono text-xs">{row.getValue("id")}</span>
        </div>
      ),
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "rfqCode",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="RFQ 번호" />
      ),
      cell: ({ row }) => {
        const rfqCode = row.getValue("rfqCode") as string;
        return (
          <div className="min-w-32">
            <span className="font-mono text-sm">{rfqCode || "N/A"}</span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: false,
    },
    {
      accessorKey: "materialCode",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="자재 코드" />
      ),
      cell: ({ row }) => {
        const materialCode = row.getValue("materialCode") as string;
        return (
          <div className="min-w-32">
            <span className="font-mono text-sm">{materialCode || "N/A"}</span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "itemName",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="품목명" />
      ),
      cell: ({ row }) => {
        const itemName = row.getValue("itemName") as string;
        return (
          <div className="min-w-48 max-w-64">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="truncate block text-sm">
                    {itemName || "N/A"}
                  </span>
                </TooltipTrigger>
                <TooltipContent>
                  <p className="max-w-xs">{itemName || "N/A"}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        );
      },
      enableSorting: false,
      enableHiding: true,
    },
    {
      accessorKey: "projNm",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="프로젝트명" />
      ),
      cell: ({ row }) => {
        const projNm = row.getValue("projNm") as string;
        return (
          <div className="min-w-48 max-w-64">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="truncate block text-sm">
                    {projNm || "N/A"}
                  </span>
                </TooltipTrigger>
                <TooltipContent>
                  <p className="max-w-xs">{projNm || "N/A"}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        );
      },
      enableSorting: false,
      enableHiding: true,
    },
    {
      id: "attachments",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="첨부파일" />
      ),
      cell: ({ row }) => {
        const quotation = row.original
        const attachmentCount = quotation.attachmentCount || 0

        const handleClick = () => {
          openAttachmentsSheet(quotation.rfqId)
        }

        return (
          <div className="w-20">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="relative h-8 w-8 p-0 group"
                    onClick={handleClick}
                    aria-label={
                      attachmentCount > 0 ? `View ${attachmentCount} attachments` : "No attachments"
                    }
                  >
                    <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
                    {attachmentCount > 0 && (
                      <span className="pointer-events-none absolute -top-1 -right-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground">
                        {attachmentCount}
                      </span>
                    )}
                    <span className="sr-only">
                      {attachmentCount > 0 ? `${attachmentCount} 첨부파일` : "첨부파일 없음"}
                    </span>
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{attachmentCount > 0 ? `${attachmentCount}개 첨부파일 보기` : "첨부파일 없음"}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        )
      },
      enableSorting: false,
      enableHiding: true,
    },
    {
      accessorKey: "status",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="상태" />
      ),
      cell: ({ row }) => {
        const status = row.getValue("status") as string;
        
        const statusConfig = TECH_SALES_QUOTATION_STATUS_CONFIG[status as keyof typeof TECH_SALES_QUOTATION_STATUS_CONFIG] || {
          label: status,
          variant: "secondary" as const
        };
        
        return (
          <div className="w-24">
            <Badge variant={statusConfig.variant} className="text-xs">
              {statusConfig.label}
            </Badge>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: false,
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id));
      },
    },
    {
      accessorKey: "currency",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="통화" />
      ),
      cell: ({ row }) => {
        const currency = row.getValue("currency") as string;
        return (
          <div className="w-16">
            <span className="font-mono text-sm">{currency || "N/A"}</span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "totalPrice",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="총액" />
      ),
      cell: ({ row }) => {
        const totalPrice = row.getValue("totalPrice") as string;
        const currency = row.getValue("currency") as string;
        
        if (!totalPrice || totalPrice === "0") {
          return (
            <div className="w-32 text-right">
              <span className="text-muted-foreground text-sm">미입력</span>
            </div>
          );
        }
        
        return (
          <div className="w-32 text-right">
            <span className="font-mono text-sm">
              {formatCurrency(parseFloat(totalPrice), currency || "USD")}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "validUntil",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="유효기간" />
      ),
      cell: ({ row }) => {
        const validUntil = row.getValue("validUntil") as Date;
        return (
          <div className="w-28">
            <span className="text-sm">
              {validUntil ? formatDate(validUntil) : "N/A"}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "submittedAt",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="제출일" />
      ),
      cell: ({ row }) => {
        const submittedAt = row.getValue("submittedAt") as Date;
        return (
          <div className="w-36">
            <span className="text-sm">
              {submittedAt ? formatDateTime(submittedAt) : "미제출"}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "dueDate",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="마감일" />
      ),
      cell: ({ row }) => {
        const dueDate = row.getValue("dueDate") as Date;
        const isOverdue = dueDate && new Date() > new Date(dueDate);
        
        return (
          <div className="w-28">
            <span className={`text-sm ${isOverdue ? "text-red-600 font-medium" : ""}`}>
              {dueDate ? formatDate(dueDate) : "N/A"}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="생성일" />
      ),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as Date;
        return (
          <div className="w-36">
            <span className="text-sm">
              {createdAt ? formatDateTime(createdAt) : "N/A"}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="수정일" />
      ),
      cell: ({ row }) => {
        const updatedAt = row.getValue("updatedAt") as Date;
        return (
          <div className="w-36">
            <span className="text-sm">
              {updatedAt ? formatDateTime(updatedAt) : "N/A"}
            </span>
          </div>
        );
      },
      enableSorting: true,
      enableHiding: true,
    },
    {
    id: "actions",
      header: "작업",
    cell: ({ row }) => {
        const quotation = row.original;
        const rfqCode = quotation.rfqCode || "N/A";
        const tooltipText = `${rfqCode} 견적서 작성`;
      
      return (
          <div className="w-16">
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                    onClick={() => {
                      router.push(`/ko/partners/techsales/rfq-ship/${quotation.id}`);
                    }}
                className="h-8 w-8"
              >
                <Edit className="h-4 w-4" />
                <span className="sr-only">견적서 작성</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>{tooltipText}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
          </div>
        );
      },
      enableSorting: false,
      enableHiding: false,
    },
  ];
}