"use client";

import { useState } from "react";
import { QrCode, LogOut, Crown, Lock } from "lucide-react";
import QrInviteModal from "./QrInviteModal";
import RoomManageModal from "./RoomManageModal";
import type { UserProfile, SceneType } from "@/types";
import { getSceneConfig } from "@/lib/sceneConfig";

interface TopNavProps {
  roomId: string;
  userCount?: number;
  onExit?: () => void;
  isCreator?: boolean;
  userId?: string;
  users?: string[];
  locked?: boolean;
  swipeCounts?: Record<string, number>;
  totalCards?: number;
  userProfiles?: Record<string, UserProfile>;
  scene?: SceneType;
}

export default function TopNav({
  roomId,
  userCount,
  onExit,
  isCreator = false,
  userId = "",
  users = [],
  locked = false,
  swipeCounts = {},
  totalCards = 0,
  userProfiles = {},
  scene = "eat",
}: TopNavProps) {
  const sceneConfig = getSceneConfig(scene);
  const [showQr, setShowQr] = useState(false);
  const [showManage, setShowManage] = useState(false);

  return (
    <>
      <nav className="relative z-10 flex h-14 items-center px-4">
        <div className="flex items-center gap-1.5">
          <button
            onClick={onExit}
            className="flex items-center justify-center rounded-full p-1.5 text-muted transition-colors active:bg-elevated active:text-secondary"
            aria-label="退出房间"
          >
            <LogOut size={15} />
          </button>
          <button
            onClick={() => setShowQr(true)}
            className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
          >
            <QrCode size={13} />
            邀请（{roomId}）
          </button>
          {isCreator && (
            <button
              onClick={() => setShowManage(true)}
              className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
            >
              <Crown size={13} />
              管理
              {locked && <Lock size={11} />}
            </button>
          )}
        </div>

        <h1 className="pointer-events-none absolute inset-x-0 text-center text-base font-bold tracking-tight text-heading">
          <span className="block leading-tight">NoWhatever</span>
          <span className="block text-[10px] font-medium tracking-widest text-muted">
            别说随便
          </span>
        </h1>
      </nav>

      <QrInviteModal
        open={showQr}
        onClose={() => setShowQr(false)}
        roomId={roomId}
        scene={scene}
      />

      {isCreator && (
        <RoomManageModal
          open={showManage}
          onClose={() => setShowManage(false)}
          roomId={roomId}
          userId={userId}
          users={users}
          locked={locked}
          swipeCounts={swipeCounts}
          totalCards={totalCards}
          userProfiles={userProfiles}
        />
      )}
    </>
  );
}
