'use client'

import { Icons, type BreakoutRoom } from './types'

interface BreakoutTabProps {
  isDark: boolean
  hasActiveMeeting: boolean
  breakoutRooms: BreakoutRoom[]
  breakoutAssignment: string
  breakoutTimer: number
  setBreakoutAssignment: (val: string) => void
  setBreakoutTimer: (val: number) => void
  addBreakoutRoom: () => void
  removeBreakoutRoom: (id: string) => void
  startQuickMeeting: () => void
}

export function BreakoutTab({
  isDark, hasActiveMeeting, breakoutRooms,
  breakoutAssignment, breakoutTimer,
  setBreakoutAssignment, setBreakoutTimer,
  addBreakoutRoom, removeBreakoutRoom, startQuickMeeting,
}: BreakoutTabProps) {
  return (
    <>
      {/* Active Meeting Warning */}
      {!hasActiveMeeting && (
        <div className={`backdrop-blur-xl border rounded-3xl p-6 flex items-center gap-6 mb-8 ${
          isDark
            ? 'bg-blue-500/10 border-blue-500/30'
            : 'bg-blue-50 border-blue-200 shadow-lg'
        }`}>
          <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
            {Icons.video}
          </div>
          <div className="flex-1">
            <div className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Kein aktives Meeting</div>
            <div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
              Breakout-Rooms koennen nur waehrend eines aktiven Meetings erstellt werden.
            </div>
          </div>
          <button
            onClick={startQuickMeeting}
            className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-2xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105"
          >
            Meeting starten
          </button>
        </div>
      )}

      {/* How it works */}
      <div className={`backdrop-blur-xl border rounded-3xl p-6 mb-8 ${
        isDark ? 'bg-white/10 border-white/20' : 'bg-white/70 border-black/10 shadow-lg'
      }`}>
        <h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>So funktionieren Breakout-Rooms</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { icon: Icons.grid, color: 'from-blue-400 to-blue-600', title: '1. Raeume erstellen', desc: 'Erstellen Sie mehrere Breakout-Rooms fuer Gruppenarbeit.' },
            { icon: Icons.users, color: 'from-purple-400 to-purple-600', title: '2. Teilnehmer zuweisen', desc: 'Weisen Sie Teilnehmer manuell oder automatisch zu.' },
            { icon: Icons.play, color: 'from-green-400 to-emerald-600', title: '3. Sessions starten', desc: 'Starten Sie alle Raeume gleichzeitig oder einzeln.' },
            { icon: Icons.clock, color: 'from-amber-400 to-orange-600', title: '4. Timer setzen', desc: 'Setzen Sie einen Timer fuer automatisches Beenden.' },
          ].map((step, index) => (
            <div key={index} className="text-center">
              <div className={`w-14 h-14 bg-gradient-to-br ${step.color} rounded-2xl flex items-center justify-center text-white shadow-lg mx-auto mb-4`}>
                {step.icon}
              </div>
              <h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{step.title}</h4>
              <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{step.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Breakout Configuration */}
      <div className={`backdrop-blur-xl border rounded-3xl overflow-hidden ${
        isDark ? 'bg-white/10 border-white/20' : 'bg-white/70 border-black/10 shadow-lg'
      }`}>
        <div className={`p-6 border-b flex items-center justify-between ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
          <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Breakout-Konfiguration</h2>
          <button
            onClick={addBreakoutRoom}
            disabled={!hasActiveMeeting}
            className={`flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
              isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
            }`}
          >
            {Icons.plus}
            Raum hinzufuegen
          </button>
        </div>

        {/* Breakout Rooms Grid */}
        <div className="p-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            {breakoutRooms.map((room) => (
              <div
                key={room.id}
                className={`backdrop-blur-xl border rounded-2xl p-4 transition-all ${
                  hasActiveMeeting
                    ? isDark ? 'bg-white/5 border-white/10' : 'bg-white/50 border-slate-200'
                    : 'opacity-50'
                }`}
              >
                <div className="flex items-center justify-between mb-3">
                  <span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{room.name}</span>
                  <span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{room.participants.length} Teilnehmer</span>
                </div>
                <div className={`min-h-[60px] rounded-xl p-3 text-sm ${
                  isDark ? 'bg-white/5 text-white/40' : 'bg-slate-50 text-slate-400'
                }`}>
                  {room.participants.length > 0 ? room.participants.join(', ') : 'Keine Teilnehmer'}
                </div>
                {breakoutRooms.length > 1 && (
                  <button onClick={() => removeBreakoutRoom(room.id)}
                    className="mt-3 text-sm text-red-500 hover:text-red-400 transition-colors">
                    Entfernen
                  </button>
                )}
              </div>
            ))}
          </div>

          <div className={`border-t pt-6 space-y-4 ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
                  Automatische Zuweisung
                </label>
                <select
                  value={breakoutAssignment}
                  onChange={(e) => setBreakoutAssignment(e.target.value)}
                  disabled={!hasActiveMeeting}
                  className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed ${
                    isDark
                      ? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
                      : 'bg-white border border-slate-300 text-slate-900 focus:ring-blue-300'
                  }`}
                >
                  <option value="equal">Gleichmaessig verteilen</option>
                  <option value="random">Zufaellig zuweisen</option>
                  <option value="manual">Manuell zuweisen</option>
                </select>
              </div>
              <div>
                <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
                  Timer (Minuten)
                </label>
                <input
                  type="number"
                  value={breakoutTimer}
                  onChange={(e) => setBreakoutTimer(Number(e.target.value))}
                  disabled={!hasActiveMeeting}
                  className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed ${
                    isDark
                      ? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
                      : 'bg-white border border-slate-300 text-slate-900 focus:ring-blue-300'
                  }`}
                />
              </div>
            </div>

            <div className="flex gap-3">
              <button
                disabled={!hasActiveMeeting}
                className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
              >
                Breakout-Sessions starten
              </button>
              <button
                disabled={!hasActiveMeeting}
                className={`px-6 py-3 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
                  isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                }`}
              >
                Alle zurueckholen
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}