/**
 * TrialEndingSoonCard — trial-expiry-conversion-ui spec (Task 9).
 *
 * Prominent inline card shown when the trial ends in ≤ 3 days.
 * Replaces the header banner for the ending_soon state.
 *
 * Design:
 *   - Amber warning tokens (--warning, --warning-bg)
 *   - 8px-grid spacing (Tailwind: gap-2, gap-4, p-6, mt-4, etc.)
 *   - Two-column 3×2 feature checklist
 *   - Primary CTA opens the upgrade modal via onUpgrade()
 *   - RTL-aware: logical CSS properties throughout
 *   - All strings from the trial-expiry i18n namespace
 *   - Reduced-motion: entrance animation disabled under prefers-reduced-motion
 */
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { AlertTriangle, CheckCircle2 } from 'lucide-react'
import { cn } from '../lib/cn'
import { Button } from '../primitives/button'
import { useReducedMotion } from '../hooks/use-reduced-motion'

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

export interface TrialEndingSoonCardProps {
  daysLeft: number
  /** Wired to useUpgradeModal().open({ targetTier: 'business' }) */
  onUpgrade: () => void
}

// ---------------------------------------------------------------------------
// Feature list
// ---------------------------------------------------------------------------

const FEATURE_KEYS = [
  'feature_lead_forms',
  'feature_contracts',
  'feature_expense_approval',
  'feature_custom_email',
  'feature_api_keys',
  'feature_multicurrency',
] as const

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

export function TrialEndingSoonCard({
  daysLeft,
  onUpgrade,
}: TrialEndingSoonCardProps): React.JSX.Element {
  const { t } = useTranslation()
  const reducedMotion = useReducedMotion()

  return (
    <div
      role="region"
      aria-label={t('trial-expiry.banner_ending_title', {
        days: daysLeft,
        defaultValue: `Your Business trial ends in ${daysLeft} day(s)`,
      })}
      className={cn(
        'rounded border border-warning bg-warning-bg p-6',
        !reducedMotion && 'animate-in fade-in slide-in-from-top-2 duration-200',
        'motion-reduce:animate-none',
      )}
    >
      {/* Header */}
      <div className="flex items-start gap-4">
        <AlertTriangle
          className="mt-0.5 h-6 w-6 shrink-0 text-warning"
          aria-hidden="true"
        />
        <div className="flex-1 min-w-0">
          <p className="text-title-3 font-bold text-ink">
            {t('trial-expiry.banner_ending_title', {
              days: daysLeft,
              defaultValue: `Your Business trial ends in ${daysLeft} day(s)`,
            })}
          </p>
          <p className="mt-2 text-body-2 text-ink-soft">
            {t('trial-expiry.ending_subtitle', {
              defaultValue: 'Add a payment method to keep access to:',
            })}
          </p>
        </div>
      </div>

      {/* Feature checklist — two columns */}
      <ul
        className="mt-4 grid grid-cols-2 gap-x-8 gap-y-2"
        aria-label={t('trial-expiry.ending_subtitle', {
          defaultValue: 'Add a payment method to keep access to:',
        })}
      >
        {FEATURE_KEYS.map((key) => (
          <li key={key} className="flex items-center gap-2 text-body-2 text-ink">
            <CheckCircle2
              className="h-4 w-4 shrink-0 text-success"
              aria-hidden="true"
            />
            {t(`trial-expiry.${key}`, { defaultValue: key })}
          </li>
        ))}
      </ul>

      {/* CTA */}
      <div className="mt-6 flex flex-col items-start gap-2">
        <Button
          variant="default"
          onClick={onUpgrade}
          className="focus-visible:ring-2 focus-visible:ring-accent-border"
        >
          {t('trial-expiry.ending_cta', {
            defaultValue: 'Start Business Plan — ₪89/month →',
          })}
        </Button>
        <p className="text-caption text-ink-faint">
          {t('trial-expiry.ending_reassurance', {
            defaultValue: 'No commitment. Cancel anytime.',
          })}
        </p>
      </div>
    </div>
  )
}