/**
 * BaseWidget - Wrapper component for all widgets
 * Provides consistent styling, controls, and error/loading states
 */

import type { ReactNode } from "react";
import { Settings, X } from "lucide-react";

// Simple classnames utility
function cn(...classes: (string | undefined | null | false)[]): string {
  return classes.filter(Boolean).join(" ");
}

export interface BaseWidgetProps {
  id: string;
  title: string;
  description?: string;
  children: ReactNode;
  onEdit?: () => void;
  onRemove?: () => void;
  className?: string;
  isLoading?: boolean;
  error?: string;
}

export function BaseWidget({
  id,
  title,
  description,
  children,
  onEdit,
  onRemove,
  className,
  isLoading = false,
  error,
}: BaseWidgetProps): React.JSX.Element {
  return (
    <div
      data-widget-id={id}
      className={cn(
        "flex flex-col h-full bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden",
        className
      )}
    >
      {/* Widget Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50">
        <div className="flex-1 min-w-0">
          <h3 className="text-sm font-semibold text-gray-900 truncate">{title}</h3>
          {description && <p className="text-xs text-gray-500 truncate mt-0.5">{description}</p>}
        </div>

        {/* Control buttons - only show if handlers provided */}
        {(onEdit ?? onRemove) && (
          <div className="flex items-center gap-1 ml-2">
            {onEdit && (
              <button
                onClick={onEdit}
                aria-label="Edit widget"
                className="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
                title="Edit widget"
              >
                <Settings className="w-4 h-4" />
              </button>
            )}
            {onRemove && (
              <button
                onClick={onRemove}
                aria-label="Remove widget"
                className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                title="Remove widget"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>
        )}
      </div>

      {/* Widget Content */}
      <div className="flex-1 p-4 overflow-auto">
        {isLoading ? (
          <div className="flex items-center justify-center h-full">
            <div className="flex flex-col items-center gap-2">
              <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
              <span className="text-sm text-gray-500">Loading...</span>
            </div>
          </div>
        ) : error ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <div className="text-red-500 text-sm font-medium mb-1">Error</div>
              <div className="text-xs text-gray-600">{error}</div>
            </div>
          </div>
        ) : (
          children
        )}
      </div>
    </div>
  );
}
