"use client";

import { useRouter } from "next/navigation";
import { generateDashboardTasks } from "@/features/dashboard/utils/dashboard.utils";

interface TasksChipProps {
  summaryLoading: boolean;
  summary: {
    nextInvoice?: { id: number } | null;
    stats?: { unpaidInvoices?: number; openCases?: number };
  };
}

export function TasksChip({ summaryLoading, summary }: TasksChipProps) {
  const router = useRouter();
  if (summaryLoading) return null;

  const tasks = generateDashboardTasks(summary);
  const count = tasks.length;
  if (count === 0) return null;

  return (
    <button
      onClick={() => {
        const first = tasks[0];
        if (first.href.startsWith("#")) {
          const el = document.querySelector(first.href);
          if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        } else {
          router.push(first.href);
        }
      }}
      className="inline-flex items-center rounded-full bg-blue-50 text-blue-700 px-2.5 py-1 text-xs font-medium hover:bg-blue-100 transition-colors duration-200"
      title={tasks.map(t => t.label).join(" • ")}
    >
      {count} task{count === 1 ? "" : "s"}
    </button>
  );
}

export type { TasksChipProps };
