'use client';

import { useQuery } from '@tanstack/react-query';
import { Bell, CheckCircle2, Clock } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';

import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

/**
 * Phase 4 - inline reminders list rendered inside an entity's
 * Overview tab. Shows the most recent open (pending/snoozed) reminders
 * for the linked entity so reps can spot follow-ups without leaving the
 * detail page.
 *
 * Filter is exactly one of clientId / interestId / berthId / yachtId.
 * Caller responsibility - the listReminders service AND's whichever
 * filters are present, so multiple would intersect rather than union.
 *
 * No "+ Reminder" button here on purpose: the detail-page header
 * already carries one, threading the same default-entity-id prop.
 * Empty state hints at the header button instead of duplicating it.
 */
interface InlineReminder {
  id: string;
  title: string;
  note: string | null;
  dueAt: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  status: 'pending' | 'snoozed' | 'completed' | 'dismissed';
  assignedTo: string | null;
}

interface ListResponse {
  data: InlineReminder[];
  pagination?: { total?: number };
}

const PRIORITY_DOT: Record<InlineReminder['priority'], string> = {
  urgent: 'bg-red-500',
  high: 'bg-orange-500',
  medium: 'bg-blue-500',
  low: 'bg-gray-400',
};

const STATUS_ICON: Record<InlineReminder['status'], React.ReactNode> = {
  pending: <Bell className="h-3 w-3 text-amber-600" aria-hidden />,
  snoozed: <Clock className="h-3 w-3 text-slate-500" aria-hidden />,
  completed: <CheckCircle2 className="h-3 w-3 text-emerald-600" aria-hidden />,
  dismissed: <CheckCircle2 className="h-3 w-3 text-slate-400" aria-hidden />,
};

interface RemindersInlineProps {
  /** Exactly one should be set - the entity to filter by. */
  clientId?: string;
  interestId?: string;
  berthId?: string;
  yachtId?: string;
  /** Soft cap on the rendered list; defaults to 5. */
  limit?: number;
}

export function RemindersInline(props: RemindersInlineProps) {
  const { clientId, interestId, berthId, yachtId, limit = 5 } = props;

  const filterKey = clientId ?? interestId ?? berthId ?? yachtId ?? null;
  const filterParam = clientId
    ? `clientId=${clientId}`
    : interestId
      ? `interestId=${interestId}`
      : berthId
        ? `berthId=${berthId}`
        : yachtId
          ? `yachtId=${yachtId}`
          : '';

  const { data, isLoading } = useQuery<ListResponse>({
    queryKey: ['reminders', 'inline', filterKey],
    queryFn: () =>
      apiFetch<ListResponse>(
        `/api/v1/reminders?${filterParam}&status=pending&limit=${limit}&sort=dueAt&order=asc`,
      ),
    enabled: !!filterKey,
  });

  if (!filterKey) return null;

  const rows = data?.data ?? [];

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
          Reminders
        </h3>
      </div>
      {isLoading ? (
        <p className="text-xs text-muted-foreground italic">Loading…</p>
      ) : rows.length === 0 ? (
        <p className="text-xs text-muted-foreground italic">
          No open reminders for this record. Use the bell in the header to add one.
        </p>
      ) : (
        <ul className="space-y-1.5">
          {rows.map((r) => {
            const isPastDue = new Date(r.dueAt) < new Date();
            return (
              <li
                key={r.id}
                className="flex items-start gap-2 rounded-md border bg-card px-2 py-1.5 text-xs"
              >
                <span
                  className={cn('mt-1 h-2 w-2 shrink-0 rounded-full', PRIORITY_DOT[r.priority])}
                />
                {STATUS_ICON[r.status]}
                <div className="min-w-0 flex-1">
                  <p className="truncate font-medium text-foreground">{r.title}</p>
                  <p
                    className={cn(
                      'text-xs',
                      isPastDue ? 'text-rose-700 font-medium' : 'text-muted-foreground',
                    )}
                  >
                    Due {formatDistanceToNow(new Date(r.dueAt), { addSuffix: true })}
                  </p>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}
