import { Check, X } from "lucide-react";
import type { JSX } from "react";
import { useOnboarding } from "../lib/useOnboarding";

/**
 * First-launch onboarding banner. Shows once on a fresh install (or
 * any user who hasn't yet dismissed it), explains the per-tab data
 * shapes the proxy captures, and disappears forever on dismissal.
 *
 * The "seen" state lives in the server's runtime config — see
 * `useOnboarding` — so the dismissal persists across browser sessions
 * and devices for the same install.
 */
export function OnboardingBanner(): JSX.Element | null {
  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();

  if (isLoading || hasSeenOnboarding) return null;

  return (
    <div
      role="note"
      aria-label="Onboarding tip"
      className="mx-4 mt-2 mb-1 flex items-start gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm"
    >
      <div className="flex-1 min-w-0">
        <div className="font-medium text-amber-600 dark:text-amber-400 mb-1">
          Quick tour of the log tabs
        </div>
        <ul className="space-y-0.5 text-muted-foreground text-xs leading-relaxed">
          <li>
            <strong>Request</strong> / <strong>Response</strong> — structured views of what the
            proxy sent and received.
          </li>
          <li>
            <strong>Headers</strong> — request and response headers after proxy processing.
          </li>
          <li>
            <strong>Raw Headers</strong> / <strong>Raw Request</strong> /{" "}
            <strong>Raw Response</strong> — exact bytes from the upstream provider (visible in Full
            mode).
          </li>
        </ul>
      </div>
      <button
        type="button"
        onClick={() => {
          void markSeen();
        }}
        className="inline-flex items-center gap-1.5 text-xs h-8 px-3 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0"
        aria-label="Dismiss onboarding tip"
      >
        <Check className="size-3.5" />
        Got it
      </button>
      <button
        type="button"
        onClick={() => {
          void markSeen();
        }}
        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 p-1 -m-1"
        aria-label="Dismiss"
      >
        <X className="size-3.5" />
      </button>
    </div>
  );
}
