'use client'

/**
 * Security Dashboard - DevSecOps
 *
 * Security scan results, vulnerability tracking, and compliance status
 * Migrated from old admin (/admin/security)
 */

import { PagePurpose } from '@/components/common/PagePurpose'
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
import { useSecurityDashboard } from './useSecurityDashboard'
import { SecurityHeader } from './_components/SecurityHeader'
import { OverviewTab } from './_components/OverviewTab'
import { FindingsTab } from './_components/FindingsTab'
import { ToolsTab } from './_components/ToolsTab'
import { HistoryTab } from './_components/HistoryTab'
import { MonitoringTab } from './_components/MonitoringTab'
import { DocumentationSection } from './_components/DocumentationSection'
import type { TabId } from './types'

const TAB_LABELS: Record<TabId, string> = {
  overview: 'Uebersicht',
  findings: 'Findings',
  tools: 'Tools',
  history: 'Historie',
  monitoring: 'Monitoring',
}

export default function SecurityDashboardPage() {
  const {
    tools,
    findings,
    filteredFindings,
    summary,
    history,
    loading,
    scanning,
    error,
    activeTab,
    setActiveTab,
    monitoringMetrics,
    activeAlerts,
    severityFilter,
    setSeverityFilter,
    toolFilter,
    setToolFilter,
    showFullDocs,
    setShowFullDocs,
    scanMessage,
    lastScanTime,
    overallStatus,
    runScan,
  } = useSecurityDashboard()

  return (
    <div>
      <PagePurpose
        title="Security Dashboard"
        purpose="DevSecOps Dashboard mit Echtzeit-Scan-Ergebnissen. Ueberwachen Sie Secrets, Schwachstellen und Abhaengigkeiten. Fuehren Sie Security-Scans manuell aus oder integrieren Sie sie in Ihre CI/CD-Pipeline."
        audience={['DevOps', 'Security', 'Entwickler']}
        gdprArticles={['Art. 32 (Sicherheit der Verarbeitung)']}
        architecture={{
          services: ['Gitleaks', 'Semgrep', 'Bandit', 'Trivy', 'Grype', 'Syft'],
          databases: ['JSON Reports'],
        }}
        relatedPages={[
          { name: 'SBOM', href: '/infrastructure/sbom', description: 'Software Bill of Materials' },
          { name: 'Middleware', href: '/infrastructure/middleware', description: 'API Gateway & Rate Limiting' },
          { name: 'Controls', href: '/sdk/controls', description: 'Security Controls' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      <DevOpsPipelineSidebarResponsive currentTool="security" />

      <SecurityHeader
        overallStatus={overallStatus}
        summary={summary}
        scanning={scanning}
        onRunScan={runScan}
      />

      {/* Tabs */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden mb-6">
        <div className="flex border-b border-slate-200">
          {(Object.keys(TAB_LABELS) as TabId[]).map(tab => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-6 py-3 text-sm font-medium transition-colors ${
                activeTab === tab
                  ? 'bg-orange-50 text-orange-700 border-b-2 border-orange-600'
                  : 'text-slate-600 hover:bg-slate-50'
              }`}
            >
              {tab === 'findings' ? `${TAB_LABELS[tab]} (${summary.total})` : TAB_LABELS[tab]}
            </button>
          ))}
        </div>

        <div className="p-6">
          {/* Scan Status Message */}
          {scanMessage && (
            <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg text-blue-700 flex items-center gap-3">
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600" />
              <div>
                <span className="font-medium">{scanMessage}</span>
                {lastScanTime && (
                  <span className="text-sm text-blue-500 ml-2">(gestartet um {lastScanTime})</span>
                )}
              </div>
            </div>
          )}

          {error && (
            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
              {error}
            </div>
          )}

          {loading ? (
            <div className="flex justify-center py-12">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
            </div>
          ) : (
            <>
              {activeTab === 'overview' && (
                <OverviewTab
                  tools={tools}
                  findings={findings}
                  scanning={scanning}
                  onRunScan={runScan}
                  onSwitchTab={setActiveTab}
                />
              )}
              {activeTab === 'findings' && (
                <FindingsTab
                  filteredFindings={filteredFindings}
                  severityFilter={severityFilter}
                  setSeverityFilter={setSeverityFilter}
                  toolFilter={toolFilter}
                  setToolFilter={setToolFilter}
                />
              )}
              {activeTab === 'tools' && (
                <ToolsTab tools={tools} scanning={scanning} onRunScan={runScan} />
              )}
              {activeTab === 'history' && (
                <HistoryTab history={history} />
              )}
              {activeTab === 'monitoring' && (
                <MonitoringTab monitoringMetrics={monitoringMetrics} activeAlerts={activeAlerts} />
              )}
            </>
          )}
        </div>
      </div>

      <DocumentationSection showFullDocs={showFullDocs} setShowFullDocs={setShowFullDocs} />
    </div>
  )
}