header.tsx

import {
  Bot,
  ChevronDown,
  Copy,
  FileSpreadsheet,
  Github,
  Menu,
  Palette,
  Receipt,
  Search,
  X,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { BLOCKS } from '../../constants';
import { cn } from '../../lib/utils';
import { ThemeToggle } from '../theme-toggle';

function BlocksDropdown() {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();

  // Close on outside click
  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    if (open) document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, [open]);

  return (
    <>
      <div ref={ref} className="relative">
        <button
          type="button"
          onClick={() => setOpen(!open)}
          className={cn(
            'flex items-center gap-1 text-sm transition-colors',
            open ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'
          )}
        >
          Blocks
          <ChevronDown
            className={cn('h-3.5 w-3.5 transition-transform duration-200', open && 'rotate-180')}
          />
        </button>

        {open && (
          <div className="absolute left-0 top-full mt-2.5 z-[100] w-[480px] rounded-xl border bg-popover shadow-xl overflow-hidden">
            {/* Panel header */}
            <div className="px-4 py-3 border-b bg-muted/30">
              <div className="flex items-center gap-2">
                <Copy className="h-4 w-4 text-primary" />
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                  Pre-Composed Blocks
                </p>
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                Copy, paste, and customize. Full design ownership in your codebase.
              </p>
            </div>

            {/* Blocks grid */}
            <div className="grid grid-cols-2 gap-2 p-4">
              {BLOCKS.map((b) => (
                <button
                  key={b.name}
                  type="button"
                  onClick={() => {
                    if (!b.isDisabled) {
                      navigate(b.path);
                      setOpen(false);
                    }
                  }}
                  className={cn(
                    'group flex flex-col gap-2 rounded-lg border border-border/60 bg-card p-3 text-left hover:border-border hover:bg-muted/40 hover:shadow-sm transition-all duration-150 cursor-pointer',
                    b.isDisabled && 'opacity-70 cursor-not-allowed'
                  )}
                  title={b.isDisabled ? 'Coming soon' : undefined}
                >
                  <div className="flex items-start justify-between">
                    <div className={cn('rounded-md p-1.5 w-fit', b.bg)}>
                      <b.icon className={cn('h-4 w-4', b.color)} />
                    </div>
                    {b.count > 0 && (
                      <span className="text-[10px] font-mono text-muted-foreground/70 bg-muted rounded px-1.5 py-0.5">
                        {b.count} designs
                      </span>
                    )}
                  </div>
                  <div>
                    <p className="text-xs font-semibold leading-tight">{b.name}</p>
                    <p className="text-[11px] text-muted-foreground mt-0.5 leading-snug line-clamp-2">
                      {b.description}
                    </p>
                  </div>
                  {b.isDisabled && (
                    <span className="text-[9px] font-medium uppercase tracking-wider text-primary/70 border border-primary/30 rounded px-1.5 py-0.5 w-fit mt-auto">
                      Coming Soon
                    </span>
                  )}
                </button>
              ))}

              {/* Request a block card */}
              <a
                href="https://github.com/akii09/pdfx/discussions"
                target="_blank"
                rel="noopener noreferrer"
                onClick={() => setOpen(false)}
                className="group flex flex-col gap-2 rounded-lg border border-dashed border-primary/40 bg-primary/5 p-3 text-left hover:border-primary/70 hover:bg-primary/10 transition-all duration-150"
              >
                <div className="rounded-md bg-primary/10 p-1.5 w-fit">
                  <Github className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="text-xs font-semibold leading-tight text-primary">
                    Request a Block
                  </p>
                  <p className="text-[11px] text-muted-foreground mt-0.5 leading-snug">
                    Tell us what designs you need on GitHub Discussions.
                  </p>
                </div>
                <span className="text-[9px] font-medium uppercase tracking-wider text-primary/70 border border-primary/30 rounded px-1.5 py-0.5 w-fit group-hover:bg-primary/10 transition-colors">
                  Open discussion →
                </span>
              </a>
            </div>
          </div>
        )}
      </div>
    </>
  );
}

