'use client'

import { useState, ReactNode } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

// ============================================
// TYPES
// ============================================

interface NavItem {
  id: string
  name: string
  href: string
  icon: ReactNode
  description?: string
}

// ============================================
// NAVIGATION - Hier werden alle Tabs definiert
// ============================================

const navigation: NavItem[] = [
  {
    id: 'magic-help',
    name: 'Magic Help',
    href: '/magic-help',
    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 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
      </svg>
    ),
    description: 'Handschrift-OCR & Klausur-Korrektur',
  },
  {
    id: 'meet',
    name: 'Meet',
    href: '/meet',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
      </svg>
    ),
    description: 'Videokonferenzen & Meetings',
  },
]

// ============================================
// LAYOUT COMPONENT
// ============================================

interface LayoutProps {
  children: ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const pathname = usePathname()
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/'
    return pathname.startsWith(href)
  }

  return (
    <div className="min-h-screen flex flex-col">
      {/* ============================================
          HEADER
          ============================================ */}
      <header className="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 fixed top-0 left-0 right-0 z-30">
        {/* Logo */}
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center text-white font-bold text-sm">
            BP
          </div>
          <div>
            <div className="font-bold text-primary-500 text-lg leading-none">BreakPilot</div>
            <div className="text-xs text-slate-400">Studio v2</div>
          </div>
        </div>

        {/* Spacer - hier kommen später weitere Header-Elemente */}
        <div className="flex-1" />

        {/* Platzhalter für spätere Features (Login, Theme, Language) */}
        <div className="flex items-center gap-2 text-sm text-slate-400">
          <span className="px-3 py-1 bg-slate-100 rounded-full">Preview Build</span>
        </div>
      </header>

      <div className="flex flex-1 pt-14">
        {/* ============================================
            SIDEBAR
            ============================================ */}
        <aside
          className={`${
            sidebarCollapsed ? 'w-16' : 'w-64'
          } bg-slate-900 text-white flex flex-col transition-all duration-200 fixed left-0 top-14 bottom-0 z-20`}
        >
          {/* Collapse Button */}
          <div className="p-2 border-b border-slate-700">
            <button
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              className="w-full p-2 rounded-lg hover:bg-slate-800 transition-colors flex items-center justify-center"
              title={sidebarCollapsed ? 'Sidebar erweitern' : 'Sidebar einklappen'}
            >
              <svg
                className={`w-5 h-5 transition-transform ${sidebarCollapsed ? 'rotate-180' : ''}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
              </svg>
            </button>
          </div>

          {/* Navigation */}
          <nav className="flex-1 py-4 overflow-y-auto">
            <ul className="space-y-1 px-2">
              {navigation.map((item) => (
                <li key={item.id}>
                  <Link
                    href={item.href}
                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
                      isActive(item.href)
                        ? 'bg-primary-500 text-white'
                        : 'text-slate-300 hover:bg-slate-800 hover:text-white'
                    }`}
                    title={sidebarCollapsed ? item.name : undefined}
                  >
                    <span className="flex-shrink-0">{item.icon}</span>
                    {!sidebarCollapsed && (
                      <div className="flex-1 min-w-0">
                        <span className="block truncate">{item.name}</span>
                        {item.description && (
                          <span className="block text-xs text-slate-400 truncate">{item.description}</span>
                        )}
                      </div>
                    )}
                  </Link>
                </li>
              ))}
            </ul>

            {/* Hinweis wenn keine weiteren Tabs */}
            {navigation.length === 1 && !sidebarCollapsed && (
              <div className="mx-4 mt-6 p-3 bg-slate-800 rounded-lg text-xs text-slate-400">
                <p className="font-medium text-slate-300 mb-1">Schritt für Schritt</p>
                <p>Weitere Module werden nach und nach hinzugefügt.</p>
              </div>
            )}
          </nav>

          {/* Sidebar Footer */}
          <div className="p-4 border-t border-slate-700">
            {!sidebarCollapsed && (
              <div className="text-xs text-slate-500">
                <p>Studio v2 - Build #1</p>
                <p className="mt-1">Port 3001</p>
              </div>
            )}
          </div>
        </aside>

        {/* ============================================
            MAIN CONTENT
            ============================================ */}
        <main
          className={`flex-1 transition-all duration-200 ${
            sidebarCollapsed ? 'ml-16' : 'ml-64'
          }`}
        >
          <div className="p-6 min-h-[calc(100vh-3.5rem-3rem)]">
            {children}
          </div>

          {/* ============================================
              FOOTER
              ============================================ */}
          <footer className="h-12 bg-white border-t border-slate-200 flex items-center justify-between px-6 text-sm text-slate-500">
            <div>BreakPilot Studio v2</div>
            <div className="flex items-center gap-4">
              <span>Port 3001</span>
              <span className="text-slate-300">|</span>
              <span>Backend: Port 8000</span>
            </div>
          </footer>
        </main>
      </div>
    </div>
  )
}