pn-new-crm/src/components/shared/dev-mode-banner.tsx

'use client';

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

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

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

const DISMISS_KEY = 'pn-crm.devBanner.dismissed';

/**
 * 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.
 *
 * Dismissal is persisted in localStorage keyed by the redirect address —
 * changing `EMAIL_REDIRECT_TO` re-shows the banner so the new target
 * can't be silently inherited.
 */
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,
    refetchOnWindowFocus: false,
  });

  const redirect = data?.data?.emailRedirectTo;
  const [overrideDismissed, setOverrideDismissed] = useState(false);
  const persistedDismissed =
    typeof window !== 'undefined' && !!redirect
      ? window.localStorage.getItem(DISMISS_KEY) === redirect
      : false;
  const dismissed = overrideDismissed || persistedDismissed;

  if (!redirect || dismissed) return null;

  const handleDismiss = () => {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(DISMISS_KEY, redirect);
    }
    setOverrideDismissed(true);
  };

  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>
      <button
        type="button"
        onClick={handleDismiss}
        aria-label="Dismiss dev mode banner"
        className="ml-2 inline-flex size-5 shrink-0 items-center justify-center rounded hover:bg-amber-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500"
      >
        <X className="size-3.5" aria-hidden />
      </button>
    </div>
  );
}