import { AlertTriangle, ArrowDown, ArrowUp, Info, X } from 'lucide-react';


import { useState } from 'react';

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

import { Button } from '@/Components/ui/button';
import { formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

interface TrafficAlert {
  id: number;
  site_id: number;
  severity: 'critical' | 'warning' | 'info';
  anomaly_type: 'sudden_drop' | 'sustained_decline' | 'unusual_spike';
  page_url: string;
  metrics: {
    clicks_before: number;
    clicks_after: number;
    delta_percent: number;
  };
  created_at: string;
}

interface AlertBannerProps {
  alerts: TrafficAlert[];
  siteId: number;
}

function getSeverityConfig(severity: string): {
  bgClass: string;
  borderClass: string;
  textClass: string;
  Icon: React.ComponentType<{ className?: string }>;
} {
  // UI-004: Use semantic color tokens for dark mode compatibility
  switch (severity) {
    case 'critical':
      return {
        bgClass: 'bg-destructive/5',
        borderClass: 'border-destructive',
        textClass: 'text-destructive',
        Icon: AlertTriangle,
      };
    case 'warning':
      return {
        bgClass: 'bg-warning/5',
        borderClass: 'border-warning',
        textClass: 'text-warning',
        Icon: ArrowDown,
      };
    case 'info':
      return {
        bgClass: 'bg-info/5',
        borderClass: 'border-info',
        textClass: 'text-info',
        Icon: ArrowUp,
      };
    default:
      return {
        bgClass: 'bg-muted/50',
        borderClass: 'border-border',
        textClass: 'text-muted-foreground',
        Icon: Info,
      };
  }
}

function getAnomalyTypeLabel(type: string): string {
  switch (type) {
    case 'sudden_drop':
      return 'Sudden Drop';
    case 'sustained_decline':
      return 'Sustained Decline';
    case 'unusual_spike':
      return 'Unusual Spike';
    default:
      return type;
  }
}

function truncateUrl(url: string, maxLength: number): string {
  try {
    const parsed = new URL(url);
    const path = parsed.pathname + parsed.search;
    return path.length > maxLength ? path.slice(0, maxLength) + '...' : path;
  } catch {
    return url.length > maxLength ? url.slice(0, maxLength) + '...' : url;
  }
}

export default function AlertBanner({ alerts, siteId }: AlertBannerProps) {
  const [dismissedAlerts, setDismissedAlerts] = useState<Set<number>>(new Set());

  const handleDismiss = (alertId: number) => {
    // Optimistically update UI
    setDismissedAlerts((prev) => new Set([...prev, alertId]));

    // Send dismiss request to backend
    router.post(
      route('alerts.dismiss', [siteId, alertId]),
      {},
      {
        preserveScroll: true,
        onError: () => {
          // Revert on error
          setDismissedAlerts((prev) => {
            const next = new Set(prev);
            next.delete(alertId);
            return next;
          });
        },
      },
    );
  };

  const visibleAlerts = alerts.filter((alert) => !dismissedAlerts.has(alert.id));

  if (visibleAlerts.length === 0) {
    return null;
  }

  // Show only the most critical alert
  const topAlert = visibleAlerts[0];
  const config = getSeverityConfig(topAlert.severity);
  const Icon = config.Icon;

  return (
    <div
      className={cn('mb-4 rounded-lg border-l-4 p-4', config.bgClass, config.borderClass)}
      role="alert"
      aria-live="polite"
    >
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3 min-w-0 flex-1">
          <Icon className={cn('h-5 w-5 mt-0.5 shrink-0', config.textClass)} />
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 mb-1">
              <span className={cn('font-semibold', config.textClass)}>
                {getAnomalyTypeLabel(topAlert.anomaly_type)} Detected
              </span>
              <span className="text-xs text-muted-foreground">
                {topAlert.severity.toUpperCase()}
              </span>
            </div>
            <p className="text-sm mb-2">
              <a
                href={topAlert.page_url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
                title={topAlert.page_url}
              >
                {truncateUrl(topAlert.page_url, 60)}
              </a>{' '}
              experienced a{' '}
              <strong className={config.textClass}>
                {topAlert.metrics.delta_percent.toFixed(1)}%
              </strong>{' '}
              change in clicks.
            </p>
            <div className="flex items-center gap-4 text-xs text-muted-foreground">
              <span>
                Clicks: {formatNumber(topAlert.metrics.clicks_before)} →{' '}
                {formatNumber(topAlert.metrics.clicks_after)}
              </span>
              {visibleAlerts.length > 1 && (
                <a href={route('alerts.index', siteId)} className="text-primary hover:underline">
                  +{visibleAlerts.length - 1} more alert{visibleAlerts.length - 1 > 1 ? 's' : ''}
                </a>
              )}
            </div>
          </div>
        </div>
        <div className="flex items-start gap-2 shrink-0">
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              router.visit(route('alerts.show', [siteId, topAlert.id]));
            }}
          >
            Investigate
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="h-8 w-8 p-0"
            onClick={() => handleDismiss(topAlert.id)}
            aria-label="Dismiss alert"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}