import { AlertCircle, Plus } from 'lucide-react';
import { Button } from '../ui/button';
import { Alert, AlertDescription } from '../ui/alert';
import { WorkflowReactFlowNode } from '../../types/reactflow';

/**
 * Props for the CanvasOverlays component
 */
export interface CanvasOverlaysProps {
  /** Current workflow nodes */
  nodes: WorkflowReactFlowNode[];
  /** Whether the workflow is currently loading */
  loading?: boolean;
  /** Load error message */
  loadError: string | null;
  /** Callback to add a trigger */
  onAddTrigger: () => void;
  /** Callback to retry loading workflow */
  onRetryLoad: () => void;
  /** Callback to go back to workflow list */
  onBack: () => void;
}

/**
 * CanvasOverlays component for the FlowBuilder
 *
 * Displays alerts, empty state, and missing trigger warnings
 * overlaid on the workflow canvas.
 */
export function CanvasOverlays({
  nodes,
  loading,
  loadError,
  onAddTrigger,
  onRetryLoad,
  onBack,
}: CanvasOverlaysProps) {
  const hasTrigger = nodes.some((n) => n.type === 'trigger');

  return (
    <>
      {/* Load error alert */}
      {loadError && (
        <Alert
          variant="destructive"
          className="absolute top-4 left-1/2 transform -translate-x-1/2 z-50 max-w-md shadow-lg"
        >
          <AlertCircle className="h-4 w-4" />
          <AlertDescription className="flex flex-col gap-2">
            <span>{loadError}</span>
            <div className="flex gap-2">
              <Button size="sm" variant="accent" onClick={onRetryLoad}>
                Retry
              </Button>
              <Button variant="outline" size="sm" onClick={onBack}>
                Back to List
              </Button>
            </div>
          </AlertDescription>
        </Alert>
      )}

      {/* Empty state overlay - centered on canvas (only show when not loading) */}
      {!loading && nodes.length === 0 && (
        <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
          <div className="text-center bg-white/95 backdrop-blur-sm px-8 py-6 rounded-xl shadow-lg border border-slate-200 pointer-events-auto">
            <h3 className="text-lg font-medium text-slate-900 mb-2">
              Start building your workflow
            </h3>
            <p className="text-sm text-slate-500 mb-4">Add a trigger to begin</p>
            <Button onClick={onAddTrigger} variant="accent">
              <Plus className="w-4 h-4 mr-2" />
              Add Trigger
            </Button>
          </div>
        </div>
      )}

      {/* Missing trigger overlay - when actions exist but no trigger */}
      {nodes.length > 0 && !hasTrigger && (
        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10">
          <div className="bg-warning-muted border border-warning rounded-lg px-4 py-3 shadow-md flex items-center gap-3">
            <div className="text-warning">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                />
              </svg>
            </div>
            <span className="text-sm text-warning-text">Your workflow needs a trigger to run</span>
            <Button onClick={onAddTrigger} size="sm" variant="accent" className="ml-2">
              <Plus className="w-4 h-4 mr-1" />
              Add Trigger
            </Button>
          </div>
        </div>
      )}
    </>
  );
}