"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/lib/auth/auth-context";
import { ThemeToggle } from "./ThemeToggle";
import { useSidebar } from "./SidebarContext";

/**
 * Full-width application header (topbar).
 * Logo/brand MUST live here — not in the sidebar — per MS15 design spec.
 * Spans grid-column 1 / -1 in the app shell grid layout.
 *
 * Layout (left → right):
 *   [Logo/Brand] [Breadcrumb] [Search] [spacer]
 *   [System Status] [Terminal Toggle] [Notifications] [Theme Toggle] [User Avatar+Dropdown]
 */
export function AppHeader(): React.JSX.Element {
  const { user, signOut } = useAuth();
  const { isMobile, mobileOpen, setMobileOpen, toggleCollapsed } = useSidebar();
  const pathname = usePathname();
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [searchFocused, setSearchFocused] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close dropdown on outside click
  const handleOutsideClick = useCallback((event: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
      setDropdownOpen(false);
    }
  }, []);

  useEffect(() => {
    if (dropdownOpen) {
      document.addEventListener("mousedown", handleOutsideClick);
    } else {
      document.removeEventListener("mousedown", handleOutsideClick);
    }
    return (): void => {
      document.removeEventListener("mousedown", handleOutsideClick);
    };
  }, [dropdownOpen, handleOutsideClick]);

  // Derive breadcrumb segments from pathname
  const breadcrumbSegments = pathname
    .split("/")
    .filter(Boolean)
    .map((seg) => seg.charAt(0).toUpperCase() + seg.slice(1).replace(/-/g, " "));

  // User initials for avatar fallback
  const initials = user?.name
    ? user.name
        .split(" ")
        .slice(0, 2)
        .map((part) => part[0])
        .join("")
        .toUpperCase()
    : user?.email
      ? (user.email[0] ?? "?").toUpperCase()
      : "?";

  const handleHamburgerClick = useCallback((): void => {
    if (isMobile) {
      setMobileOpen(!mobileOpen);
    } else {
      toggleCollapsed();
    }
  }, [isMobile, mobileOpen, setMobileOpen, toggleCollapsed]);

  return (
    <header className="app-header">
      {/* ── Hamburger — visible below lg ── */}
      <button
        type="button"
        className="lg:hidden"
        onClick={handleHamburgerClick}
        aria-label={mobileOpen ? "Close navigation menu" : "Open navigation menu"}
        aria-expanded={mobileOpen}
        aria-controls="app-sidebar"
        style={{
          width: 34,
          height: 34,
          borderRadius: 6,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "var(--muted)",
          background: "none",
          border: "none",
          cursor: "pointer",
          flexShrink: 0,
        }}
        onMouseEnter={(e) => {
          (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
          (e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
        }}
        onMouseLeave={(e) => {
          (e.currentTarget as HTMLButtonElement).style.background = "none";
          (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
        }}
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path d="M2 4h12M2 8h12M2 12h12" />
        </svg>
      </button>

      {/* ── Brand / Logo ── */}
      <Link
        href="/"
        className="flex items-center gap-2 flex-shrink-0"
        aria-label="Mosaic Stack home"
      >
        {/* Mosaic logo mark: four colored squares + center dot */}
        <div
          className="relative flex-shrink-0"
          style={{ width: 28, height: 28 }}
          aria-hidden="true"
        >
          <span
            className="absolute rounded-sm"
            style={{ top: 0, left: 0, width: 11, height: 11, background: "var(--ms-blue-500)" }}
          />
          <span
            className="absolute rounded-sm"
            style={{ top: 0, right: 0, width: 11, height: 11, background: "var(--ms-purple-500)" }}
          />
          <span
            className="absolute rounded-sm"
            style={{
              bottom: 0,
              right: 0,
              width: 11,
              height: 11,
              background: "var(--ms-teal-500)",
            }}
          />
          <span
            className="absolute rounded-sm"
            style={{
              bottom: 0,
              left: 0,
              width: 11,
              height: 11,
              background: "var(--ms-amber-500)",
            }}
          />
          <span
            className="absolute rounded-full"
            style={{
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: 8,
              height: 8,
              background: "var(--ms-pink-500)",
            }}
          />
        </div>

        <span
          className="text-sm font-bold"
          style={{
            background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
            backgroundClip: "text",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            letterSpacing: "-0.02em",
          }}
        >
          Mosaic Stack
        </span>
      </Link>

      {/* ── Breadcrumb ── */}
      <nav
        aria-label="Breadcrumb"
        className="hidden sm:flex items-center"
        style={{ fontSize: "0.8rem", color: "var(--text-2)", marginLeft: 4 }}
      >
        {breadcrumbSegments.length === 0 ? (
          <span>Dashboard</span>
        ) : (
          breadcrumbSegments.map((seg, idx) => (
            <span key={idx} className="flex items-center gap-1">
              {idx > 0 && <span style={{ color: "var(--muted)", margin: "0 2px" }}>/</span>}
              <span
                style={{
                  color: idx === breadcrumbSegments.length - 1 ? "var(--text-2)" : "var(--muted)",
                }}
              >
                {seg}
              </span>
            </span>
          ))
        )}
      </nav>

      {/* ── Search Bar ── */}
      <div
        className="hidden md:flex items-center"
        style={{
          flex: 1,
          maxWidth: 340,
          marginLeft: 16,
          gap: 8,
          background: "var(--surface)",
          border: `1px solid ${searchFocused ? "var(--primary)" : "var(--border)"}`,
          borderRadius: 6,
          padding: "7px 12px",
          transition: "border-color 0.15s",
        }}
      >
        {/* Search icon */}
        <svg
          width="13"
          height="13"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          style={{ color: "var(--muted)", flexShrink: 0 }}
          aria-hidden="true"
        >
          <circle cx="7" cy="7" r="5" />
          <path d="M11 11l3 3" />
        </svg>
        <input
          type="text"
          placeholder="Search projects, agents, tasks… (⌘K)"
          onFocus={() => {
            setSearchFocused(true);
          }}
          onBlur={() => {
            setSearchFocused(false);
          }}
          style={{
            flex: 1,
            background: "none",
            border: "none",
            outline: "none",
            color: "var(--text)",
            fontSize: "0.83rem",
            fontFamily: "inherit",
          }}
          aria-label="Search projects, agents, tasks"
        />
      </div>

      {/* ── Spacer ── */}
      <div style={{ flex: 1 }} />

      {/* ── Right side controls ── */}
      <div className="flex items-center" style={{ gap: 8 }}>
        {/* System Status */}
        <div
          className="hidden lg:flex items-center"
          style={{
            gap: 7,
            padding: "5px 10px",
            borderRadius: 6,
            background: "var(--surface)",
            border: "1px solid var(--border)",
            fontSize: "0.75rem",
            fontFamily: "var(--mono)",
          }}
          aria-label="System status: All Systems Operational"
        >
          <div
            style={{
              width: 6,
              height: 6,
              borderRadius: "50%",
              background: "var(--success)",
              boxShadow: "0 0 5px var(--success)",
              flexShrink: 0,
            }}
            aria-hidden="true"
          />
          <span style={{ color: "var(--muted)" }}>All Systems</span>
          <span style={{ color: "var(--success)" }}>Operational</span>
        </div>

        {/* Terminal Toggle */}
        <TerminalToggleButton />

        {/* Notifications */}
        <button
          title="Notifications"
          aria-label="Notifications (1 unread)"
          style={{
            width: 34,
            height: 34,
            borderRadius: 6,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "var(--muted)",
            position: "relative",
            background: "none",
            border: "none",
            cursor: "pointer",
            flexShrink: 0,
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
            (e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLButtonElement).style.background = "none";
            (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
          }}
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            aria-hidden="true"
          >
            <path d="M8 1a5 5 0 0 1 5 5v2l1 2H2l1-2V6a5 5 0 0 1 5-5z" />
            <path d="M6 13a2 2 0 0 0 4 0" />
          </svg>
          {/* Notification badge */}
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              top: 4,
              right: 4,
              width: 8,
              height: 8,
              borderRadius: "50%",
              background: "var(--danger)",
              border: "2px solid var(--bg-deep)",
            }}
          />
        </button>

        {/* Theme Toggle */}
        <ThemeToggle />

        {/* User Avatar + Dropdown */}
        <div ref={dropdownRef} style={{ position: "relative", flexShrink: 0 }}>
          <button
            onClick={() => {
              setDropdownOpen((prev) => !prev);
            }}
            aria-label="Open user menu"
            aria-expanded={dropdownOpen}
            aria-haspopup="menu"
            style={{
              width: 30,
              height: 30,
              borderRadius: "50%",
              background: user?.image
                ? "none"
                : "linear-gradient(135deg, var(--ms-blue-500), var(--ms-purple-500))",
              border: "none",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              padding: 0,
              flexShrink: 0,
              overflow: "hidden",
            }}
          >
            {user?.image ? (
              <img
                src={user.image}
                alt={user.name || user.email || "User avatar"}
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
              />
            ) : (
              <span
                style={{
                  fontSize: "0.65rem",
                  fontWeight: 700,
                  color: "#fff",
                  letterSpacing: "0.02em",
                  lineHeight: 1,
                }}
              >
                {initials}
              </span>
            )}
          </button>

          {/* Dropdown Menu */}
          {dropdownOpen && (
            <div
              role="menu"
              aria-label="User menu"
              style={{
                position: "absolute",
                top: "calc(100% + 8px)",
                right: 0,
                background: "var(--surface)",
                border: "1px solid var(--border)",
                borderRadius: 8,
                padding: 6,
                minWidth: 200,
                boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
                zIndex: 200,
              }}
            >
              {/* User info header */}
              <div
                style={{
                  padding: "8px 12px",
                  borderRadius: 6,
                  marginBottom: 2,
                }}
              >
                <div
                  style={{
                    fontSize: "0.83rem",
                    fontWeight: 600,
                    color: "var(--text)",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {user?.name ?? "User"}
                </div>
                {user?.email && (
                  <div
                    style={{
                      fontSize: "0.75rem",
                      color: "var(--muted)",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      marginTop: 2,
                    }}
                  >
                    {user.email}
                  </div>
                )}
              </div>

              {/* Divider */}
              <div
                aria-hidden="true"
                style={{ height: 1, background: "var(--border)", margin: "4px 0" }}
              />

              {/* Profile link */}
              <DropdownItem
                href="/profile"
                onClick={() => {
                  setDropdownOpen(false);
                }}
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 16 16"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  aria-hidden="true"
                >
                  <circle cx="8" cy="5" r="3" />
                  <path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" />
                </svg>
                Profile
              </DropdownItem>

              {/* Account Settings link */}
              <DropdownItem
                href="/settings"
                onClick={() => {
                  setDropdownOpen(false);
                }}
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 16 16"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  aria-hidden="true"
                >
                  <circle cx="8" cy="8" r="2.5" />
                  <path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M3.05 12.95l1.06-1.06M11.89 4.11l1.06-1.06" />
                </svg>
                Account Settings
              </DropdownItem>

              {/* Divider */}
              <div
                aria-hidden="true"
                style={{ height: 1, background: "var(--border)", margin: "4px 0" }}
              />

              {/* Sign Out */}
              <button
                role="menuitem"
                onClick={() => {
                  setDropdownOpen(false);
                  void signOut();
                }}
                style={{
                  width: "100%",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  padding: "8px 12px",
                  borderRadius: 6,
                  fontSize: "0.83rem",
                  cursor: "pointer",
                  background: "none",
                  border: "none",
                  color: "var(--danger)",
                  textAlign: "left",
                }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLButtonElement).style.background = "var(--surface-2)";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLButtonElement).style.background = "none";
                }}
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 16 16"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  aria-hidden="true"
                >
                  <path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3M10 11l4-4-4-4M14 8H6" />
                </svg>
                Sign Out
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

// ---------------------------------------------------------------------------
// Sub-components
// ---------------------------------------------------------------------------

/** Terminal toggle button — visual only; no panel wired yet. */
function TerminalToggleButton(): React.JSX.Element {
  const [hovered, setHovered] = useState(false);

  return (
    <button
      title="Toggle terminal"
      aria-label="Toggle terminal panel"
      className="hidden lg:flex items-center"
      style={{
        gap: 6,
        padding: "5px 10px",
        borderRadius: 6,
        background: "var(--surface)",
        border: `1px solid ${hovered ? "var(--success)" : "var(--border)"}`,
        fontSize: "0.75rem",
        fontFamily: "var(--mono)",
        color: hovered ? "var(--success)" : "var(--text-2)",
        cursor: "pointer",
        transition: "border-color 0.15s, color 0.15s",
        flexShrink: 0,
      }}
      onMouseEnter={() => {
        setHovered(true);
      }}
      onMouseLeave={() => {
        setHovered(false);
      }}
    >
      <svg
        width="12"
        height="12"
        viewBox="0 0 16 16"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        aria-hidden="true"
      >
        <rect x="1" y="2" width="14" height="12" rx="1.5" />
        <path d="M4 6l3 3-3 3M9 12h3" />
      </svg>
      Terminal
    </button>
  );
}

interface DropdownItemProps {
  href: string;
  onClick: () => void;
  children: React.ReactNode;
}

/** A navigation link styled as a dropdown menu item. */
function DropdownItem({ href, onClick, children }: DropdownItemProps): React.JSX.Element {
  const [hovered, setHovered] = useState(false);

  return (
    <Link
      href={href}
      role="menuitem"
      onClick={onClick}
      style={{
        display: "flex",
        alignItems: "center",
        gap: 8,
        padding: "8px 12px",
        borderRadius: 6,
        fontSize: "0.83rem",
        cursor: "pointer",
        color: "var(--text-2)",
        textDecoration: "none",
        background: hovered ? "var(--surface-2)" : "none",
        transition: "background 0.1s",
      }}
      onMouseEnter={() => {
        setHovered(true);
      }}
      onMouseLeave={() => {
        setHovered(false);
      }}
    >
      {children}
    </Link>
  );
}
