"use client";

import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin, ShieldCheck } from "lucide-react";
import { useNav } from "./context/navContext";


export default function Navbar() {
  const { mode } = useNav();

  return (
    <header className="fixed top-0 right-0
     left-64 z-30 flex h-16 items-center justify-between border-b 
     border-[#142538]/50  bg-[#071321]/80 backdrop-blur-md px-8">
      {mode === "operations" ? (
        /* ================= OPERATIONS NAVBAR ================= */
        <>
          {/* Left Group */}
          <div className="flex items-center gap-2">
            {/* Company Selector */}
          <div className="flex items-center gap-2
           rounded-full bg-[#0a1826] px-3 py-1.5 text-sm font-semibold text-[#10b981] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap relative">
  <span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>

  <select
    className=" bg-[#0a1826] outline-none cursor-pointer  font-medium pr-5"
    
    defaultValue="Apple One"
  >
    <option>Apple One</option>
    <option>Novotel Pune</option>
    <option>SRM Campus</option>
    <option>Local 1</option>
  </select>

  <ChevronDown className="absolute right-3 h-3.5 w-3.5  pointer-events-none" />
</div>
            {/* Location Selector */}
        <div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap relative">
  <MapPin className="h-4 w-4 text-gray-500 shrink-0" />

  <select
    className=" bg-[#0a1826] outline-none cursor-pointer  font-medium pr-5"
    defaultValue="Apple One — HQ Tower"
  >
    <option>Apple One — HQ Tower</option>
    <option>Apple One — Annexe</option>
  </select>

  <ChevronDown className="absolute right-4 h-4 w-4 text-gray-500 pointer-events-none" />
</div>

            {/* Search Bar */}
            <div className="relative w-60">
              <Search className="absolute left-4 top-2.5 h-4 w-4 text-gray-500" />
              <input
                type="text"
                placeholder="Search requests, equipment, met"
                className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
              />
            </div>
          </div>

          {/* Right Utilities */}
          <div className="flex items-center gap-3">
            <button className="flex items-center gap-2 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#14253d]">
              <HelpCircle className="h-4 w-4 text-gray-400" />
              <span>Tour</span>
            </button>

            <div className="flex items-center gap-1.5 rounded-xl border border-[#132338] bg-[#0a1826] px-4 py-2 text-sm font-semibold text-[#cbd5e1] cursor-pointer hover:bg-[#14253d]">
              <Globe className="h-4 w-4 text-gray-400" />
              <span>English</span>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>

            <div className="flex items-center gap-2 px-1 text-sm font-bold text-[#10b981] tracking-wider">
              <span className="h-1.5 w-1.5 rounded-full bg-[#10b981]"></span>
              <span className="text-xs font-bold text-gray-400">LIVE</span>
            </div>

            <button className="flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] text-gray-400 hover:text-white transition">
              <Sun className="h-4 w-4" />
            </button>

            <div className="relative flex h-9 w-9 items-center justify-center rounded-xl border border-[#132338] bg-[#0a1826] cursor-pointer hover:bg-[#14253d] transition">
              <Bell className="h-4 w-4 text-gray-400" />
              <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#ef4444] text-[9px] font-bold text-white">
                8
              </span>
            </div>

            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white cursor-pointer hover:opacity-90 transition">
              DH
            </div>
          </div>
        </>
      ) : (
        /* ================= ADMIN NAVBAR ================= */
        <>
          {/* Left Breadcrumb */}
          <div className="flex items-center gap-2 text-sm text-slate-300">
            <ShieldCheck size={18} className="text-[#3de0c4]" />
            <span className="font-bold text-white">Administration</span>
            <span className="text-slate-500">&rsaquo;</span>
            <span className="text-slate-400">Mobile Flows</span>
          </div>

          {/* Right Utilities */}
          <div className="flex items-center gap-3">
            <div className="relative w-64">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
              <input
                type="text"
                placeholder="Search tenants, users, sites..."
                className="w-full rounded-lg bg-[#0a1826] pl-9 pr-4 py-1.5 text-xs text-white placeholder-slate-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
              />
            </div>

            <div className="flex items-center gap-1.5 rounded-full border border-teal-500/30 bg-teal-500/10 px-3 py-1 text-xs font-bold text-[#3de0c4]">
              <span className="h-2 w-2 rounded-full bg-[#3de0c4]"></span>
              <span>PRODUCTION &bull; us-east-1</span>
            </div>

            <button className="flex h-8 w-8 items-center justify-center rounded-lg border border-[#132338] bg-[#0a1826] text-slate-400 hover:text-white transition">
              <Sun className="h-4 w-4" />
            </button>

            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#1b3454] text-xs font-bold text-white">
              SA
            </div>
          </div>
        </>
      )}
    </header>
  );
}