'use client'

import { useState } from 'react'
import type { LogEntry } from './types'

function LogEntryRow({ log }: { log: LogEntry }) {
  const [expanded, setExpanded] = useState(false)

  const typeColors = {
    error: 'bg-red-100 text-red-800',
    exception: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
    info: 'bg-blue-100 text-blue-800',
  }

  const typeColor = typeColors[log.type as keyof typeof typeColors] || 'bg-gray-100 text-gray-800'

  return (
    <div
      className="border-b border-gray-100 py-2 px-3 hover:bg-gray-50 cursor-pointer"
      onClick={() => setExpanded(!expanded)}
    >
      <div className="flex items-start gap-3">
        <span className="text-xs text-gray-400 font-mono whitespace-nowrap">{log.time}</span>
        <span className={`text-xs px-2 py-0.5 rounded ${typeColor} font-medium uppercase`}>
          {log.type}
        </span>
        <span className="text-sm text-gray-700 flex-1 break-all">
          {log.message.length > 150 && !expanded
            ? log.message.substring(0, 150) + '...'
            : log.message}
        </span>
      </div>
      {expanded && log.stack && (
        <pre className="mt-2 text-xs bg-gray-900 text-gray-100 p-2 rounded overflow-x-auto">
          {log.stack}
        </pre>
      )}
    </div>
  )
}

export function ConsoleLogPanel({
  logs,
  onRefresh,
  onClear,
  isLoading,
}: {
  logs: LogEntry[]
  onRefresh: () => void
  onClear: () => void
  isLoading: boolean
}) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
        <h3 className="font-semibold text-gray-900">Console Logs</h3>
        <div className="flex gap-2">
          <button
            onClick={onClear}
            className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors"
          >
            Clear
          </button>
          <button
            onClick={onRefresh}
            disabled={isLoading}
            className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50 transition-colors"
          >
            {isLoading ? 'Laden...' : 'Aktualisieren'}
          </button>
        </div>
      </div>
      <div className="max-h-96 overflow-y-auto">
        {logs.length === 0 ? (
          <div className="p-8 text-center text-gray-500">
            <svg className="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <p>Keine Logs vorhanden</p>
            <p className="text-sm mt-1">Logs erscheinen, wenn Unity Nachrichten generiert</p>
          </div>
        ) : (
          logs.map((log, index) => <LogEntryRow key={index} log={log} />)
        )}
      </div>
    </div>
  )
}