pn-new-crm/src/components/dashboard/my-reminders-rail.tsx

'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { formatDistanceToNowStrict, isAfter, isBefore } from 'date-fns';
import { AlarmClock, ChevronRight } from 'lucide-react';
import { useAutoAnimate } from '@formkit/auto-animate/react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

interface ReminderRow {
  id: string;
  title: string;
  dueAt: string;
  status: string;
  priority?: string | null;
  interestId?: string | null;
  clientId?: string | null;
  entityType?: string | null;
  entityId?: string | null;
}

interface MyRemindersResponse {
  data: ReminderRow[];
}

const PRIORITY_BADGE: Record<string, string> = {
  high: 'bg-rose-100 text-rose-700',
  medium: 'bg-amber-100 text-amber-700',
  low: 'bg-slate-100 text-slate-700',
};

/**
 * Compact reminders rail for the dashboard sidebar. Lists reminders assigned
 * to the current user (overdue first, then upcoming). Each item links to its
 * subject - interest preferred, then client, then the generic entity ref.
 *
 * Limited to 6 items; "View all" routes to /reminders.
 */
export function MyRemindersRail() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const { data, isLoading } = useQuery<MyRemindersResponse>({
    queryKey: ['reminders', 'my'],
    queryFn: () => apiFetch<MyRemindersResponse>('/api/v1/reminders/my'),
    staleTime: 60_000,
  });

  const items = data?.data ?? [];
  const now = new Date();
  // Overdue first, then upcoming, capped at 6 for the rail.
  const sorted = [...items]
    .sort((a, b) => new Date(a.dueAt).getTime() - new Date(b.dueAt).getTime())
    .slice(0, 6);
  const overdueCount = items.filter((r) => isBefore(new Date(r.dueAt), now)).length;

  // Smooth animation when reminders complete / get dismissed / arrive
  // via socket realtime.
  const [animateRef] = useAutoAnimate<HTMLUListElement>();

  function hrefFor(r: ReminderRow): string {
    if (r.interestId) return `/${portSlug}/interests/${r.interestId}`;
    if (r.clientId) return `/${portSlug}/clients/${r.clientId}`;
    if (r.entityType === 'client' && r.entityId) return `/${portSlug}/clients/${r.entityId}`;
    if (r.entityType === 'interest' && r.entityId) return `/${portSlug}/interests/${r.entityId}`;
    if (r.entityType === 'berth' && r.entityId) return `/${portSlug}/berths/${r.entityId}`;
    return `/${portSlug}/reminders`;
  }

  // Natural height - the parent dashboard grid uses `items-start` so the
  // aside column no longer forces this rail to fill the chart column's
  // height. Stretching here pushed AlertRail out of the aside's box and
  // into the territory below where ActivityFeed renders, producing a
  // visible overlap on tall viewports.
  return (
    <Card>
      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
        <div className="space-y-0.5">
          <CardTitle className="flex items-center gap-1.5 text-base">
            <AlarmClock className="size-4" />
            Reminders
          </CardTitle>
          {overdueCount > 0 ? (
            <p className="text-xs text-rose-700">{overdueCount} overdue</p>
          ) : items.length > 0 ? (
            <p className="text-xs text-muted-foreground">{items.length} pending</p>
          ) : null}
        </div>
        <Link
          href={`/${portSlug}/inbox#reminders` as never}
          className="text-xs font-medium text-primary hover:underline"
        >
          View all
        </Link>
      </CardHeader>
      <CardContent className="pt-0">
        {isLoading ? (
          <div className="space-y-2">
            {[0, 1, 2].map((i) => (
              <div key={i} className="h-9 animate-pulse rounded-md bg-muted/40" />
            ))}
          </div>
        ) : sorted.length === 0 ? (
          <p className="py-3 text-center text-sm text-muted-foreground">
            All caught up - no reminders.
          </p>
        ) : (
          <ul ref={animateRef} className="space-y-1">
            {sorted.map((r) => {
              const due = new Date(r.dueAt);
              const isOverdue = isBefore(due, now);
              const isUpcoming = isAfter(due, now);
              return (
                <li key={r.id}>
                  <Link
                    href={hrefFor(r) as never}
                    className={cn(
                      'group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
                      'hover:bg-foreground/5',
                    )}
                  >
                    <span
                      aria-hidden
                      className={cn(
                        'size-1.5 shrink-0 rounded-full',
                        isOverdue ? 'bg-rose-500' : 'bg-amber-400',
                      )}
                    />
                    <span className="min-w-0 flex-1 truncate">{r.title}</span>
                    {r.priority && r.priority !== 'low' ? (
                      <Badge
                        variant="outline"
                        className={cn(
                          'border-transparent text-[10px]',
                          PRIORITY_BADGE[r.priority] ?? 'bg-muted text-muted-foreground',
                        )}
                      >
                        {r.priority}
                      </Badge>
                    ) : null}
                    <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
                      {isOverdue
                        ? formatDistanceToNowStrict(due) + ' overdue'
                        : isUpcoming
                          ? 'in ' + formatDistanceToNowStrict(due)
                          : 'now'}
                    </span>
                    <ChevronRight className="size-3.5 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5" />
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}