"use client";

import { useEffect, useState } from "react";
import { checkHealth } from "../lib/api";

export default function TopBar() {
  const [healthy, setHealthy] = useState<boolean | null>(null);

  useEffect(() => {
    checkHealth().then(setHealthy);
    const interval = setInterval(() => checkHealth().then(setHealthy), 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <header
      className="h-20 flex justify-between items-center px-10 w-full border-b z-40 sticky top-0"
      style={{ backgroundColor: "rgba(12,12,14,0.8)", backdropFilter: "blur(24px)" }}
    >
      {/* Search */}
      <div className="flex items-center gap-6">
        <div className="relative">
          <span
            className="material-symbols-outlined absolute left-0 top-1/2 -translate-y-1/2 text-zinc-600"
            style={{ fontSize: "18px" }}
          >
            search
          </span>
          <input
            type="text"
            placeholder="Query the system..."
            className="bg-transparent border-none text-[13px] focus:outline-none rounded py-2 pl-8 pr-4 w-72 placeholder:text-zinc-700 text-zinc-200 transition-all"
          />
        </div>
      </div>

      {/* Right side */}
      <div className="flex items-center gap-8">
        <div className="flex items-center gap-6 text-zinc-500">
          <span
            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
            style={{ fontSize: "22px" }}
          >
            notifications
          </span>
          <span
            className="material-symbols-outlined text-lg hover:text-[#A78BFA] cursor-pointer transition-colors"
            style={{ fontSize: "22px" }}
          >
            terminal
          </span>
        </div>

        <div className="h-6 w-px" style={{ backgroundColor: "rgba(255,255,255,0.05)" }} />

        {/* Health indicator */}
        <div
          className="text-[10px] font-bold px-4 py-1.5 rounded-full tracking-wide flex items-center gap-2"
          style={{
            color: healthy === false ? "#ff6f78" : "#A78BFA",
            backgroundColor: healthy === false ? "rgba(255,111,120,0.05)" : "rgba(167,139,250,0.05)",
            border: `1px solid ${healthy === false ? "rgba(255,111,120,0.2)" : "rgba(167,139,250,0.2)"}`,
          }}
        >
          <span
            className="w-1.5 h-1.5 rounded-full"
            style={{
              backgroundColor: healthy === null ? "#A78BFA" : healthy ? "#10b981" : "#ff6f78",
              display: "inline-block",
              boxShadow: healthy ? "0 0 6px #10b981" : undefined,
            }}
          />
          {healthy === null
            ? "CONNECTING..."
            : healthy
            ? "THIRDEYE_CORE: ONLINE"
            : "BACKEND: OFFLINE"}
        </div>
      </div>
    </header>
  );
}