"use client";

import * as React from "react";
import { LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Me } from "@/lib/api";
import { Badge } from "@/components/ui/badge";

/**
 * Sticky chrome over scrolling content: search on the left, identity on the
 * right. Everything that used to be hidden below `sm:` — the quota chip, the
 * display name — now degrades into the overflow rather than vanishing, since
 * "how many requests do I have left" matters most on the device you are
 * actually queueing from.
 */
export function Toolbar({
  me,
  quotaLeft,
  children,
}: {
  me: Me | null;
  quotaLeft: number | null;
  children?: React.ReactNode;
}) {
  return (
    <header className="material sticky top-0 z-30 border-b border-edge">
      <div className="mx-auto flex w-full max-w-[var(--container-3xl)] items-center gap-3 px-4 py-2.5">
        <div className="min-w-0 flex-1">{children}</div>

        {me?.user && (
          <div className="flex shrink-0 items-center gap-2">
            {quotaLeft !== null && (
              <Badge
                tone={quotaLeft === 0 ? "err" : quotaLeft <= 5 ? "warn" : "neutral"}
                title={`${me.usage!.requests} of ${me.quota} requests used this month`}
                className="nums"
              >
                {quotaLeft} left
              </Badge>
            )}
            {me.role && me.role !== "user" && (
              <Badge tone="accent" className="hidden uppercase tracking-[0.06em] sm:inline-flex">
                {me.role}
              </Badge>
            )}
            {me.avatar && (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img
                src={me.avatar}
                alt=""
                className="h-7 w-7 rounded-full border border-edge object-cover"
              />
            )}
            <span className="hidden max-w-[14ch] text-callout font-medium clamp1 lg:inline">
              {me.display || me.user}
            </span>
            <a
              href="/auth/logout"
              title="Log out"
              aria-label="Log out"
              className={cn(
                "focus-ring grid h-8 w-8 place-items-center rounded-control text-dim",
                "transition-colors hover:bg-[var(--faint)] hover:text-ink",
              )}
            >
              <LogOut className="h-4 w-4" />
            </a>
          </div>
        )}
      </div>
    </header>
  );
}