"use client";

import Link from "next/link";
import { Lightbulb, Plus } from "lucide-react";
import { useTaskTemplatesGrouped } from "@/lib/hooks/use-task-templates";
import { useDataProvider } from "@/lib/demo/data-provider-context";

interface TemplateSuggestionsProps {
  /** Only show when user has few active tasks */
  hasResidences: boolean;
  activeTaskCount: number;
}

export function TemplateSuggestions({ hasResidences, activeTaskCount }: TemplateSuggestionsProps) {
  const { data, isLoading } = useTaskTemplatesGrouped();
  const { basePath } = useDataProvider();

  // Only show when the user has residences but few tasks
  if (!hasResidences || activeTaskCount > 8 || isLoading) return null;

  // Flatten and pick first 4 templates
  const templates = data?.groups
    ?.flatMap((g) => g.templates)
    ?.slice(0, 4) ?? [];

  if (templates.length === 0) return null;

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <Lightbulb className="size-4 text-brand-clay" />
        <h3 className="text-sm font-medium text-muted-foreground">Suggested for your home</h3>
      </div>
      <div className="flex flex-wrap gap-2">
        {templates.map((t) => (
          <Link
            key={t.id}
            href={`${basePath}/tasks/new?template=${t.id}`}
            className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-primary/30 hover:shadow-[var(--shadow-warm-sm)] transition-all"
          >
            {t.title}
            <Plus className="size-3 text-primary" />
          </Link>
        ))}
      </div>
    </div>
  );
}
