"use client"
import * as React from "react"
import { useRouter, useParams } from "next/navigation"

import { getProjectLists } from "@/lib/projects/service"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface DocuListRuleClientProps {
    children: React.ReactNode
}

export default function DocuListRuleClient({
    children,
}: DocuListRuleClientProps) {
    const router = useRouter()
    const params = useParams()
    const lng = (params?.lng as string) || "ko"
    
    // Get the projectId from route parameters
    const projectIdFromUrl = React.useMemo(() => {
        if (params?.projectId) {
            const projectId = Array.isArray(params.projectId) 
                ? params.projectId[0] 
                : params.projectId
            return Number(projectId)
        }
        return null
    }, [params])
    
    // Use the URL projectId as the selected project
    const [selectedProjectId, setSelectedProjectId] = React.useState<number | null>(
        projectIdFromUrl
    )
    
    // 프로젝트 목록 상태
    const [projects, setProjects] = React.useState<Array<{ id: number; code: string; name: string; type: string }>>([])
    const [isLoading, setIsLoading] = React.useState(true)
    
    // Update selectedProjectId when URL changes
    React.useEffect(() => {
        if (projectIdFromUrl) {
            setSelectedProjectId(projectIdFromUrl)
        }
    }, [projectIdFromUrl])

    // 프로젝트 목록 로드
    React.useEffect(() => {
        const loadProjects = async () => {
            try {
                setIsLoading(true)
                console.log("Loading projects...")
                const result = await getProjectLists({ 
                    page: 1, 
                    perPage: 1000,
                    search: "",
                    sort: [],
                    filters: [],
                    joinOperator: "and",
                    flags: [],
                    code: "",
                    name: "",
                    type: ""
                })
                console.log("Projects result:", result)
                if (result.data) {
                    // plant 타입의 프로젝트만 필터링
                    const plantProjects = result.data.filter(project => project.type === 'plant')
                    console.log("Plant projects:", plantProjects)
                    setProjects(plantProjects)
                }
            } catch (error) {
                console.error("Failed to load projects:", error)
            } finally {
                setIsLoading(false)
            }
        }
        loadProjects()
    }, [])

    // Handle project selection
    function handleSelectProject(projectId: number) {
        console.log("Selecting project:", projectId)
        setSelectedProjectId(projectId)
        
        // Navigate to the project's document-class page
        router.push(`/${lng}/evcp/docu-list-rule/${projectId}`)
    }
    
    return (
        <>
            {/* 상단 영역: 제목 왼쪽 / ProjectSwitcher 오른쪽 */}
            <div className="flex items-center justify-between">
                {/* 왼쪽: 타이틀 & 설명 */}
                <div>
                    <div className="flex items-center gap-2">
                        <h2 className="text-2xl font-bold tracking-tight">Document Numbering Rule (해양)</h2>
                    </div>
                    <p className="text-muted-foreground">
                        벤더 제출 문서 리스트 작성 시에 사용되는 넘버링
                    </p>
                </div>
                
                {/* 오른쪽: ProjectSwitcher */}
                <div className="flex items-center space-x-2">
                    <Select 
                        value={selectedProjectId ? String(selectedProjectId) : ""} 
                        onValueChange={(value) => {
                            const projectId = Number(value)
                            if (projectId) {
                                handleSelectProject(projectId)
                            }
                        }}
                        disabled={isLoading}
                    >
                        <SelectTrigger className="max-w-[300px] whitespace-nowrap overflow-hidden text-ellipsis">
                            <SelectValue placeholder={isLoading ? "프로젝트 로딩 중..." : "프로젝트를 선택하세요"} />
                        </SelectTrigger>
                        <SelectContent>
                            {projects.map((project) => (
                                <SelectItem key={project.id} value={String(project.id)}>
                                    {project.code} - {project.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            </div>
            
            {/* 문서 목록/테이블 영역 */}
            <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow p-5">
                {children}
            </section>
        </>
    )
}