import { AlertTriangle, BarChart3, Clock, FileText, Info, X } from 'lucide-react';

import { useState } from 'react';

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

import { Alert, AlertDescription } from '@/Components/ui/alert';
import { Button } from '@/Components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { trackEvent } from '@/lib/analytics';
import { TRIAL_BANNER_DISMISSED, TRIAL_BANNER_SHOWN, TRIAL_BANNER_UPGRADE_CLICKED, UPGRADE_CLICKED } from '@/lib/event-catalog';
import type { PageProps } from '@/types';

const todayKey = () => new Date().toISOString().slice(0, 10);
const RECAP_MODAL_KEY = 'trial_value_recap_shown';
const INFO_BANNER_DISMISSED_KEY = 'trial_banner_info_dismissed_at';

/** Returns true if the info banner was dismissed within the last 3 days. */
function isInfoBannerOnCooldown(): boolean {
  if (typeof window === 'undefined') return false;
  const raw = localStorage.getItem(INFO_BANNER_DISMISSED_KEY);
  if (!raw) return false;
  const dismissedAt = new Date(raw).getTime();
  const threeDaysMs = 3 * 24 * 60 * 60 * 1000;
  return Date.now() - dismissedAt < threeDaysMs;
}

/**
 * Shows a dismissible upgrade banner when a trial user is approaching expiration.
 * - Days 8–14: info variant (blue, dismissible with 3-day cooldown)
 * - Days 4–7: warning variant (amber, dismissible daily)
 * - Days 1–3: urgent variant (destructive, non-dismissible)
 */
function buildSpecificLossMessage(limits: PageProps['limits']): string | null {
  if (!limits) return null;
  const drafts = limits.drafts_used_this_month ?? 0;
  const sites = limits.sites_used_count ?? 0;
  if (drafts === 0 && sites === 0) return null;
  const parts: string[] = [];
  if (drafts > 0) parts.push(`${drafts} AI draft${drafts !== 1 ? 's' : ''}`);
  if (sites > 0) parts.push(`${sites} connected site${sites !== 1 ? 's' : ''}`);
  return parts.join(' and ');
}

/**
 * One-time value recap modal shown when a trial expires (daysRemaining === 0).
 * localStorage-gated so it shows only once per user per browser. (BILL-021-02)
 */
