"use client";

import Link from "next/link";

import { LayoutGrid, Radio } from "lucide-react";

import { Button } from "@/components/ui/button";
import { useOpsVenueId } from "@/stores/operations/operations-store";
import { useVenue } from "@/stores/platform/use-platform-selectors";

interface OperationsHeaderProps {
  title: string;
  subtitle?: string;
  showFloorLink?: boolean;
}

export function OperationsHeader({ title, subtitle, showFloorLink = false }: OperationsHeaderProps) {
  const venue = useVenue(useOpsVenueId());

  return (
    <header className="flex flex-wrap items-center justify-between gap-3 border-b bg-background/80 px-4 py-3 backdrop-blur-sm md:px-6 md:py-4">
      <div>
        <div className="mb-1 flex items-center gap-2">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-700">
            <Radio className="size-3 animate-pulse" />
            {venue?.serviceLabel ?? "Live"}
          </span>
        </div>
        <h1 className="text-xl font-bold tracking-tight md:text-2xl">{title}</h1>
        {subtitle && <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>}
      </div>
      {showFloorLink && (
        <Button asChild size="lg" className="h-11 gap-2 px-5 text-base">
          <Link href="/operations/floor">
            <LayoutGrid className="size-5" />
            Floor view
          </Link>
        </Button>
      )}
    </header>
  );
}