import { createSignal, Show } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";

interface TopBarProps {
  onMenuToggle: () => void;
}

export default function TopBar(props: TopBarProps) {
  const [showDropdown, setShowDropdown] = createSignal(false);

  return (
    <header class="h-16 border-b border-[var(--color-border)] bg-[var(--color-bg)] flex items-center justify-between px-4 lg:px-6">
      <div class="flex items-center gap-4">
        <button
          type="button"
          class="lg:hidden p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]"
          onClick={() => props.onMenuToggle()}
          aria-label="Toggle menu"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </button>
        <div class="relative hidden sm:block">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)]">
            <circle cx="7" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/>
            <path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          <input
            type="search"
            placeholder="Search..."
            class="pl-9 pr-4 py-2 text-sm rounded-lg bg-[var(--color-bg-secondary)] border border-[var(--color-border)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-brand-primary)]/30 w-64"
          />
        </div>
      </div>

      <div class="flex items-center gap-3">
        <button
          type="button"
          class="relative p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]"
          aria-label="Notifications"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2.5a5.5 5.5 0 00-5.5 5.5v3l-1.5 2v1h14v-1l-1.5-2V8a5.5 5.5 0 00-5.5-5.5z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M8 15.5a2 2 0 004 0" stroke="currentColor" stroke-width="1.5"/>
          </svg>
          <span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-[var(--color-error)]" />
        </button>

        <div class="relative">
          <button
            type="button"
            class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
            onClick={() => setShowDropdown(v => !v)}
            aria-label="User menu"
          >
            <div class="w-8 h-8 rounded-full bg-[var(--color-brand-primary)] flex items-center justify-center text-white text-sm font-medium">
              JD
            </div>
          </button>

          <Show when={showDropdown()}>
            <>
              <div
                class="fixed inset-0 z-40"
                onClick={() => setShowDropdown(false)}
              />
              <div class="absolute right-0 top-full mt-2 z-50 w-48 rounded-xl bg-[var(--color-bg)] border border-[var(--color-border)] shadow-lg py-1">
                <div class="px-4 py-2 border-b border-[var(--color-border)]">
                  <p class="text-sm font-medium text-[var(--color-text-primary)]">John Doe</p>
                  <p class="text-xs text-[var(--color-text-tertiary)]">john@shieldai.app</p>
                </div>
                <A href="/dashboard/settings" class="block px-4 py-2 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]" onClick={() => setShowDropdown(false)}>
                  Settings
                </A>
                <button
                  type="button"
                  class="w-full text-left px-4 py-2 text-sm text-[var(--color-error)] hover:bg-[var(--color-bg-secondary)]"
                  onClick={() => setShowDropdown(false)}
                >
                  Sign out
                </button>
              </div>
            </>
          </Show>
        </div>
      </div>
    </header>
  );
}
