// updated-enhanced-doc-table-columns.tsx
"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import { formatDate, formatDateTime } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { DataTableRowAction } from "@/types/table"
import { EnhancedDocumentsView } from "@/db/schema/vendorDocu"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  Ellipsis,
  AlertTriangle,
  Clock,
  CheckCircle,
  Upload,
  Calendar,
  User,
  FileText,
  Eye,
  Edit,
  Trash2,
  Building,
  Code
} from "lucide-react"
import { cn } from "@/lib/utils"

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<EnhancedDocumentsView> | null>>
  projectType: string | null
}

// 유틸리티 함수들
const getStatusColor = (status: string, isOverdue = false) => {
  if (isOverdue) return 'destructive'
  switch (status) {
    case 'COMPLETED': case 'APPROVED': return 'success'
    case 'IN_PROGRESS': return 'default'
    case 'SUBMITTED': case 'UNDER_REVIEW': return 'secondary'
    case 'REJECTED': return 'destructive'
    default: return 'outline'
  }
}

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case 'HIGH': return 'destructive'
    case 'MEDIUM': return 'default'
    case 'LOW': return 'secondary'
    default: return 'outline'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'PLANNED': return '계획됨'
    case 'IN_PROGRESS': return '진행중'
    case 'SUBMITTED': return '제출됨'
    case 'UNDER_REVIEW': return '검토중'
    case 'APPROVED': return '승인됨'
    case 'REJECTED': return '반려됨'
    case 'COMPLETED': return '완료됨'
    default: return status
  }
}

const getPriorityText = (priority: string) => {
  switch (priority) {
    case 'HIGH': return '높음'
    case 'MEDIUM': return '보통'
    case 'LOW': return '낮음'
    default: return priority
  }
}

// 마감일 정보 컴포넌트
const DueDateInfo = ({
  daysUntilDue,
  isOverdue,
  className = ""
}: {
  daysUntilDue: number | null
  isOverdue: boolean
  className?: string
}) => {
  if (isOverdue && daysUntilDue !== null && daysUntilDue < 0) {
    return (
      <div className={cn("flex items-center gap-1 text-red-600", className)}>
        <AlertTriangle className="w-4 h-4" />
        <span className="text-sm font-medium">{Math.abs(daysUntilDue)}일 지연</span>
      </div>
    )
  }

  if (daysUntilDue === 0) {
    return (
      <div className={cn("flex items-center gap-1 text-orange-600", className)}>
        <Clock className="w-4 h-4" />
        <span className="text-sm font-medium">오늘 마감</span>
      </div>
    )
  }

  if (daysUntilDue && daysUntilDue > 0 && daysUntilDue <= 3) {
    return (
      <div className={cn("flex items-center gap-1 text-orange-600", className)}>
        <Clock className="w-4 h-4" />
        <span className="text-sm font-medium">{daysUntilDue}일 남음</span>
      </div>
    )
  }

  if (daysUntilDue && daysUntilDue > 0) {
    return (
      <div className={cn("flex items-center gap-1 text-gray-600", className)}>
        <Calendar className="w-4 h-4" />
        <span className="text-sm">{daysUntilDue}일 남음</span>
      </div>
    )
  }

  return (
    <div className={cn("flex items-center gap-1 text-green-600", className)}>
      <CheckCircle className="w-4 h-4" />
      <span className="text-sm">완료</span>
    </div>
  )
}

