"use client";

import { Search, Bell } from "lucide-react";

import { ConnectionStatus } from "@/components/shared/ConnectionStatus";

import { useUiStore } from "@/stores/ui";

import { useWatchlist } from "@/hooks/useWatchlist";

export function Topbar({ title }: { title: string }) {

  const setCommandOpen = useUiStore((s) => s.setCommandOpen);

  const { data: watchlist } = useWatchlist();

  const activeWatches = watchlist?.filter((w) => w.active).length ?? 0;

  return (

    <header className="glass sticky top-0 z-[var(--z-sticky)] flex h-16 items-center gap-4 border-b border-[var(--color-border-subtle)] px-4 md:px-6">

      <h1 className="text-sm font-semibold tracking-[var(--tracking-tight)] text-[var(--color-fg-primary)] md:text-base">

        {title}

      </h1>

      <button

        type="button"

        onClick={() => setCommandOpen(true)}

        className="ml-auto flex h-9 items-center gap-2 rounded-[var(--radius)] border border-[var(--color-border-default)] bg-[var(--color-bg-inset)] px-3 text-sm text-[var(--color-fg-tertiary)] transition-colors hover:border-[var(--color-border-strong)] hover:text-[var(--color-fg-secondary)]"

        aria-label="Open command palette"

      >

        <Search className="h-4 w-4" aria-hidden />

        <span className="hidden sm:inline">Search…</span>

        <kbd className="hidden rounded border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] px-1.5 font-mono text-[10px] sm:inline">

          ⌘K

        </kbd>

      </button>

      {activeWatches > 0 ? (

        <span className="hidden items-center gap-1.5 rounded-full border border-[color-mix(in_oklch,var(--color-accent-teal)_30%,transparent)] bg-[var(--color-accent-teal-soft)] px-2.5 py-1 text-xs font-medium text-[var(--color-accent-teal)] sm:inline-flex">

          <Bell className="h-3 w-3" aria-hidden />

          {activeWatches} watching

        </span>

      ) : null}

      <ConnectionStatus />

    </header>

  );

}