'use client'

/**
 * Architecture Overview Page
 *
 * Central view of all backend modules and their connections.
 * Helps track migration progress and ensure no modules are lost.
 */

import { useState } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { ArchitectureView } from '@/components/common/ArchitectureView'
import { DataFlowDiagram } from '@/components/common/DataFlowDiagram'
import { getModuleStats } from '@/lib/module-registry'

type ViewMode = 'list' | 'diagram'

export default function ArchitecturePage() {
  const [viewMode, setViewMode] = useState<ViewMode>('list')
  const stats = getModuleStats()

  return (
    <div className="space-y-6">
      <PagePurpose
        title="Architektur-Uebersicht"
        purpose="Zentrale Uebersicht aller Backend-Module und deren Verbindung zum Frontend. Dient zur Sicherstellung, dass bei der Migration keine Module verloren gehen."
        audience={['Entwickler', 'DevOps', 'Architekten', 'Auditoren']}
        architecture={{
          services: ['consent-service', 'python-backend', 'klausur-service', 'voice-service'],
          databases: ['PostgreSQL', 'Qdrant']
        }}
        relatedPages={[
          { name: 'Compliance Hub', href: '/compliance/hub', description: 'Compliance-Module' },
          { name: 'AI Hub', href: '/ai', description: 'KI-Module' },
        ]}
      />

      {/* Summary Cards */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <div className="text-sm text-slate-500 mb-1">Migrations-Fortschritt</div>
          <div className="text-3xl font-bold text-purple-600">{stats.percentComplete}%</div>
          <div className="text-sm text-slate-400">{stats.connected} von {stats.total} Modulen</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <div className="text-sm text-slate-500 mb-1">Verbunden</div>
          <div className="text-3xl font-bold text-green-600">{stats.connected}</div>
          <div className="text-sm text-green-500">Vollstaendig migriert</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <div className="text-sm text-slate-500 mb-1">Teilweise verbunden</div>
          <div className="text-3xl font-bold text-yellow-600">{stats.partial}</div>
          <div className="text-sm text-yellow-500">In Bearbeitung</div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <div className="text-sm text-slate-500 mb-1">Nicht verbunden</div>
          <div className="text-3xl font-bold text-red-600">{stats.notConnected}</div>
          <div className="text-sm text-red-500">Noch zu migrieren</div>
        </div>
      </div>

      {/* View Toggle */}
      <div className="bg-white rounded-xl shadow-sm border p-4">
        <div className="flex items-center gap-4">
          <span className="text-sm font-medium text-slate-700">Ansicht:</span>
          <div className="flex rounded-lg border border-slate-200 overflow-hidden">
            <button
              onClick={() => setViewMode('list')}
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                viewMode === 'list'
                  ? 'bg-purple-600 text-white'
                  : 'bg-white text-slate-600 hover:bg-slate-50'
              }`}
            >
              Modul-Liste
            </button>
            <button
              onClick={() => setViewMode('diagram')}
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                viewMode === 'diagram'
                  ? 'bg-purple-600 text-white'
                  : 'bg-white text-slate-600 hover:bg-slate-50'
              }`}
            >
              Datenfluss-Diagramm
            </button>
          </div>
        </div>
      </div>

      {/* Content based on view mode */}
      {viewMode === 'list' ? (
        <ArchitectureView showAllCategories />
      ) : (
        <DataFlowDiagram />
      )}

      {/* Migration Checklist */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Migrations-Checkliste</h3>
        <div className="space-y-3">
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" checked readOnly className="w-4 h-4 text-green-600" />
            <span className="text-slate-700">Grundgeruest Admin v2 erstellt (Layout, Navigation)</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" checked readOnly className="w-4 h-4 text-green-600" />
            <span className="text-slate-700">Compliance Hub migriert</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" checked readOnly className="w-4 h-4 text-green-600" />
            <span className="text-slate-700">Consent Verwaltung migriert</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" checked readOnly className="w-4 h-4 text-green-600" />
            <span className="text-slate-700">Workflow (Versionierung) migriert mit Sync-Scroll</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-yellow-200 bg-yellow-50 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">DSR-Modul migrieren</span>
            <span className="text-xs text-yellow-600 ml-auto">Prioritaet: Hoch</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-yellow-200 bg-yellow-50 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">Cookie-Kategorien migrieren</span>
            <span className="text-xs text-yellow-600 ml-auto">Prioritaet: Mittel</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">KI-Module migrieren (LLM Compare, OCR, RAG)</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">Infrastruktur-Module migrieren</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">Alle Module getestet und deployed</span>
          </div>
          <div className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
            <input type="checkbox" className="w-4 h-4" />
            <span className="text-slate-700">Verwaiste Module identifiziert und dokumentiert</span>
          </div>
        </div>
      </div>
    </div>
  )
}