points-of-interest/client/src/components/layout/AppHeader.tsx

import { ChevronDown, ChevronUp, Flame, Focus, LocateFixed, MapPin, RefreshCw } from "lucide-react";
import { useTranslation } from "react-i18next";

import { LanguageToggle } from "@/components/layout/LanguageToggle";
import { ThemeToggle } from "@/components/layout/ThemeToggle";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { FeedStatus } from "@/types/api";

interface AppHeaderProps {
  status: FeedStatus;
  statusLabel: string;
  lastUpdatedLabel: string;
  onRefresh: () => void;
  onFocusHeat: () => void;
  onLocateUser: () => void;
  onFocusMySignal: () => void;
  disableRefresh: boolean;
  disableHeat: boolean;
  disableLocate: boolean;
  disableMySignal: boolean;
  collapsed: boolean;
  onToggleCollapse: () => void;
  className?: string;
}

export function AppHeader({
  status,
  statusLabel,
  lastUpdatedLabel,
  onRefresh,
  onFocusHeat,
  onLocateUser,
  onFocusMySignal,
  disableRefresh,
  disableHeat,
  disableLocate,
  disableMySignal,
  collapsed,
  onToggleCollapse,
  className,
}: AppHeaderProps) {
  const { t } = useTranslation();
  const isError = status === "error";

  const statusBadge = (
    <Badge
      variant="secondary"
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1 text-xs font-medium uppercase tracking-wide",
        collapsed && "px-2 py-1 text-[11px] font-semibold"
      )}
    >
      <span className={`flex items-center gap-2 ${isError ? "text-destructive" : "text-primary"}`} aria-live="polite">
        <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
          <span className="absolute inset-[-0.35rem] rounded-full border border-current opacity-40 animate-status-pulse" />
        </span>
        {statusLabel}
      </span>
      {!collapsed && (
        <span className="text-[10px] uppercase text-muted-foreground">
          {t("header.badge.updated", { time: lastUpdatedLabel })}
        </span>
      )}
    </Badge>
  );

  return (
    <header
      className={cn(
        "flex w-full max-w-[420px] flex-col gap-3 rounded-3xl border border-border/60 bg-background/90 p-4 text-sm shadow-xl backdrop-blur transition-all",
        collapsed && "max-w-[240px] bg-background/80 p-3",
        className
      )}
    >
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-primary/10 text-primary">
            <Flame className="h-5 w-5" />
          </span>
          <div className="flex flex-col">
            <span className="text-base font-semibold sm:text-lg">{t("app.name")}</span>
            {!collapsed && <span className="text-xs text-muted-foreground sm:text-sm">{t("app.tagline")}</span>}
          </div>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={onToggleCollapse}
          aria-label={collapsed ? t("header.actions.expand") : t("header.actions.collapse")}
          className="h-9 w-9 rounded-full border border-border/50 bg-muted/60 backdrop-blur hover:bg-muted"
        >
          {collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
        </Button>
      </div>
      <div className="flex items-center gap-2">{statusBadge}</div>
      {!collapsed && (
        <div className="flex flex-wrap items-center gap-2">
          <Button
            variant="ghost"
            size="icon"
            onClick={onRefresh}
            disabled={disableRefresh}
            aria-label={t("header.actions.refresh")}
          >
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button
            variant="secondary"
            size="icon"
            onClick={onFocusHeat}
            disabled={disableHeat}
            aria-label={t("header.actions.focusHeat")}
          >
            <Focus className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onLocateUser}
            disabled={disableLocate}
            aria-label={t("header.actions.locate")}
          >
            <LocateFixed className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onFocusMySignal}
            disabled={disableMySignal}
            aria-label={t("header.actions.mySignal")}
          >
            <MapPin className="h-4 w-4" />
          </Button>
          <LanguageToggle />
          <ThemeToggle />
        </div>
      )}
    </header>
  );
}