breakpilot-compliance/admin-compliance/app/sdk/layout.tsx

'use client'

import { useEffect, useState } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import { SDKProvider } from '@/lib/sdk'
import { SDKSidebar } from '@/components/sdk/Sidebar/SDKSidebar'
import { CommandBar } from '@/components/sdk/CommandBar'
import { SDKPipelineSidebar } from '@/components/sdk/SDKPipelineSidebar'
import { ComplianceAdvisorWidget } from '@/components/sdk/ComplianceAdvisorWidget'
import { useSDK } from '@/lib/sdk'

// =============================================================================
// SDK HEADER
// =============================================================================

function formatTimeAgo(date: Date | null): string {
  if (!date) return 'Nie'
  const now = Date.now()
  const diff = now - date.getTime()
  const seconds = Math.floor(diff / 1000)
  if (seconds < 60) return 'Gerade eben'
  const minutes = Math.floor(seconds / 60)
  if (minutes < 60) return `vor ${minutes} Min`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `vor ${hours} Std`
  const days = Math.floor(hours / 24)
  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
}

const SYNC_STATUS_CONFIG = {
  idle: { color: 'bg-green-400', label: 'Sync OK' },
  syncing: { color: 'bg-yellow-400 animate-pulse', label: 'Synchronisiere...' },
  error: { color: 'bg-red-400', label: 'Sync-Fehler' },
  conflict: { color: 'bg-orange-400', label: 'Konflikt' },
  offline: { color: 'bg-gray-400', label: 'Offline' },
} as const

function SDKHeader({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
  const { state, currentStep, setCommandBarOpen, completionPercentage, syncState, projectId } = useSDK()

  const syncConfig = SYNC_STATUS_CONFIG[syncState.status] || SYNC_STATUS_CONFIG.idle

  return (
    <header className="sticky top-0 z-30 bg-white border-b border-gray-200">
      <div className="flex items-center justify-between px-6 py-3">
        {/* Breadcrumb / Current Step */}
        <div className="flex items-center gap-3">
          <nav className="flex items-center text-sm text-gray-500">
            <span>SDK</span>
            {state.projectInfo && (
              <>
                <svg className="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
                <span className="text-gray-700 font-medium">{state.projectInfo.name}</span>
              </>
            )}
            <svg className="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
            <span className="text-gray-900 font-medium">
              {currentStep?.name || 'Dashboard'}
            </span>
          </nav>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-4">
          {/* Command Bar Trigger */}
          <button
            onClick={() => setCommandBarOpen(true)}
            className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" 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>
            <span>Suchen...</span>
            <kbd className="ml-2 px-1.5 py-0.5 text-xs bg-gray-200 rounded">⌘K</kbd>
          </button>

          {/* Progress Indicator */}
          <div className="flex items-center gap-2">
            <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full transition-all duration-500"
                style={{ width: `${completionPercentage}%` }}
              />
            </div>
            <span className="text-sm font-medium text-gray-600">{completionPercentage}%</span>
          </div>

          {/* Help Button */}
          <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </button>
        </div>
      </div>

      {/* Session Info Bar */}
      <div className="flex items-center gap-4 px-6 py-1.5 bg-gray-50 border-t border-gray-100 text-xs text-gray-500">
        {/* Projekt-Name */}
        <span className="text-gray-700 font-medium">
          {state.projectInfo?.name || state.companyProfile?.companyName || 'Kein Projekt'}
        </span>

        {/* Firmenname (falls abweichend vom Projektnamen) */}
        {state.projectInfo && state.companyProfile?.companyName && state.companyProfile.companyName !== state.projectInfo.name && (
          <>
            <span className="text-gray-300">|</span>
            <span className="text-gray-600">{state.companyProfile.companyName}</span>
          </>
        )}

        <span className="font-mono text-gray-400">
          V{String(state.projectVersion || 1).padStart(3, '0')}
        </span>

        <span className="text-gray-300">|</span>

        {/* Current step / last activity */}
        <span>
          Zuletzt: <span className="text-gray-700">{currentStep?.name || 'Dashboard'}</span>
        </span>

        <span className="text-gray-300">|</span>

        {/* Last saved time */}
        <span>
          {formatTimeAgo(syncState.lastSyncedAt ? new Date(syncState.lastSyncedAt) : state.lastModified ? new Date(state.lastModified) : null)}
        </span>

        <span className="text-gray-300">|</span>

        {/* Sync status dot */}
        <span className="flex items-center gap-1.5">
          <span className={`inline-block w-2 h-2 rounded-full ${syncConfig.color}`} />
          {syncConfig.label}
        </span>

        {/* User (only if not default) */}
        {state.userId && state.userId !== 'default' && (
          <>
            <span className="text-gray-300">|</span>
            <span>Bearbeiter: <span className="text-gray-700">{state.userId}</span></span>
          </>
        )}
      </div>
    </header>
  )
}

// =============================================================================
// INNER LAYOUT (needs SDK context)
// =============================================================================

function SDKInnerLayout({ children }: { children: React.ReactNode }) {
  const { isCommandBarOpen, setCommandBarOpen, projectId } = useSDK()
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const pathname = usePathname()

  // Extract current step from pathname (e.g., /sdk/vvt -> vvt)
  const currentStep = pathname?.split('/').pop() || 'default'

  // Load collapsed state from localStorage
  useEffect(() => {
    const stored = localStorage.getItem('sdk-sidebar-collapsed')
    if (stored !== null) {
      setSidebarCollapsed(stored === 'true')
    }
  }, [])

  // Save collapsed state to localStorage
  const handleCollapsedChange = (collapsed: boolean) => {
    setSidebarCollapsed(collapsed)
    localStorage.setItem('sdk-sidebar-collapsed', String(collapsed))
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar — only show when a project is selected */}
      {projectId && (
        <SDKSidebar
          collapsed={sidebarCollapsed}
          onCollapsedChange={handleCollapsedChange}
        />
      )}

      {/* Main Content - dynamic margin based on sidebar state */}
      <div className={`${projectId ? (sidebarCollapsed ? 'ml-16' : 'ml-64') : ''} flex flex-col min-h-screen transition-all duration-300`}>
        {/* Header — only show when a project is selected */}
        {projectId && <SDKHeader sidebarCollapsed={sidebarCollapsed} />}

        {/* Page Content */}
        <main className="flex-1 p-6">{children}</main>
      </div>

      {/* Command Bar Modal */}
      {isCommandBarOpen && <CommandBar onClose={() => setCommandBarOpen(false)} />}

      {/* Pipeline Sidebar (FAB on mobile/tablet, fixed on desktop xl+) */}
      {projectId && <SDKPipelineSidebar />}

      {/* Compliance Advisor Widget */}
      {projectId && <ComplianceAdvisorWidget currentStep={currentStep} />}
    </div>
  )
}

// =============================================================================
// SDK ROOT WITH SEARCH PARAMS (client component that reads ?project=)
// =============================================================================

import { Suspense } from 'react'

function SDKRootWithParams({ children }: { children: React.ReactNode }) {
  const searchParams = useSearchParams()
  const projectId = searchParams.get('project') || undefined

  return (
    <SDKProvider enableBackendSync={true} projectId={projectId}>
      <SDKInnerLayout>{children}</SDKInnerLayout>
    </SDKProvider>
  )
}

// =============================================================================
// MAIN LAYOUT (wraps in Suspense for useSearchParams)
// =============================================================================

export default function SDKRootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <Suspense fallback={<div className="min-h-screen bg-gray-50" />}>
      <SDKRootWithParams>{children}</SDKRootWithParams>
    </Suspense>
  )
}