import type { ReactNode } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "~/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
import { cn } from "~/lib/utils";

interface DraftSidebarProps {
  collapsed: boolean;
  onCollapsedChange: (collapsed: boolean) => void;
  queueSection: ReactNode;
  participantsSection: ReactNode;
  className?: string;
}

export function DraftSidebar({
  collapsed,
  onCollapsedChange,
  queueSection,
  participantsSection,
  className,
}: DraftSidebarProps) {
  if (collapsed) {
    return (
      <div
        className={cn(
          "relative flex-shrink-0 bg-card border-r border-border transition-all duration-300",
          "w-12 hidden lg:block", // Hide completely on mobile when collapsed
          className
        )}
      >
        <Button
          variant="ghost"
          size="icon"
          onClick={() => onCollapsedChange(false)}
          className="absolute top-4 left-1/2 -translate-x-1/2"
          aria-label="Expand sidebar"
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    );
  }

  return (
    <>
      {/* Mobile backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40 lg:hidden"
        onClick={() => onCollapsedChange(true)}
        aria-label="Close sidebar"
      />

      <div
        className={cn(
          "relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col",
          "w-[350px]",
          // Mobile: fixed overlay, Desktop: normal sidebar
          "fixed inset-y-0 left-0 z-50 lg:relative lg:z-auto",
          className
        )}
      >
        <Accordion
          type="multiple"
          defaultValue={["queue", "participants"]}
          className="flex-1 overflow-hidden"
        >
          {/* Queue Section */}
          <AccordionItem value="queue" className="border-b">
            <AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted">
              <h2 className="font-semibold text-sm">My Queue</h2>
            </AccordionTrigger>
            <AccordionContent className="max-h-[40vh] overflow-y-auto pb-0">
              {queueSection}
            </AccordionContent>
          </AccordionItem>

          {/* Available Participants Section */}
          <AccordionItem value="participants" className="border-0">
            <AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted">
              <h2 className="font-semibold text-sm">Available Participants</h2>
            </AccordionTrigger>
            <AccordionContent className="pb-0">
              <div className="h-[calc(100vh-400px)] overflow-y-auto">
                {participantsSection}
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        {/* Collapse button at bottom */}
        <div className="border-t border-border p-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onCollapsedChange(true)}
            className="w-full flex items-center justify-center gap-2"
            aria-label="Collapse sidebar"
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="text-sm">Hide Sidebar</span>
          </Button>
        </div>
      </div>
    </>
  );
}