// header.tsx
"use client"

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import { ChevronRight, Calendar } from "lucide-react"
import { cn } from "@/lib/utils"
import { NotificationBell } from "@/features/notifications/components/NotificationBell" 

type User = {
  name?: string | null
  email?: string | null
  role: string
}

const routeLabels: Record<string, string> = {
  dashboard: "Dashboard",
  employees: "Employees",
  departments: "Departments",
  branches: "Branches",
  leave: "Leave",
  shifts: "Shifts",
  payroll: "Payroll",
  attendance: "Attendance",
  users: "Users",
  roles: "Roles",
  notifications: "Notifications", // ← add this too
}

function Breadcrumb() {
  const pathname = usePathname()
  const segments = pathname.split("/").filter(Boolean)

  if (segments.length === 0) return null

  return (
    <nav className="flex items-center gap-1 text-sm">
      {segments.map((seg, i) => {
        const label = routeLabels[seg] ?? seg.charAt(0).toUpperCase() + seg.slice(1)
        const isLast = i === segments.length - 1
        return (
          <span key={seg} className="flex items-center gap-1">
            {i > 0 && <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/50" />}
            <span
              className={cn(
                isLast
                  ? "font-semibold text-foreground"
                  : "text-muted-foreground hover:text-foreground cursor-pointer transition-colors"
              )}
            >
              {label}
            </span>
          </span>
        )
      })}
    </nav>
  )
}

function LiveClock() {
  const getFormatted = () => {
    const now = new Date()
    return {
      time: now.toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
        hour12: true,
      }),
      date: now.toLocaleDateString("en-US", {
        weekday: "short",
        month: "short",
        day: "numeric",
      }),
    }
  }

  const [{ time, date }, setFormatted] = useState(getFormatted)

  useEffect(() => {
    const id = setInterval(() => setFormatted(getFormatted()), 1000)
    return () => clearInterval(id)
  }, [])

  return (
    <div className="hidden items-center gap-2 rounded-md border border-border/50 bg-muted/40 px-3 py-1.5 xl:flex">
      <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
      <span className="text-xs text-muted-foreground">{date}</span>
      <span className="text-xs font-semibold tabular-nums text-foreground">{time}</span>
    </div>
  )
}

export default function Header({ user }: { user: User }) {
  return (
    <header className="sticky top-0 z-40 h-14 border-b border-border/60 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70">
      <div className="flex h-full items-center justify-between gap-3 px-4 md:px-6">
        <div className="min-w-0 flex-1">
          <Breadcrumb />
        </div>

        <div className="flex shrink-0 items-center gap-2">
          <LiveClock />
          <NotificationBell /> {/* ← replaces the old hardcoded one */}
        </div>
      </div>
    </header>
  )
}