// simplified-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 {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import {
  Ellipsis,
  FileText,
  Eye,
  Edit,
  Trash2,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { SimplifiedDocumentsView } from "@/db/schema"

// DocumentSelectionContext를 import (실제 파일 경로에 맞게 수정 필요)
// 예: import { DocumentSelectionContext } from "../user-vendor-document-display"
// 또는: import { DocumentSelectionContext } from "./user-vendor-document-display"
import { DocumentSelectionContext } from "@/components/ship-vendor-document/user-vendor-document-table-container"

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

// 날짜 표시 컴포넌트 (간단 버전)
const DateDisplay = ({ date, isSelected = false }: { date: string | null, isSelected?: boolean }) => {
  if (!date) return <span className="text-muted-foreground">-</span>
  
  return (
    <span className={cn(
      "text-sm",
      isSelected && "text-primary font-semibold"
    )}>
      {formatDate(date)}
    </span>
  )
}

export function getSimplifiedDocumentColumns({
  setRowAction,
}: GetColumnsProps): ColumnDef<SimplifiedDocumentsView>[] {

  const columns: ColumnDef<SimplifiedDocumentsView>[] = [
    // 라디오 버튼 같은 체크박스 선택
    {
      id: "select",
      header: ({ table }) => (
        <div className="flex items-center justify-center">
          <span className="text-xs text-muted-foreground">Select</span>
        </div>
      ),
      cell: ({ row }) => {
        const doc = row.original
        
        return (
          <SelectCell documentId={doc.documentId} />
        )
      },
      size: 40,
      enableSorting: false,
      enableHiding: false,
    },

    // 문서번호 (선택된 행 하이라이트 적용)
    {
      accessorKey: "docNumber",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Document No" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        
        return (
          <DocNumberCell doc={doc} />
        )
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "Document No"
      },
    },

    // 문서명 (선택된 행 하이라이트 적용)
    {
      accessorKey: "title",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Title" />
      ),
      cell: ({ row }) => {
        const doc = row.original
        
        return (
          <TitleCell doc={doc} />
        )
      },
      enableResizing: true,
      maxSize:300,
      meta: {
        excelHeader: "Title"
      },
    },

    {
      accessorKey: "discipline",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Discipline" />
      ),
      cell: ({ row }) => {
        return (
          <div className="text-center">
          {row.original.discipline}
        </div>
        )
      },
      enableResizing: true,
      maxSize:80,
      meta: {
        excelHeader: "discipline"
      },
    },

    {
      accessorKey: "managerENM",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Contact" />
      ),
      cell: ({ row }) => {
        return (
          <div className="text-center">
          {row.original.managerENM}
        </div>
        )
      },
      enableResizing: true,
      maxSize:80,
      meta: {
        excelHeader: "Contact"
      },
    },
    // 프로젝트 코드
    {
      accessorKey: "projectCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Project" />
      ),
      cell: ({ row }) => {
        const projectCode = row.original.projectCode
        
        return (
          <ProjectCodeCell projectCode={projectCode} documentId={row.original.documentId} />
        )
      },
      enableResizing: true,
      maxSize:100,

      meta: {
        excelHeader: "Project"
      },
    },

    // 1차 스테이지 그룹
    {
      id: "firstStageGroup",
      header: ({ table }) => {
        // 첫 번째 행의 firstStageName을 그룹 헤더로 사용
        const firstRow = table.getRowModel().rows[0]?.original
        const stageName = firstRow?.firstStageName || "First Stage"
        return (
          <div className="text-center font-medium text-foreground">
            {stageName}
          </div>
        )
      },
      columns: [
        {
          accessorKey: "firstStagePlanDate",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="Planned Date" />
          ),
          cell: ({ row }) => {
            return <FirstStagePlanDateCell row={row} />
          },
          enableResizing: true,
          meta: {
            excelHeader: "First Planned Date"
          },
        },
        {
          accessorKey: "firstStageActualDate",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="Actual Date" />
          ),
          cell: ({ row }) => {
            return <FirstStageActualDateCell row={row} />
          },
          enableResizing: true,
          meta: {
            excelHeader: "First Actual Date"
          },
        },
      ],
    },

    // 2차 스테이지 그룹
    {
      id: "secondStageGroup", 
      header: ({ table }) => {
        // 첫 번째 행의 secondStageName을 그룹 헤더로 사용
        const firstRow = table.getRowModel().rows[0]?.original
        const stageName = firstRow?.secondStageName || "Second Stage"
        return (
          <div className="text-center font-medium text-foreground">
            {stageName}
          </div>
        )
      },
      columns: [
        {
          accessorKey: "secondStagePlanDate",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="Planned Date" />
          ),
          cell: ({ row }) => {
            return <SecondStagePlanDateCell row={row} />
          },
          enableResizing: true,
          meta: {
            excelHeader: "Second Planned Date"
          },
        },
        {
          accessorKey: "secondStageActualDate",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="Actual Date" />
          ),
          cell: ({ row }) => {
            return <SecondStageActualDateCell row={row} />
          },
          enableResizing: true,
          meta: {
            excelHeader: "Second Actual Date"
          },
        },
      ],
    },

    // 첨부파일 수
    {
      accessorKey: "attachmentCount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Files" />
      ),
      cell: ({ row }) => {
        const count = row.original.attachmentCount || 0
        
        return (
          <AttachmentCountCell count={count} documentId={row.original.documentId} />
        )
      },
      size: 60,
      enableResizing: true,
      meta: {
        excelHeader: "Attachments"
      },
    },

    // 업데이트 일시
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Updated" />
      ),
      cell: ({ cell, row }) => {
        return (
          <UpdatedAtCell updatedAt={cell.getValue() as Date} documentId={row.original.documentId} />
        )
      },
      enableResizing: true,
      meta: {
        excelHeader: "Updated"
      },
    },

    // 액션 버튼
    // {
    //   id: "actions",
    //   header: () => <span className="sr-only">Actions</span>,
    //   cell: ({ row }) => {
    //     const doc = row.original
    //     return (
    //       <DropdownMenu>
    //         <DropdownMenuTrigger asChild>
    //           <Button variant="ghost" className="h-8 w-8 p-0">
    //             <span className="sr-only">Open menu</span>
    //             <Ellipsis className="h-4 w-4" />
    //           </Button>
    //         </DropdownMenuTrigger>
    //         <DropdownMenuContent align="end">
    //           <DropdownMenuItem 
    //             onClick={() => setRowAction({ type: "view", row: doc })}
    //           >
    //             <Eye className="mr-2 h-4 w-4" />
    //             보기
    //           </DropdownMenuItem>
    //           <DropdownMenuItem 
    //             onClick={() => setRowAction({ type: "edit", row: doc })}
    //           >
    //             <Edit className="mr-2 h-4 w-4" />
    //             편집
    //           </DropdownMenuItem>
    //           <DropdownMenuSeparator />
    //           <DropdownMenuItem 
    //             onClick={() => setRowAction({ type: "delete", row: doc })}
    //             className="text-red-600"
    //           >
    //             <Trash2 className="mr-2 h-4 w-4" />
    //             삭제
    //             <DropdownMenuShortcut>⌫</DropdownMenuShortcut>
    //           </DropdownMenuItem>
    //         </DropdownMenuContent>
    //       </DropdownMenu>
    //     )
    //   },
    //   size: 50,
    //   enableSorting: false,
    //   enableHiding: false,
    // },
  ]

  return columns
}

