import { Menu } from "lucide-react";
import { useTranslation } from "react-i18next";

import { AppHeader } from "@/components/layout/app-header";
import { Badge } from "@/components/ui/badge";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { useAppStore } from "@/store/use-app-store";
import type { FeedStatus } from "@/types/api";

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

export function HeaderOverlay({
  status,
  statusLabel,
  lastUpdatedLabel,
  onRefresh,
  onFocusHeat,
  onLocateUser,
  onFocusMySignal,
  disableRefresh,
  disableHeat,
  disableLocate,
  disableMySignal,
}: HeaderOverlayProps) {
  const { t } = useTranslation();
  const isDetailsOpen = useAppStore(state => state.isSidebarOpen);
  const isHeaderCollapsed = useAppStore(state => state.isHeaderCollapsed);
  const setIsHeaderCollapsed = useAppStore(state => state.setIsHeaderCollapsed);
  const isMobileHeaderOpen = useAppStore(state => state.isMobileHeaderOpen);
  const setIsMobileHeaderOpen = useAppStore(state => state.setIsMobileHeaderOpen);
  const detailsToggleLabel = isDetailsOpen ? t("details.close") : t("details.open");

  return (
    <div className="pointer-events-none absolute inset-0 flex flex-col">
      {/* Desktop variant */}
      <div className="hidden items-start justify-between gap-3 p-2 sm:flex sm:p-6">
        <div className="pointer-events-auto">
          <SidebarTrigger aria-label={detailsToggleLabel} aria-expanded={isDetailsOpen}>
            <Menu className="h-4 w-4" />
          </SidebarTrigger>
        </div>
        <div className="pointer-events-auto">
          {isHeaderCollapsed ? (
            <button
              type="button"
              onClick={() => setIsHeaderCollapsed(false)}
              className="rounded-3xl border border-border/60 bg-background/90 p-2 shadow-xl backdrop-blur transition hover:bg-background"
              aria-label={t("header.actions.expand")}
              aria-expanded={!isHeaderCollapsed}
            >
              <Badge
                variant="secondary"
                className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-2 text-xs font-medium uppercase tracking-wide"
              >
                <span
                  className={`flex items-center gap-2 ${status === "error" ? "text-destructive" : "text-success"}`}
                  aria-live="polite"
                >
                  <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
                    <span className="status-dot relative block h-2.5 w-2.5 rounded-full bg-current" />
                  </span>
                  {statusLabel}
                </span>
                <span className="text-[10px] uppercase text-muted-foreground">
                  {t("header.badge.updated", { time: lastUpdatedLabel })}
                </span>
              </Badge>
            </button>
          ) : (
            <div className="transition-all duration-300 ease-out">
              <AppHeader
                status={status}
                statusLabel={statusLabel}
                lastUpdatedLabel={lastUpdatedLabel}
                onRefresh={onRefresh}
                onFocusHeat={onFocusHeat}
                onLocateUser={onLocateUser}
                onFocusMySignal={onFocusMySignal}
                disableRefresh={disableRefresh}
                disableHeat={disableHeat}
                disableLocate={disableLocate}
                disableMySignal={disableMySignal}
                collapsed={isHeaderCollapsed}
                onToggleCollapse={() => setIsHeaderCollapsed(true)}
              />
            </div>
          )}
        </div>
      </div>

      {/* Mobile variant */}
      <div className="pointer-events-none sm:hidden">
        <div className="pointer-events-auto px-4 pt-4">
          {isMobileHeaderOpen ? (
            <div className="transition-all duration-300 ease-out">
              <AppHeader
                status={status}
                statusLabel={statusLabel}
                lastUpdatedLabel={lastUpdatedLabel}
                onRefresh={onRefresh}
                onFocusHeat={onFocusHeat}
                onLocateUser={onLocateUser}
                onFocusMySignal={onFocusMySignal}
                disableRefresh={disableRefresh}
                disableHeat={disableHeat}
                disableLocate={disableLocate}
                disableMySignal={disableMySignal}
                collapsed={false}
                onToggleCollapse={() => setIsMobileHeaderOpen(false)}
              />
            </div>
          ) : (
            <div className="flex items-center justify-between">
              <SidebarTrigger aria-label={detailsToggleLabel} aria-expanded={isDetailsOpen} />
              <button
                type="button"
                onClick={() => setIsMobileHeaderOpen(true)}
                className="rounded-3xl border border-border/60 bg-background/90 p-2 shadow-xl backdrop-blur transition hover:bg-background"
                aria-label={t("header.actions.expand")}
              >
                <Badge
                  variant="secondary"
                  className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-2 text-xs font-medium uppercase tracking-wide"
                >
                  <span
                    className={`flex items-center gap-2 ${status === "error" ? "text-destructive" : "text-success"}`}
                    aria-live="polite"
                  >
                    <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
                      <span className="status-dot relative block h-2.5 w-2.5 rounded-full bg-current" />
                    </span>
                    {statusLabel}
                  </span>
                  <span className="text-[10px] uppercase text-muted-foreground">
                    {t("header.badge.updated", { time: lastUpdatedLabel })}
                  </span>
                </Badge>
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
