import { AlertTriangle } from 'lucide-react';

import { useEffect } from 'react';

import { Link } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import { trackEvent } from '@/lib/analytics';
import { TRIAL_BANNER_SHOWN } from '@/lib/event-catalog';

interface TrialExpiryCardProps {
  daysRemaining: number;
  source: 'onboarding_wizard' | 'getting_started';
}

/**
 * ACT-006: Contextual trial expiry card for non-activated trial users approaching expiration.
 * Shown when trial.daysRemaining <= 5, gated on features.billing.
 * Frames the upgrade around features that require a subscription after trial.
 */
export function TrialExpiryCard({ daysRemaining, source }: TrialExpiryCardProps) {
  useEffect(() => {
    trackEvent(TRIAL_BANNER_SHOWN, { source, days_remaining: daysRemaining });
    // intentional: fire-once mount event
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const isUrgent = daysRemaining <= 3;

  return (
    <div
      className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${
        isUrgent ? 'border-destructive/30 bg-destructive/5' : 'border-warning/30 bg-warning/10'
      }`}
    >
      <AlertTriangle
        className={`h-4 w-4 mt-0.5 shrink-0 ${isUrgent ? 'text-destructive' : 'text-warning'}`}
        aria-hidden="true"
      />
      <div className="flex-1 min-w-0">
        <p className={`text-sm font-medium ${isUrgent ? 'text-destructive' : 'text-warning'}`}>
          Your Pro trial ends in {daysRemaining} day{daysRemaining !== 1 ? 's' : ''}
        </p>
        <p className="text-xs text-muted-foreground mt-0.5">
          Your connected sites, synced data, and AI drafts remain accessible — keep them with a
          subscription.
        </p>
      </div>
      <Button
        asChild
        size="sm"
        variant={isUrgent ? 'destructive' : 'outline'}
        className={`shrink-0 ${
          isUrgent ? '' : 'border-warning/30 text-warning hover:bg-warning/10'
        }`}
      >
        <Link href={route('billing.plans')}>{isUrgent ? 'Upgrade Today' : 'Upgrade Now'}</Link>
      </Button>
    </div>
  );
}