// 개별 셀 컴포넌트들 (Context 사용)
function SelectCell({ documentId }: { documentId: number }) {
  const { selectedDocumentId, setSelectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === documentId;

  return (
    <div className="flex items-center justify-center">
      <input
        type="radio"
        checked={isSelected}
        onChange={() => {
          const newSelection = isSelected ? null : documentId;
          setSelectedDocumentId(newSelection);
        }}
        className="cursor-pointer w-4 h-4"
      />
    </div>
  );
}

function DocNumberCell({ doc }: { doc: SimplifiedDocumentsView }) {
  const { selectedDocumentId, setSelectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === doc.documentId;

  return (
    <div 
      className={cn(
        "font-mono text-sm font-medium cursor-pointer px-2 py-1 rounded transition-colors",
        isSelected 
          ? "text-primary font-bold bg-primary/10" 
          : "hover:bg-muted/50"
      )}
      onClick={() => {
        const newSelection = isSelected ? null : doc.documentId;
        setSelectedDocumentId(newSelection);
      }}
    >
      {doc.docNumber}
    </div>
  );
}

function TitleCell({ doc }: { doc: SimplifiedDocumentsView }) {
  const { selectedDocumentId, setSelectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === doc.documentId;

  return (
    <div 
      className={cn(
        "font-medium text-foreground truncate max-w-[300px] cursor-pointer px-2 py-1 rounded transition-colors",
        isSelected 
          ? "text-primary font-bold bg-primary/10" 
          : "hover:bg-muted/50"
      )} 
      title={doc.title}
      onClick={() => {
        const newSelection = isSelected ? null : doc.documentId;
        setSelectedDocumentId(newSelection);
      }}
    >
      {doc.title}
    </div>
  );
}

function ProjectCodeCell({ projectCode, documentId }: { projectCode: string | null, documentId: number }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === documentId;

  if (!projectCode) return <span className="text-muted-foreground">-</span>;
  
  return (
    <span className={cn(
      "text-sm font-medium",
      isSelected && "text-primary font-bold"
    )}>
      {projectCode}
    </span>
  );
}

function FirstStagePlanDateCell({ row }: { row: any }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === row.original.documentId;
  
  return <DateDisplay date={row.original.firstStagePlanDate} isSelected={isSelected} />;
}

function FirstStageActualDateCell({ row }: { row: any }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === row.original.documentId;
  const date = row.original.firstStageActualDate;
  
  return (
    <div className={cn(
      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
    )}>
      <DateDisplay date={date} isSelected={isSelected && !date} />
      {date && <span className="text-xs block">✓ 완료</span>}
    </div>
  );
}

function SecondStagePlanDateCell({ row }: { row: any }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === row.original.documentId;
  
  return <DateDisplay date={row.original.secondStagePlanDate} isSelected={isSelected} />;
}

function SecondStageActualDateCell({ row }: { row: any }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === row.original.documentId;
  const date = row.original.secondStageActualDate;
  
  return (
    <div className={cn(
      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
    )}>
      <DateDisplay date={date} isSelected={isSelected && !date} />
      {date && <span className="text-xs block">✓ 완료</span>}
    </div>
  );
}

function AttachmentCountCell({ count, documentId }: { count: number, documentId: number }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === documentId;

  return (
    <div className="flex items-center justify-center gap-1">
      <FileText className="w-4 h-4 text-muted-foreground" />
      <span className={cn(
        "text-sm font-medium",
        isSelected && "text-primary font-bold"
      )}>
        {count}
      </span>
    </div>
  );
}

function UpdatedAtCell({ updatedAt, documentId }: { updatedAt: Date, documentId: number }) {
  const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
  const isSelected = selectedDocumentId === documentId;

  return (
    <span className={cn(
      "text-sm text-muted-foreground",
      isSelected && "text-primary font-semibold"
    )}>
      {formatDateTime(updatedAt)}
    </span>
  );
}