/**
 * MagicLinkLanding - guest → user conversion landing page component.
 *
 * Reads `token` from URL, calls /api/auth/magic-link, creates session.
 * Shows processing → success/error states.
 */

'use client';

import { useEffect, useState } from 'react';
import { useT } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { AppShell } from '@/components/ui/layout/AppShell';
import { SiteNav } from '@/components/ui/layout/SiteNav';
import { Button } from '@/components/ui/primitives/Button';
import { Spinner } from '@/components/ui/feedback/Spinner';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { Icon } from '@/components/ui/icons/Icon';
import {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
} from '@/components/ui/overlays/Toast';
import { useToast } from '@/components/ui/overlays/Toast/useToast';
import { useCartMerge } from '@/features/cart/useCartMerge';
import { useWishlistMerge } from '@/features/wishlist/useWishlistMerge';
import { WishlistMergeDialog } from '@/features/wishlist/WishlistMergeDialog';
import { captureCaught } from '@/lib/observability';
import { broadcastMhEvent } from '@/lib/cross-tab-sync';
import type { Locale } from '@/lib/i18n';

export interface MagicLinkLandingProps {
  locale?: Locale;
  /** Magic link token from URL search params. */
  token: string | null;
  /** Redirect after success. @default '/' */
  redirectTo?: string;
}

type LandingState = 'no-token' | 'processing' | 'success' | 'error';

function MagicLinkLandingInner({ token, redirectTo = '/' }: MagicLinkLandingProps) {
  const t = useT('auth_flow');
  const tCart = useT('cart');
  const tCommon = useT('common');
  const { toasts, toast, dismiss } = useToast();
  const { mergeFromLocalStorage } = useCartMerge();
  const wishlistMerge = useWishlistMerge();

  // Derive the initial state from `token` rather than flipping it inside an
  // effect - avoids react-hooks/set-state-in-effect for the null-token path.
  const [state, setState] = useState<LandingState>(() => (token ? 'processing' : 'no-token'));
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  useEffect(() => {
    if (!token) {
      // No token in URL — show neutral guidance, not an error.
      return;
    }

    let cancelled = false;

    void (async () => {
      try {
        const res = await fetch('/api/auth/magic-link', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token }),
        });
        const data = (await res.json()) as { ok: boolean; error?: string };

        if (cancelled) return;

        if (data.ok) {
          // Merge localStorage cart BEFORE redirect — no-op when local cart is empty
          try {
            const mergeResult = await mergeFromLocalStorage();
            if (mergeResult.merged.length > 0 || mergeResult.removed.length > 0) {
              toast({ title: tCart('mergeToast'), tone: 'success' });
            }
            if (mergeResult.removed.length > 0) {
              toast({
                title: tCart('mergeToast'),
                description: mergeResult.removed.map((r) => r.dealId).join(', '),
                tone: 'warning',
                duration: 7000,
              });
            }
          } catch (err) {
            captureCaught(err, {
              scope: 'features.auth-flow.MagicLinkLanding',
              severity: 'warning',
            });
            // Merge failure must not block the redirect
          }

          await wishlistMerge.run();
          broadcastMhEvent({ kind: 'login' });
          sessionStorage.setItem('mh:freshLogin', '1');
          setState('success');
          // Auto-redirect after 2s
          setTimeout(() => {
            window.location.href = redirectTo;
          }, 2000);
        } else {
          setState('error');
          setErrorMsg(data.error ?? t('magic_link_error'));
        }
      } catch (err) {
        captureCaught(err, { scope: 'features.auth-flow.MagicLinkLanding', severity: 'warning' });
        if (!cancelled) {
          setState('error');
          setErrorMsg(t('magic_link_error'));
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [token, redirectTo, t, tCart, mergeFromLocalStorage, wishlistMerge, toast]);

  return (
    <>
      <AppShell
        mode="customer"
        topBar={
          <SiteNav
            variant="mobile"
            title={tCommon('app_name')}
            currentPath="/auth/magic-link"
            isGuest={true}
          />
        }
      >
        <main
          className="mx-auto flex max-w-sm flex-col items-center justify-center gap-6 px-4 py-16"
          aria-live="polite"
        >
          {state === 'processing' && (
            <>
              <Spinner size="lg" label={t('magic_link_processing')} />
              <p className="text-text-secondary text-sm">{t('magic_link_processing')}</p>
            </>
          )}

          {state === 'success' && (
            <>
              <div className="bg-success-100 flex h-16 w-16 items-center justify-center rounded-full">
                <Icon name="Check" size="xl" color="success" />
              </div>
              <p className="text-text-primary text-center text-base font-semibold">
                {t('magic_link_success')}
              </p>
            </>
          )}

          {state === 'no-token' && (
            <>
              <InlineNotice tone="info" description={t('magic_link_check_email')} />
              <Button
                variant="primary"
                size="lg"
                className="w-full"
                onClick={() => {
                  window.location.href = '/login';
                }}
              >
                {t('login_title')}
              </Button>
            </>
          )}

          {state === 'error' && (
            <>
              <InlineNotice tone="danger" description={errorMsg ?? t('magic_link_error')} />
              <Button
                variant="primary"
                size="lg"
                className="w-full"
                onClick={() => {
                  window.location.href = '/login';
                }}
              >
                {t('login_title')}
              </Button>
            </>
          )}
        </main>
      </AppShell>

      {/* Toast viewport for merge notifications */}
      {toasts.map((item) => (
        <Toast
          key={item.id}
          tone={item.tone}
          duration={item.duration}
          onOpenChange={(open) => {
            if (!open) dismiss(item.id);
          }}
        >
          <div className="flex flex-1 flex-col gap-1">
            <ToastTitle>{item.title}</ToastTitle>
            {item.description && <ToastDescription>{item.description}</ToastDescription>}
          </div>
          <ToastClose />
        </Toast>
      ))}
      <WishlistMergeDialog {...wishlistMerge.dialogProps} />
      <ToastViewport />
    </>
  );
}

export function MagicLinkLanding(props: MagicLinkLandingProps) {
  return (
    <HydratedIsland locale={props.locale}>
      <ToastProvider>
        <MagicLinkLandingInner {...props} />
      </ToastProvider>
    </HydratedIsland>
  );
}