'use client';

import { Bell, Search, ChevronDown } from 'lucide-react';
import { getInitials } from '@/lib/utils';
import { demoUser, demoRestaurant } from '@/lib/demo-data';

export function DashboardHeader() {
  return (
    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-zinc-200/60 bg-white/80 px-4 backdrop-blur-xl sm:px-6 dark:border-zinc-800 dark:bg-zinc-950/80">
      {/* Search */}
      <div className="flex items-center gap-3">
        <div className="relative hidden sm:block">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
          <input
            type="text"
            placeholder="Search menus, orders, products..."
            className="h-9 w-72 rounded-xl border border-zinc-200 bg-zinc-50 pl-9 pr-4 text-sm placeholder:text-zinc-400 focus:border-emerald-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all dark:border-zinc-700 dark:bg-zinc-900"
          />
          <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden rounded-md border border-zinc-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-zinc-400 sm:inline-block dark:border-zinc-700 dark:bg-zinc-800">
            ⌘K
          </kbd>
        </div>
      </div>

      {/* Right side */}
      <div className="flex items-center gap-2">
        {/* Restaurant switcher */}
        <button className="hidden items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-50 sm:flex dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
          <div className="h-5 w-5 rounded-md bg-gradient-to-br from-emerald-500 to-cyan-500" />
          <span className="max-w-[120px] truncate">{demoRestaurant.name}</span>
          <ChevronDown className="h-3.5 w-3.5 text-zinc-400" />
        </button>

        {/* Notifications */}
        <button className="relative rounded-xl p-2.5 text-zinc-500 transition-all hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800">
          <Bell className="h-[18px] w-[18px]" />
          <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-zinc-950" />
        </button>

        {/* Avatar */}
        <button className="flex items-center gap-2 rounded-xl p-1.5 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 text-xs font-bold text-white shadow-sm">
            {getInitials(demoUser.full_name)}
          </div>
        </button>
      </div>
    </header>
  );
}