'use client'

import { useState } from 'react'
import Link from 'next/link'
import {
  ArrowLeft, Cpu, Brain, MessageSquare, Database,
  Activity, ChevronDown, ChevronRight, GitBranch,
  Layers, FileText, Zap, RefreshCw,
} from 'lucide-react'
import {
  OverviewSection,
  AgentTypesSection,
  SoulFilesSection,
  MessageBusSection,
  SharedBrainSection,
  TaskRoutingSection,
  SessionLifecycleSection,
  DatabaseSchemaSection,
} from './_components'
import type { Section } from './_components'

const SECTIONS: Section[] = [
  {
    id: 'overview',
    title: 'System-Uebersicht',
    icon: <Layers className="w-5 h-5" />,
    content: <OverviewSection />,
  },
  {
    id: 'agents',
    title: 'Agent-Typen',
    icon: <Cpu className="w-5 h-5" />,
    content: <AgentTypesSection />,
  },
  {
    id: 'soul-files',
    title: 'SOUL-Files (Persoenlichkeiten)',
    icon: <FileText className="w-5 h-5" />,
    content: <SoulFilesSection />,
  },
  {
    id: 'message-bus',
    title: 'Message Bus & Kommunikation',
    icon: <MessageSquare className="w-5 h-5" />,
    content: <MessageBusSection />,
  },
  {
    id: 'shared-brain',
    title: 'Shared Brain (Gedaechtnis)',
    icon: <Brain className="w-5 h-5" />,
    content: <SharedBrainSection />,
  },
  {
    id: 'task-routing',
    title: 'Task Routing',
    icon: <Zap className="w-5 h-5" />,
    content: <TaskRoutingSection />,
  },
  {
    id: 'session-lifecycle',
    title: 'Session Lifecycle',
    icon: <RefreshCw className="w-5 h-5" />,
    content: <SessionLifecycleSection />,
  },
  {
    id: 'database',
    title: 'Datenbank-Schema',
    icon: <Database className="w-5 h-5" />,
    content: <DatabaseSchemaSection />,
  },
]

export default function ArchitecturePage() {
  const [expandedSections, setExpandedSections] = useState<string[]>([
    'overview', 'agents', 'soul-files',
  ])

  const toggleSection = (id: string) => {
    setExpandedSections(prev =>
      prev.includes(id)
        ? prev.filter(s => s !== id)
        : [...prev, id]
    )
  }

  return (
    <div className="p-6 max-w-5xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <Link
          href="/ai/agents"
          className="flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
        >
          <ArrowLeft className="w-4 h-4" />
          Zurueck zur Agent-Verwaltung
        </Link>
        <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-3">
          <div className="p-2 bg-purple-100 rounded-lg">
            <FileText className="w-6 h-6 text-purple-600" />
          </div>
          Multi-Agent Architektur
        </h1>
        <p className="text-gray-500 mt-1">
          Technische Dokumentation des Breakpilot Multi-Agent-Systems
        </p>
      </div>

      {/* Table of Contents */}
      <div className="bg-gray-50 rounded-xl p-5 mb-8">
        <h2 className="font-semibold text-gray-900 mb-3">Inhaltsverzeichnis</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {SECTIONS.map(section => (
            <button
              key={section.id}
              onClick={() => {
                if (!expandedSections.includes(section.id)) {
                  setExpandedSections(prev => [...prev, section.id])
                }
                document.getElementById(section.id)?.scrollIntoView({ behavior: 'smooth' })
              }}
              className="flex items-center gap-2 text-sm text-gray-600 hover:text-teal-600 text-left p-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              {section.icon}
              <span className="truncate">{section.title}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Sections */}
      <div className="space-y-4">
        {SECTIONS.map(section => (
          <div
            key={section.id}
            id={section.id}
            className="bg-white border border-gray-200 rounded-xl overflow-hidden"
          >
            <button
              onClick={() => toggleSection(section.id)}
              className="w-full flex items-center justify-between p-5 hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="p-2 bg-gray-100 rounded-lg">
                  {section.icon}
                </div>
                <span className="font-semibold text-gray-900">{section.title}</span>
              </div>
              {expandedSections.includes(section.id) ? (
                <ChevronDown className="w-5 h-5 text-gray-400" />
              ) : (
                <ChevronRight className="w-5 h-5 text-gray-400" />
              )}
            </button>
            {expandedSections.includes(section.id) && (
              <div className="px-5 pb-5 border-t border-gray-100 pt-4">
                {section.content}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Footer Links */}
      <div className="mt-8 bg-teal-50 border border-teal-200 rounded-xl p-5">
        <h3 className="font-semibold text-teal-900 mb-3">Weiterfuehrende Ressourcen</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <Link
            href="/ai/agents"
            className="flex items-center gap-2 text-sm text-teal-700 hover:text-teal-900"
          >
            <Cpu className="w-4 h-4" />
            Agent-Uebersicht
          </Link>
          <Link
            href="/ai/agents/sessions"
            className="flex items-center gap-2 text-sm text-teal-700 hover:text-teal-900"
          >
            <Activity className="w-4 h-4" />
            Aktive Sessions
          </Link>
          <Link
            href="/ai/agents/statistics"
            className="flex items-center gap-2 text-sm text-teal-700 hover:text-teal-900"
          >
            <Database className="w-4 h-4" />
            Statistiken
          </Link>
        </div>
      </div>
    </div>
  )
}