"use client"

import * as React from "react"
import { forwardRef, useImperativeHandle, useLayoutEffect, useMemo } from "react"
import { DataTable } from "@/components/data-table/data-table"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { AvlVendorAddAndModifyDialog } from "./avl-vendor-add-and-modify-dialog"
import { getProjectAvlVendorInfo, createAvlVendorInfo, updateAvlVendorInfo, deleteAvlVendorInfo, finalizeProjectAvl } from "../service"
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from "@tanstack/react-table"
import { GetProjectAvlSchema } from "../validations"
import { AvlDetailItem, AvlVendorInfoInput } from "../types"
import { toast } from "sonner"
import { getProjectAvlColumns } from "./project-avl-table-columns"
import {
  ProjectDisplayField,
  ProjectFileField
} from "../components/project-field-components"
import { ProjectSearchStatus } from "../components/project-field-utils"
import { useSession } from "next-auth/react"
import { UnifiedProjectSelector, UnifiedProject, getProjectInfoByCode } from "@/components/common/project"


// 프로젝트 AVL 테이블에서는 AvlDetailItem을 사용
export type ProjectAvlItem = AvlDetailItem

// ref를 통해 외부에서 접근할 수 있는 메소드들
export interface ProjectAvlTableRef {
  getSelectedIds: () => number[]
}

interface ProjectAvlTableProps {
  onSelectionChange?: (count: number) => void
  resetCounter?: number
  projectCode?: string // 프로젝트 코드 필터
  avlListId?: number // AVL 리스트 ID (관리 영역 표시용)
  onProjectCodeChange?: (projectCode: string) => void // 프로젝트 코드 변경 콜백
  reloadTrigger?: number
}


