import { AlertCircle } from 'lucide-react';
import { Action, ActionField } from '../../types/action';
import { AvailableContext } from '../../types/workflow-context';
import { FieldChangeHandler, QueueFetchHandler } from '../../types/schema';
import { Button } from '../ui/button';
import { SchemaFieldRenderer } from '../fields/SchemaFieldRenderer';
import { ConnectionSelector } from './ConnectionSelector';

interface ActionConfigContentProps {
  action: Action | undefined;
  isLoading: boolean;
  error: string | null;
  onRetry: () => void;
  actionConfig: Record<string, unknown>;
  onFieldChange: FieldChangeHandler;
  availableContext: AvailableContext;
  mainFields: [string, ActionField][];
  dynamicOptions: Record<string, unknown[]>;
  loadingDynamicFields: Record<string, boolean>;
  dynamicFieldErrors: Record<string, string>;
  onQueueFetch: QueueFetchHandler;
}

/**
 * Renders the action configuration content including schema-driven fields.
 * Handles loading, error, and empty states.
 */
export function ActionConfigContent({
  action,
  isLoading,
  error,
  onRetry,
  actionConfig,
  onFieldChange,
  availableContext,
  mainFields,
  dynamicOptions,
  loadingDynamicFields,
  dynamicFieldErrors,
  onQueueFetch,
}: ActionConfigContentProps) {
  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-12 space-y-3">
        <div className="relative">
          <div className="w-8 h-8 rounded-full border-2 border-slate-200 border-t-cyan-500 animate-spin" />
        </div>
        <p className="text-[13px] text-slate-400">Loading configuration...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-start gap-3 rounded-lg bg-rose-50 border border-rose-100 px-4 py-3">
        <AlertCircle className="w-4 h-4 text-rose-500 mt-0.5 shrink-0" />
        <div className="flex-1 space-y-2">
          <p className="text-[13px] text-rose-700 leading-snug">{error}</p>
          <Button
            onClick={onRetry}
            variant="outline"
            size="sm"
            className="h-8 text-[12px] border-rose-200 text-rose-600 hover:bg-rose-100"
          >
            Retry
          </Button>
        </div>
      </div>
    );
  }

  if (!action) {
    return <p className="text-sm text-slate-500">Action configuration not available.</p>;
  }

  return (
    <>
      {/* Connection selector for integration actions that require external authentication */}
      {action.integration && action.requires_connection && (
        <ConnectionSelector
          integration={action.integration}
          value={actionConfig.connection_id as string | undefined}
          onChange={(connectionId) => onFieldChange('connection_id', connectionId)}
        />
      )}

      {/* Schema-driven action configuration */}
      {mainFields.length === 0 ? (
        <p className="text-sm text-slate-500">
          No additional configuration required for this action.
        </p>
      ) : (
        <div className="grid grid-cols-2 gap-x-4 gap-y-5">
          {mainFields.map(([fieldName, field]) => (
            <div
              key={fieldName}
              className={field.width === '1/2' ? 'col-span-1' : 'col-span-2'}
            >
              <SchemaFieldRenderer
                fieldName={fieldName}
                field={field}
                value={actionConfig[fieldName]}
                onChange={onFieldChange}
                availableContext={availableContext}
                dynamicOptions={dynamicOptions}
                loadingDynamicFields={loadingDynamicFields}
                dynamicFieldErrors={dynamicFieldErrors}
                onQueueFetch={onQueueFetch}
                actionConfig={actionConfig}
                currentAction={action}
              />
            </div>
          ))}
        </div>
      )}
    </>
  );
}