"use client"

import * as React from "react"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { PanelLeftClose, PanelLeftOpen } from "lucide-react"
import type {
  DataTableAdvancedFilterField,
  DataTableRowAction,
} from "@/types/table"
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { getColumns, EditingCellState } from "./rfq-table-column"
import { useEffect, useCallback, useMemo } from "react"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { RFQTableToolbarActions } from "./rfq-table-toolbar-actions"
import { getTechSalesRfqsWithJoin } from "@/lib/techsales-rfq/service"
import { toast } from "sonner"
import { useTablePresets } from "@/components/data-table/use-table-presets"
import { TablePresetManager } from "@/components/data-table/data-table-preset"
import { RfqDetailTables } from "./detail-table/rfq-detail-table"
import { cn } from "@/lib/utils"
import { ProjectDetailDialog } from "./project-detail-dialog"
import { RFQFilterSheet } from "./rfq-filter-sheet"

// 기본적인 RFQ 타입 정의 (repository selectTechSalesRfqsWithJoin 반환 타입에 맞춤)
interface TechSalesRfq {
  id: number
  rfqCode: string | null
  itemId: number
  itemName: string | null
  materialCode: string | null
  dueDate: Date
  rfqSendDate: Date | null
  status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed"
  picCode: string | null
  remark: string | null
  cancelReason: string | null
  createdAt: Date
  updatedAt: Date
  createdBy: number | null
  createdByName: string
  updatedBy: number | null
  updatedByName: string
  sentBy: number | null
  sentByName: string | null
  projectSnapshot: any
  seriesSnapshot: any
  pspid: string
  projNm: string
  sector: string
  projMsrm: number
  ptypeNm: string
  attachmentCount: number
  quotationCount: number
  // 필요에 따라 다른 필드들 추가
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: any
}

interface RFQListTableProps {
  promises: Promise<[Awaited<ReturnType<typeof getTechSalesRfqsWithJoin>>]>
  className?: string;
  calculatedHeight?: string; // 계산된 높이 추가
}

