pn-new-crm/src/components/alerts/alert-rail.tsx

'use client';

import Link from 'next/link';
import { ArrowRight } from 'lucide-react';

import { useUIStore } from '@/stores/ui-store';
import { Skeleton } from '@/components/ui/skeleton';
import { AlertCard, AlertCardEmpty } from './alert-card';
import { useAlertList, useAlertRealtime } from './use-alerts';

export function AlertRail() {
  const portSlug = useUIStore((s) => s.currentPortSlug);
  const { data, isLoading } = useAlertList('open');
  useAlertRealtime();

  const alerts = data?.data ?? [];
  // Show first 5 in the rail; surplus pushes user to the full /alerts page.
  const visible = alerts.slice(0, 5);
  const overflow = Math.max(alerts.length - visible.length, 0);

  return (
    <section
      data-testid="alert-rail"
      aria-label="Active alerts"
      className="flex h-full flex-col gap-3"
    >
      <div className="flex items-baseline justify-between">
        <h2 className="text-sm font-semibold tracking-tight">Alerts</h2>
        <Link
          href={portSlug ? (`/${portSlug}/alerts` as never) : ('/alerts' as never)}
          className="text-xs text-muted-foreground hover:text-foreground"
        >
          View all
          <ArrowRight className="ml-1 inline h-3 w-3" aria-hidden />
        </Link>
      </div>

      {isLoading ? (
        <div className="space-y-2">
          <Skeleton className="h-16 w-full" />
          <Skeleton className="h-16 w-full" />
          <Skeleton className="h-16 w-full" />
        </div>
      ) : visible.length === 0 ? (
        <AlertCardEmpty />
      ) : (
        <div className="space-y-2">
          {visible.map((a) => (
            <AlertCard key={a.id} alert={a} />
          ))}
          {overflow > 0 ? (
            <Link
              href={portSlug ? (`/${portSlug}/alerts` as never) : ('/alerts' as never)}
              className="block rounded-lg border border-dashed border-border px-3 py-2 text-center text-xs text-muted-foreground transition-colors hover:bg-accent"
            >
              +{overflow} more — view all
            </Link>
          ) : null}
        </div>
      )}
    </section>
  );
}