'use client'

import ReactFlow, {
  Node,
  Edge,
  Controls,
  Background,
  MiniMap,
  BackgroundVariant,
  Panel,
  NodeChange,
  EdgeChange,
} from 'reactflow'
import 'reactflow/dist/style.css'

import type { ScreenDefinition, FlowType } from '../types'

interface FlowDiagramProps {
  flowType: FlowType
  nodes: Node[]
  edges: Edge[]
  onNodesChange: (changes: NodeChange[]) => void
  onEdgesChange: (changes: EdgeChange[]) => void
  onNodeClick: (event: React.MouseEvent, node: Node) => void
  onPaneClick: () => void
  screens: ScreenDefinition[]
  colors: Record<string, { bg: string; border: string; text: string }>
  labels: Record<string, string>
  categories: string[]
}

export function FlowDiagram({
  flowType,
  nodes,
  edges,
  onNodesChange,
  onEdgesChange,
  onNodeClick,
  onPaneClick,
  screens,
  colors,
  labels,
  categories,
}: FlowDiagramProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" style={{ height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onNodeClick={onNodeClick}
        onPaneClick={onPaneClick}
        fitView
        fitViewOptions={{ padding: 0.2 }}
        attributionPosition="bottom-left"
      >
        <Controls />
        <MiniMap
          nodeColor={(node) => {
            const screen = screens.find(s => s.id === node.id)
            const catColors = screen ? colors[screen.category] : null
            return catColors?.border || '#94a3b8'
          }}
          maskColor="rgba(0, 0, 0, 0.1)"
        />
        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />

        <Panel position="top-left" className="bg-white/95 p-3 rounded-lg shadow-lg text-xs">
          <div className="font-medium text-slate-700 mb-2">
            {flowType === 'studio' ? '🎓 Studio' : '⚙️ Admin v2'}
          </div>
          <div className="space-y-1">
            {categories.slice(0, 4).map((key) => {
              const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8' }
              return (
                <div key={key} className="flex items-center gap-2">
                  <span
                    className="w-3 h-3 rounded"
                    style={{ background: catColors.bg, border: `1px solid ${catColors.border}` }}
                  />
                  <span className="text-slate-600">{labels[key]}</span>
                </div>
              )
            })}
          </div>
          <div className="mt-2 pt-2 border-t text-slate-400">
            Klick = Subtree<br/>
            Doppelklick = Oeffnen
          </div>
        </Panel>
      </ReactFlow>
    </div>
  )
}