import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import { useImageDrop } from '@/hooks/useImageDrop';
import { Button } from '@/components/ui/button';
import { Plus, Minus, Grid3X3, Trash2, Settings, ArrowUp, ArrowDown, GripVertical } from 'lucide-react';
import { LayoutContainer as LayoutContainerType, WidgetInstance } from '@/modules/layout/LayoutManager';
import { widgetRegistry } from '@/lib/widgetRegistry';
import { WidgetSettingsManager } from '@/components/widgets/WidgetSettingsManager';
import { WidgetMovementControls } from '@/components/widgets/WidgetMovementControls';
import { useLayout } from '@/modules/layout/LayoutContext';
import CollapsibleSection from '@/components/CollapsibleSection';
import { ContainerSettingsManager } from '@/components/containers/ContainerSettingsManager';
import { useDraggable, useDroppable } from '@dnd-kit/core';
import { LayoutContainer } from './LayoutContainer';

// Droppable slot for empty areas (column indicators, add-widget buttons)
const DroppableSlot: React.FC<{
  containerId: string;
  index: number;
  isEditMode: boolean;
  children: React.ReactNode;
}> = ({ containerId, index, isEditMode, children }) => {
  const { setNodeRef, isOver } = useDroppable({
    id: `slot-${containerId}-${index}`,
    data: {
      type: 'container-cell',
      containerId,
      index,
    },
    disabled: !isEditMode,
  });

  return (
    <div ref={setNodeRef} className={cn(isOver && 'ring-2 ring-blue-400 ring-offset-2 rounded-lg')}>
      {children}
    </div>
  );
};

export interface LayoutContainerEditProps {
  container: LayoutContainerType;
  isEditMode: boolean;
  pageId: string;
  selectedContainerId?: string | null;
  onSelect?: (containerId: string, pageId?: string) => void;
  onAddWidget?: (containerId: string, targetColumn?: number) => void;
  onRemoveWidget?: (widgetInstanceId: string) => void;
  onMoveWidget?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
  onUpdateColumns?: (containerId: string, columns: number) => void;
  onUpdateSettings?: (containerId: string, settings: Partial<LayoutContainerType['settings']>) => void;
  onAddContainer?: (parentContainerId: string) => void;
  onRemoveContainer?: (containerId: string) => void;
  onMoveContainer?: (containerId: string, direction: 'up' | 'down') => void;
  canMoveContainerUp?: boolean;
  canMoveContainerDown?: boolean;
  selectedWidgetId?: string | null;
  selectedWidgetIds?: Set<string>;
  onSelectWidget?: (widgetId: string, pageId?: string) => void;
  depth?: number;
  isCompactMode?: boolean;
  editingWidgetId?: string | null;
  onEditWidget?: (widgetId: string | null) => void;
  newlyAddedWidgetId?: string | null;
  contextVariables?: Record<string, any>;
  pageContext?: Record<string, any>;
  onFilesDrop?: (files: File[], targetColumn?: number) => void;
}

