import { ReactNode } from 'react';
import { DeploymentEvent } from './deployment';
import { PortfolioElement } from './portfolio';
import { ComponentType } from '@/src/components/builder/config/componentRegistry';
import { JSONContent } from '@tiptap/react';

export type ActionButton = {
  icon: ReactNode;
  text: string;
  onClick: () => void;
  disabled?: boolean;
  notificationCount?: number;
};

export interface ActionButtonsProps {
  actions: ActionButton[];
}

export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  text?: string;
  styling?: PortfolioElement['styling'];
}

export interface ButtonProps {
  text?: string;
  href?: string;
  variant?: 'solid' | 'outline' | 'ghost' | 'link';
  className?: string;
  openInNewTab?: boolean;
  fullWidth?: boolean;
  icon?: string;
  iconPosition?: 'left' | 'right';
  styling?: PortfolioElement['styling'];
  sectionId?: string;
}

export interface EditFormProps {
  props: PortfolioElement['props'];
  onPropChange: (
    key: string,
    value: string | PortfolioElement['styling'] | number | boolean | string[] | object[]
  ) => void;
  layout?: ComponentType;
}

export interface AlertModalProps {
  isOpen: boolean;
  onClose?: () => void;
  variant?: 'destructive' | 'info';
  onConfirm?: () => void;
  title: string;
  description: string;
  loading?: boolean;
  actionLabel?: string;
  cancelLabel?: string;
  children?: ReactNode;
}

export type KeyValuePair = {
  id?: string;
  key: string;
  value: string;
  isEditing?: boolean;
  tempValue?: string;
};

export interface KeyValueRepeaterProps {
  availableKeys?: { label: ReactNode; value: string }[];
  initialPairs?: KeyValuePair[];
  onChange?: (pairs: KeyValuePair[]) => void;
  keyPlaceholder?: string;
  valuePlaceholder?: string;
  className?: string;
  isSecret?: boolean;
}

export interface LayoutProps {
  className?: string;
  children?: React.ReactNode;
}

export interface LinkProps {
  text: string;
  href: string;
}

export interface PageLayoutProps {
  title: string;
  addButtonText?: string;
  onAddClick?: () => void;
  children: ReactNode;
  className?: string;
  backButton?: boolean;
}

export interface TableLayoutProps {
  title: string;
  buttonText?: string;
  onButtonClick?: () => void;
  searchQuery: string;
  onSearchChange: (value: string) => void;
  isLoading: boolean;
  isEmpty: boolean;
  emptyMessage?: string;
  children: React.ReactNode;
}

export interface Tab {
  value: string;
  label: string;
}

export interface TabsNavigationProps {
  tabs: Tab[];
  activeTab: string;
  setActiveTab: (value: string) => void;
  storageKey?: string;
  theme?: 'light' | 'dark';
}

export interface ImageProps {
  src?: string;
  alt?: string;
  aspectRatio?: string;
  styling?: PortfolioElement['styling'];
  sectionId?: string;
}

export interface TextProps {
  json?: JSONContent;
  id?: string;
  styling?: PortfolioElement['styling'];
  onPropChange?: (prop: string, value: PortfolioElement['props'][string]) => void;
  isInSection?: boolean;
  sectionId?: string;
}

export interface TerminalProps {
  logs: DeploymentEvent[];
  isActive?: boolean;
  maxHeight?: string;
  className?: string;
  loading?: boolean;
}

export interface WrapperProps {
  id?: string;
  className?: string;
  children?: React.ReactNode;
  customizeForm?: React.ReactNode;
  position?: 'top' | 'bottom';
  styling?: PortfolioElement['styling'];
  inline?: boolean;
  style?: React.CSSProperties;
}