export function getUpdatedEnhancedColumns({
  setRowAction,
  projectType
}: GetColumnsProps): ColumnDef<EnhancedDocumentsView>[] {
  const isPlantProject = projectType === "plant"

  
  // 기본 컬럼들
  const baseColumns: ColumnDef<EnhancedDocumentsView>[] = [
    // 체크박스 선택
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
          className="translate-y-0.5"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
          className="translate-y-0.5"
        />
      ),
      size: 40,
      enableSorting: false,
      enableHiding: false,
    },

    // 문서번호 + 우선순위
    {
      accessorKey: "docNumber",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="문서번호" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        return (
          <div className="flex flex-col gap-1 items-start">
            <span className="font-mono text-sm font-medium">{doc.docNumber}</span>
          </div>
        )
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "문서번호"
      },
    },
  ]

  // ✅ Ship 프로젝트용 추가 컬럼들
  const plantColumns: ColumnDef<EnhancedDocumentsView>[] = isPlantProject ? [
    // 벤더 문서번호
    {
      accessorKey: "vendorDocNumber",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="벤더 문서번호" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        return (
          <div className="flex flex-col gap-1 items-start">
            {doc.vendorDocNumber ? (
              <span className="font-mono text-sm text-blue-600">{doc.vendorDocNumber}</span>
            ) : (
              <span className="text-gray-400 text-sm">-</span>
            )}
          </div>
        )
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "벤더 문서번호"
      },
    },

    // 프로젝트 코드
    {
      accessorKey: "projectCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        return (
          <div className="flex items-center gap-2">
            {/* <Code className="w-4 h-4 text-gray-500" /> */}
            <span className="font-mono text-sm font-medium text-gray-700">
              {doc.projectCode || '-'}
            </span>
          </div>
        )
      },
      size: 100,
      enableResizing: true,
      meta: {
        excelHeader: "프로젝트 코드"
      },
    },

    // 벤더 정보
    {
      accessorKey: "vendorName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="벤더" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        return (
          <div className="flex flex-col gap-1 items-start">
            <div className="flex items-center gap-2">
              {/* <Building className="w-4 h-4 text-gray-500" /> */}
              <span className="text-sm font-medium text-gray-900">
                {doc.vendorName || '-'}
              </span>
            </div>
            {doc.vendorCode && (
              <span className="text-xs font-mono text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
                {doc.vendorCode}
              </span>
            )}
          </div>
        )
      },
      size: 150,
      enableResizing: true,
      meta: {
        excelHeader: "벤더명"
      },
    },
  ] : []

  // 나머지 공통 컬럼들
  const commonColumns: ColumnDef<EnhancedDocumentsView>[] = [
    // 문서명 + 담당자
    {
      accessorKey: "title",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="문서명" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        return (
          <div className="min-w-0 flex-1">
            <div className="font-medium text-gray-900 truncate" title={doc.title}>
              {doc.title}
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-500 mt-1">
              {doc.pic && (
                <span className="text-xs bg-gray-100 px-2 py-0.5 rounded">
                  PIC: {doc.pic}
                </span>
              )}
              {doc.currentStageAssigneeName && (
                <div className="flex items-center gap-1">
                  <User className="w-3 h-3" />
                  <span>{doc.currentStageAssigneeName}</span>
                </div>
              )}
            </div>
          </div>
        )
      },
      size: isPlantProject ? 200 : 250, // Ship 프로젝트일 때는 너비 조정
      enableResizing: true,
      meta: {
        excelHeader: "문서명"
      },
    },

    // 현재 스테이지
    {
      accessorKey: "currentStageName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="현재 스테이지" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        if (!doc.currentStageName) return <span className="text-gray-400">-</span>

        return (
          <div className="flex flex-col gap-1 items-start">
            <span className="text-sm font-medium">{doc.currentStageName}</span>
            <Badge
              variant={getStatusColor(doc.currentStageStatus || '', doc.isOverdue || false)}
              className="self-start inline-flex w-auto shrink-0 whitespace-nowrap text-xs"
            >
              {getStatusText(doc.currentStageStatus || '')}
            </Badge>
          </div>
        )
      },
      size: 140,
      enableResizing: true,
      meta: {
        excelHeader: "현재 스테이지"
      },
    },

    // 일정 정보
    {
      accessorKey: "currentStagePlanDate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="일정" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        if (!doc.currentStagePlanDate) return <span className="text-gray-400">-</span>

        return (
          <div className="flex flex-col gap-1">
            <div className="text-sm">
              <span className="text-gray-500">계획: </span>
              <span>{formatDate(doc.currentStagePlanDate)}</span>
            </div>
            {doc.currentStageActualDate && (
              <div className="text-sm">
                <span className="text-gray-500">실제: </span>
                <span>{formatDate(doc.currentStageActualDate)}</span>
              </div>
            )}
            <DueDateInfo
              daysUntilDue={doc.daysUntilDue}
              isOverdue={doc.isOverdue || false}
            />
          </div>
        )
      },
      size: 140,
      enableResizing: true,
      meta: {
        excelHeader: "계획일"
      },
    },

    // 진행률
    {
      accessorKey: "progressPercentage",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="진행률" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        const progress = doc.progressPercentage || 0
        const completed = doc.completedStages || 0
        const total = doc.totalStages || 0

        return (
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2">
              <Progress value={progress} className="flex-1" />
              <span className="text-sm font-medium text-gray-600 min-w-[3rem]">
                {progress}%
              </span>
            </div>
            <span className="text-xs text-gray-500">
              {completed} / {total} 스테이지
            </span>
          </div>
        )
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "진행률"
      },
    },

    // 최신 리비전
    {
      accessorKey: "latestRevision",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="최신 리비전" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        if (!doc.latestRevision) return <span className="text-gray-400">없음</span>

        return (
          <div className="flex flex-col gap-1 items-start">
            <span className="font-mono text-sm font-medium">{doc.latestRevision}</span>
            {doc.latestRevisionStatus && (
              <Badge variant={getStatusColor(doc.latestRevisionStatus)} className="self-start inline-flex w-auto shrink-0 whitespace-nowrap text-xs" >
                {getStatusText(doc.latestRevisionStatus)}
              </Badge>
            )}
            {doc.latestSubmittedDate && (
              <div className="text-xs text-gray-500">
                {formatDate(doc.latestSubmittedDate)}
              </div>
            )}
          </div>
        )
      },
      size: 140,
      enableResizing: true,
      meta: {
        excelHeader: "최신 리비전"
      },
    },

    // 업데이트 일시
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="업데이트" />
      ),
      cell: ({ cell }) => (
        <span className="text-sm text-gray-600">
          {formatDateTime(cell.getValue() as Date)}
        </span>
      ),
      size: 140,
      enableResizing: true,
      meta: {
        excelHeader: "업데이트"
      },
    },

    // 액션 메뉴
    {
      id: "actions",
      enableHiding: false,
      cell: function Cell({ row }) {
        const doc = row.original
        const canSubmit = doc.currentStageStatus === 'IN_PROGRESS'
        const canApprove = doc.currentStageStatus === 'SUBMITTED'
        const isPlantProject = projectType === "plant"

        // 메뉴 아이템들을 그룹별로 정의
        const viewActions = [
          {
            key: "view",
            label: "상세보기",
            icon: Eye,
            action: () => setRowAction({ row, type: "view" }),
            show: true
          }
        ]

        const editActions = [
          {
            key: "update",
            label: "편집",
            icon: Edit,
            action: () => setRowAction({ row, type: "update" }),
            show: isPlantProject
          }
        ]

        const fileActions = [
          {
            key: "upload",
            label: "리비전 업로드",
            icon: Upload,
            action: () => setRowAction({ row, type: "upload" }),
            show: canSubmit
          }
        ]

        const dangerActions = [
          {
            key: "delete",
            label: "삭제",
            icon: Trash2,
            action: () => setRowAction({ row, type: "delete" }),
            show: isPlantProject,
            className: "text-red-600",
            shortcut: "⌘⌫"
          }
        ]

        // 각 그룹에서 표시될 아이템이 있는지 확인
        const hasEditActions = editActions.some(action => action.show)
        const hasFileActions = fileActions.some(action => action.show)
        const hasDangerActions = dangerActions.some(action => action.show)

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                aria-label="Open menu"
                variant="ghost"
                className="flex size-7 p-0 data-[state=open]:bg-muted"
              >
                <Ellipsis className="size-4" aria-hidden="true" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              {/* 기본 액션 그룹 */}
              {viewActions.map(action => action.show && (
                <DropdownMenuItem
                  key={action.key}
                  onSelect={action.action}
                  className={action.className}
                >
                  <action.icon className="mr-2 h-4 w-4" />
                  {action.label}
                  {action.shortcut && (
                    <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
                  )}
                </DropdownMenuItem>
              ))}

              {/* 편집 액션 그룹 */}
              {hasEditActions && (
                <>
                  <DropdownMenuSeparator />
                  {editActions.map(action => action.show && (
                    <DropdownMenuItem
                      key={action.key}
                      onSelect={action.action}
                      className={action.className}
                    >
                      <action.icon className="mr-2 h-4 w-4" />
                      {action.label}
                      {action.shortcut && (
                        <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
                      )}
                    </DropdownMenuItem>
                  ))}
                </>
              )}

              {/* 파일 액션 그룹 */}
              {hasFileActions && (
                <>
                  <DropdownMenuSeparator />
                  {fileActions.map(action => action.show && (
                    <DropdownMenuItem
                      key={action.key}
                      onSelect={action.action}
                      className={action.className}
                    >
                      <action.icon className="mr-2 h-4 w-4" />
                      {action.label}
                      {action.shortcut && (
                        <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
                      )}
                    </DropdownMenuItem>
                  ))}
                </>
              )}

              {/* 위험한 액션 그룹 */}
              {hasDangerActions && (
                <>
                  <DropdownMenuSeparator />
                  {dangerActions.map(action => action.show && (
                    <DropdownMenuItem
                      key={action.key}
                      onSelect={action.action}
                      className={action.className}
                    >
                      <action.icon className="mr-2 h-4 w-4" />
                      {action.label}
                      {action.shortcut && (
                        <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
                      )}
                    </DropdownMenuItem>
                  ))}
                </>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
      size: 40,
    }
  ]

  // ✅ 모든 컬럼을 순서대로 결합
  return [
    ...baseColumns,      // 체크박스, 문서번호
    ...plantColumns,      // Ship 전용 컬럼들 (조건부)
    ...commonColumns     // 나머지 공통 컬럼들
  ]
}

// 확장된 행 컨텐츠 컴포넌트 (업데이트된 버전)
export const UpdatedExpandedRowContent = ({
  document
}: {
  document: EnhancedDocumentsView
}) => {
  if (!document.allStages || document.allStages.length === 0) {
    return (
      <div className="p-4 text-sm text-gray-500 italic">
        스테이지 정보가 없습니다.
      </div>
    )
  }

  return (
    <div className="p-4 w-1/2">
      <h4 className="font-medium mb-3 flex items-center gap-2">
        <FileText className="w-4 h-4" />
        전체 스테이지 현황
      </h4>

      <div className="grid gap-3">
        {document.allStages.map((stage, index) => (
          <div key={stage.id} className="flex items-center justify-between p-3 bg-white rounded-lg border">
            <div className="flex items-center gap-3">
              <div className="flex items-center gap-2">
                <div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-xs font-medium">
                  {stage.stageOrder || index + 1}
                </div>
                <div className={cn(
                  "w-3 h-3 rounded-full",
                  stage.stageStatus === 'COMPLETED' ? 'bg-green-500' :
                    stage.stageStatus === 'IN_PROGRESS' ? 'bg-blue-500' :
                      stage.stageStatus === 'SUBMITTED' ? 'bg-purple-500' :
                        'bg-gray-300'
                )} />
              </div>

              <div>
                <div className="font-medium text-sm">{stage.stageName}</div>
                {stage.assigneeName && (
                  <div className="text-xs text-gray-500 flex items-center gap-1 mt-1">
                    <User className="w-3 h-3" />
                    {stage.assigneeName}
                  </div>
                )}
              </div>
            </div>

            <div className="flex items-center gap-4 text-sm">
              <div>
                <span className="text-gray-500">계획: </span>
                <span>{formatDate(stage.planDate)}</span>
              </div>
              {stage.actualDate && (
                <div>
                  <span className="text-gray-500">완료: </span>
                  <span>{formatDate(stage.actualDate)}</span>
                </div>
              )}

              <div className="flex items-center gap-2">
                <Badge variant={getPriorityColor(stage.priority)} className="text-xs">
                  {getPriorityText(stage.priority)}
                </Badge>
                <Badge variant={getStatusColor(stage.stageStatus)} className="text-xs">
                  {getStatusText(stage.stageStatus)}
                </Badge>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}