import { useState } from 'react';
import { Plus, Trash2, Play, Pause, Users } from 'lucide-react';
import type { BattleSession, BattleMap } from '@/shared/types';
import { cn } from '@/shared/lib/utils';

interface BattleSessionListProps {
  sessions: BattleSession[];
  maps: BattleMap[];
  selectedSessionId: string | null;
  isGM: boolean;
  onSelectSession: (sessionId: string) => void;
  onCreateSession: (name: string, mapId?: string) => void;
  onDeleteSession: (sessionId: string) => void;
  onToggleActive: (sessionId: string, isActive: boolean) => void;
}

export function BattleSessionList({
  sessions,
  maps,
  selectedSessionId,
  isGM,
  onSelectSession,
  onCreateSession,
  onDeleteSession,
  onToggleActive,
}: BattleSessionListProps) {
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [newSessionName, setNewSessionName] = useState('');
  const [selectedMapId, setSelectedMapId] = useState<string>('');

  const handleCreate = () => {
    if (!newSessionName.trim()) return;
    onCreateSession(newSessionName.trim(), selectedMapId || undefined);
    setNewSessionName('');
    setSelectedMapId('');
    setShowCreateForm(false);
  };

  return (
    <div className="w-64 bg-black/30 border-r border-white/10 flex flex-col">
      {/* Header */}
      <div className="p-3 border-b border-white/10 flex items-center justify-between">
        <h2 className="font-semibold text-white">Kämpfe</h2>
        {isGM && (
          <button
            onClick={() => setShowCreateForm(!showCreateForm)}
            className="p-1.5 rounded-lg bg-primary/20 hover:bg-primary/30 text-primary transition-colors"
          >
            <Plus className="w-4 h-4" />
          </button>
        )}
      </div>

      {/* Create form */}
      {showCreateForm && isGM && (
        <div className="p-3 border-b border-white/10 space-y-2">
          <input
            type="text"
            placeholder="Kampfname..."
            value={newSessionName}
            onChange={(e) => setNewSessionName(e.target.value)}
            className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder:text-white/40 focus:outline-none focus:border-primary"
            autoFocus
          />
          <select
            value={selectedMapId}
            onChange={(e) => setSelectedMapId(e.target.value)}
            className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:border-primary"
          >
            <option value="">Keine Karte</option>
            {maps.map((map) => (
              <option key={map.id} value={map.id}>
                {map.name}
              </option>
            ))}
          </select>
          <div className="flex gap-2">
            <button
              onClick={handleCreate}
              disabled={!newSessionName.trim()}
              className="flex-1 px-3 py-1.5 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Erstellen
            </button>
            <button
              onClick={() => setShowCreateForm(false)}
              className="px-3 py-1.5 bg-white/10 text-white rounded-lg text-sm hover:bg-white/20 transition-colors"
            >
              Abbrechen
            </button>
          </div>
        </div>
      )}

      {/* Session list */}
      <div className="flex-1 overflow-y-auto">
        {sessions.length === 0 ? (
          <div className="p-4 text-center text-white/50 text-sm">
            Keine Kämpfe vorhanden
          </div>
        ) : (
          <div className="p-2 space-y-1">
            {sessions.map((session) => (
              <div
                key={session.id}
                className={cn(
                  'p-3 rounded-lg cursor-pointer transition-colors',
                  selectedSessionId === session.id
                    ? 'bg-primary/30 border border-primary'
                    : 'bg-white/5 border border-transparent hover:bg-white/10',
                )}
                onClick={() => onSelectSession(session.id)}
              >
                <div className="flex items-center justify-between">
                  <span className="font-medium text-white truncate">
                    {session.name || 'Unbenannter Kampf'}
                  </span>
                  {session.isActive && (
                    <span className="px-1.5 py-0.5 text-[10px] font-bold bg-green-500 text-white rounded">
                      LIVE
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-3 mt-1 text-xs text-white/50">
                  <span className="flex items-center gap-1">
                    <Users className="w-3 h-3" />
                    {session.tokens.length}
                  </span>
                  {session.map && (
                    <span className="truncate">{session.map.name}</span>
                  )}
                </div>

                {/* Actions for GM */}
                {isGM && selectedSessionId === session.id && (
                  <div className="flex gap-1 mt-2">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onToggleActive(session.id, !session.isActive);
                      }}
                      className={cn(
                        'flex-1 flex items-center justify-center gap-1 px-2 py-1 rounded text-xs transition-colors',
                        session.isActive
                          ? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
                          : 'bg-green-500/20 text-green-400 hover:bg-green-500/30',
                      )}
                    >
                      {session.isActive ? (
                        <>
                          <Pause className="w-3 h-3" /> Pausieren
                        </>
                      ) : (
                        <>
                          <Play className="w-3 h-3" /> Starten
                        </>
                      )}
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        if (confirm('Kampf wirklich löschen?')) {
                          onDeleteSession(session.id);
                        }
                      }}
                      className="px-2 py-1 rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
                    >
                      <Trash2 className="w-3 h-3" />
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
