"use client";

/**
 * AI Suggestions banner — appears when the page has fewer than 5
 * sections or is missing high-converting blocks. Recommends which
 * section types to add next based on the page's purpose. Clicking a
 * suggestion forwards the block type to the parent so the editor can
 * append it with default content.
 */

import { Sparkles, Plus, X } from "lucide-react";
import { useMemo, useState } from "react";
import { getBlockDefinition } from "@/lib/page-studio/section-registry";

// Per-purpose "ideal stack" of section types. Suggestions are the
// difference between this stack and what the page already has.
const IDEAL_STACK: Record<string, string[]> = {
  lead_generation: ["hero", "trust_bar", "features_grid", "testimonials", "faq", "contact_form", "cta_banner"],
  service: ["hero", "services_list", "process_steps", "reviews", "contact_form", "cta_banner"],
  product: ["hero_with_video", "features_grid", "pricing_table", "testimonials", "faq", "cta_banner"],
  event: ["hero", "stats_row", "features_grid", "contact_form"],
  coming_soon: ["hero", "contact_form"],
};

interface Props {
  purpose: string;
  currentSectionTypes: string[];
  onAdd: (type: string) => void;
}

export default function AiSuggestionsBanner({ purpose, currentSectionTypes, onAdd }: Props) {
  const [dismissed, setDismissed] = useState(false);

  const suggestions = useMemo(() => {
    const stack = IDEAL_STACK[purpose] || IDEAL_STACK.lead_generation;
    const present = new Set(currentSectionTypes);
    return stack.filter((t) => !present.has(t)).slice(0, 3);
  }, [purpose, currentSectionTypes]);

  // Hide when dismissed, nothing to suggest, or the page already has
  // 5+ sections and isn't obviously missing a staple.
  if (dismissed || suggestions.length === 0) return null;
  if (currentSectionTypes.length >= 5 && suggestions.length < 2) return null;

  return (
    <div className="mx-4 mt-3 mb-1 flex items-center gap-3 rounded-xl border border-brand-200 bg-gradient-to-r from-brand-50 to-violet-50 px-4 py-2.5">
      <div className="w-7 h-7 rounded-lg bg-white border border-brand-200 flex items-center justify-center shrink-0">
        <Sparkles className="w-3.5 h-3.5 text-brand-600" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-[11px] font-bold uppercase tracking-widest text-brand-700">AI suggests adding</p>
        <div className="flex flex-wrap items-center gap-1.5 mt-1">
          {suggestions.map((type) => {
            const def = getBlockDefinition(type);
            return (
              <button
                key={type}
                onClick={() => onAdd(type)}
                className="flex items-center gap-1 px-2.5 py-1 rounded-lg border border-brand-200 bg-white text-xs font-semibold text-brand-700 hover:bg-brand-600 hover:text-white hover:border-brand-600 transition-colors"
              >
                <Plus className="w-3 h-3" />
                {def?.name ?? type}
              </button>
            );
          })}
        </div>
      </div>
      <button
        onClick={() => setDismissed(true)}
        className="p-1 rounded-md text-slate-400 hover:bg-white hover:text-slate-600"
        title="Dismiss"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  );
}
