"use client";

import { GitBranch, Plus, Search } from "lucide-react";
import {
  selectPipelineFilters,
  setPipelineSearchQuery,
} from "@/store/slices/pipeline-filters-slice";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export interface PipelinePageHeaderProps {
  filteredCount: number;
  isAdmin: boolean;
  isSearchActive: boolean;
  onCreate: () => void;
  pipelinesCount: number;
}

export function PipelinePageHeader({
  filteredCount,
  isAdmin,
  isSearchActive,
  onCreate,
  pipelinesCount,
}: PipelinePageHeaderProps) {
  const dispatch = useAppDispatch();
  const { searchQuery } =
    useAppSelector(selectPipelineFilters);

  return (
    <div className="flex flex-col gap-5 border-b border-border/40 pb-6 shrink-0">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div className="flex items-center gap-3.5 min-w-0">
          <div className="h-10 w-10 md:h-12 md:w-12 rounded-2xl bg-accent/10 flex items-center justify-center text-accent shrink-0 shadow-sm">
            <GitBranch size={22} className="md:size-6" />
          </div>
          <div className="min-w-0">
            <h1 className="text-[20px] md:text-[28px] font-black text-text font-['Lexend'] tracking-tight leading-tight shrink-0">
              Pipelines
            </h1>
            <p className="text-[10px] md:text-[12px] text-gray-500 font-['Lexend_Deca'] uppercase tracking-widest flex flex-wrap items-center gap-1.5 mt-0.5">
              <span className="font-bold text-accent/90 bg-accent/5 px-1.5 py-0.5 rounded shrink-0">
                {isSearchActive
                  ? `${filteredCount} Found`
                  : `${pipelinesCount} Total`}
              </span>
              <span className="text-gray-400 font-normal normal-case hidden sm:inline">
                Stages & Metadata Management
              </span>
            </p>
          </div>
        </div>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              size="sm"
              onClick={onCreate}
              disabled={!isAdmin}
              className="h-9 md:h-11 rounded-2xl px-4 md:px-5 text-[12px] md:text-[13px] font-bold bg-accent text-white shadow-premium hover:scale-[1.02] transition-transform w-full sm:w-auto"
            >
              <Plus size={16} className="mr-1.5 md:mr-2 stroke-[3px]" />
              New Pipeline
            </Button>
          </TooltipTrigger>
          {!isAdmin && (
            <TooltipContent>Only admins can create pipelines</TooltipContent>
          )}
        </Tooltip>
      </div>

      <div className="flex gap-3">
        <div className="relative group flex-1">
          <Search
            size={15}
            className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-accent transition-colors pointer-events-none"
            aria-hidden
          />
          <Input
            type="search"
            className="pl-10 pr-4 h-10 md:h-11 text-[13px] md:text-[13.5px] bg-white border-border/60 rounded-2xl w-full font-['Lexend_Deca'] shadow-sm focus:ring-accent/20"
            placeholder="Search by name, ID or stages..."
            value={searchQuery}
            onChange={(e) =>
              dispatch(setPipelineSearchQuery(e.target.value))
            }
            aria-label="Search pipelines"
          />
        </div>
      </div>
    </div>
  );
}