import { X, Trash2 } from 'lucide-react';
import { WorkflowNodeData } from '../../types/reactflow';
import { Trigger } from '../../types/trigger';
import { Action } from '../../types/action';
import { ServiceIcon } from '../ServiceIcon';
import { __ } from '@/lib/i18n';

interface ConfigPanelHeaderNode {
  id: string;
  type: 'trigger' | 'action' | 'operator';
  name: string;
  status: WorkflowNodeData['status'];
  appService?: string;
}

interface ConfigPanelHeaderProps {
  node: ConfigPanelHeaderNode;
  currentTrigger: Trigger | undefined;
  currentAction: Action | undefined;
  isLoadingTriggers: boolean;
  handleClose: () => void;
  onDelete?: (nodeId: string) => void;
}

/**
 * Header for the ConfigPanel showing node icon, name, description,
 * and close/delete buttons.
 */
export function ConfigPanelHeader({
  node,
  currentTrigger,
  currentAction,
  isLoadingTriggers,
  handleClose,
  onDelete,
}: ConfigPanelHeaderProps) {
  return (
    <div className="border-b border-slate-100 px-6 py-5 flex items-start justify-between">
      <div className="flex items-start gap-3 flex-1 min-w-0">
        {node.type === 'trigger' && isLoadingTriggers ? (
          <>
            <div className="flex-shrink-0 mt-0.5 w-[22px] h-[22px] rounded bg-slate-100 animate-pulse" />
            <div className="flex-1 min-w-0 space-y-1.5">
              <div className="h-5 w-32 bg-slate-100 rounded animate-pulse" />
              <div className="h-4 w-48 bg-slate-50 rounded animate-pulse" />
            </div>
          </>
        ) : (
          <>
            <div className="flex-shrink-0 mt-0.5">
              <ServiceIcon
                service={
                  (node.type === 'trigger'
                    ? currentTrigger?.integration || node.appService
                    : currentAction?.integration || node.appService) || 'wordpress'
                }
                size={22}
              />
            </div>
            <div className="flex-1 min-w-0 space-y-0.5">
              <h3 className="text-[15px] font-semibold text-slate-900 tracking-tight truncate">
                {node.type === 'trigger'
                  ? currentTrigger?.label || node.name
                  : currentAction?.label || node.name}
              </h3>
              {(node.type === 'trigger'
                ? currentTrigger?.description
                : currentAction?.description) && (
                <p className="text-[13px] text-slate-500 line-clamp-2">
                  {node.type === 'trigger'
                    ? currentTrigger?.description
                    : currentAction?.description}
                </p>
              )}
            </div>
          </>
        )}
      </div>
      <div className="flex items-center gap-1 flex-shrink-0 ml-2">
        {onDelete && (
          <button
            onClick={() => onDelete(node.id)}
            className="h-8 w-8 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 hover:bg-rose-50 transition-colors duration-150"
            title={__('Delete node')}
          >
            <Trash2 className="w-4 h-4" />
          </button>
        )}
        <button
          onClick={handleClose}
          aria-label="Close"
          className="h-8 w-8 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors duration-150"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}