"use client";

/**
 * Section picker modal — shows all available block types grouped by
 * category. Clicking a tile invokes onPick(type) and closes. Pulls
 * directly from the registry so new block types appear automatically.
 */

import { X } from "lucide-react";
import * as Icons from "lucide-react";
import { BLOCKS, type SectionCategory } from "@/lib/page-studio/section-registry";

const CATEGORY_LABELS: Record<SectionCategory, string> = {
  layout: "Layout",
  trust: "Trust & Social Proof",
  content: "Content",
  conversion: "Conversion",
  media: "Media",
};
const CATEGORY_ORDER: SectionCategory[] = ["layout", "trust", "content", "conversion", "media"];

type IconMap = Record<string, React.ComponentType<{ className?: string }>>;

interface Props {
  open: boolean;
  onClose: () => void;
  onPick: (type: string) => void;
}

export default function SectionPicker({ open, onClose, onPick }: Props) {
  if (!open) return null;
  const iconMap = Icons as unknown as IconMap;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col overflow-hidden" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4">
          <h2 className="font-bold text-slate-900">Add a Section</h2>
          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-500"><X className="w-4 h-4" /></button>
        </div>
        <div className="flex-1 overflow-auto p-5 space-y-6">
          {CATEGORY_ORDER.map((cat) => {
            const blocks = BLOCKS.filter((b) => b.category === cat);
            if (blocks.length === 0) return null;
            return (
              <div key={cat}>
                <h3 className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">{CATEGORY_LABELS[cat]}</h3>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                  {blocks.map((block) => {
                    const Icon = iconMap[block.icon] || Icons.Square;
                    return (
                      <button
                        key={block.id}
                        onClick={() => { onPick(block.id); onClose(); }}
                        className="group text-left p-3 rounded-xl border border-slate-200 bg-white hover:border-brand-400 hover:shadow-sm transition-all"
                      >
                        <div className="flex items-center gap-2 mb-1">
                          <div className="w-7 h-7 rounded-lg bg-brand-50 text-brand-600 flex items-center justify-center group-hover:bg-brand-100">
                            <Icon className="w-3.5 h-3.5" />
                          </div>
                          <span className="text-sm font-bold text-slate-800">{block.name}</span>
                        </div>
                        <p className="text-[11px] text-slate-500 leading-snug line-clamp-2">{block.description}</p>
                      </button>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