export function Header() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { pathname } = useLocation();

  useEffect(() => {
    if (pathname) {
      setMobileOpen(false);
    }
  }, [pathname]);

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
      <div className="container-fluid mx-auto flex h-14 items-center justify-between px-4">
        {/* Left: Logo + primary nav */}
        <div className="flex items-center gap-6">
          <Link to="/" className="flex items-center gap-2 font-bold text-xl shrink-0">
            <img src="/pdfx.png" alt="PDFx" className="h-10 w-auto dark:invert dark:brightness-0" />
            <span className="hidden sm:inline-flex items-center rounded-full border border-border/70 bg-muted/50 px-2 py-0.5 text-[10px] font-mono text-muted-foreground">
              v{__PDFX_VERSION__}
            </span>
          </Link>

          {/* Desktop primary nav — left side */}
          <nav className="hidden md:flex items-center gap-5">
            <Link
              to="/docs"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Docs
            </Link>
            <Link
              to="/components"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Components
            </Link>
            <BlocksDropdown />
            <Link
              to="/theme-builder"
              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              <Palette className="h-3.5 w-3.5" />
              Theme Builder
            </Link>
          </nav>
        </div>

        {/* Right: search, github, theme toggle */}
        <div className="hidden md:flex items-center gap-3">
          <button
            type="button"
            onClick={() => {
              document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
            }}
            className="inline-flex items-center gap-2 rounded-md border bg-muted/50 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent transition-colors"
          >
            <Search className="h-3.5 w-3.5" />
            Search...
            <kbd className="ml-2 rounded border bg-muted px-1.5 py-0.5 font-mono text-[10px]">
              ⌘K
            </kbd>
          </button>
          <Link
            to="/mcp"
            className="inline-flex items-center justify-center rounded-md border bg-muted/50 p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
            aria-label="Open MCP and Skills docs"
            title="MCP & Skills"
          >
            <Bot className="h-4 w-4" />
          </Link>
          <a
            href="https://github.com/akii09/pdfx"
            target="_blank"
            rel="noopener noreferrer"
            className="text-muted-foreground hover:text-foreground transition-colors"
            aria-label="View PDFx on GitHub"
          >
            <Github className="h-5 w-5" aria-hidden="true" />
          </a>
          <ThemeToggle />
        </div>

        {/* Mobile toggle */}
        <button
          type="button"
          className="md:hidden p-2 text-muted-foreground hover:text-foreground"
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label="Toggle menu"
        >
          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {/* Mobile nav */}
      <div
        className={cn(
          'md:hidden border-t overflow-hidden transition-all duration-200',
          mobileOpen ? 'max-h-[420px]' : 'max-h-0'
        )}
        aria-hidden={!mobileOpen}
      >
        <nav className="flex flex-col gap-1 px-4 py-4">
          <Link
            to="/docs"
            onClick={() => setMobileOpen(false)}
            className="text-sm text-muted-foreground hover:text-foreground py-2"
          >
            Docs
          </Link>
          <Link
            to="/components"
            onClick={() => setMobileOpen(false)}
            className="text-sm text-muted-foreground hover:text-foreground py-2"
          >
            Components
          </Link>
          {/* Blocks section (Composition-based) */}
          <div className="py-2">
            <span className="text-sm font-medium text-foreground">Blocks</span>
            <p className="text-[10px] text-muted-foreground/70 mt-0.5">
              Copy-paste, customize in your code
            </p>
            <div className="mt-2 ml-3 flex flex-col gap-1 border-l border-border pl-3">
              <Link
                to="/blocks/invoices"
                onClick={() => setMobileOpen(false)}
                className="text-sm text-muted-foreground hover:text-foreground py-1.5 flex items-center gap-2"
              >
                <Receipt className="h-3.5 w-3.5 text-blue-500" />
                Invoices
              </Link>
              <Link
                to="/blocks/receipts"
                onClick={() => setMobileOpen(false)}
                className="text-sm text-muted-foreground hover:text-foreground py-1.5 flex items-center gap-2"
              >
                <Receipt className="h-3.5 w-3.5 text-amber-500" />
                Receipts
              </Link>
              <Link
                to="/blocks/reports"
                onClick={() => setMobileOpen(false)}
                className="text-sm text-muted-foreground hover:text-foreground py-1.5 flex items-center gap-2"
              >
                <FileSpreadsheet className="h-3.5 w-3.5 text-emerald-500" />
                Reports
              </Link>
            </div>
          </div>
          <Link
            to="/theme-builder"
            onClick={() => setMobileOpen(false)}
            className="text-sm text-muted-foreground hover:text-foreground py-2 flex items-center gap-2"
          >
            <Palette className="h-3.5 w-3.5" />
            Theme Builder
          </Link>
          <Link
            to="/mcp"
            onClick={() => setMobileOpen(false)}
            className="text-sm text-muted-foreground hover:text-foreground py-2 flex items-center gap-2"
          >
            <Bot className="h-3.5 w-3.5" />
            MCP & Skills
          </Link>
          <div className="h-px bg-border my-2" />
          <a
            href="https://github.com/akii09/pdfx"
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-muted-foreground hover:text-foreground py-2 flex items-center gap-2"
          >
            <Github className="h-4 w-4" />
            GitHub
          </a>
          <div className="py-2 flex items-center gap-2">
            <ThemeToggle />
            <span className="text-xs text-muted-foreground">Toggle theme</span>
          </div>
        </nav>
      </div>
    </header>
  );
}