'use client';

import { useQuery } from '@tanstack/react-query';
import { AlertTriangle } from 'lucide-react';

import { apiFetch } from '@/lib/api/client';

interface DevFlags {
  emailRedirectTo: string | null;
  isDev: boolean;
}

/**
 * Single-line warning banner shown across the app whenever a dev-mode
 * safety net is active (today: `EMAIL_REDIRECT_TO`). Sticky at the top
 * of every authenticated surface so reps and admins can't miss that
 * every outbound email is being rerouted to a single inbox.
 *
 * Production hides the banner entirely because env.ts refuses to boot
 * with EMAIL_REDIRECT_TO set when NODE_ENV=production — the flag is
 * only ever non-null in dev / staging.
 */
export function DevModeBanner() {
  const { data } = useQuery<{ data: DevFlags }>({
    queryKey: ['internal', 'dev-flags'],
    queryFn: () => apiFetch<{ data: DevFlags }>('/api/v1/internal/dev-flags'),
    staleTime: 5 * 60_000,
    // Don't refetch on focus; the flag changes only on a restart.
    refetchOnWindowFocus: false,
  });

  const redirect = data?.data?.emailRedirectTo;
  if (!redirect) return null;

  return (
    <div
      role="alert"
      className="flex items-center justify-center gap-2 border-b border-amber-300 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-900"
      title={`Every outbound email is rewritten so the recipient is ${redirect}. The original address is preserved in the recipient name as "(was: original@...)". Unset EMAIL_REDIRECT_TO in your env to disable.`}
    >
      <AlertTriangle className="size-3.5 shrink-0" aria-hidden />
      <span>
        Dev mode: outbound emails redirected to <code className="font-mono">{redirect}</code>
      </span>
    </div>
  );
}