"use client";

import type { ReactNode } from "react";
import { useTranslation } from "@enode/core/translations/hooks";
import {
  HEADER_BLUR,
  HEADER_MIN_HEIGHT,
  headerEdgeClass,
} from "@enode/ui/header-height";
import { AdjustmentsIcon, ArrowLeftIcon, CloseXIcon } from "@enode/ui/icons";
import { ConnectChip } from "../../workouts/today/connect-chip";

// Static reproductions of the app's real header chrome for the marketing tiles.
// These mirror the live headers (ExerciseDetailView / InsightsSheet) so the
// screenshots read as genuine app screens, but they take no stores — every
// value is a fixed prop. Pure presentational.
//
// Like the rest of this dev-only route (screens.tsx / marketing-tile.tsx), the
// copy is intentionally NOT wrapped in `t(...)`: these tiles are excluded from
// the shipped build (the `page.screenshot.tsx` extension gate) and are never
// translated, so bare literals keep them out of the i18n baseline. The real
// `ConnectChip` still needs a `t`, so we take one from `useTranslation`.

// The round icon button used across the app's headers (back, close, actions).
function HeaderIconButton({
  label,
  children,
}: {
  label: string;
  children: ReactNode;
}) {
  return (
    <span
      role="img"
      aria-label={label}
      className="flex size-10 shrink-0 items-center justify-center rounded-full bg-surface-base text-foreground-default shadow ring-1 ring-surface-stroke-muted"
    >
      {children}
    </span>
  );
}

// The frosted header row shell — same height + edge treatment as every app
// header. `env(safe-area-inset-top)` resolves to 0 inside the device mock, so
// the bar simply sits at the top of the screen.
function HeaderRow({ children }: { children: ReactNode }) {
  return (
    <div
      className={`relative ${HEADER_MIN_HEIGHT} ${headerEdgeClass(HEADER_BLUR)} flex shrink-0 items-center px-4 pb-4 pt-[calc(1rem+env(safe-area-inset-top))]`}
    >
      {children}
    </div>
  );
}

// The active-tracking / split-left top bar: a round back button on the left and
// the actions + Connect pill on the right (matches ExerciseDetailView's
// NEW_TRACKING_HEADER). The Connect pill uses the real pure `ConnectChip`.
export function AppTopBar() {
  const { t } = useTranslation();
  return (
    <HeaderRow>
      <HeaderIconButton label="Back">
        <ArrowLeftIcon className="size-5" />
      </HeaderIconButton>
      <div className="ml-auto flex shrink-0 items-center gap-2">
        <HeaderIconButton label="Options">
          <AdjustmentsIcon className="size-5" />
        </HeaderIconButton>
        <ConnectChip device="sensor" label="84%" onClick={() => {}} t={t} />
      </div>
    </HeaderRow>
  );
}

// The Insights frosted header — the "Insights" title, with a close button when
// presented modally (phone), omitted when it's the inline side pane (iPad).
export function InsightsHeader({ showClose = false }: { showClose?: boolean }) {
  return (
    <HeaderRow>
      <div className="flex min-w-0 flex-1 items-center gap-4">
        {showClose && (
          <HeaderIconButton label="Close">
            <CloseXIcon className="size-5" />
          </HeaderIconButton>
        )}
        <h2 className="heading-large min-w-0 flex-1 truncate">Insights</h2>
      </div>
    </HeaderRow>
  );
}

export type InsightsTabId = "overview" | "performance" | "technique";

// The floating bottom-nav chip from the app's Insights sheet: the real Technique
// tab's set/rep selector portals into `slotRef` (above the pills), with the
// Overview / Performance / Technique tab pills beneath and `active` highlighted.
// This mirrors the real InsightsSheet's bottom nav (the tabs live inside that
// route-level component and aren't exported, so the pill row is reproduced;
// the selector row is the real component, portaled in).
export function InsightsBottomNav({
  active,
  slotRef,
}: {
  active: InsightsTabId;
  // Callback ref for the portal target the Technique tab's SetRepSelector mounts
  // into. Omit for tabs without a selector (Overview / Performance).
  slotRef?: (el: HTMLDivElement | null) => void;
}) {
  const tabs: { id: InsightsTabId; label: string }[] = [
    { id: "overview", label: "Overview" },
    { id: "performance", label: "Performance" },
    { id: "technique", label: "Technique" },
  ];
  return (
    <div className="absolute inset-x-0 bottom-6 z-30 flex justify-center px-3">
      <div className="flex w-full max-w-md flex-col gap-2 rounded-3xl bg-surface-base p-2 shadow-floating ring-1 ring-surface-stroke-muted">
        {slotRef && (
          <div ref={slotRef} className="flex min-w-0 justify-start px-1 empty:hidden" />
        )}
        <div className="flex gap-1.5">
          {tabs.map((tab) => {
            const on = tab.id === active;
            return (
              <span
                key={tab.id}
                className={`clickable-small flex-1 whitespace-nowrap rounded-full border px-3 py-2 text-center ${
                  on
                    ? "border-foreground-red-orange/30 bg-foreground-red-orange/10 text-foreground-default"
                    : "border-transparent text-foreground-muted"
                }`}
              >
                {tab.label}
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );
}