"use client"

import { useState } from "react"

// shadcn/ui components
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

import { cn } from "@/lib/utils"
import StageList from "./StageList"
import RevisionForm from "./RevisionForm"
import { getVendorDocumentLists } from "@/lib/vendor-document/service"
import { VendorDocumentsView } from "@/db/schema/vendorDocu"
import { DocumentListTable } from "@/lib/vendor-document/table/doc-table"
import StageSHIList from "./StageListfromSHI"

interface DocumentContainerProps {
  promises: Promise<[Awaited<ReturnType<typeof getVendorDocumentLists>>]>
  selectedPackageId: number
}

export default function DocumentContainer({ 
  promises,
  selectedPackageId
}: DocumentContainerProps) {
  // 선택된 문서를 이 state로 관리
  const [selectedDocument, setSelectedDocument] = useState<VendorDocumentsView | null>(null)
  
  // 패널 collapse 상태
  const [isTopCollapsed, setIsTopCollapsed] = useState(false)
  const [isBottomLeftCollapsed, setIsBottomLeftCollapsed] = useState(false)
  const [isBottomRightCollapsed, setIsBottomRightCollapsed] = useState(false)

  // 문서 선택 핸들러
  const handleSelectDocument = (document: VendorDocumentsView | null) => {
    setSelectedDocument(document)
  }

  return (
    // 명시적 높이 지정
    <div className="h-[calc(100vh-100px)] w-full">
      
      <ResizablePanelGroup direction="vertical" className="h-full w-full">
        {/* 상단 패널 (문서 리스트 영역) */}
        <ResizablePanel
          defaultSize={65}
          minSize={15}
          maxSize={95}
          collapsible
          collapsedSize={10}
          onCollapse={() => setIsTopCollapsed(true)}
          onExpand={() => setIsTopCollapsed(false)}
          className={cn("overflow-auto border-b", isTopCollapsed && "transition-all")}
        >
          <DocumentListTable 
            promises={promises}
            selectedPackageId={selectedPackageId}
            onSelectDocument={handleSelectDocument}
          />
        </ResizablePanel>
        
        {/* 상/하 분할을 위한 핸들 */}
        <ResizableHandle 
          withHandle
          className="pointer-events-none data-[resize-handle]:pointer-events-auto"
        />
        
        <ResizablePanel minSize={0} defaultSize={35}>

              {selectedDocument ? (
                <StageList document={selectedDocument} />
              ) : (
                <div className="p-4 text-sm text-muted-foreground">
                  문서를 선택하면 이슈 스테이지가 표시됩니다.
                </div>
              )}

        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}