git-website-engine-control-plane/src/components/Navbar.tsx

import React from "react";
import {
  Terminal,
  GitBranch,
  Sliders,
  FileText,
  Palette,
  PlayCircle,
  Server,
  UploadCloud,
  Eye,
  ShieldCheck,
  Activity,
  CheckCircle2,
  AlertTriangle,
  RotateCcw,
} from "lucide-react";
import { NginxStatus, BuildRecord, PushTarget } from "../types";

interface NavbarProps {
  activeTab: string;
  setActiveTab: (tab: string) => void;
  nginxStatus: NginxStatus | null;
  activeBuild: BuildRecord | null;
  primaryPushTarget: PushTarget | null;
  onQuickBuild: () => void;
  onQuickNginxTest: () => void;
  isBuilding: boolean;
}

export const Navbar: React.FC<NavbarProps> = ({
  activeTab,
  setActiveTab,
  nginxStatus,
  activeBuild,
  primaryPushTarget,
  onQuickBuild,
  onQuickNginxTest,
  isBuilding,
}) => {
  const tabs = [
    { id: "dashboard", label: "Dashboard", icon: Activity },
    { id: "repositories", label: "Repositories", icon: GitBranch },
    { id: "explorer", label: "Site Explorer", icon: Eye },
    { id: "artifacts", label: "Artifacts", icon: FileText },
    { id: "projections", label: "Projections", icon: Palette },
    { id: "publishing", label: "Publishing", icon: PlayCircle },
    { id: "targets", label: "Publishing Targets", icon: UploadCloud },
    { id: "local-site", label: "Local Site", icon: Server },
    { id: "system", label: "System", icon: ShieldCheck },
  ];

  return (
    <header className="bg-[#0F0F0F] text-white border-b border-[#1F1F1F] sticky top-0 z-50">
      {/* TOP BRAND BAR */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <div className="w-9 h-9 rounded-sm bg-gradient-to-tr from-[#8A6D3B] to-[#C5A059] flex items-center justify-center font-serif italic text-black font-bold text-lg shadow-md shadow-[#C5A059]/10">
            L
          </div>
          <div>
            <div className="flex items-center space-x-2">
              <span className="font-serif italic text-lg tracking-tight text-white">
                Labyricorn
              </span>
              <span className="px-2 py-0.5 text-[10px] font-mono font-semibold bg-[#C5A059]/10 text-[#C5A059] border border-[#C5A059]/30 rounded-xs uppercase tracking-widest">
                v1.0.0-MVP
              </span>
            </div>
            <p className="text-[11px] text-neutral-400 hidden sm:block">
              Git-backed Static Site Control Plane & Nginx Host
            </p>
          </div>
        </div>

        {/* SYSTEM STATUS BADGES & QUICK ACTIONS */}
        <div className="flex items-center space-x-3">
          {/* Active Release Badge */}
          <div className="hidden lg:flex items-center space-x-2 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs font-mono text-neutral-300">
            <span className="text-neutral-500">current -&gt;</span>
            <span className="text-[#C5A059] font-semibold">
              {activeBuild ? activeBuild.id : "none"}
            </span>
          </div>

          {/* Nginx Status Badge */}
          <div className="hidden md:flex items-center space-x-1.5 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs text-neutral-300">
            <span
              className={`w-2 h-2 rounded-full ${nginxStatus?.configValid ? "bg-emerald-500" : "bg-amber-500"}`}
            ></span>
            <span className="font-medium text-neutral-300">
              Nginx: {nginxStatus?.configValid ? "Active (Port 80)" : "Error"}
            </span>
          </div>

          {/* Push Target Status */}
          {primaryPushTarget && (
            <div className="hidden xl:flex items-center space-x-1.5 px-3 py-1 bg-[#141414] border border-[#222222] rounded-sm text-xs text-neutral-300">
              <span className="text-[#C5A059] font-mono">VPS:</span>
              <span className="text-neutral-200 font-medium">
                {primaryPushTarget.host}
              </span>
              <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
            </div>
          )}

          {/* QUICK BUILD BUTTON */}
          <button
            onClick={onQuickBuild}
            disabled={isBuilding}
            className="px-3.5 py-1.5 bg-[#C5A059] hover:bg-[#b38f4a] text-black font-semibold rounded-sm text-xs transition-colors shadow-xs flex items-center space-x-1.5 disabled:opacity-50"
          >
            <PlayCircle
              className={`w-3.5 h-3.5 ${isBuilding ? "animate-spin" : ""}`}
            />
            <span className="uppercase tracking-wider text-[11px]">
              {isBuilding ? "Building..." : "Trigger Build"}
            </span>
          </button>
        </div>
      </div>

      {/* NAVIGATION TAB STRIP */}
      <div className="border-t border-[#1F1F1F] bg-[#0A0A0A]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 overflow-x-auto no-scrollbar">
          <nav className="flex space-x-1 py-1 text-xs font-medium min-w-max">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              const isActive = activeTab === tab.id;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center space-x-2 px-3.5 py-2 rounded-sm transition-all ${
                    isActive
                      ? "bg-[#181818] text-[#C5A059] border-b-2 border-[#C5A059] font-semibold"
                      : "text-neutral-400 hover:text-white hover:bg-[#141414]"
                  }`}
                >
                  <Icon
                    className={`w-3.5 h-3.5 ${isActive ? "text-[#C5A059]" : "text-neutral-500"}`}
                  />
                  <span>{tab.label}</span>
                </button>
              );
            })}
          </nav>
        </div>
      </div>
    </header>
  );
};