export function RFQListTable({
  promises,
  className,
  calculatedHeight
}: RFQListTableProps) {
  const searchParams = useSearchParams()
  
  // 필터 패널 상태
  const [isFilterPanelOpen, setIsFilterPanelOpen] = React.useState(false)
  
  // 선택된 RFQ 상태
  const [selectedRfq, setSelectedRfq] = React.useState<TechSalesRfq | null>(null)
  
  // 프로젝트 상세정보 다이얼로그 상태
  const [isProjectDetailOpen, setIsProjectDetailOpen] = React.useState(false)
  const [projectDetailRfq, setProjectDetailRfq] = React.useState<TechSalesRfq | null>(null)
  
  // 패널 collapse 상태
  const [panelHeight, setPanelHeight] = React.useState<number>(55)
  
  // 고정 높이 설정을 위한 상수 (실제 측정값으로 조정 필요)
  const LAYOUT_HEADER_HEIGHT = 64 // Layout Header 높이
  const LAYOUT_FOOTER_HEIGHT = 60 // Layout Footer 높이 (있다면 실제 값)
  const LOCAL_HEADER_HEIGHT = 72 // 로컬 헤더 바 높이 (p-4 + border)
  const FILTER_PANEL_WIDTH = 400 // 필터 패널 너비

  // 높이 계산
  // 필터 패널 높이 - Layout Header와 Footer 사이
  const FIXED_FILTER_HEIGHT = `calc(100vh - ${LAYOUT_HEADER_HEIGHT*2}px)`

  console.log(calculatedHeight)
  
  // 테이블 컨텐츠 높이 - 전달받은 높이에서 로컬 헤더 제외
  const FIXED_TABLE_HEIGHT = calculatedHeight 
    ? `calc(${calculatedHeight} - ${LOCAL_HEADER_HEIGHT}px)`
    : `calc(100vh - ${LAYOUT_HEADER_HEIGHT + LAYOUT_FOOTER_HEIGHT + LOCAL_HEADER_HEIGHT+76}px)` // fallback

  // Suspense 방식으로 데이터 처리
  const [promiseData] = React.use(promises)
  const tableData = promiseData

  const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechSalesRfq> | null>(null)
  const [editingCell, setEditingCell] = React.useState<EditingCellState | null>(null)

  // 초기 설정 정의
  const initialSettings = React.useMemo(() => ({
    page: parseInt(searchParams?.get('page') || '1'),
    perPage: parseInt(searchParams?.get('perPage') || '10'),
    sort: searchParams?.get('sort') ? JSON.parse(searchParams.get('sort')!) : [{ id: "updatedAt", desc: true }],
    filters: searchParams?.get('filters') ? JSON.parse(searchParams.get('filters')!) : [],
    joinOperator: (searchParams?.get('joinOperator') as "and" | "or") || "and",
    basicFilters: searchParams?.get('basicFilters') ? JSON.parse(searchParams.get('basicFilters')!) : [],
    basicJoinOperator: (searchParams?.get('basicJoinOperator') as "and" | "or") || "and",
    search: searchParams?.get('search') || '',
    from: searchParams?.get('from') || undefined,
    to: searchParams?.get('to') || undefined,
    columnVisibility: {},
    columnOrder: [],
    pinnedColumns: { left: [], right: [] },
    groupBy: [],
    expandedRows: []
  }), [searchParams])
  
  // DB 기반 프리셋 훅 사용
  const {
    presets,
    activePresetId,
    hasUnsavedChanges,
    isLoading: presetsLoading,
    createPreset,
    applyPreset,
    updatePreset,
    deletePreset,
    setDefaultPreset,
    renamePreset,
    getCurrentSettings,
  } = useTablePresets<TechSalesRfq>('rfq-list-table', initialSettings)
  
  // 비고 업데이트 함수
  const updateRemark = useCallback(async (rfqId: number, remark: string) => {
    try {
      // 기술영업 RFQ 비고 업데이트 함수 구현 필요
      // const result = await updateTechSalesRfqRemark(rfqId, remark);
      console.log("Update remark for RFQ:", rfqId, "with:", remark);
      
      toast.success("비고가 업데이트되었습니다");
    } catch (error) {
      console.error("비고 업데이트 오류:", error);
      toast.error("업데이트 중 오류가 발생했습니다");
    }
  }, [])
  
  // 조회 버튼 클릭 핸들러
  const handleSearch = () => {
    setIsFilterPanelOpen(false)
  }
  
  // 행 액션 처리
  useEffect(() => {
    if (rowAction) {
      switch (rowAction.type) {
        case "select":
          // 객체 참조 안정화를 위해 필요한 필드만 추출
          const rfqData = rowAction.row.original;
          setSelectedRfq({
            id: rfqData.id,
            rfqCode: rfqData.rfqCode,
            itemId: rfqData.itemId,
            itemName: rfqData.itemName,
            materialCode: rfqData.materialCode,
            dueDate: rfqData.dueDate,
            rfqSendDate: rfqData.rfqSendDate,
            status: rfqData.status,
            picCode: rfqData.picCode,
            remark: rfqData.remark,
            cancelReason: rfqData.cancelReason,
            createdAt: rfqData.createdAt,
            updatedAt: rfqData.updatedAt,
            createdBy: rfqData.createdBy,
            createdByName: rfqData.createdByName,
            updatedBy: rfqData.updatedBy,
            updatedByName: rfqData.updatedByName,
            sentBy: rfqData.sentBy,
            sentByName: rfqData.sentByName,
            projectSnapshot: rfqData.projectSnapshot,
            seriesSnapshot: rfqData.seriesSnapshot,
            pspid: rfqData.pspid,
            projNm: rfqData.projNm,
            sector: rfqData.sector,
            projMsrm: rfqData.projMsrm,
            ptypeNm: rfqData.ptypeNm,
            attachmentCount: rfqData.attachmentCount,
            quotationCount: rfqData.quotationCount,
          });
          break;
        case "project-detail":
          // 프로젝트 상세정보 다이얼로그 열기
          const projectRfqData = rowAction.row.original;
          setProjectDetailRfq({
            id: projectRfqData.id,
            rfqCode: projectRfqData.rfqCode,
            itemId: projectRfqData.itemId,
            itemName: projectRfqData.itemName,
            materialCode: projectRfqData.materialCode,
            dueDate: projectRfqData.dueDate,
            rfqSendDate: projectRfqData.rfqSendDate,
            status: projectRfqData.status,
            picCode: projectRfqData.picCode,
            remark: projectRfqData.remark,
            cancelReason: projectRfqData.cancelReason,
            createdAt: projectRfqData.createdAt,
            updatedAt: projectRfqData.updatedAt,
            createdBy: projectRfqData.createdBy,
            createdByName: projectRfqData.createdByName,
            updatedBy: projectRfqData.updatedBy,
            updatedByName: projectRfqData.updatedByName,
            sentBy: projectRfqData.sentBy,
            sentByName: projectRfqData.sentByName,
            projectSnapshot: projectRfqData.projectSnapshot,
            seriesSnapshot: projectRfqData.seriesSnapshot,
            pspid: projectRfqData.pspid,
            projNm: projectRfqData.projNm,
            sector: projectRfqData.sector,
            projMsrm: projectRfqData.projMsrm,
            ptypeNm: projectRfqData.ptypeNm,
            attachmentCount: projectRfqData.attachmentCount,
            quotationCount: projectRfqData.quotationCount,
          });
          setIsProjectDetailOpen(true);
          break;
        case "update":
          console.log("Update rfq:", rowAction.row.original)
          break;
        case "delete":
          console.log("Delete rfq:", rowAction.row.original)
          break;
      }
      setRowAction(null)
    }
  }, [rowAction])
  
  const columns = React.useMemo(
    () => getColumns({ 
      setRowAction,
      editingCell, 
      setEditingCell, 
      updateRemark 
    }),
    [editingCell, setEditingCell, updateRemark]
  )
  
  // 고급 필터 필드 정의
  const advancedFilterFields: DataTableAdvancedFilterField<TechSalesRfq>[] = [
    {
      id: "rfqCode",
      label: "RFQ No.",
      type: "text",
    },
    {
      id: "materialCode",
      label: "자재코드",
      type: "text",
    },
    {
      id: "itemName",
      label: "자재명",
      type: "text",
    },
    {
      id: "pspid",
      label: "프로젝트 ID",
      type: "text",
    },
    {
      id: "projNm",
      label: "프로젝트명",
      type: "text",
    },
    {
      id: "ptypeNm",
      label: "선종명",
      type: "text",
    },
    {
      id: "rfqSendDate",
      label: "RFQ 전송일",
      type: "date",
    },
    {
      id: "dueDate",
      label: "RFQ 마감일",
      type: "date",
    },
    {
      id: "createdByName",
      label: "요청자",
      type: "text",
    },
    {
      id: "status",
      label: "상태",
      type: "text",
    },
  ]
  
  // 현재 설정 가져오기
  const currentSettings = useMemo(() => {
    return getCurrentSettings()
  }, [getCurrentSettings])
  
  // useDataTable 초기 상태 설정
  const initialState = useMemo(() => {
    return {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      sorting: initialSettings.sort.filter((sortItem: any) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const columnExists = columns.some((col: any) => col.accessorKey === sortItem.id)
        return columnExists
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      }) as any,
      columnVisibility: currentSettings.columnVisibility,
      columnPinning: currentSettings.pinnedColumns,
    }
  }, [currentSettings, initialSettings.sort, columns])
  
  // useDataTable 훅 설정
  const { table } = useDataTable({
    data: tableData?.data || [],
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    columns: columns as any,
    pageCount: tableData?.pageCount || 0,
    rowCount: tableData?.total || 0,
    filterFields: [],
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState,
    getRowId: (originalRow) => String(originalRow.id),
    shallow: false,
    clearOnDefault: true,
    columnResizeMode: "onEnd",
  })

  // Get active basic filter count
  const getActiveBasicFilterCount = () => {
    try {
      const basicFilters = searchParams?.get('basicFilters')
      return basicFilters ? JSON.parse(basicFilters).length : 0
    } catch {
      return 0
    }
  }

  console.log(panelHeight)

  return (
    <div 
      className={cn("flex flex-col relative", className)}
      style={{ height: calculatedHeight }}
    >
      {/* Filter Panel - 계산된 높이 적용 */}
      <div 
        className={cn(
          "fixed left-0 bg-background border-r z-30 flex flex-col transition-all duration-300 ease-in-out overflow-hidden",
          isFilterPanelOpen ? "border-r shadow-lg" : "border-r-0"
        )}
        style={{ 
          width: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : '0px',
          top: `${LAYOUT_HEADER_HEIGHT*2}px`,
          height: FIXED_FILTER_HEIGHT
        }}
      >
        {/* Filter Content */}
        <div className="h-full">
          <RFQFilterSheet 
            isOpen={isFilterPanelOpen} 
            onClose={() => setIsFilterPanelOpen(false)}
            onSearch={handleSearch}
            isLoading={false}
          />
        </div>
      </div>

      {/* Main Content */}
      <div 
        className="flex flex-col transition-all duration-300 ease-in-out"
        style={{
          width: isFilterPanelOpen ? `calc(100% - ${FILTER_PANEL_WIDTH}px)` : '100%',
          marginLeft: isFilterPanelOpen ? `${FILTER_PANEL_WIDTH}px` : '0px',
          height: '100%'
        }}
      >
        {/* Header Bar - 고정 높이 */}
        <div 
          className="flex items-center justify-between p-4 bg-background border-b"
          style={{ 
            height: `${LOCAL_HEADER_HEIGHT}px`,
            flexShrink: 0
          }}
        >
          <div className="flex items-center gap-3">
            <Button 
              variant="outline" 
              size="sm" 
              type='button'
              onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
              className="flex items-center shadow-sm"
            >
              {isFilterPanelOpen ? <PanelLeftClose className="size-4"/> : <PanelLeftOpen className="size-4"/>}
              {getActiveBasicFilterCount() > 0 && (
                <span className="ml-2 bg-primary text-primary-foreground rounded-full px-2 py-0.5 text-xs">
                  {getActiveBasicFilterCount()}
                </span>
              )}
            </Button>
          </div>
          
          {/* Right side info */}
          <div className="text-sm text-muted-foreground">
            {tableData && (
              <span>총 {tableData.total || 0}건</span>
            )}
          </div>
        </div>

        {/* Table Content Area - 계산된 높이 사용 */}
        <div 
          className="relative bg-background"
          style={{ 
            height: FIXED_TABLE_HEIGHT,
            display: 'grid',
            gridTemplateRows: '1fr',
            gridTemplateColumns: '1fr'
          }}
        >
          <ResizablePanelGroup 
            direction="vertical" 
            className="w-full h-full"
          >
            <ResizablePanel
              defaultSize={60}
              minSize={25}
              maxSize={75}
              collapsible={false}
              onResize={(size) => {
                setPanelHeight(size)
              }}
              className="flex flex-col overflow-hidden"
            >
              {/* 상단 테이블 영역 */}
              <div className="flex-1 min-h-0 overflow-hidden">
                <DataTable 
                  table={table} 
                  maxHeight={`${panelHeight*0.5}vh`}
                >
                  <DataTableAdvancedToolbar
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    table={table as any}
                    filterFields={advancedFilterFields}
                    shallow={false}
                  >
                    <div className="flex items-center gap-2">
                      <TablePresetManager<TechSalesRfq>
                        presets={presets}
                        activePresetId={activePresetId}
                        currentSettings={currentSettings}
                        hasUnsavedChanges={hasUnsavedChanges}
                        isLoading={presetsLoading}
                        onCreatePreset={createPreset}
                        onUpdatePreset={updatePreset}
                        onDeletePreset={deletePreset}
                        onApplyPreset={applyPreset}
                        onSetDefaultPreset={setDefaultPreset}
                        onRenamePreset={renamePreset}
                      />
                      
                      <RFQTableToolbarActions 
                        selection={table}
                        onRefresh={() => {}}
                      />
                    </div>
                  </DataTableAdvancedToolbar>
                </DataTable>
              </div>
            </ResizablePanel>

            <ResizableHandle withHandle />

            <ResizablePanel
              minSize={25}
              defaultSize={40}
              collapsible={false}
              className="flex flex-col overflow-hidden"
            >
              {/* 하단 상세 테이블 영역 */}
              <div className="flex-1 min-h-0 overflow-hidden bg-background">
                <RfqDetailTables selectedRfq={selectedRfq} maxHeight={`${(100-panelHeight)*0.4}vh`}/>
              </div>
            </ResizablePanel>
          </ResizablePanelGroup>
        </div>
      </div>

      {/* 프로젝트 상세정보 다이얼로그 */}
      <ProjectDetailDialog
        open={isProjectDetailOpen}
        onOpenChange={setIsProjectDetailOpen}
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        selectedRfq={projectDetailRfq as any}
      />
    </div>
  )
}