'use client'

/**
 * DSGVO-Audit-Dokumentation Seite
 *
 * Zeigt die vollstaendige Audit-Dokumentation fuer Datenschutzbeauftragte
 * und Auditoren mit schoener Markdown-Darstellung inkl. Tabellen.
 */

import { useState, useEffect, useRef } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import { SECTIONS } from './constants'
import { TableOfContents } from './_components/TableOfContents'
import { AuditHeader } from './_components/AuditHeader'
import { AuditTitleBlock } from './_components/AuditTitleBlock'
import {
  ManagementSummary,
  VerarbeitungsTaetigkeiten,
  Rechtsgrundlagen,
  DatenschutzFolgen,
  InformationspflichtenAndArt22,
  PrivacyByDesignAndTOM,
  BSIAndEUAIAct,
  MLTrainingAndRechte,
  SchulungReviewVorfall,
  KontakteAndVoice,
  BQASScheduler,
  Anhaenge,
} from './_components/sections'

export default function AuditDocumentationPage() {
  const [showToc, setShowToc] = useState(true)
  const [activeSection, setActiveSection] = useState<string>('1')
  const contentRef = useRef<HTMLDivElement>(null)

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(`section-${sectionId}`)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
      setActiveSection(sectionId)
    }
  }

  // Track active section on scroll
  useEffect(() => {
    const handleScroll = () => {
      const sections = SECTIONS.map(s => ({
        id: s.id,
        element: document.getElementById(`section-${s.id}`)
      })).filter(s => s.element)

      for (const section of sections.reverse()) {
        if (section.element) {
          const rect = section.element.getBoundingClientRect()
          if (rect.top <= 150) {
            setActiveSection(section.id)
            break
          }
        }
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <AdminLayout>
      <div className="flex min-h-screen">
        {/* Table of Contents Sidebar */}
        {showToc && (
          <TableOfContents
            activeSection={activeSection}
            onScrollToSection={scrollToSection}
          />
        )}

        {/* Main Content */}
        <main className={`flex-1 ${showToc ? 'ml-64' : ''}`}>
          <AuditHeader
            showToc={showToc}
            onToggleToc={() => setShowToc(!showToc)}
          />

          {/* Document Content */}
          <div ref={contentRef} className="px-8 py-8 max-w-4xl">
            <AuditTitleBlock />
            <ManagementSummary />
            <VerarbeitungsTaetigkeiten />
            <Rechtsgrundlagen />
            <DatenschutzFolgen />
            <InformationspflichtenAndArt22 />
            <PrivacyByDesignAndTOM />
            <BSIAndEUAIAct />
            <MLTrainingAndRechte />
            <SchulungReviewVorfall />
            <KontakteAndVoice />
            <BQASScheduler />
            <Anhaenge />
          </div>
        </main>
      </div>
    </AdminLayout>
  )
}