// lib/page-builder/sidebar-widget-registry.ts
//
// Single source of truth for all sidebar widgets.
// To add a new widget:
//   1. Create the block in app/components/admin/sidebar-widgets/YourWidget.tsx
//   2. Create the editor in app/components/admin/sidebar-widget-editors/YourWidgetEditor.tsx
//   3. Add the type to SidebarWidgetType in container-types.ts
//   4. Add the entry below — that's it. Everything else picks it up automatically.

import dynamic from 'next/dynamic';
import React from 'react';
import {
  SidebarWidgetType,
  SidebarWidgetPropsByType,
  SearchWidgetProps,
  RecentPostsWidgetProps,
  CategoriesWidgetProps,
  CustomHtmlWidgetProps,
  ContactCtaWidgetProps,
  ImageWidgetProps,
  SidebarWidgetProps,
} from './container-types';

// ── Widget blocks ─────────────────────────────────────────────────────────────
const SearchWidget      = dynamic(() => import('@/app/components/admin/sidebar-widgets/SearchWidget'));
const RecentPostsWidget = dynamic(() => import('@/app/components/admin/sidebar-widgets/RecentPostsWidget'));
const CategoriesWidget  = dynamic(() => import('@/app/components/admin/sidebar-widgets/CategoriesWidget'));
const CustomHtmlWidget  = dynamic(() => import('@/app/components/admin/sidebar-widgets/CustomHtmlWidget'));
const ContactCtaWidget  = dynamic(() => import('@/app/components/admin/sidebar-widgets/ContactCtaWidget'));
const ImageWidget       = dynamic(() => import('@/app/components/admin/sidebar-widgets/ImageWidget'));

// ── Widget editors ────────────────────────────────────────────────────────────
const SearchWidgetEditor      = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/SearchWidgetEditor'));
const RecentPostsWidgetEditor = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/RecentPostsWidgetEditor'));
const CategoriesWidgetEditor  = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/CategoriesWidgetEditor'));
const CustomHtmlWidgetEditor  = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/CustomHtmlWidgetEditor'));
const ContactCtaWidgetEditor  = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/ContactCtaWidgetEditor'));
const ImageWidgetEditor       = dynamic(() => import('@/app/components/admin/sidebar-widget-editors/ImageWidgetEditor'));

// ── Registry type ─────────────────────────────────────────────────────────────

export interface SidebarWidgetEditorProps<T extends SidebarWidgetProps = SidebarWidgetProps> {
  props: T;
  onUpdate: (newProps: T) => void;
}

export interface SidebarWidgetConfig<T extends SidebarWidgetType = SidebarWidgetType> {
  /** Rendered block component */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  component: React.ComponentType<any>;
  /** Editor form rendered in the sidebar builder */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  editor: React.ComponentType<any>;
  /** Default props used when a new widget of this type is created */
  defaultProps: SidebarWidgetPropsByType[T];
  icon: string;
  label: string;
  description: string;
  category: string;
}

export type SidebarWidgetRegistry = {
  [K in SidebarWidgetType]: SidebarWidgetConfig<K>;
};

// ── Registry ──────────────────────────────────────────────────────────────────

export const sidebarWidgetRegistry: SidebarWidgetRegistry = {
  SearchWidget: {
    component: SearchWidget,
    editor: SearchWidgetEditor,
    icon: '🔍',
    label: 'Search Box',
    description: 'Site search input with button',
    category: 'utility',
    defaultProps: {
      id: '',
      placeholder: 'Search...',
      buttonText: 'Search',
    } as SearchWidgetProps,
  },

  RecentPostsWidget: {
    component: RecentPostsWidget,
    editor: RecentPostsWidgetEditor,
    icon: '📰',
    label: 'Recent Posts',
    description: 'List of recent articles or items',
    category: 'content',
    defaultProps: {
      id: '',
      title: 'Recent Posts',
      posts: [
        { id: '1', title: 'How to choose the right elevator', date: 'Jan 12, 2025', link: '#' },
        { id: '2', title: 'Elevator maintenance tips',        date: 'Jan 8, 2025',  link: '#' },
        { id: '3', title: 'Safety regulations in UAE',        date: 'Dec 30, 2024', link: '#' },
      ],
    } as RecentPostsWidgetProps,
  },

  CategoriesWidget: {
    component: CategoriesWidget,
    editor: CategoriesWidgetEditor,
    icon: '🗂️',
    label: 'Categories',
    description: 'List of content categories with counts',
    category: 'navigation',
    defaultProps: {
      id: '',
      title: 'Categories',
      categories: [
        { id: '1', name: 'Residential Elevators', count: 12, link: '#' },
        { id: '2', name: 'Commercial Elevators',  count: 8,  link: '#' },
        { id: '3', name: 'Maintenance',           count: 15, link: '#' },
        { id: '4', name: 'Installation',          count: 6,  link: '#' },
      ],
    } as CategoriesWidgetProps,
  },

  CustomHtmlWidget: {
    component: CustomHtmlWidget,
    editor: CustomHtmlWidgetEditor,
    icon: '📝',
    label: 'Custom HTML / Text',
    description: 'Free-form HTML or plain text block',
    category: 'content',
    defaultProps: {
      id: '',
      title: 'Custom Block',
      html: '<p>Add your custom content here.</p>',
    } as CustomHtmlWidgetProps,
  },

  ContactCtaWidget: {
    component: ContactCtaWidget,
    editor: ContactCtaWidgetEditor,
    icon: '📞',
    label: 'Contact / CTA',
    description: 'Phone, email and a call-to-action button',
    category: 'conversion',
    defaultProps: {
      id: '',
      title: 'Get In Touch',
      description: 'Have questions? Our team is ready to help.',
      phone: '+971 50 123 4567',
      email: 'info@easymove.ae',
      buttonText: 'Request a Quote',
      buttonLink: '/contact',
    } as ContactCtaWidgetProps,
  },

  ImageWidget: {
    component: ImageWidget,
    editor: ImageWidgetEditor,
    icon: '🖼️',
    label: 'Image',
    description: 'Sidebar image with optional link and caption',
    category: 'media',
    defaultProps: {
      id: '',
      title: '',
      src: 'https://placehold.co/300x200',
      alt: 'Sidebar image',
      link: '',
      caption: '',
    } as ImageWidgetProps,
  },
};

// ── Helper: render any widget by type ─────────────────────────────────────────
// Use this everywhere instead of switch statements.

export function renderSidebarWidget(widget: { id: string; type: SidebarWidgetType; props: SidebarWidgetProps }) {
  const cfg = sidebarWidgetRegistry[widget.type];
  if (!cfg) return null;
  const Component = cfg.component;
  return <Component key={widget.id} {...widget.props} />;
}

// ── Helper: render any widget editor by type ──────────────────────────────────

export function renderSidebarWidgetEditor(
  widget: { id: string; type: SidebarWidgetType; props: SidebarWidgetProps },
  onUpdate: (newProps: SidebarWidgetProps) => void
) {
  const cfg = sidebarWidgetRegistry[widget.type];
  if (!cfg) return null;
  const Editor = cfg.editor;
  return <Editor props={widget.props} onUpdate={onUpdate} />;
}