'use client'

import { useState } from 'react'

export function GameModeDemo() {
  const modes = [
    { name: 'Solo', icon: '🎮', players: '1', features: ['Einzelspieler', 'Offline moeglich', 'Eigenes Tempo'] },
    { name: 'Co-Op', icon: '🤝', players: '2-4', features: ['Team-Chat', 'Gemeinsame Strecke', 'Video optional'] },
    { name: 'Challenge', icon: '⚔️', players: '2', features: ['1v1 Wettbewerb', 'Live-Score', 'Video empfohlen'] },
    { name: 'Klassenrennen', icon: '🏁', players: '∞', features: ['Alle gegen alle', 'Lehrer-Moderation', 'Leaderboard'] },
  ]

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
      {modes.map((mode) => (
        <div key={mode.name} className="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-4 border border-indigo-100">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-3xl">{mode.icon}</span>
            <div>
              <h4 className="font-bold text-gray-900">{mode.name}</h4>
              <p className="text-sm text-gray-500">{mode.players} Spieler</p>
            </div>
          </div>
          <ul className="space-y-1">
            {mode.features.map((feature, i) => (
              <li key={i} className="text-sm text-gray-600 flex items-center gap-2">
                <span className="text-indigo-500">✓</span> {feature}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

export function ServiceStatusDemo() {
  const [matrixStatus, setMatrixStatus] = useState<'idle' | 'checking' | 'online' | 'offline'>('idle')
  const [jitsiStatus, setJitsiStatus] = useState<'idle' | 'checking' | 'online' | 'offline'>('idle')

  const checkMatrix = async () => {
    setMatrixStatus('checking')
    try {
      // In production, this would check the actual Matrix server
      await new Promise(resolve => setTimeout(resolve, 1000))
      setMatrixStatus('online') // Mock - assume online
    } catch {
      setMatrixStatus('offline')
    }
  }

  const checkJitsi = async () => {
    setJitsiStatus('checking')
    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      setJitsiStatus('online') // Mock
    } catch {
      setJitsiStatus('offline')
    }
  }

  return (
    <div className="mt-6 space-y-4">
      <h3 className="font-semibold text-gray-800">Service-Status pruefen:</h3>

      <div className="flex gap-4">
        <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-xl">💬</span>
              <span className="font-medium">Matrix Synapse</span>
            </div>
            <span className={`px-2 py-1 rounded text-xs font-medium ${
              matrixStatus === 'online' ? 'bg-green-100 text-green-700' :
              matrixStatus === 'offline' ? 'bg-red-100 text-red-700' :
              matrixStatus === 'checking' ? 'bg-yellow-100 text-yellow-700' :
              'bg-gray-100 text-gray-600'
            }`}>
              {matrixStatus === 'online' ? 'Online' :
               matrixStatus === 'offline' ? 'Offline' :
               matrixStatus === 'checking' ? 'Pruefe...' : 'Unbekannt'}
            </span>
          </div>
          <p className="text-sm text-gray-500 mb-3">Port 8008</p>
          <button
            onClick={checkMatrix}
            disabled={matrixStatus === 'checking'}
            className="w-full px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 disabled:opacity-50"
          >
            Status pruefen
          </button>
        </div>

        <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-xl">📹</span>
              <span className="font-medium">Jitsi Meet</span>
            </div>
            <span className={`px-2 py-1 rounded text-xs font-medium ${
              jitsiStatus === 'online' ? 'bg-green-100 text-green-700' :
              jitsiStatus === 'offline' ? 'bg-red-100 text-red-700' :
              jitsiStatus === 'checking' ? 'bg-yellow-100 text-yellow-700' :
              'bg-gray-100 text-gray-600'
            }`}>
              {jitsiStatus === 'online' ? 'Online' :
               jitsiStatus === 'offline' ? 'Offline' :
               jitsiStatus === 'checking' ? 'Pruefe...' : 'Unbekannt'}
            </span>
          </div>
          <p className="text-sm text-gray-500 mb-3">Port 8443</p>
          <button
            onClick={checkJitsi}
            disabled={jitsiStatus === 'checking'}
            className="w-full px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 disabled:opacity-50"
          >
            Status pruefen
          </button>
        </div>
      </div>
    </div>
  )
}

export function CodePreview({ title, code, language }: { title: string; code: string; language: string }) {
  return (
    <div className="mt-6 bg-gray-900 rounded-lg overflow-hidden">
      <div className="flex items-center justify-between px-4 py-2 bg-gray-800">
        <span className="text-sm text-gray-400">{title}</span>
        <span className="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded">{language}</span>
      </div>
      <pre className="p-4 text-sm text-gray-300 overflow-x-auto">
        <code>{code}</code>
      </pre>
    </div>
  )
}
