/**
 * TrialExpiredInterstitial — trial-expiry-conversion-ui spec (Task 10).
 *
 * Full-page blocking interstitial shown once on first post-expiry load.
 * Shown when trial_expiry_ack_at IS NULL (state='expired').
 *
 * A11y:
 *   - role="dialog" aria-modal="true" aria-labelledby=<title id>
 *   - Focus is trapped within the dialog via Radix DialogPrimitive
 *   - ESC key does NOT bypass acknowledgement — only explicit CTAs dismiss
 *   - First focusable element receives focus on mount (Radix default)
 *
 * Animation:
 *   - Entrance animation disabled under prefers-reduced-motion
 *
 * CTAs:
 *   - "Upgrade to Business" → onUpgrade() (navigate to /settings/plan)
 *   - "Continue with Freelancer plan" → onAcknowledge() (POST ack + dismiss)
 */
import * as React from 'react'
import { useId } from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { useTranslation } from 'react-i18next'
import { ShieldOff } from 'lucide-react'
import { cn } from '../lib/cn'
import { Button } from '../primitives/button'
import { useReducedMotion } from '../hooks/use-reduced-motion'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface TrialExpiredInterstitialProps {
  /** Navigate to /settings/plan (plan card) */
  onUpgrade: () => void
  /** POST /api/zync-subscription/ack-trial-expiry then dismiss */
  onAcknowledge: () => void
}

// ---------------------------------------------------------------------------
// Lost features list
// ---------------------------------------------------------------------------

const LOST_FEATURE_KEYS = [
  'interstitial_lost_lead_forms',
  'interstitial_lost_contracts',
  'interstitial_lost_expense',
  'interstitial_lost_api',
  'interstitial_lost_domain',
] as const

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function TrialExpiredInterstitial({
  onUpgrade,
  onAcknowledge,
}: TrialExpiredInterstitialProps): React.JSX.Element {
  const { t } = useTranslation()
  const titleId = useId()
  const reducedMotion = useReducedMotion()

  return (
    <DialogPrimitive.Root
      open
      // ESC does not dismiss — onOpenChange is a no-op to prevent bypass
      onOpenChange={() => undefined}
    >
      <DialogPrimitive.Portal>
        {/* Overlay */}
        <DialogPrimitive.Overlay
          className={cn(
            'fixed inset-0 z-50 bg-ink/60',
            !reducedMotion && 'animate-in fade-in duration-300',
            'motion-reduce:animate-none',
          )}
        />

        {/* Content */}
        <DialogPrimitive.Content
          role="dialog"
          aria-modal="true"
          aria-labelledby={titleId}
          className={cn(
            'fixed inset-0 z-50 flex items-center justify-center p-4',
            'focus:outline-none',
          )}
          // Prevent closing on overlay click or Escape
          onInteractOutside={(e) => e.preventDefault()}
          onEscapeKeyDown={(e) => e.preventDefault()}
        >
          <div
            className={cn(
              'w-full max-w-lg rounded border border-line bg-surface p-8 shadow',
              !reducedMotion && 'animate-in fade-in zoom-in-95 duration-300',
              'motion-reduce:animate-none',
            )}
          >
            {/* Logo area */}
            <div className="flex justify-center mb-6">
              <span className="text-title-1 font-bold text-accent" aria-hidden="true">
                Zync
              </span>
            </div>

            {/* Title */}
            <DialogPrimitive.Title
              id={titleId}
              className="text-title-2 font-semibold text-ink text-center"
            >
              {t('trial-expiry.interstitial_title', {
                defaultValue: 'Your Business trial has ended',
              })}
            </DialogPrimitive.Title>

            {/* Downgrade notice */}
            <div className="mt-4 space-y-2 text-center">
              <p className="text-body-2 text-ink-soft">
                {t('trial-expiry.interstitial_downgraded', {
                  defaultValue: 'Your account has been downgraded to Freelancer.',
                })}
              </p>
              <p className="text-body-2 text-ink-soft">
                {t('trial-expiry.interstitial_data_safe', {
                  defaultValue: 'Your data is safe — you can still access and export it.',
                })}
              </p>
            </div>

            {/* Lost features */}
            <div className="mt-6">
              <p className="text-body-2 font-medium text-ink mb-3">
                {t('trial-expiry.interstitial_lost_heading', {
                  defaultValue: 'Features no longer available:',
                })}
              </p>
              <ul className="space-y-2">
                {LOST_FEATURE_KEYS.map((key) => (
                  <li key={key} className="flex items-center gap-3 text-body-2 text-ink-soft">
                    <ShieldOff
                      className="h-4 w-4 shrink-0 text-danger"
                      aria-hidden="true"
                    />
                    {t(`trial-expiry.${key}`, { defaultValue: key })}
                  </li>
                ))}
              </ul>
            </div>

            {/* CTAs */}
            <div className="mt-8 flex flex-col gap-4">
              {/* Primary: upgrade */}
              <Button
                variant="default"
                className="w-full focus-visible:ring-2 focus-visible:ring-accent-border"
                onClick={onUpgrade}
              >
                {t('trial-expiry.interstitial_upgrade_cta', {
                  defaultValue: 'Upgrade to Business — ₪89/month',
                })}
              </Button>

              {/* Secondary: continue with freelancer */}
              <button
                type="button"
                onClick={onAcknowledge}
                className={cn(
                  'text-body-2 text-ink-soft underline-offset-2 hover:underline',
                  'text-center focus-visible:outline-none focus-visible:ring-2',
                  'focus-visible:ring-accent-border rounded',
                )}
              >
                {t('trial-expiry.interstitial_continue_cta', {
                  defaultValue: 'Continue with Freelancer plan →',
                })}
              </button>
            </div>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}