"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Plus, Users, FolderKanban } from "lucide-react";

export default function MissionsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  
  // Check if we're on the equipe page or its subpages
  const isEquipePage = pathname === "/missions/equipe" || pathname.startsWith("/missions/equipe/");
  // Check if we're on the missions list or a mission detail page
  const isMissionsPage = pathname === "/missions" || (pathname.startsWith("/missions/") && !isEquipePage && pathname !== "/missions/new");
  const isNewMissionPage = pathname === "/missions/new";
  
  return (
    <main className="w-full h-screen bg-white">
      <div className="w-full h-full px-4 pt-12 pb-4 flex">
        {/* Sidebar with light pink background */}
        <div className="w-[234px] min-w-[234px] bg-pink-50 border-r border-gray-100 overflow-y-auto">
          {/* Title section */}
          <div className="bg-pink-50 py-4 px-6 border-b border-pink-100">
            <h2 className="text-lg font-medium text-gray-800">CAP</h2>
            <p className="text-xs text-gray-600">Centre d'Administration et de Pilotage</p>
          </div>
          
          {/* Navigation links */}
          <nav className="mt-4">
            {/* Équipes link */}
            <Link href="/missions/equipe" passHref>
              <div className={`px-6 py-[10px] flex items-center gap-2 ${isEquipePage ? "bg-white" : ""} hover:bg-white transition-colors cursor-pointer`}>
                <Users className="h-4 w-4 text-gray-600" />
                <span className="text-sm font-normal text-gray-700">Équipes</span>
              </div>
            </Link>
            
            {/* Missions link */}
            <Link href="/missions" passHref>
              <div className={`px-6 py-[10px] flex items-center gap-2 ${isMissionsPage ? "bg-white" : ""} hover:bg-white transition-colors cursor-pointer`}>
                <FolderKanban className="h-4 w-4 text-gray-600" />
                <span className="text-sm font-normal text-gray-700">Missions</span>
              </div>
            </Link>
          </nav>
        </div>
        
        {/* Main content - white background */}
        <div className="flex-1 overflow-auto bg-white">
          {children}
        </div>
      </div>
    </main>
  );
}