import { useState } from 'react';
import { Link, useLocation } from 'react-router';
import { Menu } from 'lucide-react';
// import { Menu, Terminal } from 'lucide-react'; // Terminal used by the commented-out web inspector button
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import type { DockItem } from '../Dock';
import { useIsTouch } from '../useIsTouch';
import { UserMenu } from './UserMenu';
import { RescanButton } from '../Rescan/RescanButton';
// import { BugReportButton } from '../BugReport/BugReportButton';

type HeaderProps = {
  dockItems?: DockItem[];
};

export function Header({ dockItems }: HeaderProps) {
  const [open, setOpen] = useState(false);
  const isTouch = useIsTouch();
  const location = useLocation();

  const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to));

  return (
    <header className="fixed z-10 w-full">
      <div
        className="shrink-0 border-b backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between"
        style={{ backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' }}
      >
        <div className="flex items-center gap-2">
          {isTouch && dockItems && (
            <button onClick={() => setOpen(true)} className="p-1.5 rounded-md hover:bg-white/20 transition-colors">
              <Menu className="h-5 w-5 text-white" />
            </button>
          )}
          <Link to="/">
            <img
              src="/officer-logo.svg"
              alt="Officer"
              className="h-8 md:h-12 w-auto"
              style={{ transform: 'skew(-15deg, -2deg)' }}
            />
          </Link>
        </div>
        <div className="flex items-center gap-2">
          {/* Web inspector (eruda dev console) — hidden
          <button
            onClick={() => (window as any).eruda?.show()}
            className="flex h-8 w-8 items-center justify-center rounded-full bg-black/20 text-duck-dark transition-transform hover:scale-110"
            aria-label="Dev console"
          >
            <Terminal size={16} />
          </button>
          */}
          {/* Bug Report — hidden */}
          {/* <BugReportButton /> */}
          <RescanButton />
          <UserMenu />
        </div>
      </div>

      {isTouch && dockItems && (
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle>Navigation</SheetTitle>
            </SheetHeader>
            <nav className="flex flex-col gap-1 mt-4 px-2">
              {dockItems.map((item) => {
                const active = isActive(item.to);
                return (
                  <Link
                    key={item.to}
                    to={item.to}
                    onClick={() => setOpen(false)}
                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${active ? 'bg-white/20' : 'hover:bg-white/10'}`}
                  >
                    <div
                      className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
                      style={{
                        background: item.color,
                        boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
                      }}
                    >
                      <item.icon className="h-4 w-4 text-white" />
                    </div>
                    <span className={`text-sm ${active ? 'text-white font-medium' : 'text-white/80'}`}>
                      {item.label}
                    </span>
                  </Link>
                );
              })}
            </nav>
          </SheetContent>
        </Sheet>
      )}
    </header>
  );
}