path: root/components/vendor-data/sidebar copy.tsx

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip"
import { Package2, FormInput } from "lucide-react"
import { useRouter, usePathname } from "next/navigation"
import { Skeleton } from "@/components/ui/skeleton"
import { type FormInfo } from "@/lib/forms/services"

interface PackageData {
  itemId: number
  itemName: string
}

interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
  isCollapsed: boolean
  packages: PackageData[]
  selectedPackageId: number | null
  selectedProjectId: number | null
  selectedContractId: number | null
  onSelectPackage: (itemId: number) => void
  forms?: FormInfo[]  // 선택적 속성으로 변경
  onSelectForm: (formName: string) => void
  isLoadingForms?: boolean
  mode: "IM" | "ENG" // 새로 추가: 현재 선택된 모드
}

export function Sidebar({
  className,
  isCollapsed,
  packages,
  selectedPackageId,
  selectedProjectId,
  selectedContractId,
  onSelectPackage,
  forms,
  // selectedForm, // 사용되지 않음
  onSelectForm,
  isLoadingForms = false,
  mode = "IM", // 기본값 설정
}: SidebarProps) {
  const router = useRouter()
  const rawPathname = usePathname()
  const pathname = rawPathname ?? ""

 
  /**
   * ---------------------------
   * 1) URL에서 현재 패키지 / 폼 코드 추출
   * ---------------------------
   */
  const segments = pathname.split("/").filter(Boolean) 
  // 예) "/partners/vendor-data/tag/123" => ["partners","vendor-data","tag","123"]

  let currentItemId: number | null = null
  let currentFormCode: string | null = null

  const tagIndex = segments.indexOf("tag")
  if (tagIndex !== -1 && segments[tagIndex + 1]) {
    // tag 뒤에 오는 값이 패키지 itemId
    currentItemId = parseInt(segments[tagIndex + 1], 10)
  }

  const formIndex = segments.indexOf("form")
  if (formIndex !== -1) {
    // form 뒤 첫 파라미터 => itemId, 그 다음 파라미터 => formCode
    const itemSegment = segments[formIndex + 1]
    const codeSegment = segments[formIndex + 2]

    if (itemSegment) {
      currentItemId = parseInt(itemSegment, 10)
    }
    if (codeSegment) {
      currentFormCode = codeSegment
    }
  }

  /**
   * ---------------------------
   * 2) 패키지 클릭 핸들러
   * ---------------------------
   */
  const handlePackageClick = (itemId: number) => {
    // 상위 컴포넌트 상태 업데이트만 수행
    // 라우팅은 하지 않음 (프로젝트 선택 상태 유지)
    onSelectPackage(itemId)
  }

  /**
   * ---------------------------
   * 3) 폼 클릭 핸들러 (mode 추가)
   * ---------------------------
   */
  const handleFormClick = (form: FormInfo) => {
    // 패키지 ID 선택 전략
    let packageId: number;

    if (mode === "ENG") {
      // ENG 모드에서는 첫 번째 패키지 ID 또는 현재 URL에서 추출한 ID 사용
      packageId = 0;
    } else {
      // IM 모드에서는 반드시 선택된 패키지 ID 필요
      if (selectedPackageId === null) return;
      packageId = selectedPackageId;
    }

    // 상위 컴포넌트 상태 업데이트
    onSelectForm(form.formName)

    // 해당 폼 페이지로 라우팅
    // 예: /vendor-data/form/[packageId]/[formCode]
    const baseSegments = segments.slice(0, segments.indexOf("vendor-data") + 1).join("/")
    // 모드 정보를 쿼리 파라미터로 추가
    router.push(`/${baseSegments}/form/${packageId}/${form.formCode}/${selectedProjectId}/${selectedContractId}?mode=${mode}`)
  }

  return (
    <div className={cn("pb-12", className)}>
      <div className="space-y-4 py-4">
        {/* ---------- 패키지(Items) 목록 - IM 모드에서만 표시 ---------- */}
        {mode === "IM" && (
          <>
            <div className="py-1">
              <h2 className="relative px-7 text-lg font-semibold tracking-tight">
                {isCollapsed ? "P" : "Package Lists"}
              </h2>
              <ScrollArea className="h-[150px] px-1">
                <div className="space-y-1 p-2">
                  {packages.map((pkg) => {
                    // URL 기준으로 active 여부 판단
                    const isActive = pkg.itemId === currentItemId

                    return (
                      <div key={pkg.itemId}>
                        {isCollapsed ? (
                          <Tooltip delayDuration={0}>
                            <TooltipTrigger asChild>
                              <Button
                                variant="ghost"
                                className={cn(
                                  "w-full justify-start font-normal",
                                  isActive && "bg-accent text-accent-foreground"
                                )}
                                onClick={() => handlePackageClick(pkg.itemId)}
                              >
                                <Package2 className="mr-2 h-4 w-4" />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent side="right">
                              {pkg.itemName}
                            </TooltipContent>
                          </Tooltip>
                        ) : (
                          <Button
                            variant="ghost"
                            className={cn(
                              "w-full justify-start font-normal",
                              isActive && "bg-accent text-accent-foreground"
                            )}
                            onClick={() => handlePackageClick(pkg.itemId)}
                          >
                            <Package2 className="mr-2 h-4 w-4" />
                            {pkg.itemName}
                          </Button>
                        )}
                      </div>
                    )
                  })}
                </div>
              </ScrollArea>
            </div>
            <Separator />
          </>
        )}

        {/* ---------- 폼 목록 ---------- */}
        <div className="py-1">
          <h2 className="relative px-7 text-lg font-semibold tracking-tight">
            {isCollapsed ? "F" : "Form Lists"}
          </h2>
          <ScrollArea className={cn(
            "px-1",
            // IM 모드는 더 작은 높이, ENG 모드는 더 큰 높이 
            mode === "IM" ? "h-[300px]" : "h-[450px]"
          )}>
            <div className="space-y-1 p-2">
              {isLoadingForms ? (
                // 로딩 중 스켈레톤 UI 표시
                Array.from({ length: 3 }).map((_, index) => (
                  <div key={`form-skeleton-${index}`} className="px-2 py-1.5">
                    <Skeleton className="h-8 w-full" />
                  </div>
                ))
              ) : !forms || forms.length === 0 ? (
                <p className="text-sm text-muted-foreground px-2">
                  (No forms loaded)
                </p>
              ) : (
                forms.map((form) => {
                  // URL 기준으로 active 여부 판단
                  const isActive = form.formCode === currentFormCode

                  // IM 모드에서만 패키지 선택 여부에 따라 비활성화
                  const isDisabled = mode === "IM" && currentItemId === null;

                  return isCollapsed ? (
                    <Tooltip key={form.formCode} delayDuration={0}>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          className={cn(
                            "w-full justify-start font-normal",
                            isActive && "bg-accent text-accent-foreground"
                          )}
                          onClick={() => handleFormClick(form)}
                          disabled={isDisabled}
                        >
                          <FormInput className="mr-2 h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent side="right">
                        {form.formName}
                      </TooltipContent>
                    </Tooltip>
                  ) : (
                    <Button
                      key={form.formCode}
                      variant="ghost"
                      className={cn(
                        "w-full justify-start font-normal",
                        isActive && "bg-accent text-accent-foreground"
                      )}
                      onClick={() => handleFormClick(form)}
                      disabled={isDisabled}
                    >
                      <FormInput className="mr-2 h-4 w-4" />
                      {form.formName}
                    </Button>
                  )
                })
              )}
            </div>
          </ScrollArea>
        </div>
      </div>
    </div>
  )
}