import React, { useState, useEffect } from 'react';
import {
  Mail,
  Newspaper,
  ClipboardList,
  UserPlus,
  Package,
  Shield,
  Calendar,
  FileText,
  Search,
  X,
  AlertTriangle,
} from 'lucide-react';
import TemplatePreview from './TemplatePreview';
import { useTemplateCatalog } from '../extensions/templates';
import { applyFilters, Slot } from '../extensions/registry';
import { useFormStore } from '../store/useFormStore';

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

export default function TemplateLoaderDrawer({
  isOpen,
  onClose,
  onTemplateSelect,
  onApply,
}) {
  const { templates: TEMPLATE_CONFIGURATIONS, categories, categoryMap: TEMPLATE_CATEGORY_MAP, preferred: PREFERRED_BY_CATEGORY } = useTemplateCatalog();
  const settings = useFormStore((state) => state.settings);
  // An extension can limit the drawer to the templates that suit the open form (`templates.drawerScope` filter:
  // { match(template, key), categoryIds, label, Badge }).
  const scope = applyFilters('templates.drawerScope', null, { settings }) || null;
  const [search, setSearch] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [showConfirmation, setShowConfirmation] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [isClosing, setIsClosing] = useState(false);
  const [adminBarHeight, setAdminBarHeight] = useState(0);

  // Measure WP admin bar
  useEffect(() => {
    const bar = document.getElementById('wpadminbar');
    if (bar) {
      setAdminBarHeight(bar.offsetHeight);
    }
    const handleResize = () => {
      if (bar) setAdminBarHeight(bar.offsetHeight);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const activeTemplates = Object.entries(TEMPLATE_CONFIGURATIONS).filter(
    ([key, t]) => !t.isDisabled && (!scope || scope.match(t, key))
  );
  const scopedCount = activeTemplates.length;

  const scopeCategoryIds = scope && Array.isArray(scope.categoryIds) ? scope.categoryIds : null;
  const displayedCategories = categories.filter((category) => {
    if (scopeCategoryIds && !scopeCategoryIds.includes(category.id)) return false;
    return category.id === 'all' || activeTemplates.some(([key]) => (TEMPLATE_CATEGORY_MAP[key] || 'all') === category.id);
  });

  useEffect(() => {
    if (isOpen) {
      if (!displayedCategories.some((c) => c.id === selectedCategory)) {
        setSelectedCategory('all');
      }
      setTimeout(() => {
        setIsVisible(true);
        setIsClosing(false);
      }, 50);
    } else {
      setIsClosing(true);
      setTimeout(() => {
        setIsVisible(false);
      }, 350);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, scope && scope.label]);

  useEffect(() => {
    const handleEscKey = (event) => {
      if (event.key === 'Escape' && isOpen) {
        handleClose();
      }
    };
    if (isOpen) {
      document.addEventListener('keydown', handleEscKey);
    }
    return () => {
      document.removeEventListener('keydown', handleEscKey);
    };
  }, [isOpen]);

  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      onClose();
      setIsVisible(false);
      setSearch('');
      setSelectedCategory('all');
      setSelectedTemplate(null);
      setShowConfirmation(false);
    }, 350);
  };

  const filteredTemplates = activeTemplates
    .filter(([key, template]) => {
      const templateCategory = TEMPLATE_CATEGORY_MAP[key] || 'all';
      const categoryMatch = selectedCategory === 'all' || templateCategory === selectedCategory;

      const searchMatch =
        (template.name || '').toLowerCase().includes(search.toLowerCase()) ||
        (template.description || '').toLowerCase().includes(search.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;
    });

  const handleTemplateClick = (templateKey, template) => {
    setSelectedTemplate({ key: templateKey, ...template });
    setShowConfirmation(true);
  };

  const handleConfirmLoad = () => {
    if (selectedTemplate) {
      const targetHandler = onTemplateSelect || onApply;
      if (targetHandler) {
        targetHandler(selectedTemplate);
      }
      handleClose();
    }
  };

  if (!isVisible && !isOpen) {
    return null;
  }

  return (
    <>
      {/* Backdrop */}
      <div
        className={`fixed inset-0 bg-black/40 z-[999] transition-opacity duration-300 backdrop-blur-xs ${
          isClosing ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto'
        }`}
        onClick={handleClose}
      />

      {/* Drawer */}
      <div
        className={`fixed right-0 z-[1000] bg-white shadow-2xl flex flex-col transition-transform duration-350 ease-out border-l border-slate-200 ${
          isClosing ? 'translate-x-full' : 'translate-x-0'
        }`}
        style={{
          width: 'min(800px, 95vw)',
          top: `${adminBarHeight}px`,
          height: `calc(100vh - ${adminBarHeight}px)`,
        }}
        data-drawer="template-loader"
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-3.5 border-b border-gray-200 bg-white flex-shrink-0">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center">
              <FileText className="w-4 h-4 text-gray-900" />
            </div>
            <div>
              <h3 className="text-base font-bold text-gray-900 leading-tight">Load Template</h3>
              <p className="text-[11px] text-gray-500">
                {`Choose ${scope && scope.label ? `a ${scope.label} template` : 'a template'} to replace your current form · ${scopedCount} templates`}
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 p-2 rounded-lg transition-colors cursor-pointer"
            aria-label="Close drawer"
          >
            <X size={18} />
          </button>
        </div>

        {/* Search & Categories Bar */}
        <div className="px-6 py-3 border-b border-gray-200 bg-gray-50 flex-shrink-0">
          {/* Search Bar */}
          <div className="mb-2.5">
            <div className="relative">
              <Search
                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                size={15}
              />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search templates..."
                className="w-full pl-9 pr-8 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900 bg-white transition-all text-xs"
              />
              {search && (
                <button
                  type="button"
                  onClick={() => setSearch('')}
                  className="absolute right-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1"
                >
                  <X size={14} />
                </button>
              )}
            </div>
          </div>

          {scope && scope.Badge && (
            <div className="flex items-center gap-2 mb-2">
              <scope.Badge count={scopedCount} />
            </div>
          )}

          {/* Category Tabs - Horizontal Scrollable */}
          <div
            className="template-category-scroll flex gap-2 overflow-x-auto pb-1 -mx-2 px-2"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {displayedCategories.map((category) => {
              const isActive = selectedCategory === category.id;
              const IconComponent = category.Icon || categoryIcons[category.id] || FileText;
              return (
                <button
                  key={category.id}
                  onClick={() => setSelectedCategory(category.id)}
                  type="button"
                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium text-xs whitespace-nowrap transition-all flex-shrink-0 cursor-pointer ${
                    isActive
                      ? 'bg-gray-900 text-white shadow-sm border border-gray-900'
                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200'
                  }`}
                >
                  <IconComponent size={14} className={isActive ? 'text-white' : 'text-gray-600'} />
                  <span>{category.name}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Template Grid */}
        <div className="flex-1 overflow-y-auto p-5 bg-gray-50/50">
          {filteredTemplates.length === 0 ? (
            <div className="text-center py-16">
              <div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <Search className="w-6 h-6 text-gray-400" />
              </div>
              <h3 className="text-base font-semibold text-gray-900 mb-1">No templates found</h3>
              <p className="text-xs text-gray-500">Try adjusting your search or category filter</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {filteredTemplates.map(([key, template]) => {
                const catObj = 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 relative bg-white rounded-xl shadow-xs border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md hover:border-gray-300 flex flex-col justify-between"
                  >
                    {/* Visual Preview */}
                    <div className="w-full h-32 border-b border-gray-100 overflow-hidden bg-slate-50">
                      <TemplatePreview template={{ ...template, key }} className="h-full w-full" />
                    </div>

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

                          {key !== 'blank' && !template.isBlank ? (
                            <span className="inline-flex items-center gap-1 bg-gray-100 text-gray-600 text-[10px] font-medium px-1.5 py-0.5 rounded-full">
                              <CatIcon size={10} className="text-gray-600" />
                              <span className="text-[10px]">{catObj?.name || 'Form'}</span>
                            </span>
                          ) : (
                            <span className="inline-flex items-center gap-1 bg-gray-100 text-gray-600 text-[10px] font-medium px-1.5 py-0.5 rounded-full">
                              <FileText size={10} className="text-gray-600" />
                              <span className="text-[10px]">Blank Template</span>
                            </span>
                          )}

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

                        <h4 className="text-sm font-bold text-gray-900 line-clamp-1 mb-1">
                          {template.name}
                        </h4>
                        <p className="text-xs text-gray-500 leading-relaxed line-clamp-2 min-h-[2.5em]">
                          {template.description}
                        </p>
                      </div>

                      {/* Action Button */}
                      <div className="mt-3 pt-2.5 border-t border-gray-100">
                        <button
                          type="button"
                          onClick={() => handleTemplateClick(key, template)}
                          className="w-full bg-gray-900 hover:bg-black text-white text-xs font-semibold px-3 py-2 rounded-lg shadow-xs transition-all cursor-pointer text-center"
                        >
                          Use Template
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Confirmation Modal */}
      {showConfirmation && selectedTemplate && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-xs z-[10002] flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[90vh] flex flex-col border border-gray-200 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            {/* Header */}
            <div className="flex items-center gap-3 p-5 border-b border-gray-200 bg-red-50/40 flex-shrink-0">
              <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                <AlertTriangle className="w-5 h-5 text-red-600" />
              </div>
              <div>
                <h3 className="text-base font-bold text-gray-900">Replace Current Form?</h3>
                <p className="text-gray-500 text-xs">This action cannot be undone</p>
              </div>
            </div>

            {/* Content */}
            <div className="p-5 flex-1 overflow-y-auto">
              <p className="text-gray-700 mb-3 text-xs">
                Loading <strong>"{selectedTemplate.name}"</strong> will replace:
              </p>
              <ul className="space-y-1.5 text-xs text-gray-600 mb-4 bg-slate-50 p-3 rounded-lg border border-slate-200">
                <li className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></div>
                  <span>All existing fields, grids, and configurations</span>
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></div>
                  <span>Current form styling, colors, and layout</span>
                </li>
              </ul>

              {/* Template Preview Card */}
              <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
                <div className="flex items-center justify-between mb-2">
                  <h4 className="font-semibold text-gray-900 text-xs">{selectedTemplate.name}</h4>
                  <span className="text-[10px] text-gray-400">
                    {selectedTemplate.fields?.length || 0} fields
                  </span>
                </div>
                <div className="w-full h-24 rounded border border-gray-200 overflow-hidden bg-white">
                  <TemplatePreview template={selectedTemplate} className="h-full w-full" />
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-2.5 p-4 border-t border-gray-200 bg-gray-50 flex-shrink-0">
              <button
                type="button"
                onClick={() => setShowConfirmation(false)}
                className="flex-1 px-4 py-2 text-xs font-semibold text-gray-700 bg-white hover:bg-gray-100 border border-gray-300 rounded-lg transition-colors cursor-pointer"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleConfirmLoad}
                className="flex-1 px-4 py-2 text-xs font-semibold bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors cursor-pointer shadow-xs"
              >
                Load Template
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}