const LayoutContainerEditComponent: React.FC<LayoutContainerEditProps> = ({
  container,
  isEditMode,
  pageId,
  selectedContainerId,
  onSelect,
  onAddWidget,
  onRemoveWidget,
  onMoveWidget,
  onUpdateColumns,
  onUpdateSettings,
  onAddContainer,
  onRemoveContainer,
  onMoveContainer,
  canMoveContainerUp,
  canMoveContainerDown,
  selectedWidgetId,
  selectedWidgetIds,
  onSelectWidget,
  depth = 0,
  isCompactMode = false,
  editingWidgetId,
  onEditWidget,
  newlyAddedWidgetId,
  contextVariables,
  pageContext,
  onFilesDrop,
}) => {
  const { isDragging, handlers } = useImageDrop({
    onFilesDrop: (files) => onFilesDrop?.(files),
    isEditMode: isEditMode && !!onFilesDrop,
  });
  const maxDepth = 3; // Limit nesting depth
  const canNest = depth < maxDepth;
  const isSelected = selectedContainerId === container.id;
  const [showContainerSettings, setShowContainerSettings] = useState(false);

  // Generate responsive grid classes based on container.columns
  const getGridClasses = (columns: number) => {
    const baseClass = "grid"; // Always grid with gap

    // Mobile: always 1 column, Desktop: respect container.columns
    switch (columns) {
      case 1: return `${baseClass} grid-cols-1`;
      case 2: return `${baseClass} grid-cols-1 md:grid-cols-2`;
      case 3: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3`;
      case 4: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-4`;
      case 5: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5`;
      case 6: return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6`;
      default:
        // For 7+ columns, use a more conservative approach
        return `${baseClass} grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-${Math.min(columns, 12)}`;
    }
  };

  const gridClasses = getGridClasses(container.columns);

  // Extract container content rendering logic
  const renderContainerContent = () => (
    <>
      {/* Grid Column Indicators (only in edit mode when selected) */}
      {isEditMode && isSelected && container.widgets.length === 0 && container.children.length === 0 && (
        <>
          {Array.from({ length: container.columns }, (_, i) => (
            <DroppableSlot
              key={i}
              containerId={container.id}
              index={i}
              isEditMode={isEditMode}
            >
              <div
                className="min-h-[80px] flex items-center justify-center text-blue-500 dark:text-blue-400 text-sm cursor-pointer hover:bg-blue-100/20 dark:hover:bg-blue-800/20 transition-colors"
                onDoubleClick={(e) => {
                  e.stopPropagation();
                  onAddWidget?.(container.id, i);
                }}
                title={`Double-click to add widget to column ${i + 1}`}
              >
                Col {i + 1}
              </div>
            </DroppableSlot>
          ))}
        </>
      )}

      {/* Render Widgets */}
      {container.widgets
        .sort((a, b) => (a.order || 0) - (b.order || 0))
        .map((widget, index) => (
          <WidgetItem
            key={widget.id}
            widget={widget}
            index={index}
            containerId={container.id}
            isEditMode={isEditMode}
            pageId={pageId}
            isSelected={selectedWidgetIds ? selectedWidgetIds.has(widget.id) : selectedWidgetId === widget.id}
            onSelect={() => onSelectWidget?.(widget.id, pageId)}
            canMoveUp={index > 0}
            canMoveDown={index < container.widgets.length - 1}
            onRemove={onRemoveWidget}
            onMove={onMoveWidget}
            isEditing={editingWidgetId === widget.id}
            onEditWidget={onEditWidget}
            isNew={newlyAddedWidgetId === widget.id}
            selectedWidgetId={selectedWidgetId}
            onSelectWidget={onSelectWidget}
            editingWidgetId={editingWidgetId}
            contextVariables={contextVariables}
            pageContext={pageContext}
            selectedContainerId={selectedContainerId}
            onSelectContainer={onSelect}
          />
        ))}

      {/* Add Widget Buttons - always visible in edit mode at bottom of every container */}
      {isEditMode && (
        <>
          {container.columns > 1 ? (
            <div className="col-span-full grid gap-4" style={{ gridTemplateColumns: `repeat(${container.columns}, minmax(0, 1fr))` }}>
              {Array.from({ length: container.columns }, (_, colIndex) => (
                <DroppableSlot
                  key={`add-widget-${colIndex}`}
                  containerId={container.id}
                  index={container.widgets.length + colIndex}
                  isEditMode={isEditMode}
                >
                  <div
                    className="flex items-center justify-center min-h-[40px] rounded-lg hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer group"
                    onClick={(e) => {
                      e.stopPropagation();
                      onAddWidget?.(container.id, colIndex);
                    }}
                    title={`Add widget to column ${colIndex + 1}`}
                  >
                    <div className="text-center text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
                      <Plus className="h-4 w-4 mx-auto" />
                      <p className="text-[10px]">Col {colIndex + 1}</p>
                    </div>
                  </div>
                </DroppableSlot>
              ))}
            </div>
          ) : (
            <DroppableSlot
              containerId={container.id}
              index={container.widgets.length}
              isEditMode={isEditMode}
            >
              <div
                className="col-span-full flex items-center justify-center min-h-[36px] rounded-lg hover:bg-blue-50/30 dark:hover:bg-blue-900/20 transition-colors cursor-pointer group"
                onClick={(e) => {
                  e.stopPropagation();
                  onAddWidget?.(container.id);
                }}
                title="Add widget"
              >
                <div className="flex items-center gap-1 text-slate-400 dark:text-slate-500 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
                  <Plus className="h-4 w-4" />
                  <span className="text-xs">Add Widget</span>
                </div>
              </div>
            </DroppableSlot>
          )}
        </>
      )}

      {/* Render Nested Containers */}
      {container.children
        .sort((a, b) => (a.order || 0) - (b.order || 0))
        .map((childContainer) => (
          <div key={childContainer.id} className="col-span-full">
            <LayoutContainer
              container={childContainer}
              isEditMode={isEditMode}
              pageId={pageId}
              selectedContainerId={selectedContainerId}
              onSelect={onSelect}
              onAddWidget={onAddWidget}
              onRemoveWidget={onRemoveWidget}
              onMoveWidget={onMoveWidget}
              onUpdateColumns={onUpdateColumns}
              onUpdateSettings={onUpdateSettings}
              onAddContainer={onAddContainer}
              onRemoveContainer={onRemoveContainer}
              onMoveContainer={onMoveContainer}
              canMoveContainerUp={canMoveContainerUp}
              canMoveContainerDown={canMoveContainerDown}
              selectedWidgetId={selectedWidgetId}
              selectedWidgetIds={selectedWidgetIds}
              onSelectWidget={onSelectWidget}
              depth={depth + 1}
              isCompactMode={isCompactMode}
              editingWidgetId={editingWidgetId}
              onEditWidget={onEditWidget}
              newlyAddedWidgetId={newlyAddedWidgetId}
              contextVariables={contextVariables}
              pageContext={pageContext}
            />
          </div>
        ))}


      {/* Empty State - only show when not showing column indicators */}
      {container.widgets.length === 0 && container.children.length === 0 && !(isEditMode && isSelected) && !isEditMode && (
        <div className="col-span-full flex items-center justify-center min-h-[80px] text-slate-500 dark:text-slate-400">
          <p className="text-sm"></p>
        </div>
      )}
    </>
  );

  // Handle Enabled State
  const isContainerEnabled = container.settings?.enabled !== false; // Default to true

  if (!isContainerEnabled && !isEditMode) {
    return null;
  }

  return (
    <div className={cn(
      "space-y-0",
      container.settings?.customClassName,
      !isContainerEnabled && "opacity-50 grayscale transition-all hover:grayscale-0"
    )}>
      {/* Edit Mode Controls */}
      {isEditMode && (
        <div className={cn(
          "text-white px-2 sm:px-3 py-1 rounded-t-lg text-xs overflow-hidden cursor-pointer",
          isSelected ? "bg-blue-500" : "bg-slate-500"
        )}
          onClick={(e) => {
            e.stopPropagation();
            if (isEditMode) {
              onSelect?.(container.id, pageId);
            }
          }}
        >
          {/* Responsive layout: title and buttons wrap on small screens */}
          <div className="flex items-center justify-between gap-x-2 gap-y-1 min-w-0 flex-wrap">
            <div className="flex items-center gap-1 min-w-0 flex-grow">
              <Grid3X3 className="h-3 w-3 shrink-0" />
              <span className="truncate text-xs font-semibold">
                {container.settings?.showTitle && container.settings?.title
                  ? container.settings.title
                  : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
                {(container.settings?.collapsible || container.settings?.showTitle) && (
                  <span className="ml-1 opacity-75 font-normal">⚙️</span>
                )}
              </span>
            </div>

            {/* Minimalist button row - wraps and justifies to the end */}
            <div className="flex items-center gap-0.5 flex-wrap justify-end">
              {/* Move controls for root containers */}
              {depth === 0 && (
                <div className="flex items-center gap-0.5 mr-1 border-r border-white/20 pr-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      onMoveContainer?.(container.id, 'up');
                    }}
                    disabled={!canMoveContainerUp}
                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                    title="Move container up"
                  >
                    <ArrowUp className="h-3 w-3" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      onMoveContainer?.(container.id, 'down');
                    }}
                    disabled={!canMoveContainerDown}
                    className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                    title="Move container down"
                  >
                    <ArrowDown className="h-3 w-3" />
                  </Button>
                </div>
              )}
              {/* Column controls */}
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onUpdateColumns?.(container.id, container.columns - 1);
                }}
                disabled={container.columns <= 1}
                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                title="Decrease columns"
              >
                <Minus className="h-3 w-3" />
              </Button>

              <span className="min-w-[12px] text-center text-xs font-medium px-1">{container.columns}</span>

              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onUpdateColumns?.(container.id, container.columns + 1);
                }}
                disabled={container.columns >= 12}
                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                title="Increase columns"
              >
                <Plus className="h-3 w-3" />
              </Button>

              {/* Add widget button */}
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onAddWidget?.(container.id);
                }}
                className="h-4 px-1 text-white hover:bg-white/20 shrink-0 ml-1"
                title="Add widget"
              >
                <Plus className="h-3 w-3" />
              </Button>

              {/* Add nested container button */}
              {canNest && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onAddContainer?.(container.id);
                  }}
                  className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                  title="Add nested container"
                >
                  <Grid3X3 className="h-3 w-3" />
                </Button>
              )}

              {/* Container settings button */}
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  setShowContainerSettings(true);
                }}
                className="h-4 px-1 text-white hover:bg-white/20 shrink-0"
                title="Container settings"
              >
                <Settings className="h-3 w-3" />
              </Button>

              {/* Remove container button */}
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onRemoveContainer?.(container.id);
                }}
                className="h-4 px-1 text-white hover:bg-red-400 shrink-0"
                title="Remove container"
              >
                <Trash2 className="h-3 w-3" />
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Container Content */}
      <div
        {...handlers}
        className={cn(
          "relative transition-all duration-200 min-w-0 overflow-hidden",
          isEditMode ? "rounded-b-lg" : "",
          isEditMode && "hover:border-blue-300 cursor-pointer",
          isSelected && isEditMode && "border-blue-500 bg-blue-50/20 dark:bg-blue-900/20",
          !isSelected && isEditMode && "border-slate-300/50 dark:border-white/20",
          !isEditMode && "border-transparent",
          isDragging && "ring-4 ring-blue-400 ring-opacity-50 bg-blue-50/50 dark:bg-blue-900/50"
        )}
        onClick={(e) => {
          e.stopPropagation();
          if (isEditMode) {
            onSelect?.(container.id, pageId);
          }
        }}
      >
        {container.settings?.collapsible ? (
          <CollapsibleSection
            title={
              container.settings?.showTitle
                ? (container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`)
                : `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`
            }
            initiallyOpen={!container.settings?.collapsed}
            storageKey={`container-${container.id}-collapsed`}
            className="border-0 rounded-none shadow-none bg-transparent"
            minimal={true}
          >
            <div
              className={cn(
                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
                gridClasses,
                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
              )}
              style={{
                gap: `${container.gap}px`,
              }}
            >
              {renderContainerContent()}
            </div>
          </CollapsibleSection>
        ) : (
          <div>
            {/* Title for non-collapsible containers */}
            {container.settings?.showTitle && (
              <div className="px-4 pt-3 pb-1 border-b border-slate-300/30 dark:border-white/10">
                <h3 className="text-sm font-medium text-slate-700 dark:text-white">
                  {container.settings?.title || `Container (${container.columns} col${container.columns !== 1 ? 's' : ''})`}
                </h3>
              </div>
            )}
            <div
              className={cn(
                isCompactMode ? "p-1 sm:p-2 min-h-[80px]" : isEditMode ? "p-2 min-h-[120px]" : "min-h-[120px]",
                gridClasses,
                isEditMode && isSelected && "bg-blue-50/10 dark:bg-blue-900/10"
              )}
              style={{
                gap: `${container.gap}px`,
              }}
            >
              {renderContainerContent()}
            </div>
          </div>
        )}
      </div>
      {/* Drop Overlay */}


      {/* Container Settings Dialog */}
      {showContainerSettings && (
        <ContainerSettingsManager
          isOpen={showContainerSettings}
          onClose={() => setShowContainerSettings(false)}
          onSave={(settings) => {
            onUpdateSettings?.(container.id, settings);
            setShowContainerSettings(false);
          }}
          currentSettings={container.settings}
          containerInfo={{
            id: container.id,
            columns: container.columns,
          }}
        />
      )}
    </div>
  );
};

interface WidgetItemProps {
  widget: WidgetInstance;
  index: number;
  containerId: string;
  isEditMode: boolean;
  pageId: string;
  canMoveUp: boolean;
  canMoveDown: boolean;
  onRemove?: (widgetInstanceId: string) => void;
  onMove?: (widgetInstanceId: string, direction: 'up' | 'down' | 'left' | 'right') => void;
  isSelected?: boolean;
  onSelect?: () => void;
  isEditing?: boolean;
  onEditWidget?: (widgetId: string | null) => void;
  isNew?: boolean;
  selectedWidgetId?: string | null;
  onSelectWidget?: (widgetId: string, pageId?: string) => void;
  editingWidgetId?: string | null;
  contextVariables?: Record<string, any>;
  pageContext?: Record<string, any>;
  selectedContainerId?: string | null;
  onSelectContainer?: (containerId: string, pageId?: string) => void;
}

const WidgetItem: React.FC<WidgetItemProps> = ({
  widget,
  index,
  containerId,
  isEditMode,
  pageId,
  canMoveUp,
  canMoveDown,
  onRemove,
  onMove,
  isSelected,
  onSelect,
  isEditing,
  onEditWidget,
  isNew,
  selectedWidgetId,
  onSelectWidget,
  editingWidgetId,
  contextVariables,
  pageContext,
  selectedContainerId,
  onSelectContainer,
}) => {
  const widgetDefinition = widgetRegistry.get(widget.widgetId);
  const { updateWidgetProps, renameWidget } = useLayout();

  // DnD hooks (only active in edit mode)
  const { attributes, listeners, setNodeRef: setDragRef, isDragging: isDndDragging } = useDraggable({
    id: `widget-${widget.id}`,
    data: {
      type: 'existing-widget',
      widgetInstanceId: widget.id,
      widgetDefId: widget.widgetId,
      sourceContainerId: containerId,
      sourceIndex: index,
    },
    disabled: !isEditMode,
  });

  const { setNodeRef: setDropRef, isOver } = useDroppable({
    id: `cell-${containerId}-${index}`,
    data: {
      type: 'container-cell',
      containerId,
      index,
    },
    disabled: !isEditMode,
  });

  // Combine refs
  const combinedRef = (node: HTMLElement | null) => {
    setDragRef(node);
    setDropRef(node);
  };

  // Internal state removed in favor of controlled state
  // const [showSettingsModal, setShowSettingsModal] = useState(false);

  const handlePropsChange = React.useCallback(async (newProps: Record<string, any>) => {
    try {
      await updateWidgetProps(pageId, widget.id, newProps);
    } catch (error) {
      console.error('Failed to update widget props:', error);
    }
  }, [pageId, widget.id, updateWidgetProps]);

  // pageId is now passed as a prop from the parent component

  if (!widgetDefinition) {
    return (
      <div className="relative group border-red-500 bg-red-100 dark:bg-red-900/20 rounded-lg">
        <p className="text-red-600 dark:text-red-400 text-sm">
          Widget "{widget.widgetId}" not found in registry
        </p>
        {isEditMode && (
          <Button
            size="icon"
            variant="destructive"
            className="absolute top-2 right-2 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
            onClick={(e) => {
              e.stopPropagation();
              onRemove?.(widget.id);
            }}
            title="Remove invalid widget"
          >
            <Trash2 className="h-3 w-3" />
          </Button>
        )}
      </div>
    );
  }

  const WidgetComponent = widgetDefinition.component;

  const handleSettingsSave = async (settings: Record<string, any>) => {
    try {
      await updateWidgetProps(pageId, widget.id, settings);
    } catch (error) {
      console.error('Failed to save widget settings:', error);
    }
  };

  const handleSettingsCancel = () => {
    if (isNew) {
      onRemove?.(widget.id);
    }
  };

  // Handle Enabled State
  const isEnabled = widget.props?.enabled !== false; // Default to true

  if (!isEnabled && !isEditMode) {
    return null;
  }

  return (
    <div ref={combinedRef} className={cn(
      "relative group",
      !isEnabled && "opacity-50 grayscale transition-all hover:grayscale-0",
      isDndDragging && "opacity-30",
      isOver && "ring-2 ring-blue-400 ring-offset-2 rounded-lg"
    )} id={`widget-item-${widget.id}`}>
      {/* Edit Mode Controls */}
      {isEditMode && (
        <>
          {/* Widget Info Overlay */}
          <div
            className="absolute top-0 left-0 right-0 bg-green-500/90 text-white text-xs px-2 py-1 rounded-t-lg z-10 cursor-grab active:cursor-grabbing"
            {...listeners}
            {...attributes}
            onClick={(e) => {
              e.stopPropagation();
              onSelect?.();
            }}
          >
            <div className="flex items-center justify-between">
              <span>{widgetDefinition.metadata.name}</span>
              <div className="flex items-center gap-1">
                {/* Settings Gear Icon - For widgets with configSchema */}
                {widgetDefinition.metadata.configSchema && (
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-4 w-4 text-white hover:bg-white/20"
                    onClick={(e) => {
                      e.stopPropagation();
                      // Open settings modal via prop
                      onEditWidget?.(widget.id);
                    }}
                    title="Widget settings"
                  >
                    <Settings className="h-2 w-2" />
                  </Button>
                )}

                {/* Remove Button */}
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-4 w-4 text-white hover:bg-white/20"
                  onClick={(e) => {
                    e.stopPropagation();
                    onRemove?.(widget.id);
                  }}
                  title="Remove widget"
                >
                  <Trash2 className="h-2 w-2" />
                </Button>
              </div>
            </div>
          </div>



          {/* Move Controls - Cross Pattern (Only show on hover or selection) */}
          <div className={cn(
            "absolute bottom-4 right-2 z-10 transition-opacity duration-200",
            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
          )}>
            <WidgetMovementControls
              onMove={(direction) => onMove?.(widget.id, direction)}
              canMoveUp={canMoveUp}
              canMoveDown={canMoveDown}
            />
          </div>

        </>
      )}

      {/* Widget Content - With selection wrapper */}
      <div
        className={cn(
          "w-full dark:bg-slate-900/10 overflow-hidden transition-all duration-200",
          isEditMode && "rounded-lg",
          widget.props?.customClassName || `widget-${widget.id.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
          `widget-type-${widget.widgetId}`,
          // Selection Visuals & Margins
          isEditMode && "border-2",
          isEditMode && isSelected ? "border-blue-500 ring-4 ring-blue-500/10 shadow-lg z-10" : "border-transparent",
          isEditMode && !isSelected && "hover:border-blue-300 dark:hover:border-blue-700",
          // Margin between header/content - applied via padding on this wrapper or margin on content? 
          // Using padding-top on wrapper to separate from title bar overlay
          isEditMode && "pt-8" // Space for title bar
        )}
        onClick={(e) => {
          if (isEditMode) {
            e.preventDefault(); // Prevent focus stealing if clicking background
            e.stopPropagation();
            onSelect?.();
          }
        }}
      >
        <WidgetComponent
          {...(widget.props || {})}
          widgetInstanceId={widget.id}
          widgetDefId={widget.widgetId}
          isEditMode={isEditMode}
          onPropsChange={handlePropsChange}
          selectedWidgetId={selectedWidgetId}
          onSelectWidget={onSelectWidget}
          editingWidgetId={editingWidgetId}
          onEditWidget={onEditWidget}
          contextVariables={contextVariables}
          pageContext={pageContext}
          selectedContainerId={selectedContainerId}
          onSelectContainer={onSelectContainer} />
      </div>

      {/* Generic Settings Modal */}
      {
        widgetDefinition.metadata.configSchema && isEditing && (
          <WidgetSettingsManager
            isOpen={!!isEditing} // coerce to boolean although it should be boolean | undefined from comparison
            onClose={() => onEditWidget?.(null)}
            widgetDefinition={widgetDefinition}

            currentProps={widget.props || {}}
            onSave={handleSettingsSave}
            onCancel={handleSettingsCancel}
          />
        )
      }
    </div >
  );
};

export default LayoutContainerEditComponent;