'use client'

/**
 * SBOM (Software Bill of Materials) Admin Page
 *
 * Migriert von /admin/sbom (website) nach /infrastructure/sbom (admin-v2)
 *
 * Displays:
 * - All infrastructure components (Docker services)
 * - Python/Go dependencies
 * - Node.js packages
 * - License information
 * - Version tracking
 */

import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
import {
  StatsCards,
  CategoryFilter,
  ComponentsTable,
  ExportButton,
  SbomMetadata,
  InfoTabsSection,
} from './_components'
import { useSbomData } from './useSbomData'

export default function SBOMPage() {
  const {
    sbomData,
    loading,
    activeCategory,
    setActiveCategory,
    searchTerm,
    setSearchTerm,
    activeInfoTab,
    setActiveInfoTab,
    showFullDocs,
    setShowFullDocs,
    filteredComponents,
    stats,
    categories,
    handleExport,
  } = useSbomData()

  return (
    <div>
      <PagePurpose
        title="SBOM"
        purpose="Software Bill of Materials - Alle Komponenten & Abhaengigkeiten der Breakpilot Lehrer-Plattform. Wichtig fuer Supply-Chain-Security, Compliance-Audits und Lizenz-Pruefung."
        audience={['DevOps', 'Compliance', 'Security', 'Auditoren']}
        gdprArticles={['Art. 32 (Sicherheit der Verarbeitung)']}
        architecture={{
          services: ['Syft (SBOM Generator)', 'Trivy (CVE Scanner)'],
          databases: ['CycloneDX JSON'],
        }}
        relatedPages={[
          { name: 'Security', href: '/infrastructure/security', description: 'DevSecOps Dashboard' },
          { name: 'Controls', href: '/sdk/controls', description: 'Security Controls' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      <DevOpsPipelineSidebarResponsive currentTool="sbom" />

      {/* Wizard Link */}
      <div className="mb-6 flex justify-end">
        <Link
          href="/infrastructure/sbom/wizard"
          className="flex items-center gap-2 px-4 py-2 rounded-lg font-medium bg-purple-100 text-purple-700 border border-purple-200 hover:bg-purple-200 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          Lern-Wizard
        </Link>
      </div>

      <StatsCards stats={stats} />

      <CategoryFilter
        categories={categories}
        activeCategory={activeCategory}
        setActiveCategory={setActiveCategory}
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
      />

      {sbomData && <SbomMetadata sbomData={sbomData} />}

      <ComponentsTable components={filteredComponents} loading={loading} />

      <ExportButton onExport={handleExport} />

      <InfoTabsSection
        activeInfoTab={activeInfoTab}
        setActiveInfoTab={setActiveInfoTab}
        showFullDocs={showFullDocs}
        setShowFullDocs={setShowFullDocs}
      />
    </div>
  )
}