'use client'

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

interface StatsBarProps {
  totalScreens: number
  totalConnections: number
  connectedCount: number
  selectedNode: string | null
  previewScreen: ScreenDefinition | null
  onReset: () => void
}

export function StatsBar({
  totalScreens,
  totalConnections,
  connectedCount,
  selectedNode,
  previewScreen,
  onReset,
}: StatsBarProps) {
  return (
    <div className="grid grid-cols-4 gap-4">
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-slate-800">{totalScreens}</div>
        <div className="text-sm text-slate-500">Screens</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
        <div className="text-3xl font-bold text-primary-600">{totalConnections}</div>
        <div className="text-sm text-slate-500">Verbindungen</div>
      </div>
      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm col-span-2">
        {selectedNode ? (
          <div className="flex items-center gap-3">
            <div className="text-3xl">{previewScreen?.icon}</div>
            <div>
              <div className="font-bold text-slate-800">{previewScreen?.name}</div>
              <div className="text-sm text-slate-500">
                {connectedCount} verbundene Screen{connectedCount !== 1 ? 's' : ''}
              </div>
            </div>
            <button
              onClick={onReset}
              className="ml-auto px-3 py-1 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg"
            >
              Zuruecksetzen
            </button>
          </div>
        ) : (
          <div className="text-slate-500 text-sm">
            Klicke auf einen Screen um den Subtree zu sehen
          </div>
        )}
      </div>
    </div>
  )
}