"use client";

import { usePathname } from "next/navigation";
import { useAppStore } from "@/lib/store";
import { Activity } from "lucide-react";

const BREADCRUMBS: Record<string, string> = {
  "/airscale": "AirScale → Email",
  "/linkedin": "LinkedIn → Email",
  "/serp": "SERP → Email",
  "/results": "Results & History",
  "/settings": "Settings",
};

export function TopBar() {
  const pathname = usePathname();
  const { activeJobs } = useAppStore();
  const runningJobs = activeJobs.filter(j => j.status === "running").length;
  const label = BREADCRUMBS[pathname] || "Dashboard";

  return (
    <header className="h-14 border-b border-[#1e1e2e] bg-[#111118]/80 backdrop-blur flex items-center justify-between px-6 flex-shrink-0">
      <div className="flex items-center gap-2 text-sm">
        <span className="text-gray-500">LeadFlow</span>
        <span className="text-gray-600">/</span>
        <span className="text-white font-medium">{label}</span>
      </div>
      {runningJobs > 0 && (
        <div className="flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-3 py-1">
          <Activity className="w-3.5 h-3.5 text-blue-400 animate-pulse" />
          <span className="text-xs text-blue-400 font-medium">{runningJobs} Active Job{runningJobs > 1 ? "s" : ""}</span>
        </div>
      )}
    </header>
  );
}