function TrialValueRecapModal({ limits }: { limits: PageProps['limits'] }) {
  const [open, setOpen] = useState(() => {
    if (typeof window === 'undefined') return false;
    return localStorage.getItem(RECAP_MODAL_KEY) !== 'true';
  });

  const handleClose = () => {
    if (typeof window !== 'undefined') {
      localStorage.setItem(RECAP_MODAL_KEY, 'true');
    }
    setOpen(false);
  };

  const drafts = limits?.drafts_used_this_month ?? 0;
  const sites = limits?.sites_used_count ?? 0;

  return (
    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Your trial has ended</DialogTitle>
          <DialogDescription>
            Here&apos;s what you accomplished during your 14-day Pro trial.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-3 py-2">
          {sites > 0 && (
            <div className="flex items-center gap-3 p-3 rounded-lg bg-accent/40">
              <BarChart3 className="h-5 w-5 text-primary shrink-0" />
              <span className="text-sm font-medium">{sites} site{sites !== 1 ? 's' : ''} connected &amp; analyzed</span>
            </div>
          )}
          {drafts > 0 && (
            <div className="flex items-center gap-3 p-3 rounded-lg bg-accent/40">
              <FileText className="h-5 w-5 text-primary shrink-0" />
              <span className="text-sm font-medium">{drafts} AI draft{drafts !== 1 ? 's' : ''} generated</span>
            </div>
          )}
          <p className="text-sm text-muted-foreground pt-1">
            Subscribe to keep your data, drafts, and Pro features — nothing resets when you upgrade.
          </p>
        </div>
        <DialogFooter className="flex-col sm:flex-row gap-2">
          <Button variant="outline" onClick={handleClose} className="sm:mr-auto">
            Maybe later
          </Button>
          <Button asChild onClick={() => {
            trackEvent(UPGRADE_CLICKED, { source_component: 'trial_banner', variant: 'value_recap_modal' });
            trackEvent(TRIAL_BANNER_UPGRADE_CLICKED, { variant: 'value_recap_modal' });
            handleClose();
          }}>
            <Link href={route('billing.plans')}>Upgrade to keep everything</Link>
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function TrialExpirationBanner() {
  const { trial, features, limits } = usePage<PageProps>().props;

  const today = todayKey();
  const warningStorageKey = `trial_banner_warning_dismissed_${today}`;
  // Urgent variant (days 1–3) is intentionally non-dismissible — no storage key needed.

  const [warningDismissed, setWarningDismissed] = useState(() => {
    if (typeof window === 'undefined') return false;
    return localStorage.getItem(warningStorageKey) === 'true';
  });

  const [infoDismissed, setInfoDismissed] = useState(() => isInfoBannerOnCooldown());

  if (!features.billing || !trial?.active || trial.daysRemaining === null) {
    return null;
  }

  const days = trial.daysRemaining;

  // BILL-021-02: Trial expired — show value recap modal once.
  if (days === 0) {
    return <TrialValueRecapModal limits={limits} />;
  }

  const isUrgent = days <= 3;
  const isWarning = days > 3 && days <= 7;
  const isInfo = days > 7 && days <= 14;

  if (!isUrgent && !isWarning && !isInfo) return null;
  if (isWarning && warningDismissed) return null;
  if (isInfo && infoDismissed) return null;

  const handleDismissWarning = () => {
    setWarningDismissed(true);
    if (typeof window !== 'undefined') {
      localStorage.setItem(warningStorageKey, 'true');
    }
    trackEvent(TRIAL_BANNER_DISMISSED, { variant: 'warning' });
  };

  const handleDismissInfo = () => {
    setInfoDismissed(true);
    if (typeof window !== 'undefined') {
      localStorage.setItem(INFO_BANNER_DISMISSED_KEY, new Date().toISOString());
    }
    trackEvent(TRIAL_BANNER_DISMISSED, { variant: 'info' });
  };

  const currentVariant = isUrgent ? 'urgent' : isWarning ? 'warning' : 'info';
  trackEvent(TRIAL_BANNER_SHOWN, { variant: currentVariant, days_remaining: days });

  const specificLoss = buildSpecificLossMessage(limits);

  if (isUrgent) {
    return (
      <Alert className="border-destructive/30 bg-destructive/5 dark:border-destructive/40 dark:bg-destructive/10 relative mb-6">
        <AlertTriangle className="h-4 w-4 text-destructive" />
        <AlertDescription className="text-destructive dark:text-destructive pr-2">
          <span className="font-semibold">
            Trial expires in {days} day{days !== 1 ? 's' : ''}!
          </span>{' '}
          {specificLoss
            ? <>Your {specificLoss} will lose Pro access — subscribe now to keep them.</>
            : <>Subscribe now to keep your data and Pro features.</>
          }{' '}
          <Link
            href={route('billing.plans')}
            className="underline font-semibold hover:no-underline"
            onClick={() => {
              trackEvent(UPGRADE_CLICKED, { source_component: 'trial_banner', variant: 'urgent' });
              trackEvent(TRIAL_BANNER_UPGRADE_CLICKED, { variant: 'urgent' });
            }}
          >
            Upgrade now
          </Link>
        </AlertDescription>
      </Alert>
    );
  }

  // Info variant: days 8–14 (early-trial upgrade motivation)
  if (isInfo) {
    return (
      <Alert className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950 relative mb-6">
        <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
        <AlertDescription className="text-blue-800 dark:text-blue-200 pr-8">
          <span className="font-medium">
            You&apos;re {days} days into your Pro trial.
          </span>{' '}
          {specificLoss
            ? <>Loving your {specificLoss}? Upgrade now and keep everything when the trial ends.</>
            : <>Upgrade now to lock in your Pro features before the trial ends.</>
          }{' '}
          <Link
            href={route('billing.plans')}
            className="underline font-semibold hover:no-underline"
            onClick={() => {
              trackEvent(UPGRADE_CLICKED, { source_component: 'trial_banner', variant: 'info' });
              trackEvent(TRIAL_BANNER_UPGRADE_CLICKED, { variant: 'info' });
            }}
          >
            View plans
          </Link>
        </AlertDescription>
        <button
          onClick={handleDismissInfo}
          className="absolute top-3 right-3 p-1 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
          aria-label="Dismiss trial banner"
        >
          <X className="h-4 w-4" />
        </button>
      </Alert>
    );
  }

  // Warning variant: days 4–7
  return (
    <Alert className="border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950 relative mb-6">
      <Clock className="h-4 w-4 text-amber-600 dark:text-amber-400" />
      <AlertDescription className="text-amber-800 dark:text-amber-200 pr-8">
        <span className="font-medium">
          Your Pro trial ends in {days} days.
        </span>{' '}
        {specificLoss
          ? <>Keep access to your {specificLoss} — upgrade before your trial ends.</>
          : <>Keep the momentum going — upgrade to retain everything you&apos;ve set up.</>
        }{' '}
        <Link
          href={route('billing.plans')}
          className="underline font-semibold hover:no-underline"
          onClick={() => {
            trackEvent(UPGRADE_CLICKED, { source_component: 'trial_banner', variant: 'warning' });
            trackEvent(TRIAL_BANNER_UPGRADE_CLICKED, { variant: 'warning' });
          }}
        >
          View plans
        </Link>
      </AlertDescription>
      <button
        onClick={handleDismissWarning}
        className="absolute top-3 right-3 p-1 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
        aria-label="Dismiss trial banner"
      >
        <X className="h-4 w-4" />
      </button>
    </Alert>
  );
}