import { differenceInCalendarDays } from "date-fns";
import { X } from "lucide-react";
import { CategoryIcon } from "@/components/elements/CategoryIcon";
import { Button } from "@/components/ui/button";
import { useMoney } from "@/hooks/useMoney";
import { parseLocalDate, cn } from "@/lib/utils";
import { useUpcomingRecurring, useRecurringMutations } from "@/hooks/useRecurring";
import { CADENCE_LABEL } from "@/lib/recurring";
import type { RecurringDto } from "@/lib/api";
import { Skeleton } from "@/components/ui/skeleton";

function dueLabel(dateStr: string, today = new Date()): string {
  const days = differenceInCalendarDays(parseLocalDate(dateStr), today);
  if (days <= 0) return "Due today";
  if (days === 1) return "Tomorrow";
  return `In ${days} days`;
}

/**
 * Predicted next occurrences of the user's detected bills, subscriptions and
 * paychecks, soonest first. Shared by the dashboard's Upcoming widget and
 * the Transactions page's Upcoming section, one query and one dismiss
 * action so a merchant dismissed in either place disappears from both.
 */
export function UpcomingList({ days = 30, limit }: { days?: number; limit?: number }) {
  const { data, isLoading } = useUpcomingRecurring(days);
  const { dismiss } = useRecurringMutations(days);
  const { money } = useMoney();

  const rows = limit ? (data ?? []).slice(0, limit) : data ?? [];

  // This query is in flight from the moment the page mounts, same as
  // everything else on it, but returning null while it resolves left this
  // one section visibly blank until it did - a pop-in the rest of the page
  // (which shows a skeleton instead) doesn't have. A plain `null` here
  // was never noticeable on the dashboard, where it sits well below the
  // fold, but the Transactions page puts it right in view.
  if (isLoading) {
    return (
      <div className="space-y-1">
        {Array.from({ length: limit ?? 3 }).map((_, i) => (
          <div key={i} className="flex items-center gap-3 py-2 px-2 -mx-2">
            <Skeleton className="h-8 w-8 rounded-full shrink-0" />
            <div className="min-w-0 flex-1 space-y-1.5">
              <Skeleton className="h-3.5 w-32" />
              <Skeleton className="h-3 w-20" />
            </div>
            <Skeleton className="h-3.5 w-14 shrink-0" />
          </div>
        ))}
      </div>
    );
  }

  if (rows.length === 0) {
    return (
      <p className="text-sm text-muted-foreground text-center py-6">
        Nothing recurring due in the next {days} days.
      </p>
    );
  }

  return (
    <div className="space-y-1">
      {rows.map((r: RecurringDto) => (
        <div
          key={r.id}
          className="group/row flex items-center gap-3 py-2 px-2 -mx-2 rounded-lg hover:bg-muted/50 transition-colors"
        >
          <CategoryIcon category={r.category || "Uncategorized"} size="sm" />
          <div className="min-w-0 flex-1" title={`${r.merchantName} · ${CADENCE_LABEL[r.cadence]} · ${dueLabel(r.nextDate)}`}>
            <p className="text-sm font-medium text-foreground truncate">{r.merchantName}</p>
            <p className="text-xs text-muted-foreground truncate">
              {CADENCE_LABEL[r.cadence]} · {dueLabel(r.nextDate)}
            </p>
          </div>
          <span className={cn("text-sm font-medium tabular-nums shrink-0 text-right", r.type === "income" ? "text-chart-green" : "text-foreground")}>
            {r.type === "income" ? "+" : "-"}{money(r.typicalAmount)}
          </span>
          <Button
            variant="ghost" size="icon"
            className="h-6 w-6 shrink-0 opacity-0 group-hover/row:opacity-100 text-muted-foreground hover:text-destructive transition-opacity"
            aria-label={`Not recurring: ${r.merchantName}`}
            disabled={dismiss.isPending}
            onClick={() => dismiss.mutate(r.id)}
          >
            <X size={12} strokeWidth={2} />
          </Button>
        </div>
      ))}
    </div>
  );
}