import { useState } from "react";
import type { ReactNode } from "react";
import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";

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

export function DraftSidebar({
  collapsed,
  onCollapsedChange,
  queueSection,
  recentPicksSection,
  settingsSection,
  className,
}: DraftSidebarProps) {
  const [queueOpen, setQueueOpen] = useState(true);
  const [picksOpen, setPicksOpen] = useState(true);

  if (collapsed) {
    return (
      <div
        className={cn(
          "relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col h-full",
          "w-12 hidden lg:flex",
          className
        )}
      >
        <div className="flex-1" />
        <div className="border-t border-border p-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onCollapsedChange(false)}
            className="w-full"
            aria-label="Expand sidebar"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </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-[300px]",
          "fixed inset-y-0 left-0 z-50 lg:relative lg:z-auto",
          className
        )}
      >
        <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
          {/* Queue Section */}
          <div className={cn("flex flex-col border-b", queueOpen ? "flex-1 min-h-0" : "flex-shrink-0")}>
            <button
              onClick={() => setQueueOpen((o) => !o)}
              className="px-4 py-3 bg-muted/50 hover:bg-muted flex items-center justify-between w-full flex-shrink-0"
            >
              <h2 className="font-semibold text-sm">My Queue</h2>
              <ChevronDown className={cn("h-4 w-4 transition-transform", queueOpen && "rotate-180")} />
            </button>
            {queueOpen && (
              <div className="flex-1 overflow-y-auto min-h-0">
                {queueSection}
              </div>
            )}
          </div>

          {/* Picks Section */}
          <div className={cn("flex flex-col", picksOpen ? "flex-1 min-h-0" : "flex-shrink-0")}>
            <button
              onClick={() => setPicksOpen((o) => !o)}
              className="px-4 py-3 bg-muted/50 hover:bg-muted flex items-center justify-between w-full flex-shrink-0"
            >
              <h2 className="font-semibold text-sm">Picks</h2>
              <ChevronDown className={cn("h-4 w-4 transition-transform", picksOpen && "rotate-180")} />
            </button>
            {picksOpen && (
              <div className="flex-1 overflow-y-auto min-h-0">
                {recentPicksSection}
              </div>
            )}
          </div>
        </div>

        {settingsSection && (
          <div className="border-t border-border px-4 py-3 flex-shrink-0">
            {settingsSection}
          </div>
        )}

        <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>
    </>
  );
}