"use client";

import { Bell } from "lucide-react";
import Logo from "@/components/icons/openrag-logo";
import { UserNav } from "@/components/user-nav";
import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils";

export function Header() {
  const { tasks, toggleMenu } = useTask();

  // Calculate active tasks for the bell icon
  const activeTasks = tasks.filter(
    (task) =>
      task.status === "pending" ||
      task.status === "running" ||
      task.status === "processing",
  );

  return (
    <header className={cn(`flex w-full h-full items-center justify-between`)}>
      <div className="header-start-display px-[16px]">
        {/* Logo/Title */}
        <div className="flex items-center">
          <Logo className="fill-primary" width={24} height={22} />
          <span
            className="text-lg font-semibold pl-2.5"
            style={{ fontFamily: '"IBM Plex Mono", monospace' }}
          >
            OpenRAG
          </span>
        </div>
      </div>
      <div className="header-end-division">
        <div className="justify-end flex items-center">
          {/* Knowledge Filter Dropdown */}
          {/* <KnowledgeFilterDropdown
              selectedFilter={selectedFilter}
              onFilterSelect={setSelectedFilter}
            /> */}

          {/* GitHub Star Button */}
          {/* <GitHubStarButton repo="phact/openrag" /> */}

          {/* Discord Link */}
          {/* <DiscordLink inviteCode="EqksyE2EX9" /> */}

          {/* Task Notification Bell */}
          <button
            onClick={toggleMenu}
            className="relative h-8 w-8 hover:bg-muted rounded-lg flex items-center justify-center"
          >
            <Bell size={16} className="text-muted-foreground" />
            {activeTasks.length > 0 && <div className="header-notifications" />}
          </button>

          {/* Separator */}
          <div className="w-px h-6 bg-border mx-3" />

          <UserNav />
        </div>
      </div>
    </header>
  );
}