export const ProjectAvlTable = forwardRef<ProjectAvlTableRef, ProjectAvlTableProps>(({
  onSelectionChange,
  resetCounter,
  projectCode,
  avlListId,
  onProjectCodeChange,
  reloadTrigger
}, ref) => {

  const { data: sessionData } = useSession()

  const [data, setData] = React.useState<ProjectAvlItem[]>([])
  const [pageCount, setPageCount] = React.useState(0)
  const [originalFile, setOriginalFile] = React.useState<string>("")
  const [localProjectCode, setLocalProjectCode] = React.useState<string>(projectCode || "")
  
  // 프로젝트 선택 상태
  const [selectedProject, setSelectedProject] = React.useState<UnifiedProject | undefined>(undefined)

  // 행 추가/수정 다이얼로그 상태
  const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false)
  const [editingItem, setEditingItem] = React.useState<AvlDetailItem | undefined>(undefined)

  // 프로젝트 정보 상태
  const [projectInfo, setProjectInfo] = React.useState<{
    projectName: string
    constructionSector: string
    shipType: string
    htDivision: string
  } | null>(null)

  // 프로젝트 검색 상태
  const [projectSearchStatus, setProjectSearchStatus] = React.useState<ProjectSearchStatus>('idle')

  // 검색 버튼 클릭 여부 상태
  const [isSearchClicked, setIsSearchClicked] = React.useState(false)

  // 페이지네이션 상태
  const [pagination, setPagination] = React.useState({
    pageIndex: 0,
    pageSize: 10,
  })



  // 데이터 로드 함수
  const loadData = React.useCallback(async (searchParams: Partial<GetProjectAvlSchema> = {}) => {
    try {
      const params = {
        page: searchParams.page ?? 1,
        perPage: searchParams.perPage ?? 10,
        sort: searchParams.sort ?? [{ id: "no", desc: false }],
        flags: searchParams.flags ?? [],
        projectCode: localProjectCode || "",
        equipBulkDivision: (searchParams.equipBulkDivision as "EQUIP" | "BULK") ?? "EQUIP",
        disciplineCode: searchParams.disciplineCode ?? "",
        disciplineName: searchParams.disciplineName ?? "",
        materialNameCustomerSide: searchParams.materialNameCustomerSide ?? "",
        packageCode: searchParams.packageCode ?? "",
        packageName: searchParams.packageName ?? "",
        materialGroupCode: searchParams.materialGroupCode ?? "",
        materialGroupName: searchParams.materialGroupName ?? "",
        vendorName: searchParams.vendorName ?? "",
        vendorCode: searchParams.vendorCode ?? "",
        avlVendorName: searchParams.avlVendorName ?? "",
        tier: searchParams.tier ?? "",
        filters: searchParams.filters ?? [],
        joinOperator: searchParams.joinOperator ?? "and",
        search: searchParams.search ?? "",
      }
      console.log('ProjectAvlTable - API call params:', params)
      const result = await getProjectAvlVendorInfo(params)
      console.log('ProjectAvlTable - API result:', {
        dataCount: result.data.length,
        pageCount: result.pageCount,
        requestedPage: params.page
      })
      setData(result.data)
      setPageCount(result.pageCount)
    } catch (error) {
      console.error("프로젝트 AVL 데이터 로드 실패:", error)
      setData([])
      setPageCount(0)
    } finally {
      // 로딩 상태 처리 완료
    }
  }, [localProjectCode])



  // reloadTrigger가 변경될 때마다 데이터 리로드
  React.useEffect(() => {
    if (reloadTrigger && reloadTrigger > 0) {
      console.log('ProjectAvlTable - reloadTrigger changed, reloading data')
      loadData({})
    }
  }, [reloadTrigger, loadData])

  // 초기 데이터 로드 (검색 버튼이 눌렸을 때만)
  React.useEffect(() => {
    if (localProjectCode && isSearchClicked) {
      loadData({})
    }
  }, [loadData, localProjectCode, isSearchClicked])

  // 파일 업로드 핸들러
  const handleFileUpload = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setOriginalFile(file.name)
      // TODO: 실제 파일 업로드 로직 구현
      console.log("파일 업로드:", file.name)
    }
  }, [])

  // 프로젝트 검색 함수 (공통 로직)
  const searchProject = React.useCallback(async (projectCode: string) => {
    if (!projectCode.trim()) {
      setProjectInfo(null)
      setProjectSearchStatus('idle')
      setData([])
      setPageCount(0)
      return
    }

    setProjectSearchStatus('searching') // 검색 시작 상태로 변경

    try {
      const projectData = await getProjectInfoByCode(projectCode.trim(), 'both')

      if (projectData) {
        // 프로젝트 정보 설정
        setProjectInfo({
          projectName: projectData.projectName || "",
          constructionSector: "조선", // 기본값으로 조선 설정 (필요시 로직 변경)
          shipType: projectData.shipType || projectData.projectMsrm || "",
          htDivision: projectData.projectHtDivision || ""
        })

        // 검색 상태 설정
        if (projectData.source === 'projects') {
          setProjectSearchStatus('success-projects')
        } else {
          setProjectSearchStatus('success-bidding')
        }

        const sourceMessage = projectData.source === 'projects' ? '프로젝트' : '견적프로젝트'
        toast.success(`${sourceMessage}에서 프로젝트 정보를 성공적으로 불러왔습니다.`)

        // 검색 성공 시 AVL 데이터 로드 트리거
        setIsSearchClicked(true)
      } else {
        // 프로젝트를 찾을 수 없는 경우
        setProjectInfo(null)
        setProjectSearchStatus('error')
        setData([])
        setPageCount(0)
        toast.error("입력하신 프로젝트 코드를 찾을 수 없습니다.")
      }
    } catch (error) {
      console.error("프로젝트 정보 조회 실패:", error)
      setProjectInfo(null)
      setProjectSearchStatus('error')
      setData([])
      setPageCount(0)
      toast.error("프로젝트 정보를 불러오는데 실패했습니다.")
    }
  }, [setIsSearchClicked])


  // 프로젝트 선택 핸들러
  const handleProjectSelect = React.useCallback(async (project: UnifiedProject) => {
    setSelectedProject(project)
    setLocalProjectCode(project.code)
    onProjectCodeChange?.(project.code)
    
    // 검색 시 페이지를 1페이지로 리셋
    setPagination(prev => ({ ...prev, pageIndex: 0 }))
    
    // 선택된 프로젝트로 자동 검색
    await searchProject(project.code)
  }, [onProjectCodeChange, searchProject])


  // 행 추가 핸들러
  const handleAddRow = React.useCallback(() => {
    if (!localProjectCode.trim()) {
      toast.error("프로젝트 코드를 먼저 입력해주세요.")
      return
    }
    if (!projectInfo) {
      toast.error("프로젝트 정보를 불러올 수 없습니다.")
      return
    }
    setIsAddDialogOpen(true)
  }, [localProjectCode, projectInfo])


  // 다이얼로그에서 항목 추가 핸들러
  const handleAddItem = React.useCallback(async (itemData: Omit<AvlVendorInfoInput, 'avlListId'>) => {
    try {
      // DB에 실제 저장할 데이터 준비 (avlListId는 나중에 최종 확정 시 설정)
      const saveData: AvlVendorInfoInput = {
        ...itemData,
        projectCode: localProjectCode, // 현재 프로젝트 코드 저장
        avlListId: avlListId || undefined // 있으면 설정, 없으면 undefined (null로 저장됨)
      }

      // DB에 저장
      const result = await createAvlVendorInfo(saveData)

      if (result) {
        toast.success("새 항목이 성공적으로 추가되었습니다.")

        // 데이터 새로고침
        loadData({})
      } else {
        toast.error("항목 추가에 실패했습니다.")
      }
    } catch (error) {
      console.error("항목 추가 실패:", error)
      toast.error("항목 추가 중 오류가 발생했습니다.")
    }
  }, [avlListId, loadData, localProjectCode])

  // 다이얼로그에서 항목 수정 핸들러
  const handleUpdateItem = React.useCallback(async (id: number, itemData: Omit<AvlVendorInfoInput, 'avlListId'>) => {
    try {
      // DB에 실제 수정
      const result = await updateAvlVendorInfo(id, itemData)

      if (result) {
        toast.success("항목이 성공적으로 수정되었습니다.")

        // 데이터 새로고침
        loadData({})

        // 다이얼로그 닫기 및 수정 모드 해제
        setIsAddDialogOpen(false)
        setEditingItem(undefined)
      } else {
        toast.error("항목 수정에 실패했습니다.")
      }
    } catch (error) {
      console.error("항목 수정 실패:", error)
      toast.error("항목 수정 중 오류가 발생했습니다.")
    }
  }, [loadData])

  // 테이블 메타 설정
  const tableMeta = React.useMemo(() => ({}), [])

  const table = useReactTable({
    data,
    columns: getProjectAvlColumns(),
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    manualPagination: true,
    pageCount,
    state: {
      pagination,
    },
    onPaginationChange: (updater) => {
      // 페이지네이션 상태 업데이트
      const newPaginationState = typeof updater === 'function' ? updater(pagination) : updater

      console.log('ProjectAvlTable - Pagination changed:', {
        currentState: pagination,
        newPaginationState,
        localProjectCode,
        isSearchClicked,
        willLoadData: localProjectCode && isSearchClicked
      })

      setPagination(newPaginationState)

      if (localProjectCode && isSearchClicked) {
        const apiParams = {
          page: newPaginationState.pageIndex + 1,
          perPage: newPaginationState.pageSize,
        }
        console.log('ProjectAvlTable - Loading data with params:', apiParams)
        loadData(apiParams)
      }
    },
    meta: tableMeta,
  })

  // 외부에서 선택된 ID들을 가져올 수 있도록 ref에 메소드 노출
  useImperativeHandle(ref, () => ({
    getSelectedIds: () => {
      const selectedRows = table.getFilteredSelectedRowModel().rows
      return selectedRows.map(row => row.original.id)
    }
  }))

    // 항목 수정 핸들러 (버튼 클릭)
  const handleEditItem = React.useCallback(() => {
    const selectedRows = table.getFilteredSelectedRowModel().rows

    if (selectedRows.length !== 1) {
      toast.error("수정할 항목을 하나만 선택해주세요.")
      return
    }

    const selectedItem = selectedRows[0].original
    setEditingItem(selectedItem)
    setIsAddDialogOpen(true)
  }, [table])

  // 항목 삭제 핸들러
  const handleDeleteItems = React.useCallback(async () => {
    const selectedRows = table.getFilteredSelectedRowModel().rows

    if (selectedRows.length === 0) {
      toast.error("삭제할 항목을 선택해주세요.")
      return
    }

    // 사용자 확인
    const confirmed = window.confirm(`선택한 ${selectedRows.length}개 항목을 정말 삭제하시겠습니까?`)
    if (!confirmed) return

    try {
      // 선택된 항목들을 DB에서 삭제
      const deletePromises = selectedRows.map(async (row) => {
        await deleteAvlVendorInfo(row.original.id)
      })

      await Promise.all(deletePromises)

      toast.success(`${selectedRows.length}개 항목이 삭제되었습니다.`)

      // 데이터 새로고침
      loadData({})

      // 선택 해제
      table.toggleAllPageRowsSelected(false)
    } catch (error) {
      console.error("항목 삭제 실패:", error)
      toast.error("항목 삭제 중 오류가 발생했습니다.")
    }
  }, [table, loadData])

  // 최종 확정 다이얼로그 상태
  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = React.useState(false)

  // 최종 확정 핸들러
  const handleFinalizeAvl = React.useCallback(async () => {
    // 1. 필수 조건 검증
    if (!localProjectCode.trim()) {
      toast.error("프로젝트 코드를 먼저 입력해주세요.")
      return
    }

    if (!projectInfo) {
      toast.error("프로젝트 정보를 불러올 수 없습니다. 프로젝트 코드를 다시 확인해주세요.")
      return
    }

    if (data.length === 0) {
      toast.error("확정할 AVL 벤더 정보가 없습니다.")
      return
    }

    // 2. 확인 다이얼로그 열기
    setIsConfirmDialogOpen(true)
  }, [localProjectCode, projectInfo, data.length])

  // 실제 최종 확정 실행 함수
  const executeFinalizeAvl = React.useCallback(async () => {
    try {
      // 3. 현재 데이터의 모든 ID 수집 (전체 레코드 기준)
      const avlVendorInfoIds = data.map(item => item.id)

      // 4. 최종 확정 실행
      const result = await finalizeProjectAvl(
        localProjectCode,
        projectInfo!,
        avlVendorInfoIds,
        sessionData?.user?.name || ""
      )

      if (result.success) {
        toast.success(result.message)
        
        // 5. 데이터 새로고침
        loadData({})
        
        // 6. 선택 해제
        table.toggleAllPageRowsSelected(false)
      } else {
        toast.error(result.message)
      }
    } catch (error) {
      console.error("AVL 최종 확정 실패:", error)
      toast.error("AVL 최종 확정 중 오류가 발생했습니다.")
    } finally {
      setIsConfirmDialogOpen(false)
    }
  }, [localProjectCode, projectInfo, data, table, loadData, sessionData?.user?.name])

  // 선택된 행 개수 (안정적인 계산을 위해 useMemo 사용)
  const selectedRows = table.getFilteredSelectedRowModel().rows
  const selectedRowCount = useMemo(() => {
    const count = selectedRows.length
    console.log('ProjectAvlTable - selectedRowCount calculated:', count)
    return count
  }, [selectedRows])

  // 선택 상태 변경 시 콜백 호출
  useLayoutEffect(() => {
    console.log('ProjectAvlTable - onSelectionChange called with count:', selectedRowCount)
    onSelectionChange?.(selectedRowCount)
  }, [selectedRowCount, onSelectionChange])

  // 선택 해제 요청이 오면 모든 선택 해제
  React.useEffect(() => {
    if (resetCounter && resetCounter > 0) {
      table.toggleAllPageRowsSelected(false)
    }
  }, [resetCounter, table])


  return (
    <div className="h-full flex flex-col">
      <div className="mb-2">
        <div className="flex items-center justify-between mb-2">
          <h4 className="font-medium">프로젝트 AVL</h4>
          <div className="flex gap-1">
            <Button variant="outline" size="sm" onClick={handleAddRow}>
              행 추가
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleEditItem}
              disabled={table.getFilteredSelectedRowModel().rows.length !== 1}
            >
              항목 수정
            </Button>
            {/* <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              파일 업로드
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              자동 매핑
            </Button>
            <Button variant="outline" size="sm" onClick={() => toast.info("개발 중입니다.")}>
              강제 매핑
            </Button> */}
            <Button variant="outline" size="sm" onClick={handleDeleteItems}>
              항목 삭제
            </Button>

            {/* 최종 확정 버튼 */}
            <Button 
              variant="outline" 
              size="sm" 
              onClick={handleFinalizeAvl}
              disabled={!localProjectCode.trim() || !projectInfo || data.length === 0}
            >
              최종 확정
            </Button>
          </div>
        </div>
      </div>

      {/* 조회대상 관리영역 */}
      <div className="mb-4 p-4 border rounded-lg bg-muted/50">
        <div className="flex gap-4 overflow-x-auto pb-2">
            {/* 프로젝트 선택 */}
            <div className="flex flex-col gap-1 min-w-[350px]">
              <label className="text-sm font-medium">프로젝트</label>
              <UnifiedProjectSelector
                selectedProject={selectedProject}
                onProjectSelect={handleProjectSelect}
                searchOptions={{ searchFrom: 'both' }}
                placeholder="프로젝트를 선택하세요"
                className="h-9"
              />
            </div>

            {/* 프로젝트명 */}
            <ProjectDisplayField
              label="프로젝트명"
              value={projectInfo?.projectName || ''}
              status={projectSearchStatus}
              minWidth="250px"
            />

            {/* 원본파일 */}
            <ProjectFileField
              label="원본파일"
              originalFile={originalFile}
              onFileUpload={handleFileUpload}
            />

            {/* 공사부문 */}
            <ProjectDisplayField
              label="공사부문"
              value={projectInfo?.constructionSector || ''}
              status={projectSearchStatus}
            />

            {/* 선종 */}
            <ProjectDisplayField
              label="선종"
              value={projectInfo?.shipType || ''}
              status={projectSearchStatus}
            />

            {/* H/T 구분 */}
            <ProjectDisplayField
              label="H/T 구분"
              value={projectInfo?.htDivision || ''}
              status={projectSearchStatus}
              minWidth="140px"
              formatter={(value) =>
                value === 'H' ? 'Hull (H)' :
                value === 'T' ? 'Topside (T)' : '-'
              }
            />
        </div>
      </div>

      <div className="flex-1">
        <DataTable table={table} />
      </div>

      {/* 행 추가/수정 다이얼로그 */}
      <AvlVendorAddAndModifyDialog
        open={isAddDialogOpen}
        onOpenChange={(open) => {
          setIsAddDialogOpen(open)
          if (!open) {
            setEditingItem(undefined) // 다이얼로그가 닫힐 때 수정 모드 해제
          }
        }}
        onAddItem={handleAddItem}
        editingItem={editingItem}
        onUpdateItem={handleUpdateItem}
        isTemplate={false} // 프로젝트 AVL 모드
        initialProjectCode={localProjectCode}
      />

      {/* 최종 확정 확인 다이얼로그 */}
      <Dialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>프로젝트 AVL 최종 확정</DialogTitle>
            <DialogDescription>
              현재 프로젝트의 AVL을 최종 확정하시겠습니까?
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2 text-sm">
            <div>• 프로젝트 코드: {localProjectCode}</div>
            <div>• 프로젝트명: {projectInfo?.projectName || ""}</div>
            <div>• 공사부문: {projectInfo?.constructionSector || ""}</div>
            <div>• 선종: {projectInfo?.shipType || ""}</div>
            <div>• H/T 구분: {projectInfo?.htDivision || ""}</div>
            <div>• 벤더 정보: {data.length}개 (전체 레코드)</div>
            {/* <div className="text-amber-600 font-medium mt-4">
              ⚠️ 확정 후 내용 수정을 필요로 하는 경우 동일 건을 다시 최종확정해 revision 처리로 수정해야 합니다.
            </div> */}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsConfirmDialogOpen(false)}>
              취소
            </Button>
            <Button onClick={executeFinalizeAvl}>
              최종 확정
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
})

ProjectAvlTable.displayName = "ProjectAvlTable"