// app/components/admin/page-builder/SidebarBuilder.tsx
'use client';

import { useState } from 'react';
import {
  DndContext,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
  closestCenter,
} from '@dnd-kit/core';
import {
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
  arrayMove,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { SidebarWidget, SidebarWidgetType } from '@/lib/page-builder/container-types';
import {
  sidebarWidgetRegistry,
  renderSidebarWidgetEditor,
} from '@/lib/page-builder/sidebar-widget-registry';

// ── Helpers ───────────────────────────────────────────────────────────────────

function generateWidgetId() {
  return `widget_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
}

function createWidget(type: SidebarWidgetType): SidebarWidget {
  const id = generateWidgetId();
  return {
    id,
    type,
    props: { ...sidebarWidgetRegistry[type].defaultProps, id },
  };
}

// ── Sortable widget row ───────────────────────────────────────────────────────

interface WidgetRowProps {
  widget: SidebarWidget;
  isExpanded: boolean;
  onToggle: () => void;
  onUpdate: (updated: SidebarWidget) => void;
  onRemove: () => void;
}

function WidgetRow({ widget, isExpanded, onToggle, onUpdate, onRemove }: WidgetRowProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
    useSortable({ id: widget.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  const cfg = sidebarWidgetRegistry[widget.type];

  return (
    <div ref={setNodeRef} style={style} className="border border-var-border rounded-lg bg-var-surface overflow-hidden">
      {/* Header */}
      <div className="flex items-center gap-2 px-3 py-2.5 bg-var-surface-hover border-b border-var-border">
        <button
          type="button"
          {...attributes}
          {...listeners}
          className="cursor-grab text-var-text-muted hover:text-var-text active:cursor-grabbing p-1 rounded"
          title="Drag to reorder"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
          </svg>
        </button>
        <span className="text-base">{cfg.icon}</span>
        <span className="flex-1 text-sm font-medium text-var-text truncate">{cfg.label}</span>
        <button
          type="button"
          onClick={onToggle}
          className="text-var-text-muted hover:text-var-text p-1 rounded transition-colors"
          title={isExpanded ? 'Collapse' : 'Edit'}
        >
          {isExpanded ? (
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
            </svg>
          ) : (
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          )}
        </button>
        <button
          type="button"
          onClick={onRemove}
          className="text-var-danger hover:text-var-danger-text p-1 rounded transition-colors"
          title="Remove widget"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      {/* Editor — resolved from registry, no switch statement needed */}
      {isExpanded && (
        <div className="p-4 bg-var-surface">
          {renderSidebarWidgetEditor(widget, newProps => onUpdate({ ...widget, props: newProps }))}
        </div>
      )}
    </div>
  );
}

// ── Add widget palette ────────────────────────────────────────────────────────

function AddWidgetPalette({ onAdd }: { onAdd: (type: SidebarWidgetType) => void }) {
  const [open, setOpen] = useState(false);
  const types = Object.keys(sidebarWidgetRegistry) as SidebarWidgetType[];

  // Group by category for cleaner UI
  const grouped = types.reduce<Record<string, SidebarWidgetType[]>>((acc, type) => {
    const cat = sidebarWidgetRegistry[type].category;
    if (!acc[cat]) acc[cat] = [];
    acc[cat].push(type);
    return acc;
  }, {});

  return (
    <div className="relative">
      <button
        type="button"
        onClick={e => { e.preventDefault(); setOpen(v => !v); }}
        className="w-full flex items-center justify-center gap-2 border-2 border-dashed border-var-primary rounded-lg py-3 text-var-primary hover:bg-var-primary-muted transition-colors text-sm font-medium"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
        </svg>
        Add Sidebar Widget
      </button>

      {open && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
          <div className="absolute bottom-full left-0 right-0 mb-2 bg-var-surface border border-var-border rounded-xl shadow-var-modal z-50 overflow-hidden max-h-80 overflow-y-auto">
            {Object.entries(grouped).map(([category, catTypes]) => (
              <div key={category}>
                <div className="px-3 py-1.5 bg-var-surface-hover border-b border-var-border">
                  <p className="text-xs font-semibold text-var-text-muted uppercase tracking-wide">
                    {category}
                  </p>
                </div>
                <div className="p-2 grid grid-cols-2 gap-1">
                  {catTypes.map(type => {
                    const cfg = sidebarWidgetRegistry[type];
                    return (
                      <button
                        key={type}
                        type="button"
                        onClick={e => { e.preventDefault(); onAdd(type); setOpen(false); }}
                        className="flex items-center gap-2 p-2.5 rounded-lg hover:bg-var-primary-muted transition-colors text-left"
                      >
                        <span className="text-lg shrink-0">{cfg.icon}</span>
                        <div className="min-w-0">
                          <p className="text-xs font-semibold text-var-text leading-tight truncate">{cfg.label}</p>
                          <p className="text-xs text-var-text-muted leading-tight truncate">{cfg.description}</p>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

// ── SidebarBuilder ────────────────────────────────────────────────────────────

interface SidebarBuilderProps {
  widgets: SidebarWidget[];
  onChange: (widgets: SidebarWidget[]) => void;
}

export function SidebarBuilder({ widgets, onChange }: SidebarBuilderProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      const oldIdx = widgets.findIndex(w => w.id === active.id);
      const newIdx = widgets.findIndex(w => w.id === over.id);
      onChange(arrayMove(widgets, oldIdx, newIdx));
    }
  };

  const handleAdd = (type: SidebarWidgetType) => {
    const w = createWidget(type);
    onChange([...widgets, w]);
    setExpandedId(w.id);
  };

  const handleUpdate = (updated: SidebarWidget) =>
    onChange(widgets.map(w => w.id === updated.id ? updated : w));

  const handleRemove = (id: string) => {
    onChange(widgets.filter(w => w.id !== id));
    if (expandedId === id) setExpandedId(null);
  };

  return (
    <div className="space-y-3">
      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext items={widgets.map(w => w.id)} strategy={verticalListSortingStrategy}>
          {widgets.map(widget => (
            <WidgetRow
              key={widget.id}
              widget={widget}
              isExpanded={expandedId === widget.id}
              onToggle={() => setExpandedId(id => id === widget.id ? null : widget.id)}
              onUpdate={handleUpdate}
              onRemove={() => handleRemove(widget.id)}
            />
          ))}
        </SortableContext>
      </DndContext>

      {widgets.length === 0 && (
        <div className="text-center py-6 text-var-text-muted text-sm border-2 border-dashed border-var-border rounded-lg">
          No widgets yet. Add one below.
        </div>
      )}

      <AddWidgetPalette onAdd={handleAdd} />
    </div>
  );
}