"use client";

import { useState, type ReactNode } from "react";
import { Menu, X } from "lucide-react";
import { ParticipantSidebar } from "@/components/features/participant/ParticipantSidebar";
import { Button } from "@/components/ui/Button";
import { cn } from "@/lib/utils/cn";

interface ParticipantShellProps {
  userName: string;
  paused: boolean;
  children: ReactNode;
}

export function ParticipantShell({
  userName,
  paused,
  children,
}: ParticipantShellProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex h-screen overflow-hidden bg-bg">
      {sidebarOpen && (
        <button
          type="button"
          aria-label="Close menu"
          className="fixed inset-0 z-40 bg-navy/60 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex h-screen shrink-0 flex-col transition-transform duration-200",
          "lg:relative lg:z-auto lg:translate-x-0",
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <Button
          variant="icon"
          size="icon"
          type="button"
          className="absolute right-2 top-2 z-10 lg:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-label="Close sidebar"
        >
          <X className="h-4 w-4" />
        </Button>
        <ParticipantSidebar
          userName={userName}
          onNavigate={() => setSidebarOpen(false)}
        />
      </div>

      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
        <div className="flex shrink-0 items-center border-b border-border bg-white px-4 py-2 lg:hidden">
          <Button
            variant="icon"
            size="icon"
            type="button"
            onClick={() => setSidebarOpen(true)}
            aria-label="Open menu"
          >
            <Menu className="h-[15px] w-[15px]" />
          </Button>
        </div>
        {paused && (
          <div className="border-b border-warning/30 bg-warning-bg px-4 py-2 text-center text-[12.5px] font-semibold text-warning sm:px-[26px]">
            Participation is paused — you won&apos;t receive new questions until
            you resume it in Profile &amp; Privacy.
          </div>
        )}
        {children}
      </div>
    </div>
  );
}