breakpilot-compliance/admin-compliance/app/sdk/iace/[projectId]/knowledge-graph/page.tsx

'use client'

import { useCallback, useMemo } from 'react'
import { useParams } from 'next/navigation'
import {
  ReactFlow,
  Background,
  Controls,
  MiniMap,
  useNodesState,
  useEdgesState,
  type Node,
  type Edge,
  MarkerType,
} from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { useKnowledgeGraph } from './_hooks/useKnowledgeGraph'

const TYPE_STYLES: Record<string, { bg: string; border: string }> = {
  component: { bg: '#EEF2FF', border: '#6366F1' },
  hazard: { bg: '#FEF2F2', border: '#EF4444' },
  mitigation: { bg: '#ECFDF5', border: '#10B981' },
}

const TYPE_LABELS: Record<string, string> = {
  component: 'Komponente',
  hazard: 'Gefaehrdung',
  mitigation: 'Massnahme',
}

export default function KnowledgeGraphPage() {
  const { projectId } = useParams<{ projectId: string }>()
  const { nodes: graphNodes, edges: graphEdges, loading, stats } = useKnowledgeGraph(projectId)

  // Convert to React Flow nodes with layout
  const rfNodes = useMemo((): Node[] => {
    const compNodes = graphNodes.filter((n) => n.type === 'component')
    const hazNodes = graphNodes.filter((n) => n.type === 'hazard')
    const mitNodes = graphNodes.filter((n) => n.type === 'mitigation')

    const nodes: Node[] = []
    const colWidth = 300
    const rowHeight = 80

    // Column 1: Components
    compNodes.forEach((n, i) => {
      nodes.push({
        id: n.id,
        position: { x: 0, y: i * rowHeight },
        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
        style: {
          background: TYPE_STYLES.component.bg,
          border: `2px solid ${TYPE_STYLES.component.border}`,
          borderRadius: '12px',
          padding: '8px 12px',
          fontSize: '12px',
          fontWeight: 500,
          width: 200,
        },
      })
    })

    // Column 2: Hazards
    hazNodes.forEach((n, i) => {
      nodes.push({
        id: n.id,
        position: { x: colWidth, y: i * rowHeight },
        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
        style: {
          background: TYPE_STYLES.hazard.bg,
          border: `2px solid ${TYPE_STYLES.hazard.border}`,
          borderRadius: '12px',
          padding: '8px 12px',
          fontSize: '12px',
          fontWeight: 500,
          width: 220,
        },
      })
    })

    // Column 3: Mitigations
    mitNodes.forEach((n, i) => {
      nodes.push({
        id: n.id,
        position: { x: colWidth * 2, y: i * rowHeight },
        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
        style: {
          background: TYPE_STYLES.mitigation.bg,
          border: `2px solid ${TYPE_STYLES.mitigation.border}`,
          borderRadius: '12px',
          padding: '8px 12px',
          fontSize: '12px',
          fontWeight: 500,
          width: 220,
        },
      })
    })

    return nodes
  }, [graphNodes])

  const rfEdges = useMemo((): Edge[] => {
    return graphEdges.map((e) => ({
      id: e.id,
      source: e.source,
      target: e.target,
      label: e.label,
      type: 'smoothstep',
      animated: true,
      style: { stroke: '#94A3B8', strokeWidth: 1.5 },
      labelStyle: { fontSize: 10, fill: '#64748B' },
      markerEnd: { type: MarkerType.ArrowClosed, color: '#94A3B8' },
    }))
  }, [graphEdges])

  const [nodes, setNodes, onNodesChange] = useNodesState(rfNodes)
  const [edges, setEdges, onEdgesChange] = useEdgesState(rfEdges)

  // Update when data loads
  const onInit = useCallback(() => {
    if (rfNodes.length > 0) {
      setNodes(rfNodes)
      setEdges(rfEdges)
    }
  }, [rfNodes, rfEdges, setNodes, setEdges])

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div>
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">Safety Knowledge Graph</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
          Interaktive Visualisierung: Komponente → Gefaehrdung → Massnahme
        </p>
      </div>

      {/* Legend + Stats */}
      <div className="flex items-center gap-6">
        {(['component', 'hazard', 'mitigation'] as const).map((t) => (
          <div key={t} className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full" style={{ backgroundColor: TYPE_STYLES[t].border }} />
            <span className="text-xs text-gray-600">{TYPE_LABELS[t]} ({
              t === 'component' ? stats.components : t === 'hazard' ? stats.hazards : stats.mitigations
            })</span>
          </div>
        ))}
      </div>

      {/* Graph */}
      {graphNodes.length === 0 ? (
        <div className="text-center py-16 text-gray-500">
          Keine Daten — bitte zuerst Projekt initialisieren.
        </div>
      ) : (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" style={{ height: '600px' }}>
          <ReactFlow
            nodes={rfNodes}
            edges={rfEdges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onInit={onInit}
            fitView
            fitViewOptions={{ padding: 0.2 }}
            minZoom={0.3}
            maxZoom={2}
            nodesDraggable
            nodesConnectable={false}
          >
            <Background gap={20} size={1} color="#f0f0f0" />
            <Controls />
            <MiniMap
              nodeColor={(node) => {
                const t = (node.data as { nodeType?: string })?.nodeType || 'component'
                return TYPE_STYLES[t]?.border || '#94A3B8'
              }}
              maskColor="rgba(0,0,0,0.05)"
            />
          </ReactFlow>
        </div>
      )}
    </div>
  )
}