"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import {
  FileTextIcon,
  EyeIcon,
} from "lucide-react"
import { useRouter, useParams } from "next/navigation"

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 { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { formatNumber } from "@/lib/utils"

import { VendorPO } from "./types"

// 액션 타입
export type ShiVendorPORowAction = {
  row: { original: VendorPO }
  type: "view-items"
}

interface GetShiVendorColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<ShiVendorPORowAction | null>>
  selectedRows: number[]
  onRowSelect: (id: number, selected: boolean) => void
}

export function getShiVendorColumns({
  setRowAction,
  selectedRows,
  onRowSelect,
}: GetShiVendorColumnsProps): ColumnDef<VendorPO>[] {
  return [
    // 선택 체크박스 (1개만 선택 가능)
    {
      id: "select",
      header: () => <div className="text-center">선택</div>,
      cell: ({ row }) => (
        <div className="flex justify-center">
          <Checkbox
            checked={selectedRows.includes(row.original.id)}
            onCheckedChange={(checked) => {
              onRowSelect(row.original.id, !!checked)
            }}
            aria-label="행 선택"
          />
        </div>
      ),
      enableSorting: false,
      enableHiding: false,
      size: 40,
    },

    // No. (ID)
    {
      accessorKey: "id",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="No." />
      ),
      cell: ({ row }) => {
        const id = row.getValue("id") as number
        return <div className="text-sm font-mono">{id}</div>
      },
      size: 60,
    },

    // PO/계약번호
    {
      accessorKey: "contractNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PO/계약번호" />
      ),
      cell: ({ row }) => {
        const contractNo = row.getValue("contractNo") as string
        return (
          <div className="font-medium">
            {contractNo}
          </div>
        )
      },
      size: 120,
    },

    // Rev. / 품번 (PO 버전)
    {
      accessorKey: "poVersion",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Rev. / 품번" />
      ),
      cell: ({ row }) => {
        const version = row.getValue("poVersion") as number
        return <div className="text-sm font-medium">{version || '-'}</div>
      },
      size: 80,
    },

    // 계약상태
    {
      accessorKey: "contractStatus",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="계약상태" />
      ),
      cell: ({ row }) => {
        const status = row.getValue("contractStatus") as string
        return (
          <Badge variant="outline">
            {status || '-'}
          </Badge>
        )
      },
      size: 100,
    },

    // 계약종류
    {
      accessorKey: "contractType",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="계약종류" />
      ),
      cell: ({ row }) => {
        const type = row.getValue("contractType") as string
        return <Badge variant="outline">{type || '-'}</Badge>
      },
      size: 100,
    },

    // 상세품목 (버튼)
    {
      id: "itemsAction",
      header: () => <div className="text-center">상세품목</div>,
      cell: ({ row }) => (
        <div className="flex justify-center">
          <Button
            variant="outline"
            size="sm"
            className="h-8 px-2"
            onClick={() => setRowAction({ row, type: "view-items" })}
          >
            <FileTextIcon className="h-3.5 w-3.5 mr-1" />
            보기
          </Button>
        </div>
      ),
      enableSorting: false,
      size: 80,
    },

    // 프로젝트
    {
      accessorKey: "projectName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트" />
      ),
      cell: ({ row }) => {
        const projectName = row.getValue("projectName") as string
        return (
          <div className="max-w-[150px] truncate" title={projectName}>
            {projectName || '-'}
          </div>
        )
      },
      size: 150,
    },

    // 계약명/자재내역
    {
      accessorKey: "contractName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="계약명/자재내역" />
      ),
      cell: ({ row }) => {
        const contractName = row.getValue("contractName") as string
        return (
          <div className="max-w-[200px] truncate" title={contractName}>
            {contractName || '-'}
          </div>
        )
      },
      size: 200,
    },

    // PO/계약기간
    {
      accessorKey: "contractPeriod",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PO/계약기간" />
      ),
      cell: ({ row }) => {
        const period = row.getValue("contractPeriod") as string
        return (
          <div className="text-sm whitespace-nowrap">
            {period || '-'}
          </div>
        )
      },
      size: 150,
    },

    // PO/계약금액
    {
      accessorKey: "totalAmount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PO/계약금액" />
      ),
      cell: ({ row }) => {
        const amount = row.getValue("totalAmount") as string | number
        return <div className="text-sm text-right font-mono">{formatNumber(amount)}</div>
      },
      size: 120,
    },

    // 계약통화
    {
      accessorKey: "currency",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="계약통화" />
      ),
      cell: ({ row }) => {
        const currency = row.getValue("currency") as string
        return <div className="text-sm font-mono">{currency || '-'}</div>
      },
      size: 80,
    },

    // 지불조건
    {
      accessorKey: "paymentTerms",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="지불조건" />
      ),
      cell: ({ row }) => {
        const terms = row.getValue("paymentTerms") as string
        return (
          <div className="max-w-[120px] truncate text-sm" title={terms}>
            {terms || '-'}
          </div>
        )
      },
      size: 120,
    },

    // Tax
    {
      accessorKey: "tax",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Tax" />
      ),
      cell: ({ row }) => {
        const tax = row.getValue("tax") as string
        return <div className="text-sm">{tax || '-'}</div>
      },
      size: 80,
    },

    // 환율
    {
      accessorKey: "exchangeRate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="환율" />
      ),
      cell: ({ row }) => {
        const rate = row.getValue("exchangeRate") as string | number
        return <div className="text-sm text-right font-mono">{formatNumber(rate)}</div>
      },
      size: 100,
    },

    // 인도조건
    {
      accessorKey: "deliveryTerms",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="인도조건" />
      ),
      cell: ({ row }) => {
        const terms = row.getValue("deliveryTerms") as string
        return <div className="text-sm">{terms || '-'}</div>
      },
      size: 100,
    },

    // 구매/계약담당
    {
      accessorKey: "purchaseManager",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="구매/계약담당" />
      ),
      cell: ({ row }) => {
        const manager = row.getValue("purchaseManager") as string
        return <div className="text-sm">{manager || '-'}</div>
      },
      size: 120,
    },

    // PO/계약수신일
    {
      accessorKey: "poReceiveDate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PO/계약수신일" />
      ),
      cell: ({ row }) => {
        const date = row.getValue("poReceiveDate") as string
        return <div className="text-sm">{date || '-'}</div>
      },
      size: 120,
    },

    // 계약체결일
    {
      accessorKey: "contractDate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="계약체결일" />
      ),
      cell: ({ row }) => {
        const date = row.getValue("contractDate") as string
        return <div className="text-sm">{date || '-'}</div>
      },
      size: 120,
    },

    // L/C No.
    {
      accessorKey: "lcNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="L/C No." />
      ),
      cell: ({ row }) => {
        const lcNo = row.getValue("lcNo") as string
        return <div className="text-sm">{lcNo || '-'}</div>
      },
      size: 120,
    },

    // 납품대금 연동제 대상
    {
      accessorKey: "priceIndexTarget",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="납품대금 연동제 대상" />
      ),
      cell: ({ row }) => {
        const target = row.getValue("priceIndexTarget") as string | boolean
        return <div className="text-sm">{target?.toString() || '-'}</div>
      },
      size: 140,
    },

    // 연계 PO/계약번호
    {
      accessorKey: "linkedContractNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="연계 PO/계약번호" />
      ),
      cell: ({ row }) => {
        const linkedNo = row.getValue("linkedContractNo") as string
        return <div className="text-sm">{linkedNo || '-'}</div>
      },
      size: 140,
    },

    // 최종수정일
    {
      accessorKey: "lastModifiedDate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="최종수정일" />
      ),
      cell: ({ row }) => {
        const date = row.getValue("lastModifiedDate") as string
        return <div className="text-sm">{date || '-'}</div>
      },
      size: 120,
    },

    // 최종수정자
    {
      accessorKey: "lastModifiedBy",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="최종수정자" />
      ),
      cell: ({ row }) => {
        const user = row.getValue("lastModifiedBy") as string
        return <div className="text-sm">{user || '-'}</div>
      },
      size: 120,
    },

    // 액션 컬럼 (서명 요청 중심)
    {
      id: "actions",
      enableHiding: false,
      header: () => <div className="text-center">Actions</div>,
      cell: ({ row }) => {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const router = useRouter()
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const params = useParams()
        const lng = (params?.lng as string) || 'ko'

        return (
          <div className="flex items-center justify-center gap-2">
            {/* 계약 상세보기 버튼 */}
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => router.push(`/${lng}/evcp/po/${row.original.id}`)}
                  >
                    <EyeIcon className="h-3.5 w-3.5 mr-1" aria-hidden="true" />
                    상세
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  계약 상세 정보 보기
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

          </div>
        )
      },
      size: 200,
      minSize: 200,
    },
  ]
}