"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { InfoIcon, PenIcon } from "lucide-react"

import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { poColumnsConfig } from "@/config/poColumnsConfig"
import { ContractDetail } from "@/db/schema/contract"

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ContractDetail> | null>>
}

/**
 * tanstack table column definitions with nested headers
 */
export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ContractDetail>[] {
  // ----------------------------------------------------------------
  // 1) select column (checkbox) - if needed
  // ----------------------------------------------------------------

  // ----------------------------------------------------------------
  // 2) actions column (buttons for item info and signature request)
  // ----------------------------------------------------------------
  const actionsColumn: ColumnDef<ContractDetail> = {
    id: "actions",
    enableHiding: false,
    cell: function Cell({ row }) {
      // Check if this contract already has a signature envelope
      const hasSignature = row.original.hasSignature;
      
      return (
        <div className="flex items-center space-x-1">
          {/* Item Info Button */}
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setRowAction({ row, type: "items" })}
                >
                  <InfoIcon className="h-4 w-4" aria-hidden="true" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                View Item Info
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
          
          {/* Signature Request Button - only show if no signature exists */}
          {!hasSignature && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setRowAction({ row, type: "signature" })}
                  >
                    <PenIcon className="h-4 w-4" aria-hidden="true" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  Request Electronic Signature
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>
      );
    },
    size: 80, // Increased width to accommodate both buttons
  };

  // ----------------------------------------------------------------
  // 3) Regular columns grouped by group name
  // ----------------------------------------------------------------
  // 3-1) groupMap: { [groupName]: ColumnDef<ContractDetail>[] }
  const groupMap: Record<string, ColumnDef<ContractDetail>[]> = {};

 // (1) JSON config를 읽어서 ColumnDef를 생성하는 부분 (일부 발췌)
poColumnsConfig.forEach((cfg) => {
  const groupName = cfg.group || "_noGroup"
  if (!groupMap[groupName]) {
    groupMap[groupName] = []
  }

  let childCol: ColumnDef<ContractDetail>

  if (cfg.type === "custom" && cfg.customType === "esignStatus") {
    // ========================================
    // (2) 전자서명 전용 커스텀 컬럼
    // ========================================
    childCol = {
      id: cfg.id,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
      ),
      // 여기서 row.original.envelopes 등 활용하여 최신 전자서명 상태 표시
      cell: ({ row }) => {
        const data = row.original
        if (!data.envelopes || data.envelopes.length === 0) {
          return (
            <div className="text-sm text-gray-500">
              No E-Sign
            </div>
          )
        }

        // envelopes가 여러 개 있으면 최신(가장 최근 updatedAt) 가져오기
        const sorted = [...data.envelopes].sort((a, b) => {
          const dateA = new Date(a.updatedAt)
          const dateB = new Date(b.updatedAt)
          return dateB.getTime() - dateA.getTime()
        })
        const latest = sorted[0]

        // 상태에 따라 다른 UI 색상/아이콘
        const status = latest.envelopeStatus // "sent", "completed", ...
        const colorMap: Record<string, string> = {
          completed: "text-green-600",
          sent: "text-blue-600",
          voided: "text-red-600",
          // ...
        }
        const colorClass = colorMap[status] || "text-gray-700"

        return (
          <Button
            onClick={() => {
              // 다이얼로그 열기 등
              // 예: setRowAction({ row, type: "esign-detail" })
              setRowAction({ row, type: "esign-detail" })
            }}
            className={`underline underline-offset-2 ${colorClass}`}
          >
            {status}
          </Button>
        )
      },
      meta: {
        excelHeader: cfg.excelHeader,
        group: cfg.group,
        type: cfg.type,
      },
    }
  } else {
    // ========================================
    // (3) 일반 컬럼 (type: text/date/number 등)
    // ========================================
    childCol = {
      accessorKey: cfg.id,
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
      ),
      meta: {
        excelHeader: cfg.excelHeader,
        group: cfg.group,
        type: cfg.type,
      },
      cell: ({ row, cell }) => {
        // 날짜 포맷, 숫자 포맷 등 처리
        if (cfg.type === "date") {
          const dateVal = cell.getValue() as Date
          return formatDate(dateVal)
        }
        // ...
        return row.getValue(cfg.id) ?? ""
      },
    }
  }

  groupMap[groupName].push(childCol)
})

  // ----------------------------------------------------------------
  // 3-2) Create actual parent columns (groups) from the groupMap
  // ----------------------------------------------------------------
  const nestedColumns: ColumnDef<ContractDetail>[] = [];

  // Order can be fixed by pre-defining group order or sorting
  // Here we just use Object.entries order
  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
    if (groupName === "_noGroup") {
      // No group → Add as top-level columns
      nestedColumns.push(...colDefs);
    } else {
      // Parent column
      nestedColumns.push({
        id: groupName,
        header: groupName, // "Basic Info", "Metadata", etc.
        columns: colDefs,
      });
    }
  });

  // ----------------------------------------------------------------
  // 4) Final column array: nestedColumns + actionsColumn
  // ----------------------------------------------------------------
  return [
    ...nestedColumns,
    actionsColumn,
  ];
}