"use client";

import { useState } from "react";
import Link from "next/link";
import Logo from "@/components/ui/Logo";
import { Bell, Search, ChevronDown, Plus } from "lucide-react";

export default function AdminNavbar() {
  const [searchQuery, setSearchQuery] = useState("");

  return (
    <header className="bg-white border-b border-slate-100 h-14 flex items-center px-4 gap-4 sticky top-0 z-40">
      {/* Logo */}
      <div className="flex items-center gap-2 w-52 flex-shrink-0">
        <Logo size="small" />
        <span className="text-xs font-semibold text-slate-400 hidden sm:block">Admin</span>
      </div>

      {/* Search */}
      <div className="flex-1 max-w-md">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <input
            type="text"
            placeholder="Search patients, leads, hospitals..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-9 pr-4 py-2 text-sm border border-slate-200 rounded-lg bg-slate-50 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent"
          />
        </div>
      </div>

      <div className="flex items-center gap-3 ml-auto">
        {/* Notifications */}
        <button className="relative w-9 h-9 bg-purple-50 hover:bg-purple-100 rounded-lg flex items-center justify-center transition-colors">
          <Bell className="w-4 h-4 text-purple-600" />
          <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center">
            3
          </span>
        </button>

        {/* Admin Badge */}
        <div className="bg-purple-600 text-white text-xs font-bold px-3 py-1.5 rounded-lg">
          Admin
        </div>

        {/* User */}
        <button className="flex items-center gap-2 hover:bg-slate-50 rounded-lg p-1.5 transition-colors">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
            <span className="text-white text-xs font-bold">FA</span>
          </div>
          <div className="hidden md:block text-left">
            <p className="text-xs font-semibold text-slate-800 leading-none">Dr. Farhana</p>
            <p className="text-[10px] text-slate-400">Ahmed</p>
          </div>
          <ChevronDown className="w-3 h-3 text-slate-400 hidden md:block" />
        </button>
      </div>
    </header>
  );
}