"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, useRef, useMemo, useLayoutEffect } from "react"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { RFQTableToolbarActions } from "./rfq-table-toolbar-actions"
import { ProcurementRfqsView } from "@/db/schema"
import { getPORfqs } from "../services"
import { toast } from "sonner"
import { updateRfqRemark } from "@/lib/procurement-rfqs/services"
import { useTablePresets } from "@/components/data-table/use-table-presets"
import { TablePresetManager } from "@/components/data-table/data-table-preset"
import { Loader2 } from "lucide-react"
import { RFQFilterSheet } from "./rfq-filter-sheet"
import { RfqDetailTables } from "./detail-table/rfq-detail-table"
import { cn } from "@/lib/utils"

interface RFQListTableProps {
  promises: Promise<[Awaited<ReturnType<typeof getPORfqs>>]>
  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<ProcurementRfqsView | null>(null)
  
  // 패널 collapse 상태
  const [isTopCollapsed, setIsTopCollapsed] = React.useState(false)
  const [panelHeight, setPanelHeight] = React.useState<number>(55)
  
  // refs
  const headerRef = React.useRef<HTMLDivElement>(null)

  // 고정 높이 설정을 위한 상수 (실제 측정값으로 조정 필요)
  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<ProcurementRfqsView> | 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<ProcurementRfqsView>('rfq-list-table', initialSettings)
  
  // 비고 업데이트 함수
  const updateRemark = async (rfqId: number, remark: string) => {
    try {
      const result = await updateRfqRemark(rfqId, remark);
      
      if (result.success) {
        toast.success("비고가 업데이트되었습니다");
      } else {
        toast.error(result.message || "업데이트 중 오류가 발생했습니다");
      }
    } catch (error) {
      console.error("비고 업데이트 오류:", error);
      toast.error("업데이트 중 오류가 발생했습니다");
    }
  }
  
  // 행 액션 처리
  useEffect(() => {
    if (rowAction) {
      switch (rowAction.type) {
        case "select":
          setSelectedRfq(rowAction.row.original)
          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 
    }),
    [setRowAction, editingCell, setEditingCell, updateRemark]
  )
  
  // 고급 필터 필드 정의
  const advancedFilterFields: DataTableAdvancedFilterField<ProcurementRfqsView>[] = [
    {
      id: "rfqCode",
      label: "RFQ No.",
      type: "text",
    },
    {
      id: "projectCode",
      label: "프로젝트",
      type: "text",
    },
    {
      id: "itemCode",
      label: "자재그룹",
      type: "text",
    },
    {
      id: "itemName",
      label: "자재명",
      type: "text",
    },
    {
      id: "rfqSealedYn",
      label: "RFQ 밀봉여부",
      type: "text",
    },
    {
      id: "majorItemMaterialCode",
      label: "자재코드",
      type: "text",
    },
    {
      id: "rfqSendDate",
      label: "RFQ 전송일",
      type: "date",
    },
    {
      id: "dueDate",
      label: "RFQ 마감일",
      type: "date",
    },
    {
      id: "createdByUserName",
      label: "요청자",
      type: "text",
    },
  ]
  
  // 현재 설정 가져오기
  const currentSettings = useMemo(() => {
    return getCurrentSettings()
  }, [getCurrentSettings])
  
  // useDataTable 초기 상태 설정
  const initialState = useMemo(() => {
    return {
      sorting: initialSettings.sort.filter(sortItem => {
        const columnExists = columns.some(col => col.accessorKey === sortItem.id)
        return columnExists
      }) as any,
      columnVisibility: currentSettings.columnVisibility,
      columnPinning: currentSettings.pinnedColumns,
    }
  }, [currentSettings, initialSettings.sort, columns])
  
  // useDataTable 훅 설정 (PQ와 동일한 설정)
  const { table } = useDataTable({
    data: tableData?.data || [],
    columns,
    pageCount: tableData?.pageCount || 0,
    rowCount: tableData?.total || 0,
    filterFields: [], // PQ와 동일하게 빈 배열
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState,
    getRowId: (originalRow) => String(originalRow.id),
    shallow: false, // PQ와 동일하게 false
    clearOnDefault: true,
  })

  // 조회 버튼 클릭 핸들러
  const handleSearch = () => {
    setIsFilterPanelOpen(false)
  }

  // Get active basic filter count (PQ와 동일한 방식)
  const getActiveBasicFilterCount = () => {
    try {
      const basicFilters = searchParams.get('basicFilters')
      return basicFilters ? JSON.parse(basicFilters).length : 0
    } catch (e) {
      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 
          ref={headerRef}
          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} 
                  // className="h-full"
                  maxHeight={`${panelHeight*0.5}vh`}
                >
                  <DataTableAdvancedToolbar
                    table={table}
                    filterFields={advancedFilterFields}
                    shallow={false}
                  >
                    <div className="flex items-center gap-2">
                      <TablePresetManager<ProcurementRfqsView>
                        presets={presets}
                        activePresetId={activePresetId}
                        currentSettings={currentSettings}
                        hasUnsavedChanges={hasUnsavedChanges}
                        isLoading={presetsLoading}
                        onCreatePreset={createPreset}
                        onUpdatePreset={updatePreset}
                        onDeletePreset={deletePreset}
                        onApplyPreset={applyPreset}
                        onSetDefaultPreset={setDefaultPreset}
                        onRenamePreset={renamePreset}
                      />
                      
                      <RFQTableToolbarActions 
                        table={table}
                        localData={tableData}
                        setLocalData={() => {}}
                        onSuccess={() => {}}
                      />
                    </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>
    </div>
  )
}