"use client";

import { useEffect, useRef, useState } from "react";
import {
  ArrowLeft,
  CheckCircle2,
  Clock,
  Globe,
  Lock,
  Plus,
  Users,
  UserCheck,
  Zap,
  X,
  Flame,
  Target,
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";

/* ── Types ───────────────────────────────────────────────────────────────── */

type RoomPrivacy = "public" | "friends" | "private";

interface RoomMember {
  userId: string;
  name: string;
  goal: string;
  joinedAt: number;
  timerMs: number;  // their elapsed ms, broadcast periodically
}

interface Room {
  id: string;
  name: string;
  goal: string;
  privacy: RoomPrivacy;
  createdAt: number;
  members: Record<string, RoomMember>;
}

const PRIVACY_CONFIG: Record<RoomPrivacy, {
  icon: React.ElementType;
  label: string;
  desc: string;
  color: string;
  border: string;
  bg: string;
}> = {
  public: {
    icon: Globe,
    label: "Öffentlich",
    desc: "Alle können joinen",
    color: "text-emerald-300",
    border: "border-emerald-500/[0.25]",
    bg: "bg-emerald-500/[0.08]",
  },
  friends: {
    icon: UserCheck,
    label: "Freunde",
    desc: "Nur bekannte Personen",
    color: "text-sky-300",
    border: "border-sky-500/[0.25]",
    bg: "bg-sky-500/[0.08]",
  },
  private: {
    icon: Lock,
    label: "Privat",
    desc: "Nur für dich",
    color: "text-amber-300",
    border: "border-amber-500/[0.25]",
    bg: "bg-amber-500/[0.08]",
  },
};

/* ── Helpers ─────────────────────────────────────────────────────────────── */

function fmtTimer(ms: number) {
  const s = Math.floor(ms / 1000);
  const m = Math.floor(s / 60);
  const h = Math.floor(m / 60);
  if (h > 0) return `${h}:${String(m % 60).padStart(2,"0")}:${String(s % 60).padStart(2,"0")}`;
  return `${String(m).padStart(2,"0")}:${String(s % 60).padStart(2,"0")}`;
}

function nowMs() {
  return Date.now();
}

function uid() { return Math.random().toString(36).slice(2) + Date.now().toString(36); }

const ROOMS_KEY = "mindavio-focus-rooms";
const USER_KEY  = "mindavio-focus-rooms-user";

function getOrCreateUserId(): string {
  const stored = localStorage.getItem(USER_KEY);
  if (stored) return stored;
  const id = uid();
  localStorage.setItem(USER_KEY, id);
  return id;
}

function loadRooms(): Room[] {
  try {
    const raw = localStorage.getItem(ROOMS_KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw) as Room[];
    // Remove rooms older than 24h or with no members
    const cutoff = Date.now() - 24 * 60 * 60 * 1000;
    return parsed.filter(r => r.createdAt > cutoff);
  } catch { return []; }
}

function saveRooms(rooms: Room[]) {
  localStorage.setItem(ROOMS_KEY, JSON.stringify(rooms));
}

/* ── Create room modal ──────────────────────────────────────────────────── */

function CreateRoomModal({ onClose, onCreate }: {
  onClose: () => void;
  onCreate: (name: string, goal: string, myGoal: string, myName: string, privacy: RoomPrivacy) => void;
}) {
  const [name,    setName]    = useState("Deep Work Session");
  const [goal,    setGoal]    = useState("");
  const [myGoal,  setMyGoal]  = useState("");
  const [privacy, setPrivacy] = useState<RoomPrivacy>("public");
  const [myName, setMyName]   = useState(() =>
    typeof window !== "undefined" ? (localStorage.getItem("mindavio-focus-rooms-name") || "") : ""
  );

  function handleCreate() {
    if (!myName.trim()) return;
    if (typeof window !== "undefined") localStorage.setItem("mindavio-focus-rooms-name", myName.trim());
    onCreate(name.trim() || "Focus Room", goal.trim(), myGoal.trim(), myName.trim(), privacy);
    onClose();
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
      onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="w-full max-w-md bg-[#0e0c15] border border-white/[0.08] rounded-[24px] overflow-hidden">

        {/* Header */}
        <div className="relative px-6 py-5 border-b border-white/[0.06]">
          <h2 className="text-white font-bold text-lg text-center">Raum erstellen</h2>
          <button onClick={onClose} className="absolute right-6 top-5 w-7 h-7 rounded-lg border border-white/[0.07] bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors">
            <X className="w-3.5 h-3.5" />
          </button>
        </div>

        <div className="p-6 space-y-5">
          {/* Your name */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">Dein Name</label>
            <input value={myName} onChange={e => setMyName(e.target.value)} placeholder="Wie heißt du?"
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-center text-white text-sm placeholder:text-white/20 outline-none focus:border-sky-400/40 transition-colors" />
          </div>

          {/* Room name */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">Raumname</label>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="z.B. Morning Deep Work"
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-center text-white text-sm placeholder:text-white/20 outline-none focus:border-sky-400/40 transition-colors" />
          </div>

          {/* Privacy picker */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-3">Sichtbarkeit</label>
            <div className="grid grid-cols-3 gap-2">
              {(Object.keys(PRIVACY_CONFIG) as RoomPrivacy[]).map(key => {
                const cfg = PRIVACY_CONFIG[key];
                const Icon = cfg.icon;
                const active = privacy === key;
                return (
                  <button
                    key={key}
                    type="button"
                    onClick={() => setPrivacy(key)}
                    className={cn(
                      "flex flex-col items-center gap-1.5 rounded-xl border px-2 py-3 text-center transition-all",
                      active
                        ? cn(cfg.border, cfg.bg)
                        : "border-white/[0.07] bg-white/[0.025] hover:bg-white/[0.05]",
                    )}
                  >
                    <Icon className={cn("w-4 h-4", active ? cfg.color : "text-white/25")} />
                    <span className={cn("text-xs font-bold leading-none", active ? "text-white/90" : "text-white/35")}>
                      {cfg.label}
                    </span>
                    <span className={cn("text-[10px] leading-tight", active ? "text-white/45" : "text-white/20")}>
                      {cfg.desc}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Theme */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">
              Raum-Thema <span className="text-white/20 normal-case font-normal">(optional)</span>
            </label>
            <input value={goal} onChange={e => setGoal(e.target.value)} placeholder="z.B. Product Development, Writing…"
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-white text-sm placeholder:text-white/20 outline-none focus:border-sky-400/40 transition-colors" />
          </div>

          {/* Personal goal */}
          <div>
            <label className="text-white/40 text-xs uppercase tracking-widest font-bold block mb-2">
              Dein Ziel heute <span className="text-white/20 normal-case font-normal">(optional)</span>
            </label>
            <input value={myGoal} onChange={e => setMyGoal(e.target.value)} placeholder="Was willst du in dieser Session schaffen?"
              className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-white text-sm placeholder:text-white/20 outline-none focus:border-sky-400/40 transition-colors" />
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-3 px-6 pb-6">
          <button onClick={onClose}
            className="flex-1 py-3 rounded-xl border border-white/[0.07] bg-white/[0.03] text-white/50 text-sm font-medium hover:bg-white/[0.06] transition-colors">
            Abbrechen
          </button>
          <button onClick={handleCreate} disabled={!myName.trim()}
            className="flex-1 py-3 rounded-xl bg-sky-500 text-white text-sm font-bold disabled:opacity-30 hover:bg-sky-400 transition-colors flex items-center justify-center gap-2">
            <Zap className="w-4 h-4" />
            Raum erstellen
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── Active session view ─────────────────────────────────────────────────── */

function ActiveSession({
  room,
  myId,
  myMember,
  onCheckIn,
}: {
  room: Room;
  myId: string;
  myMember: RoomMember;
  onCheckIn: (win: string) => void;
}) {
  const [elapsed,   setElapsed]   = useState(0);
  const [checkIn,   setCheckIn]   = useState(false);
  const [win,       setWin]       = useState("");
  const [startAt] = useState(() => nowMs() - myMember.timerMs);
  const startRef = useRef(startAt);

  useEffect(() => {
    const id = setInterval(() => {
      setElapsed(nowMs() - startRef.current);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  const members = Object.values(room.members).sort((a, b) => b.timerMs - a.timerMs);

  return (
    <div className="min-h-full bg-[#050508] text-white flex flex-col">

      {/* Top bar */}
      <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
        <div className="flex items-center gap-3">
          <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
          <span className="text-white/50 text-sm">{room.name}</span>
          {room.goal && <span className="text-white/20 text-xs">· {room.goal}</span>}
        </div>
        <button onClick={() => setCheckIn(true)}
          className="flex items-center gap-2 px-3.5 py-1.5 rounded-xl border border-emerald-500/25 bg-emerald-500/[0.08] text-emerald-300 text-xs font-semibold hover:bg-emerald-500/15 transition-colors">
          <CheckCircle2 className="w-3.5 h-3.5" />
          Abschließen
        </button>
      </div>

      {/* Big timer */}
      <div className="flex-1 flex flex-col items-center justify-center gap-8 px-6">
        <div className="text-center">
          <p className="text-white/20 text-xs uppercase tracking-widest mb-3">Zeit in Session</p>
          <p className="text-[80px] font-black tabular-nums text-white tracking-tight leading-none"
            style={{ textShadow: "0 0 80px rgba(139,92,246,0.3)" }}>
            {fmtTimer(elapsed)}
          </p>
          {myMember.goal && (
            <p className="text-white/30 text-sm mt-4 max-w-xs mx-auto">
              <Target className="w-3.5 h-3.5 inline mr-1.5 -mt-0.5" />
              {myMember.goal}
            </p>
          )}
        </div>

        {/* Members in room */}
        <div className="w-full max-w-sm">
          <p className="text-white/20 text-xs uppercase tracking-widest mb-3 text-center">
            {members.length} {members.length === 1 ? "Person" : "Personen"} arbeiten gerade
          </p>
          <div className="space-y-2">
            {members.map(m => (
              <div key={m.userId}
                className={cn(
                  "flex items-center justify-between rounded-2xl border px-4 py-3",
                  m.userId === myId
                    ? "border-violet-500/25 bg-violet-500/[0.07]"
                    : "border-white/[0.06] bg-white/[0.02]",
                )}>
                <div className="flex items-center gap-3">
                  <div className={cn(
                    "w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold",
                    m.userId === myId ? "bg-violet-500/30 text-violet-200" : "bg-white/[0.07] text-white/40",
                  )}>
                    {m.name.slice(0,1).toUpperCase()}
                  </div>
                  <div>
                    <p className={cn("text-sm font-medium", m.userId === myId ? "text-white" : "text-white/60")}>
                      {m.name} {m.userId === myId && <span className="text-white/30 text-xs font-normal">(du)</span>}
                    </p>
                    {m.goal && <p className="text-white/25 text-xs truncate max-w-[180px]">{m.goal}</p>}
                  </div>
                </div>
                <div className="flex items-center gap-1.5 text-white/30 text-xs">
                  <Clock className="w-3 h-3" />
                  <span className="tabular-nums">{fmtTimer(m.userId === myId ? elapsed : m.timerMs)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Check-in modal */}
      {checkIn && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
          <div className="w-full max-w-md bg-[#0e0c15] border border-white/[0.08] rounded-[24px] overflow-hidden">
            <div className="px-6 py-6 border-b border-white/[0.06]">
              <h3 className="text-white font-bold text-lg text-center">Session abschließen</h3>
              <p className="text-white/35 text-sm mt-1 px-1">
                Du warst <span className="text-white/70 font-bold">{fmtTimer(elapsed)}</span> im Flow. Was hast du erreicht?
              </p>
            </div>
            <div className="p-6">
              <textarea
                value={win}
                onChange={e => setWin(e.target.value)}
                placeholder="Kurz: Was hast du heute geschafft?"
                rows={3}
                autoFocus
                className="w-full bg-white/[0.04] border border-white/[0.08] rounded-xl px-4 py-3 text-white text-sm placeholder:text-white/20 outline-none focus:border-white/20 transition-colors resize-none"
              />
            </div>
            <div className="flex gap-3 px-6 pb-6">
              <button onClick={() => setCheckIn(false)}
                className="flex-1 py-3 rounded-xl border border-white/[0.07] bg-white/[0.03] text-white/50 text-sm font-medium hover:bg-white/[0.06] transition-colors">
                Zurück
              </button>
              <button onClick={() => { onCheckIn(win); }}
                className="flex-1 py-3 rounded-xl bg-emerald-600 text-white text-sm font-bold hover:bg-emerald-500 transition-colors flex items-center justify-center gap-2">
                <Flame className="w-4 h-4" />
                Session beenden
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ── Room lobby card ─────────────────────────────────────────────────────── */

function PrivacyBadge({ privacy }: { privacy: RoomPrivacy }) {
  const cfg = PRIVACY_CONFIG[privacy];
  const Icon = cfg.icon;
  if (privacy === "public") return null; // no badge for public (default)
  return (
    <span className={cn(
      "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold border",
      cfg.bg, cfg.border, cfg.color,
    )}>
      <Icon className="w-2.5 h-2.5" />
      {cfg.label}
    </span>
  );
}

function RoomCard({ now, room, onJoin }: { now: number; room: Room; onJoin: () => void }) {
  const count = Object.keys(room.members).length;
  const ago = Math.round((now - room.createdAt) / 60_000);
  const agoLabel = ago < 60 ? `Vor ${ago}min` : `Vor ${Math.round(ago/60)}h`;
  const privacy = room.privacy ?? "public";

  return (
    <button onClick={onJoin}
      className="group w-full text-left rounded-[18px] border border-white/[0.07] bg-white/[0.02] hover:border-violet-500/[0.22] hover:bg-violet-500/[0.05] p-5 transition-all duration-200 hover:scale-[1.01]">
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1.5">
            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shrink-0" />
            <h3 className="text-white font-semibold text-sm truncate">{room.name}</h3>
            <PrivacyBadge privacy={privacy} />
          </div>
          {room.goal && <p className="text-white/35 text-xs">{room.goal}</p>}
          <p className="text-white/20 text-xs mt-2">{agoLabel} gestartet</p>
        </div>
        <div className="shrink-0 flex items-center gap-1.5 bg-white/[0.05] rounded-lg px-2.5 py-1.5">
          <Users className="w-3.5 h-3.5 text-white/40" />
          <span className="text-white/50 text-xs font-medium">{count}</span>
        </div>
      </div>

      {count > 0 && (
        <div className="mt-3 flex gap-1.5 flex-wrap">
          {Object.values(room.members).slice(0, 5).map(m => (
            <div key={m.userId}
              className="flex items-center gap-1.5 rounded-full bg-white/[0.04] border border-white/[0.06] px-2.5 py-1">
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
              <span className="text-white/40 text-xs">{m.name}</span>
            </div>
          ))}
        </div>
      )}
    </button>
  );
}

/* ── Page ────────────────────────────────────────────────────────────────── */

export default function FocusRoomsPage() {
  const [rooms,       setRooms]       = useState<Room[]>([]);
  const [createOpen,  setCreateOpen]  = useState(false);
  const [activeRoom,  setActiveRoom]  = useState<Room | null>(null);
  const [myId,        setMyId]        = useState("");
  const [myMember,    setMyMember]    = useState<RoomMember | null>(null);
  const [justFinished, setJustFinished] = useState<{ win: string; duration: number } | null>(null);
  const [now, setNow] = useState(nowMs);

  useEffect(() => {
    const init = window.setTimeout(() => {
      setMyId(getOrCreateUserId());
      setRooms(loadRooms());
    }, 0);
    // Poll for room updates every 5s
    const poll = setInterval(() => {
      setNow(nowMs());
      setRooms(loadRooms());
    }, 5000);
    return () => {
      window.clearTimeout(init);
      clearInterval(poll);
    };
  }, []);

  // Broadcast my timer every 10s if in a room
  useEffect(() => {
    if (!activeRoom || !myId || !myMember) return;
    const startTime = nowMs() - myMember.timerMs;
    const broadcast = setInterval(() => {
      const current = loadRooms();
      const idx = current.findIndex(r => r.id === activeRoom.id);
      if (idx === -1) return;
      current[idx].members[myId] = {
        ...current[idx].members[myId],
        timerMs: nowMs() - startTime,
      };
      saveRooms(current);
    }, 10_000);
    return () => clearInterval(broadcast);
  }, [activeRoom, myId, myMember]);

  function handleCreate(name: string, goal: string, myGoal: string, myName: string, privacy: RoomPrivacy) {
    const timestamp = nowMs();
    const member: RoomMember = {
      userId: myId, name: myName, goal: myGoal, joinedAt: timestamp, timerMs: 0,
    };
    const room: Room = {
      id: uid(), name, goal, privacy, createdAt: timestamp,
      members: { [myId]: member },
    };
    const updated = [...loadRooms(), room];
    saveRooms(updated);
    setRooms(updated);
    setActiveRoom(room);
    setMyMember(member);
  }

  function handleJoin(roomId: string) {
    const myName = localStorage.getItem("mindavio-focus-rooms-name") || "Anonym";
    const current = loadRooms();
    const idx = current.findIndex(r => r.id === roomId);
    if (idx === -1) return;
    // Private rooms cannot be joined from lobby
    if ((current[idx].privacy ?? "public") === "private") return;
    const member: RoomMember = {
      userId: myId, name: myName, goal: "", joinedAt: nowMs(), timerMs: 0,
    };
    current[idx].members[myId] = member;
    saveRooms(current);
    setRooms(current);
    setActiveRoom(current[idx]);
    setMyMember(member);
  }

  function handleLeave() {
    if (!activeRoom) return;
    const current = loadRooms();
    const idx = current.findIndex(r => r.id === activeRoom.id);
    if (idx !== -1) {
      delete current[idx].members[myId];
      if (Object.keys(current[idx].members).length === 0) {
        current.splice(idx, 1);
      }
      saveRooms(current);
    }
    setActiveRoom(null);
    setMyMember(null);
  }

  function handleCheckIn(win: string) {
    const elapsed = myMember ? nowMs() - myMember.joinedAt : 0;
    setJustFinished({ win, duration: elapsed });
    handleLeave();
  }

  // Active session
  if (activeRoom && myMember) {
    return (
      <ActiveSession
        room={activeRoom}
        myId={myId}
        myMember={myMember}
        onCheckIn={handleCheckIn}
      />
    );
  }

  // Finished summary
  if (justFinished) {
    return (
      <div className="min-h-full bg-[#0a0a0d] text-white flex flex-col items-center justify-center px-6 py-12 text-center">
        <div className="w-16 h-16 rounded-[18px] bg-emerald-500/15 border border-emerald-500/25 flex items-center justify-center mb-6">
          <Flame className="w-8 h-8 text-emerald-300" />
        </div>
        <h2 className="text-2xl font-black mb-2">Session abgeschlossen</h2>
        <p className="text-white/40 text-sm mb-1">{fmtTimer(justFinished.duration)} Deep Work</p>
        {justFinished.win && (
          <div className="mt-6 max-w-sm rounded-2xl border border-emerald-500/15 bg-emerald-500/[0.06] px-5 py-4">
            <p className="text-emerald-300/60 text-xs uppercase tracking-widest mb-2">Dein Win</p>
            <p className="text-white/70 text-sm leading-relaxed">{justFinished.win}</p>
          </div>
        )}
        <button onClick={() => setJustFinished(null)}
          className="mt-8 px-6 py-3 rounded-[12px] bg-white/[0.06] border border-white/[0.08] text-white/60 text-sm font-medium hover:text-white/80 hover:bg-white/[0.09] transition-colors">
          Zurück zur Lobby
        </button>
      </div>
    );
  }

  return (
    <div className="min-h-full bg-[#0a0a0d] text-white">

      {/* Hero */}
      <div className="relative overflow-hidden border-b border-white/[0.04]">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-20 -top-20 w-96 h-96 rounded-full opacity-12 blur-3xl"
            style={{ background: "radial-gradient(circle, #6d28d9, transparent 70%)" }} />
        </div>
        <div className="relative max-w-2xl mx-auto px-4 sm:px-6 py-10">
          <Link href="/focus" className="inline-flex items-center gap-1.5 text-white/30 hover:text-white/60 text-sm mb-7 transition-colors group">
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
            Focus
          </Link>

          <div className="flex items-end gap-5 mb-5">
            <div className="w-14 h-14 rounded-[16px] bg-violet-500/15 border border-violet-500/25 flex items-center justify-center shrink-0"
              style={{ boxShadow: "0 0 32px rgba(109,40,217,0.2)" }}>
              <Users className="w-7 h-7 text-violet-300" />
            </div>
            <div>
              <p className="text-violet-300/60 text-xs uppercase tracking-widest font-bold mb-1">Body Doubling</p>
              <h1 className="text-3xl font-black tracking-tight">Focus <span style={{ background: "linear-gradient(135deg,#a78bfa,#818cf8)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Rooms</span></h1>
            </div>
          </div>

          <p className="text-white/35 text-sm leading-relaxed max-w-lg">
            Arbeite still neben anderen. Kein Chat, kein Feed — nur gemeinsame Präsenz. Body Doubling erhöht nachweislich Produktivität und Fokus.
          </p>

          <button onClick={() => setCreateOpen(true)}
            className="mt-6 flex items-center gap-2 px-5 py-2.5 rounded-[12px] bg-violet-600 text-white text-sm font-bold hover:bg-violet-500 transition-colors shadow-[0_8px_24px_rgba(109,40,217,0.3)]">
            <Plus className="w-4 h-4" />
            Raum erstellen
          </button>
        </div>
      </div>

      {/* Lobby */}
      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8">
        {(() => {
          // Show public + friends rooms, and private rooms only if you're a member
          const visibleRooms = rooms.filter(r => {
            const p = r.privacy ?? "public";
            return p !== "private" || Object.keys(r.members ?? {}).includes(myId);
          });
          return visibleRooms.length > 0 ? (
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                <span className="text-white/40 text-xs uppercase tracking-widest font-bold">
                  {visibleRooms.length} aktive {visibleRooms.length === 1 ? "Raum" : "Räume"}
                </span>
                {/* Privacy legend */}
                <div className="ml-auto flex items-center gap-3">
                  {(["public", "friends"] as RoomPrivacy[]).map(key => {
                    const cfg = PRIVACY_CONFIG[key];
                    const Icon = cfg.icon;
                    return (
                      <span key={key} className={cn("flex items-center gap-1 text-[10px] font-semibold", cfg.color + "/60")}>
                        <Icon className="w-3 h-3" />
                        {cfg.label}
                      </span>
                    );
                  })}
                </div>
              </div>
              <div className="space-y-3">
                {visibleRooms.map(r => (
                  <RoomCard key={r.id} now={now} room={r} onJoin={() => handleJoin(r.id)} />
                ))}
              </div>
            </div>
          ) : (
            <div className="flex flex-col items-center py-20 gap-5 text-center">
              <div className="w-16 h-16 rounded-[18px] bg-violet-500/[0.07] border border-violet-500/15 flex items-center justify-center">
                <Users className="w-8 h-8 text-violet-500/30" />
              </div>
              <div>
                <h3 className="text-white/40 font-semibold mb-1">Keine aktiven Räume</h3>
                <p className="text-white/20 text-sm">Erstelle einen Raum und starte deinen Fokusblock.</p>
              </div>
            </div>
          );
        })()}
      </div>

      {createOpen && (
        <CreateRoomModal onClose={() => setCreateOpen(false)} onCreate={handleCreate} />
      )}
    </div>
  );
}