// components/project/ProjectNav.tsx
'use client';

import { useState, useEffect } from 'react';
import { useRouter, usePathname, useParams } from 'next/navigation';
import { 
  Home,
  FolderOpen,
  Users,
  Settings,
  BarChart3,
  Share2,
  ChevronDown,
  ExternalLink
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,BreadcrumbList
} from '@/components/ui/breadcrumb';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface ProjectNavProps {
  projectId: string;
}

export function ProjectNav({ projectId }: ProjectNavProps) {
  const [projectName, setProjectName] = useState('');
  const [projectRole, setProjectRole] = useState('');
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams() || {}
  const lng = params.lng ? String(params.lng) : "ko"

  useEffect(() => {
    // 프로젝트 정보 가져오기
    fetchProjectInfo();
  }, [projectId]);

  const fetchProjectInfo = async () => {
    try {
      const response = await fetch(`/api/projects/${projectId}`);
      const data = await response.json();
      setProjectName(data.name);
      setProjectRole(data.role);
    } catch (error) {
      console.error('프로젝트 정보 로드 실패:', error);
    }
  };

  console.log(pathname, projectId)
  console.log(projectRole, "projectRole")

  const navItems = [
    {
      label: 'Dashboard',
      icon: Home,
      href: `/evcp/data-room/${projectId}`,
      active: pathname === `/${lng}/evcp/data-room/${projectId}`,
      requireRole: ['owner', 'admin'],
    },
    {
      label: 'Files',
      icon: FolderOpen,
      href: `/evcp/data-room/${projectId}/files`,
      active: pathname?.includes('files') ,
    },
    {
      label: 'Members',
      icon: Users,
      href: `/evcp/data-room/${projectId}/members`,
      active: pathname?.includes('members'),
      requireRole: ['owner', 'admin'],
    },
    {
      label: 'Stats',
      icon: BarChart3,
      href: `/evcp/data-room/${projectId}/stats`,
      active: pathname?.includes('stats') ,
      requireRole: ['owner'],
    },
    // {
    //   label: 'Settings',
    //   icon: Settings,
    //   href: `/evcp/data-room/${projectId}/settings`,
    //   active: pathname?.includes('settiings') ,
    //   requireRole: ['owner', 'admin'],
    // },
  ];

  const visibleNavItems = navItems.filter(item => 
    !item.requireRole || item.requireRole.includes(projectRole)
  );

  return (
    <div className="border-b bg-white">
      <div className="px-6 py-3">
        {/* Breadcrumb */}
        <div className="flex items-center justify-between mb-3">
          <Breadcrumb>
            <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/evcp/data-room">Project</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
               {projectName || '로딩...'}
            </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          
          <div className="flex items-center gap-2">
            <Badge variant="outline">
              {projectRole || 'viewer'}
            </Badge>
            <Button variant="outline" size="sm">
              <Share2 className="h-4 w-4 mr-1" />
              Share
            </Button>
          </div>
        </div>

        {/* 네비게이션 탭 */}
        <div className="flex items-center gap-1">
          {visibleNavItems.map(item => (
            <Button
              key={item.label}
              variant={item.active ? "secondary" : "ghost"}
              size="sm"
              onClick={() => router.push(item.href)}
              className={cn(
                "gap-2",
                item.active && "bg-secondary"
              )}
            >
              <item.icon className="h-4 w-4" />
              {item.label}
            </Button>
          ))}
        </div>
      </div>
    </div>
  );
}