import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import type { ComponentRecord } from "../types"; import { Grid3X3, LayoutGrid, Search, X, ZoomIn } from "lucide-react"; import ComponentPreviewMini, { getComponentDescription } from "./ComponentPreviewMini"; import { getBlockComponent } from "@/components/page-blocks"; import { resolvePreviewContent } from "@/lib/contentPlaceholders"; import { SiteChromeFrame } from "@/components/SiteChromeFrame"; import { ComponentPreviewBySlug } from "../pages/ComponentPreviews"; import { filterComponentsBySearch } from "../lib/componentSearch"; import { getActiveComparisonGroups, getComponentGuideDescription, getComponentCatalog } from "../lib/componentCatalog"; import ComponentGuideInfo, { ComponentDisplayTitle } from "./ComponentGuideInfo"; import SimilarComponentsCompare from "./SimilarComponentsCompare"; export type ComponentPickerTarget = { sectionIndex?: number; slotIndex?: number; }; type ViewMode = "grid" | "card"; type ComponentPickerModalProps = { components: ComponentRecord[]; target: ComponentPickerTarget | null; onSelect: (component: ComponentRecord, target: ComponentPickerTarget | null) => void; onClose: () => void; }; function categoryBadgeStyle(category: string): CSSProperties { const map: Record = { Landing: { bg: "#dbeafe", color: "#1d4ed8" }, Grade: { bg: "#dcfce7", color: "#15803d" }, Curriculum: { bg: "#fef3c7", color: "#b45309" }, Course: { bg: "#ede9fe", color: "#6d28d9" }, Quarter: { bg: "#fce7f3", color: "#be185d" }, }; const colors = map[category] ?? { bg: "#f1f5f9", color: "#475569" }; return { display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: 11, fontWeight: 600, background: colors.bg, color: colors.color, }; } function ComponentDetailPreview({ component }: { component: ComponentRecord }) { const BlockComp = getBlockComponent(component.slug); const content = resolvePreviewContent((component.content ?? {}) as Record, { blockSlug: component.slug, }); const inner = BlockComp ? ( ) : ( ); return (

{inner}

); } export default function ComponentPickerModal({ components, target, onSelect, onClose, }: ComponentPickerModalProps) { const [search, setSearch] = useState(""); const [categoryFilter, setCategoryFilter] = useState(""); const [viewMode, setViewMode] = useState("card"); const [detailComponent, setDetailComponent] = useState(null); const searchInputRef = useRef(null); const categories = useMemo(() => { const set = new Set(); components.forEach((c) => { if (c.category) set.add(c.category); }); return Array.from(set).sort(); }, [components]); const filtered = useMemo( () => filterComponentsBySearch(components, search, categoryFilter), [components, search, categoryFilter], ); const hasActiveSearch = search.trim().length > 0; const comparisonGroups = useMemo(() => getActiveComparisonGroups(filtered), [filtered]); const targetLabel = (() => { if (target?.sectionIndex === undefined) return "Add to page"; if (target.slotIndex !== undefined) { return `Add to section ${target.sectionIndex + 1}, slot ${target.slotIndex + 1}`; } return `Add to section ${target.sectionIndex + 1}`; })(); const confirmSelect = (component: ComponentRecord) => { onSelect(component, target); onClose(); }; useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); } }; window.addEventListener("keydown", handleKeyDown, true); return () => window.removeEventListener("keydown", handleKeyDown, true); }, []); useEffect(() => { const timer = window.setTimeout(() => searchInputRef.current?.focus(), 0); return () => window.clearTimeout(timer); }, []); return ( <>

{detailComponent && (

)} ); }