import React, { useState, useMemo, useEffect, useRef } from 'react';
import {
  FileText,
  Mail,
  Newspaper,
  ClipboardList,
  UserPlus,
  Package,
  Shield,
  Calendar,
  Search,
  X,
  ArrowLeft,
  Plus,
  Layers,
  Monitor,
  Tablet,
  Smartphone,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
} from 'lucide-react';
import TemplatePreview from './TemplatePreview';
import { useTemplateCatalog } from '../extensions/templates';
import { applyFilters, Slot } from '../extensions/registry';

const categoryIcons = {
  all: FileText,
  contact: Mail,
  newsletter: Newspaper,
  survey: ClipboardList,
  register: UserPlus,
  wholesale: Package,
  warranty: Shield,
  booking: Calendar,
};

/**
 * Template gallery. Templates come from the catalog (bundled + registerTemplates()). Extensions can add layout
 * switcher entries (`templates.layouts` filter: [{ id, label, icon, match(template, key) }]) and card badges (slot
 * `templates.cardBadges`, receives { template }).
 */
export default function TemplateGalleryScreen({
  onBackToForms,
  onCreateForm,
  onCreateBlank,
}) {
  const { templates: TEMPLATE_CONFIGURATIONS, categories, categoryMap: TEMPLATE_CATEGORY_MAP, preferred: PREFERRED_BY_CATEGORY } = useTemplateCatalog();
  const layouts = applyFilters('templates.layouts', []) || [];
  const [selectedLayoutType, setSelectedLayoutType] = useState('all'); // 'all' or a layout id
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');
  // the reference builder select-template: 9 templates per page, back to page 1 when the filters change.
  const TEMPLATES_PER_PAGE = 9;
  const [currentPage, setCurrentPage] = useState(1);
  const gridTopRef = useRef(null);
  
  // Modals
  const [previewTemplate, setPreviewTemplate] = useState(null);
  const [previewDevice, setPreviewDevice] = useState('desktop'); // 'desktop' | 'tablet' | 'mobile'
  
  const [createModalTemplate, setCreateModalTemplate] = useState(null);
  const [formTitle, setFormTitle] = useState('');
  const [formDescription, setFormDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const activeTemplates = useMemo(() => {
    return Object.entries(TEMPLATE_CONFIGURATIONS).filter(([, t]) => !t.isDisabled);
  }, [TEMPLATE_CONFIGURATIONS]);
  // Categories with at least one template ("All Templates" always).
  const TEMPLATE_CATEGORIES = categories.filter((c) => c.id === 'all' || activeTemplates.some(([key]) => (TEMPLATE_CATEGORY_MAP[key] || 'all') === c.id));

  const filteredTemplates = useMemo(() => {
    return activeTemplates
      .filter(([key, template]) => {
        const layout = layouts.find((l) => l.id === selectedLayoutType);
        if (layout && !layout.match(template, key)) return false;

        const category = TEMPLATE_CATEGORY_MAP[key] || 'all';
        const categoryMatch = selectedCategory === 'all' || category === selectedCategory;

        const searchMatch =
          (template.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
          (template.description || '').toLowerCase().includes(searchQuery.toLowerCase());

        return categoryMatch && searchMatch;
      })
      .sort(([keyA], [keyB]) => {
        const order = PREFERRED_BY_CATEGORY[selectedCategory] || PREFERRED_BY_CATEGORY.all || [];
        const indexA = order.indexOf(keyA);
        const indexB = order.indexOf(keyB);
        if (indexA !== -1 && indexB !== -1) return indexA - indexB;
        if (indexA !== -1) return -1;
        if (indexB !== -1) return 1;
        return 0;
      });
  }, [activeTemplates, selectedLayoutType, selectedCategory, searchQuery, layouts, TEMPLATE_CATEGORY_MAP, PREFERRED_BY_CATEGORY]);

  useEffect(() => { setCurrentPage(1); }, [selectedLayoutType, selectedCategory, searchQuery]);
  const totalPages = Math.max(1, Math.ceil(filteredTemplates.length / TEMPLATES_PER_PAGE));
  const safePage = Math.min(currentPage, totalPages);
  const firstIndex = (safePage - 1) * TEMPLATES_PER_PAGE;
  const pageTemplates = filteredTemplates.slice(firstIndex, firstIndex + TEMPLATES_PER_PAGE);
  const goToPage = (n) => {
    setCurrentPage(Math.min(Math.max(1, n), totalPages));
    if (gridTopRef.current && gridTopRef.current.scrollIntoView) gridTopRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const pageNumbers = () => {
    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
    const out = [1];
    if (safePage > 3) out.push('...');
    for (let n = Math.max(2, safePage - 1); n <= Math.min(totalPages - 1, safePage + 1); n++) out.push(n);
    if (safePage < totalPages - 2) out.push('...');
    out.push(totalPages);
    return out;
  };
  const activeCategoryName = (TEMPLATE_CATEGORIES.find((c) => c.id === selectedCategory) || {}).name;

  const handleOpenCreateModal = (key, template) => {
    setCreateModalTemplate({ key, ...template });
    setFormTitle(template.name || 'New Form');
    setFormDescription(template.description || '');
  };

  const handleConfirmCreate = () => {
    if (!formTitle.trim()) return;
    setIsSubmitting(true);
    try {
      onCreateForm({
        name: formTitle.trim(),
        description: formDescription.trim(),
        template: createModalTemplate,
      });
    } finally {
      setIsSubmitting(false);
      setCreateModalTemplate(null);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col">
      {/* Top Header / Nav Bar */}
      <div className="bg-white border-b border-slate-200 sticky top-0 z-30 shadow-2xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={onBackToForms}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
            >
              <ArrowLeft size={14} />
              <span>Back to Forms</span>
            </button>
            <div className="h-4 w-px bg-slate-200" />
            <div>
              <h1 className="text-base font-bold text-slate-900 leading-tight">Select a Template</h1>
              <p className="text-[11px] text-slate-500">
                Choose from {activeTemplates.length} professionally designed templates or start fresh
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2.5">
            <button
              type="button"
              onClick={onCreateBlank}
              className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-800 text-xs font-semibold rounded-lg shadow-2xs transition-colors cursor-pointer"
            >
              <Plus size={14} className="text-slate-500" />
              <span>Start from scratch (Blank form)</span>
            </button>
          </div>
        </div>
      </div>

      {/* Main Body */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex-1 w-full flex flex-col gap-6">
        {/* Controls: Search, Layout Filter, Categories */}
        <div className="bg-white rounded-2xl p-5 border border-slate-200/80 shadow-xs flex flex-col gap-4">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
            {/* Search Input */}
            <div className="relative w-full sm:w-80">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={15} />
              <input
                type="text"
                placeholder="Search by template name or description..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-9 pr-8 py-2 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-gray-900 focus:border-gray-900 bg-slate-50/50"
              />
              {searchQuery && (
                <button
                  type="button"
                  onClick={() => setSearchQuery('')}
                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 p-1"
                >
                  <X size={14} />
                </button>
              )}
            </div>

            {/* Layout Switcher (extension layouts) */}
            {layouts.length > 0 && (
              <div className="flex items-center gap-1 p-1 bg-slate-100 rounded-xl border border-slate-200/90 self-stretch sm:self-auto">
                {[{ id: 'all', label: 'All Types', icon: Layers, match: () => true }, ...layouts].map((layout) => {
                  const LayoutIcon = layout.icon || FileText;
                  const count = activeTemplates.filter(([key, t]) => layout.match(t, key)).length;
                  return (
                    <button
                      key={layout.id}
                      type="button"
                      data-layout-filter={layout.id}
                      onClick={() => setSelectedLayoutType(layout.id)}
                      className={`flex-1 sm:flex-none flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
                        selectedLayoutType === layout.id
                          ? 'bg-white text-slate-900 shadow-2xs font-bold'
                          : 'text-slate-600 hover:text-slate-900'
                      }`}
                    >
                      <LayoutIcon size={13} />
                      <span>{layout.label} ({count})</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          {/* Category Tabs */}
          <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
            {TEMPLATE_CATEGORIES.map((cat) => {
              const isActive = selectedCategory === cat.id;
              const IconComp = cat.Icon || categoryIcons[cat.id] || FileText;
              return (
                <button
                  key={cat.id}
                  type="button"
                  onClick={() => setSelectedCategory(cat.id)}
                  className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all cursor-pointer ${
                    isActive
                      ? 'bg-slate-900 text-white shadow-xs'
                      : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200/80'
                  }`}
                >
                  <IconComp size={14} className={isActive ? 'text-white' : 'text-slate-500'} />
                  <span>{cat.name}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Results counter (the reference builder "Showing X-Y of N templates in …") */}
        <div ref={gridTopRef} className="scroll-mt-40" />
        {filteredTemplates.length > 0 && (
          <p className="mb-4 text-sm font-semibold text-slate-600" data-testid="templates-counter">
            Showing {firstIndex + 1}-{Math.min(firstIndex + TEMPLATES_PER_PAGE, filteredTemplates.length)} of {filteredTemplates.length} templates
            {selectedCategory !== 'all' && activeCategoryName ? ` in ${activeCategoryName}` : ''}
          </p>
        )}

        {/* Templates Grid */}
        {filteredTemplates.length === 0 ? (
          <div className="bg-white rounded-2xl p-16 text-center border border-slate-200">
            <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
              <Search className="w-7 h-7 text-slate-400" />
            </div>
            <h3 className="text-base font-bold text-slate-900 mb-1">No templates found</h3>
            <p className="text-xs text-slate-500">
              Try adjusting your search query or choosing a different category filter.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {pageTemplates.map(([key, template]) => {
              const catObj = TEMPLATE_CATEGORIES.find(
                (c) => c.id === (TEMPLATE_CATEGORY_MAP[key] || 'all')
              );
              const CatIcon = catObj ? catObj.Icon || categoryIcons[catObj.id] || FileText : FileText;

              return (
                <div
                  key={key}
                  className="group bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-2xs hover:shadow-lg hover:border-slate-300 transition-all flex flex-col justify-between"
                >
                  {/* Thumbnail / Preview */}
                  <div className="w-full h-44 border-b border-slate-100 overflow-hidden bg-slate-50 relative">
                    <TemplatePreview template={{ ...template, key }} className="h-full w-full" />
                  </div>

                  {/* Body Content */}
                  <div className="p-4 flex-1 flex flex-col justify-between">
                    <div>
                      {/* Badges */}
                      <div className="mb-2 flex items-center gap-1.5 flex-wrap">
                        <Slot name="templates.cardBadges" template={{ ...template, key }} />

                        <span className="inline-flex items-center gap-1 bg-slate-50 text-slate-600 border border-slate-200 text-[10px] font-medium px-2 py-0.5 rounded-full">
                          <CatIcon size={10} className="text-slate-500" />
                          <span>{catObj?.name || 'General'}</span>
                        </span>

                        <span className="ml-auto text-[10px] text-slate-400 font-medium">
                          {template.fields?.length || 0} fields
                        </span>
                      </div>

                      <h3 className="text-sm font-bold text-slate-900 mb-1 group-hover:text-black transition-colors line-clamp-1">
                        {template.name}
                      </h3>
                      <p className="text-xs text-slate-500 leading-relaxed line-clamp-2 min-h-[2.5em]">
                        {template.description}
                      </p>
                    </div>

                    {/* Actions */}
                    <div className="mt-4 pt-3 border-t border-slate-100 flex items-center gap-2">
                      <button
                        type="button"
                        data-testid="card-preview-btn"
                        onClick={() => {
                          setPreviewTemplate({ key, ...template });
                          setPreviewDevice('desktop');
                        }}
                        className="flex-1 px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-xl transition-colors cursor-pointer text-center"
                      >
                        Preview
                      </button>
                      <button
                        type="button"
                        data-testid="card-use-btn"
                        onClick={() => handleOpenCreateModal(key, template)}
                        className="flex-1 px-3 py-2 bg-slate-900 hover:bg-black text-white text-xs font-semibold rounded-xl transition-all shadow-xs cursor-pointer text-center"
                      >
                        Use Template
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {totalPages > 1 && (
          <nav className="flex justify-center items-center gap-1.5 mt-10" aria-label="Template pages" data-testid="templates-pagination">
            <button type="button" onClick={() => goToPage(safePage - 1)} disabled={safePage === 1} aria-label="Previous page"
              className="h-9 px-3 bg-white border border-slate-300 text-slate-800 rounded-xl hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white text-sm font-semibold transition-colors flex items-center gap-1 cursor-pointer">
              <ChevronLeft size={14} aria-hidden="true" /><span>Previous</span>
            </button>
            <div className="flex items-center gap-1">
              {pageNumbers().map((n, idx) => (
                n === '...'
                  ? <span key={`e${idx}`} className="px-1 text-slate-400 text-sm">…</span>
                  : <button key={n} type="button" onClick={() => goToPage(n)} aria-label={`Page ${n}`} aria-current={n === safePage ? 'page' : undefined}
                      className={`h-9 min-w-[36px] px-3 rounded-xl text-sm font-semibold transition-all duration-150 cursor-pointer ${n === safePage ? 'bg-slate-900 text-white' : 'bg-white text-slate-800 hover:bg-slate-50 border border-slate-300'}`}>{n}</button>
              ))}
            </div>
            <button type="button" onClick={() => goToPage(safePage + 1)} disabled={safePage === totalPages} aria-label="Next page"
              className="h-9 px-3 bg-white border border-slate-300 text-slate-800 rounded-xl hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white text-sm font-semibold transition-colors flex items-center gap-1 cursor-pointer">
              <span>Next</span><ChevronRight size={14} aria-hidden="true" />
            </button>
          </nav>
        )}
      </div>

      {/* Interactive Responsive Device Preview Modal */}
      {previewTemplate && (
        <div className="fixed inset-0 bg-black/75 backdrop-blur-sm z-[10005] flex flex-col items-center justify-center p-4">
          <div className="bg-slate-900 text-white w-full max-w-5xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh] border border-slate-700 animate-in fade-in zoom-in-95 duration-150">
            {/* Modal Top Bar */}
            <div className="px-6 py-3.5 border-b border-slate-800 flex items-center justify-between bg-slate-950 flex-shrink-0">
              <div className="flex items-center gap-3">
                <span className="text-sm font-bold">{previewTemplate.name}</span>
                <span className="text-[10px] bg-slate-800 text-slate-300 px-2 py-0.5 rounded-full font-medium">
                  {previewTemplate.fields?.length || 0} fields
                </span>
              </div>

              {/* Device Viewport Selector */}
              <div className="flex items-center gap-1 bg-slate-800 p-1 rounded-xl">
                <button
                  type="button"
                  onClick={() => setPreviewDevice('desktop')}
                  className={`p-1.5 rounded-lg text-xs font-medium flex items-center gap-1 transition-colors cursor-pointer ${
                    previewDevice === 'desktop' ? 'bg-white text-slate-900 font-bold' : 'text-slate-400 hover:text-white'
                  }`}
                  title="Desktop (100%)"
                >
                  <Monitor size={14} />
                  <span className="hidden sm:inline">Desktop</span>
                </button>
                <button
                  type="button"
                  onClick={() => setPreviewDevice('tablet')}
                  className={`p-1.5 rounded-lg text-xs font-medium flex items-center gap-1 transition-colors cursor-pointer ${
                    previewDevice === 'tablet' ? 'bg-white text-slate-900 font-bold' : 'text-slate-400 hover:text-white'
                  }`}
                  title="Tablet (768px)"
                >
                  <Tablet size={14} />
                  <span className="hidden sm:inline">Tablet</span>
                </button>
                <button
                  type="button"
                  onClick={() => setPreviewDevice('mobile')}
                  className={`p-1.5 rounded-lg text-xs font-medium flex items-center gap-1 transition-colors cursor-pointer ${
                    previewDevice === 'mobile' ? 'bg-white text-slate-900 font-bold' : 'text-slate-400 hover:text-white'
                  }`}
                  title="Mobile (375px)"
                >
                  <Smartphone size={14} />
                  <span className="hidden sm:inline">Mobile</span>
                </button>
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  data-testid="modal-use-btn"
                  onClick={() => {
                    handleOpenCreateModal(previewTemplate.key, previewTemplate);
                    setPreviewTemplate(null);
                  }}
                  className="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg transition-colors cursor-pointer shadow-xs"
                >
                  Use Template
                </button>
                <button
                  type="button"
                  data-testid="modal-close-btn"
                  onClick={() => setPreviewTemplate(null)}
                  className="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition-colors cursor-pointer"
                >
                  <X size={18} />
                </button>
              </div>
            </div>

            {/* Preview Viewport Canvas */}
            <div className="flex-1 overflow-auto p-6 bg-slate-900 flex items-center justify-center">
              <div
                className="bg-white rounded-xl shadow-2xl transition-all duration-300 overflow-hidden flex flex-col"
                style={{
                  width:
                    previewDevice === 'mobile'
                      ? '375px'
                      : previewDevice === 'tablet'
                      ? '768px'
                      : '100%',
                  maxWidth: '100%',
                  minHeight: '480px',
                }}
              >
                <div className="w-full flex-1">
                  <TemplatePreview template={previewTemplate} className="w-full min-h-[480px]" priority />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Form Title & Create Confirmation Modal */}
      {createModalTemplate && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-xs z-[10006] flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95 duration-150">
            {/* Header */}
            <div className="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
              <div className="flex items-center gap-2.5">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 border border-emerald-100 flex items-center justify-center">
                  <CheckCircle2 size={16} className="text-emerald-600" />
                </div>
                <div>
                  <h3 className="text-sm font-bold text-slate-900">Name Your Form</h3>
                  <p className="text-[11px] text-slate-500">Based on {createModalTemplate.name}</p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setCreateModalTemplate(null)}
                className="text-slate-400 hover:text-slate-600 p-1"
              >
                <X size={16} />
              </button>
            </div>

            {/* Body */}
            <div className="p-5 space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Form Title <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  value={formTitle}
                  onChange={(e) => setFormTitle(e.target.value)}
                  placeholder="e.g., Customer Inquiry Form"
                  className="w-full px-3 py-2 text-xs border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-900 focus:border-slate-900"
                  autoFocus
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">
                  Form Description <span className="text-slate-400 font-normal">(Optional)</span>
                </label>
                <textarea
                  value={formDescription}
                  onChange={(e) => setFormDescription(e.target.value)}
                  rows={2}
                  placeholder="Short note about what this form collects..."
                  className="w-full px-3 py-2 text-xs border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-900 focus:border-slate-900 resize-none"
                />
              </div>
            </div>

            {/* Footer */}
            <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center gap-2.5 justify-end">
              <button
                type="button"
                onClick={() => setCreateModalTemplate(null)}
                className="px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-200/80 bg-slate-100 rounded-lg transition-colors cursor-pointer"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleConfirmCreate}
                disabled={!formTitle.trim() || isSubmitting}
                className="px-4 py-2 text-xs font-semibold bg-slate-900 hover:bg-black disabled:opacity-50 text-white rounded-lg transition-colors cursor-pointer shadow-xs"
              >
                {isSubmitting ? 'Creating Form...' : 'Create Form & Open Builder'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}