import React from 'react'
import Link from 'next/link'
import { AdditionalModuleItem } from './SidebarSubComponents'

function withProject(url: string, projectId?: string): string {
  if (!projectId) return url
  const separator = url.includes('?') ? '&' : '?'
  return `${url}${separator}project=${projectId}`
}

interface SidebarModuleNavProps {
  pathname: string | null
  collapsed: boolean
  projectId?: string
  pendingCRCount: number
}

export function SidebarModuleNav({ pathname, collapsed, projectId, pendingCRCount }: SidebarModuleNavProps) {
  return (
    <>
      {/* Maschinenrecht / CE */}
      <div className="border-t border-gray-100 py-2">
        {!collapsed && (
          <div className="px-4 py-2 text-xs font-medium text-gray-400 uppercase tracking-wider">
            Maschinenrecht / CE
          </div>
        )}
        <AdditionalModuleItem
          href="/sdk/iace"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
            </svg>
          }
          label="CE-Compliance (IACE)"
          isActive={pathname?.startsWith('/sdk/iace') ?? false}
          collapsed={collapsed}
          projectId={projectId}
        />
      </div>

      {/* Additional Modules */}
      <div className="border-t border-gray-100 py-2">
        {!collapsed && (
          <div className="px-4 py-2 text-xs font-medium text-gray-400 uppercase tracking-wider">
            Zusatzmodule
          </div>
        )}
        <AdditionalModuleItem
          href="/sdk/training"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
          }
          label="Schulung (Admin)"
          isActive={pathname === '/sdk/training'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/training/learner"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          }
          label="Schulung (Learner)"
          isActive={pathname === '/sdk/training/learner'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/rag"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          }
          label="Legal RAG"
          isActive={pathname === '/sdk/rag'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/quality"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          }
          label="AI Quality"
          isActive={pathname === '/sdk/quality'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/security-backlog"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          }
          label="Security Backlog"
          isActive={pathname === '/sdk/security-backlog'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/compliance-hub"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          }
          label="Compliance Hub"
          isActive={pathname === '/sdk/compliance-hub'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/assertions"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
            </svg>
          }
          label="Assertions"
          isActive={pathname === '/sdk/assertions'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/dsms"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          }
          label="DSMS"
          isActive={pathname === '/sdk/dsms'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/sdk-flow"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          }
          label="SDK Flow"
          isActive={pathname === '/sdk/sdk-flow'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/architecture"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
            </svg>
          }
          label="Architektur"
          isActive={pathname === '/sdk/architecture'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/agents"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          }
          label="Agenten"
          isActive={pathname?.startsWith('/sdk/agents') ?? false}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/workshop"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          }
          label="Workshop"
          isActive={pathname === '/sdk/workshop'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/portfolio"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
          }
          label="Portfolio"
          isActive={pathname === '/sdk/portfolio'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/roadmap"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
            </svg>
          }
          label="Roadmap"
          isActive={pathname === '/sdk/roadmap'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/isms"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          }
          label="ISMS (ISO 27001)"
          isActive={pathname === '/sdk/isms'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/audit-llm"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          }
          label="LLM Audit"
          isActive={pathname === '/sdk/audit-llm'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/rbac"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          }
          label="RBAC Admin"
          isActive={pathname === '/sdk/rbac'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/catalog-manager"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
            </svg>
          }
          label="Kataloge"
          isActive={pathname === '/sdk/catalog-manager'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/wiki"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
          }
          label="Compliance Wiki"
          isActive={pathname?.startsWith('/sdk/wiki')}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="/sdk/api-docs"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
          }
          label="API-Referenz"
          isActive={pathname === '/sdk/api-docs'}
          collapsed={collapsed}
          projectId={projectId}
        />
        <Link
          href={withProject('/sdk/change-requests', projectId)}
          className={`flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
            collapsed ? 'justify-center' : ''
          } ${
            pathname === '/sdk/change-requests'
              ? 'bg-purple-100 text-purple-900 font-medium'
              : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
          }`}
          title={collapsed ? `Änderungsanfragen (${pendingCRCount})` : undefined}
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
          </svg>
          {!collapsed && (
            <span className="flex items-center gap-2">
              Änderungsanfragen
              {pendingCRCount > 0 && (
                <span className="px-1.5 py-0.5 text-xs font-bold bg-red-500 text-white rounded-full min-w-[1.25rem] text-center">
                  {pendingCRCount}
                </span>
              )}
            </span>
          )}
          {collapsed && pendingCRCount > 0 && (
            <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
          )}
        </Link>
        <AdditionalModuleItem
          href="https://macmini:3006"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
          }
          label="Developer Portal"
          isActive={false}
          collapsed={collapsed}
          projectId={projectId}
        />
        <AdditionalModuleItem
          href="https://macmini:8011"
          icon={
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
          }
          label="SDK Dokumentation"
          isActive={false}
          collapsed={collapsed}
          projectId={projectId}
        />
      </div>
    </>
  )
}