"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

interface PackageData {
  packageCode: string
  packageName: string | null
}

interface ProjectData {
  projectId: number
  projectCode: string
  projectName: string
  projectType: string
  packages: PackageData[]
}

interface ProjectSwitcherProps {
  isCollapsed: boolean
  projects: ProjectData[]
  selectedProjectId: number
  selectedPackageCode: string | null
  onSelectPackage: (projectId: number, packageCode: string) => void
}

export function ProjectSwitcher({
  isCollapsed,
  projects,
  selectedProjectId,
  selectedPackageCode,
  onSelectPackage,
}: ProjectSwitcherProps) {
  const [open, setOpen] = React.useState(false)

  // 현재 선택된 프로젝트와 패키지 정보
  const selectedProject = projects.find(p => p.projectId === selectedProjectId)
  const selectedPackage = selectedProject?.packages.find(
    pkg => pkg.packageCode === selectedPackageCode
  )


  const displayText = selectedPackage
    ? `${selectedProject?.projectCode} - ${selectedPackage.packageCode}`
    : selectedProject?.projectCode || "Select Package"

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          aria-label="Select a package"
          className={cn("w-full justify-between", isCollapsed && "w-[50px]")}
        >
          {isCollapsed ? (
            <ChevronsUpDown className="h-4 w-4" />
          ) : (
            <>
              <span className="truncate">{displayText}</span>
              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
            </>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[300px] p-0">
        <Command>
          <CommandInput placeholder="Search package..." />
          <CommandList>
            <CommandEmpty>No package found.</CommandEmpty>
            {projects.map((project) => (
              <CommandGroup key={project.projectId} heading={project.projectName}>
                {project.packages.map((pkg) => (
                  <CommandItem
                    key={`${project.projectId}-${pkg.packageCode}`}
                    onSelect={() => {
                      onSelectPackage(project.projectId, pkg.packageCode)
                      setOpen(false)
                    }}
                    className="text-sm"
                  >
                    <Check
                      className={cn(
                        "mr-2 h-4 w-4",
                        selectedProjectId === project.projectId &&
                        selectedPackageCode === pkg.packageCode
                          ? "opacity-100"
                          : "opacity-0"
                      )}
                    />
                    <div className="flex flex-col">
                      <span className="font-medium">{pkg.packageCode}</span>
                      {pkg.packageName && (
                        <span className="text-xs text-muted-foreground">
                          {pkg.packageName}
                        </span>
                      )}
                    </div>
                  </CommandItem>
                ))}
              </CommandGroup>
            ))}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}