"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

/**
 * Shared state + styling for a sidebar that collapses in place on large screens
 * and opens as a slide-in drawer on small ones. One toggle drives both, choosing
 * the right behaviour by media query at click time. Defaults: open on desktop
 * (CSS `lg:` classes), closed on mobile (state) — so SSR and hydration agree.
 */
export function useCollapsibleSidebar() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [desktopCollapsed, setDesktopCollapsed] = useState(false);

  function toggle() {
    if (typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches) {
      setDesktopCollapsed((c) => !c);
    } else {
      setMobileOpen((o) => !o);
    }
  }

  return {
    mobileOpen,
    desktopCollapsed,
    toggle,
    closeMobile: () => setMobileOpen(false),
  };
}

export function sidebarAsideClass(mobileOpen: boolean, desktopCollapsed: boolean) {
  return cn(
    "z-40 w-64 shrink-0 border-r border-border/60 bg-surface",
    // Small screens: a fixed slide-in drawer sitting below the header.
    "fixed bottom-0 left-0 top-[4.125rem] transition-transform duration-200",
    mobileOpen ? "translate-x-0 shadow-[var(--shadow-lg)]" : "-translate-x-full",
    // Large screens: part of the layout flow, collapsible in place.
    "lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-none",
    desktopCollapsed ? "lg:hidden" : "lg:block",
  );
}

export const sidebarNavClass =
  "h-full overflow-y-auto p-4 lg:sticky lg:top-[4.125rem] lg:h-[calc(100vh-4.125rem)]";

export function SidebarBackdrop({ show, onClick }: { show: boolean; onClick: () => void }) {
  if (!show) return null;
  return (
    <div
      className="fixed inset-0 z-30 bg-foreground/30 lg:hidden"
      onClick={onClick}
      aria-hidden="true"
    />
  );
}

export function SidebarToggle({ onClick, className }: { onClick: () => void; className?: string }) {
  return (
    <button
      onClick={onClick}
      aria-label="Toggle topics menu"
      className={cn(
        "mb-5 inline-flex items-center gap-2 rounded-xl border border-border/60 bg-surface px-3 py-2 text-sm font-bold text-muted shadow-[var(--shadow-sm)] transition-colors hover:text-foreground",
        className,
      )}
    >
      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
      Topics
    </button>
  );
}