import type { FunctionalComponent } from 'preact';

import type { AsukaElement } from '../../../types/elements';
import { ActionRow } from '../../core';
import { AsukaIcon } from '../../core/AsukaIcon';
import { IconButton } from '../../core/IconButton';
import { cn } from '../../core/cn';
import { ElementMetaBadges } from './ElementMetaBadges';
import { ElementPreview } from './ElementPreview';

type ElementCardProps = {
  t: (key: string, fallback?: any) => string;
  element: AsukaElement;
  count?: number;
  canEdit?: boolean;
  canDelete?: boolean;
  compact?: boolean;
  statusLabel?: string;
  statusBadge?: string;
  isActiveProduct?: boolean;
  canSelectProduct?: boolean;
  onSelectProduct?: (element: AsukaElement) => void;
  onOpen: (element: AsukaElement) => void;
  onEdit?: (element: AsukaElement) => void;
  onDelete?: (element: AsukaElement) => void;
};

export const getElementDisplayName = (element: any, fallback: string) => String(element?.name ?? fallback);

export const ElementCard: FunctionalComponent<ElementCardProps> = ({
  t,
  element,
  count = 0,
  canEdit,
  canDelete,
  compact,
  statusLabel,
  statusBadge,
  isActiveProduct,
  canSelectProduct,
  onSelectProduct,
  onOpen,
  onEdit,
  onDelete,
}) => {
  const name = getElementDisplayName(element, t('elements.unnamed', 'Element'));
  const hasSecondaryActions = Boolean(canSelectProduct || canEdit || canDelete);

  return (
    <div
      className={cn(
        'ask-group ask-flex ask-items-center ask-gap-2 ask-rounded-[16px] ask-border ask-border-borderSubtle/75 ask-bg-surface ask-p-2.5 ask-transition',
        'hover:ask-border-primary/20 hover:ask-shadow-[0_8px_20px_rgba(15,23,42,0.05)]',
        isActiveProduct && 'ask-border-primary/25 ask-bg-primary/5',
        compact && 'ask-p-2',
      )}
    >
      <button
        type="button"
        className="ask-elements-module__card-main ask-flex ask-min-w-0 ask-flex-1 ask-items-center ask-gap-3 ask-text-left"
        onClick={() => onOpen(element)}
      >
        <ElementPreview src={(element as any)?.image || (element as any)?.icon} size={compact ? 'sm' : 'md'} className="ask-border-transparent ask-bg-primary/7" />
        <span className="ask-elements-module__card-text ask-min-w-0 ask-flex-1">
          <span className="ask-block ask-truncate ask-text-[13px] ask-font-semibold ask-text-textMain">{name}</span>
          <ElementMetaBadges t={t} count={count} statusLabel={statusLabel} statusBadge={statusBadge} className="ask-mt-0.5" />
        </span>
        {!hasSecondaryActions ? (
          <span className="ask-flex ask-h-7 ask-w-7 ask-shrink-0 ask-items-center ask-justify-center ask-rounded-full ask-bg-surfaceAlt ask-text-[15px] ask-text-textMuted ask-transition group-hover:ask-translate-x-0.5" aria-hidden>›</span>
        ) : null}
      </button>

      {hasSecondaryActions ? (
        <ActionRow compact wrap={false} className="ask-elements-module__card-actions ask-shrink-0 ask-gap-1">
          {canSelectProduct ? (
            <IconButton
              type="button"
              variant="plain"
              onClick={() => onSelectProduct?.(element)}
              title={t('elements.selectElement', 'Select element')}
              aria-label={t('elements.selectElement', 'Select element')}
              className="ask-border ask-border-borderSubtle ask-bg-surfaceAlt ask-text-textMuted hover:ask-bg-surface"
            >
              <AsukaIcon name="pin" size={14} />
            </IconButton>
          ) : null}
          {canEdit ? (
            <IconButton
              type="button"
              variant="plain"
              onClick={() => onEdit?.(element)}
              title={t('common.edit', 'Edit')}
              aria-label={t('common.edit', 'Edit')}
              className="ask-border ask-border-borderSubtle ask-bg-surfaceAlt ask-text-textMuted hover:ask-bg-surface"
            >
              <AsukaIcon name="edit-text" size={14} />
            </IconButton>
          ) : null}
          {canDelete ? (
            <IconButton
              type="button"
              variant="plain"
              onClick={() => onDelete?.(element)}
              title={t('common.delete', 'Delete')}
              aria-label={t('common.delete', 'Delete')}
              className="ask-border ask-border-borderSubtle ask-bg-surfaceAlt ask-text-textMuted hover:ask-bg-surface"
            >
              <AsukaIcon name="trash" size={14} />
            </IconButton>
          ) : null}
        </ActionRow>
      ) : null}
    </div>
  );
};
