import { ReactNode } from 'react';
import { Button, Typography, Space } from 'antd';
import {
  InboxOutlined,
  FileSearchOutlined,
  PlusOutlined,
  FilterOutlined,
  BankOutlined,
  FileTextOutlined,
  UserOutlined,
  FileDoneOutlined,
  FileExclamationOutlined,
} from '@ant-design/icons';
import { spacing, typography, grays } from '@/styles/designTokens';

const { Text, Paragraph } = Typography;

export type EmptyStateVariant =
  | 'default'
  | 'search'
  | 'filter'
  | 'no-data'
  | 'transactions'
  | 'documents'
  | 'accounts'
  | 'customers'
  | 'invoices'
  | 'creditNotes';

export interface EmptyStateProps {
  /** Variant determines the icon and default messaging */
  variant?: EmptyStateVariant;
  /** Custom icon override */
  icon?: ReactNode;
  /** Main title text */
  title?: string;
  /** Description text */
  description?: string;
  /** Primary action button */
  primaryAction?: {
    label: string;
    onClick: () => void;
    icon?: ReactNode;
  };
  /** Secondary action button */
  secondaryAction?: {
    label: string;
    onClick: () => void;
  };
  /** Compact mode for use in smaller containers */
  compact?: boolean;
  /** Custom content to render instead of default */
  children?: ReactNode;
}

const variantConfig: Record<
  EmptyStateVariant,
  {
    icon: ReactNode;
    title: string;
    description: string;
  }
> = {
  default: {
    icon: <InboxOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen data',
    description: 'Der er ingen data at vise.',
  },
  search: {
    icon: <FileSearchOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen resultater',
    description: 'Prøv at ændre dine søgekriterier.',
  },
  filter: {
    icon: <FilterOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen resultater',
    description: 'Ingen poster matcher de valgte filtre.',
  },
  'no-data': {
    icon: <InboxOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Kom i gang',
    description: 'Start med at oprette din første post.',
  },
  transactions: {
    icon: <BankOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen transaktioner',
    description: 'Der er ingen transaktioner i den valgte periode.',
  },
  documents: {
    icon: <FileTextOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen dokumenter',
    description: 'Der er ingen dokumenter at vise.',
  },
  accounts: {
    icon: <BankOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen konti',
    description: 'Der er ingen konti oprettet endnu.',
  },
  customers: {
    icon: <UserOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen kunder',
    description: 'Der er ingen kunder oprettet endnu.',
  },
  invoices: {
    icon: <FileDoneOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen fakturaer',
    description: 'Der er ingen fakturaer oprettet endnu.',
  },
  creditNotes: {
    icon: <FileExclamationOutlined style={{ fontSize: 48, color: grays.gray5 }} />,
    title: 'Ingen kreditnotaer',
    description: 'Der er ingen kreditnotaer oprettet endnu.',
  },
};

/**
 * A consistent empty state component for use throughout the application.
 *
 * @example
 * <EmptyState variant="search" />
 *
 * @example
 * <EmptyState
 *   variant="no-data"
 *   title="Ingen fakturaer"
 *   description="Du har ikke oprettet nogen fakturaer endnu."
 *   primaryAction={{
 *     label: 'Opret faktura',
 *     onClick: () => setShowModal(true),
 *     icon: <PlusOutlined />
 *   }}
 * />
 */
export function EmptyState({
  variant = 'default',
  icon,
  title,
  description,
  primaryAction,
  secondaryAction,
  compact = false,
  children,
}: EmptyStateProps) {
  const config = variantConfig[variant];

  const containerStyle: React.CSSProperties = {
    padding: compact ? spacing.lg : spacing.xl,
    textAlign: 'center',
  };

  const iconStyle: React.CSSProperties = {
    marginBottom: compact ? spacing.md : spacing.lg,
  };

  if (children) {
    return <div style={containerStyle}>{children}</div>;
  }

  return (
    <div style={containerStyle}>
      <div style={iconStyle}>{icon || config.icon}</div>

      <Text
        strong
        style={{
          display: 'block',
          fontSize: compact ? typography.body.fontSize : typography.h3.fontSize,
          marginBottom: spacing.xs,
        }}
      >
        {title || config.title}
      </Text>

      <Paragraph
        type="secondary"
        style={{
          fontSize: compact ? typography.caption.fontSize : typography.body.fontSize,
          marginBottom: primaryAction || secondaryAction ? spacing.lg : 0,
        }}
      >
        {description || config.description}
      </Paragraph>

      {(primaryAction || secondaryAction) && (
        <Space>
          {primaryAction && (
            <Button
              type="primary"
              icon={primaryAction.icon || <PlusOutlined />}
              onClick={primaryAction.onClick}
            >
              {primaryAction.label}
            </Button>
          )}
          {secondaryAction && (
            <Button onClick={secondaryAction.onClick}>{secondaryAction.label}</Button>
          )}
        </Space>
      )}
    </div>
  );
}

/**
 * Compact empty state for use in tables and small containers
 */
export function TableEmptyState({
  searchTerm,
  onClear,
}: {
  searchTerm?: string;
  onClear?: () => void;
}) {
  if (searchTerm) {
    return (
      <EmptyState
        variant="search"
        compact
        title={`Ingen resultater for "${searchTerm}"`}
        secondaryAction={onClear ? { label: 'Ryd søgning', onClick: onClear } : undefined}
      />
    );
  }

  return <EmptyState variant="no-data" compact />;
}

/**
 * Empty state specifically for filtered views
 */
export function FilterEmptyState({ onClearFilters }: { onClearFilters?: () => void }) {
  return (
    <EmptyState
      variant="filter"
      compact
      secondaryAction={onClearFilters ? { label: 'Ryd filtre', onClick: onClearFilters } : undefined}
    />
  );
}

export default EmptyState;
