'use client'

import GameView from '@/components/admin/GameView'
import type { BridgeStatus, LogEntry, DiagnosticEntry } from './types'
import { StatCard } from './StatCard'
import { ConsoleLogPanel } from './ConsoleLogPanel'
import { DiagnosticPanel } from './DiagnosticPanel'

export function EditorTab({
  status,
  logs,
  diagnostics,
  isLoadingLogs,
  isLoadingDiagnose,
  error,
  onSendCommand,
  onFetchLogs,
  onClearLogs,
  onRunDiagnose,
}: {
  status: BridgeStatus | null
  logs: LogEntry[]
  diagnostics: DiagnosticEntry[]
  isLoadingLogs: boolean
  isLoadingDiagnose: boolean
  error: string | null
  onSendCommand: (command: string) => void
  onFetchLogs: () => void
  onClearLogs: () => void
  onRunDiagnose: () => void
}) {
  return (
    <>
      {/* Stats Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <StatCard
          title="Fehler"
          value={status?.errors ?? '-'}
          color={status?.errors && status.errors > 0 ? 'red' : 'green'}
        />
        <StatCard
          title="Warnungen"
          value={status?.warnings ?? '-'}
          color={status?.warnings && status.warnings > 0 ? 'yellow' : 'green'}
        />
        <StatCard title="Szene" value={status?.scene ?? '-'} color="blue" />
        <StatCard
          title="Play Mode"
          value={status?.is_playing ? 'Aktiv' : 'Inaktiv'}
          color={status?.is_playing ? 'green' : 'gray'}
        />
      </div>

      {/* Quick Actions */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-4 mb-6">
        <h3 className="font-semibold text-gray-900 mb-3">Quick Actions</h3>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => onSendCommand('play')}
            disabled={!status || status.is_playing}
            className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
          >
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z" />
            </svg>
            Play
          </button>
          <button
            onClick={() => onSendCommand('stop')}
            disabled={!status || !status.is_playing}
            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
          >
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <rect x="6" y="6" width="12" height="12" />
            </svg>
            Stop
          </button>
          <button
            onClick={() => onSendCommand('quicksetup')}
            disabled={!status || status.is_playing}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            Quick Setup
          </button>
        </div>
      </div>

      {/* Game View */}
      <div className="mb-6">
        <GameView
          isUnityOnline={!!status && !error}
          isPlaying={status?.is_playing}
        />
      </div>

      {/* Two Column Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <ConsoleLogPanel
          logs={logs}
          onRefresh={onFetchLogs}
          onClear={onClearLogs}
          isLoading={isLoadingLogs}
        />
        <DiagnosticPanel
          diagnostics={diagnostics}
          isLoading={isLoadingDiagnose}
          onRun={onRunDiagnose}
        />
      </div>

      {/* API Info */}
      <div className="mt-6 bg-slate-50 rounded-lg border border-slate-200 p-4">
        <h3 className="font-semibold text-slate-900 mb-2">API Endpoints</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm font-mono">
          <code className="bg-slate-100 px-2 py-1 rounded">GET /status</code>
          <code className="bg-slate-100 px-2 py-1 rounded">GET /logs/errors</code>
          <code className="bg-slate-100 px-2 py-1 rounded">GET /scene</code>
          <code className="bg-slate-100 px-2 py-1 rounded">POST /diagnose</code>
          <code className="bg-slate-100 px-2 py-1 rounded">GET /play</code>
          <code className="bg-slate-100 px-2 py-1 rounded">GET /stop</code>
          <code className="bg-blue-100 text-blue-800 px-2 py-1 rounded">GET /screenshot</code>
          <code className="bg-blue-100 text-blue-800 px-2 py-1 rounded">GET /stream/start</code>
          <code className="bg-blue-100 text-blue-800 px-2 py-1 rounded">GET /stream/frame</code>
        </div>
        <p className="text-sm text-slate-600 mt-3">
          Basis-URL: <code className="bg-slate-100 px-1 rounded">http://localhost:8090</code>
          <span className="text-blue-600 ml-2">(Streaming-Endpoints blau markiert)</span>
        </p>
      </div>
    </>
  )
}