'use client';

/**
 * TopNav — top navigation bar.
 *
 * Displays breadcrumbs (left), search bar (center), user info + action icons (right).
 * Fixed at the top with z-30, accounts for sidebar width on desktop.
 *
 * Requirements: 2.1, 2.3, 2.5, 2.6
 */

import { useRightPanelStore } from '@/lib/stores/right-panel-store';
import { useLogoStore } from '@/lib/stores/logo-store';
import BreadcrumbBar from '@/components/layout/BreadcrumbBar';
import SearchBar from '@/components/layout/SearchBar';

export default function TopNav() {
  const toggleRightPanel = useRightPanelStore((s) => s.toggle);
  const logoUrl = useLogoStore((s) => s.logoUrl);
  const logoHeight = useLogoStore((s) => s.logoHeight);

  return (
    <header className="fixed top-0 left-0 right-0 z-30 flex h-14 items-center justify-between border-b border-divisi-border bg-divisi-card px-4 md:px-6">
      {/* Left side — logo + breadcrumbs */}
      <div className="flex items-center gap-3">
        {/* Logo — shows uploaded logo or default Divisi icon */}
        <div className="flex items-center gap-2">
          {logoUrl ? (
            <img
              src={logoUrl}
              alt="Company logo"
              style={{ height: `${logoHeight}px` }}
              className="max-w-[160px] object-contain"
            />
          ) : (
            <>
              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-divisi-accent/15">
                <svg className="h-4 w-4 text-divisi-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polygon points="12 2 2 7 12 12 22 7 12 2" />
                  <polyline points="2 17 12 22 22 17" />
                  <polyline points="2 12 12 17 22 12" />
                </svg>
              </div>
              <span className="text-sm font-bold text-divisi-accent hidden sm:inline">Divisi</span>
            </>
          )}
        </div>

        {/* Separator */}
        <div className="h-5 w-px bg-divisi-border hidden sm:block" />

        <BreadcrumbBar className="hidden sm:block" />
      </div>

      {/* Center — search bar */}
      <div className="hidden md:block flex-1 max-w-md mx-4">
        <SearchBar />
      </div>

      {/* Right side — action icons */}
      <div className="flex items-center gap-3">
        {/* Notifications bell icon */}
        <button
          type="button"
          onClick={toggleRightPanel}
          className="rounded-lg p-2 text-divisi-text-secondary hover:text-divisi-text-primary hover:bg-white/5 transition-colors duration-150"
          aria-label="Notifications"
        >
          <svg
            className="h-5 w-5"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
          </svg>
        </button>

        {/* Right panel toggle icon */}
        <button
          type="button"
          onClick={toggleRightPanel}
          className="rounded-lg p-2 text-divisi-text-secondary hover:text-divisi-text-primary hover:bg-white/5 transition-colors duration-150"
          aria-label="Toggle right panel"
        >
          <svg
            className="h-5 w-5"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
            <line x1="15" y1="3" x2="15" y2="21" />
          </svg>
        </button>
      </div>
    </header>
  );
}