'use client'

/**
 * Screen Flow Visualization
 *
 * Visualisiert alle Screens aus:
 * - Studio (Port 8000): Lehrer-Oberflaeche
 * - Admin v2 (Port 3002): Admin Panel
 */

import { useCallback } from 'react'
import { useScreenFlow } from './useScreenFlow'
import {
  FlowTypeSelector,
  StatsBar,
  CategoryFilter,
  ConnectedScreensList,
  FlowDiagram,
  ScreenList,
} from './_components'
import type { ScreenDefinition } from './types'

export default function ScreenFlowPage() {
  const {
    flowType,
    selectedCategory,
    setSelectedCategory,
    selectedNode,
    setSelectedNode,
    previewScreen,
    setPreviewScreen,
    screens,
    colors,
    labels,
    baseUrl,
    nodes,
    edges,
    onNodesChange,
    onEdgesChange,
    handleFlowTypeChange,
    onNodeClick,
    onPaneClick,
    stats,
    categories,
    connectedScreens,
  } = useScreenFlow()

  const handleReset = useCallback(() => {
    setSelectedNode(null)
    setPreviewScreen(null)
  }, [setSelectedNode, setPreviewScreen])

  const handleCategoryReset = useCallback(() => {
    setSelectedCategory(null)
    setSelectedNode(null)
    setPreviewScreen(null)
  }, [setSelectedCategory, setSelectedNode, setPreviewScreen])

  const handleSelectCategory = useCallback((category: string | null) => {
    setSelectedCategory(category)
    setSelectedNode(null)
    setPreviewScreen(null)
  }, [setSelectedCategory, setSelectedNode, setPreviewScreen])

  const handleSelectScreen = useCallback((screen: ScreenDefinition) => {
    setSelectedNode(screen.id)
    setSelectedCategory(null)
    setPreviewScreen(screen)
  }, [setSelectedNode, setSelectedCategory, setPreviewScreen])

  return (
    <div className="space-y-6">
      <FlowTypeSelector
        flowType={flowType}
        onFlowTypeChange={handleFlowTypeChange}
      />

      <StatsBar
        totalScreens={stats.totalScreens}
        totalConnections={stats.totalConnections}
        connectedCount={stats.connectedCount}
        selectedNode={selectedNode}
        previewScreen={previewScreen}
        onReset={handleReset}
      />

      <CategoryFilter
        screens={screens}
        categories={categories}
        colors={colors}
        labels={labels}
        selectedCategory={selectedCategory}
        selectedNode={selectedNode}
        onSelectCategory={handleSelectCategory}
        onReset={handleCategoryReset}
      />

      <ConnectedScreensList
        selectedNode={selectedNode}
        connectedScreens={connectedScreens}
        colors={colors}
        baseUrl={baseUrl}
      />

      <FlowDiagram
        flowType={flowType}
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onNodeClick={onNodeClick}
        onPaneClick={onPaneClick}
        screens={screens}
        colors={colors}
        labels={labels}
        categories={categories}
      />

      <ScreenList
        screens={screens}
        colors={colors}
        labels={labels}
        baseUrl={baseUrl}
        selectedCategory={selectedCategory}
        onSelectScreen={handleSelectScreen}
      />
    </div>
  )
}