import { ActionRow, Badge, Button } from '../../core';
import { useT } from '../../../hooks/useT';
import type { AsukaView } from './types';

export type ViewCardProps = {
  view: AsukaView;
  active?: boolean;
  canEdit?: boolean;
  canDelete?: boolean;
  onSelect?: (viewId: string) => void;
  onEdit?: (viewId: string) => void;
  onDelete?: (viewId: string) => void;
};

export function ViewCard({
  view,
  active,
  canEdit = false,
  canDelete = false,
  onSelect,
  onEdit,
  onDelete,
}: ViewCardProps) {
  const t = useT();
  const engine = String((view as any).engine ?? 'fabric').trim().toLowerCase() === '3d' ? '3d' : 'fabric';
  const engineLabel = engine === '3d' ? t('views.engine.badge3d', '3D') : t('views.engine.badge2d', '2D');
  const physicalSize = view.physicalSize;
  const calibrated = Number(physicalSize?.width) > 0 && Number(physicalSize?.height) > 0;

  return (
    <div
      className={
        'ask-view-card ask-flex ask-flex-col ask-gap-4 ask-rounded-[20px] ask-border ask-p-3.5 ' +
        (active
          ? 'ask-view-card--active ask-border-primary/40'
          : 'ask-border-borderSubtle ask-bg-surfaceAlt')
      }
    >
      <div className="ask-flex ask-flex-wrap ask-items-start ask-justify-between ask-gap-3">
        <div className="ask-min-w-0 ask-flex-1">
          <div className="ask-flex ask-flex-wrap ask-items-center ask-gap-2">
            <div className="ask-truncate ask-text-sm ask-font-semibold ask-text-textMain">
              {view.label ?? view.name ?? view.id}
            </div>
            {active ? <Badge variant="primary">{t('ui.active', 'Active')}</Badge> : null}
            <Badge size="sm" variant={engine === '3d' ? 'primary' : 'surface'}>{engineLabel}</Badge>
          </div>

          <div className="ask-mt-2 ask-flex ask-flex-wrap ask-items-center ask-gap-2 ask-text-[11px] ask-text-textMuted">
            <Badge size="sm" variant="surface">
              {Math.round(view.width ?? 0)} × {Math.round(view.height ?? 0)} px
            </Badge>
            <Badge size="sm" variant="surface">
              {Math.round(view.dpi ?? 96)} dpi
            </Badge>
            <Badge size="sm" variant="surface" className="ask-uppercase">
              {String(view.unit ?? 'px').toUpperCase()}
            </Badge>
            {calibrated ? (
              <Badge size="sm" variant="primary">
                {Number(Number(physicalSize?.width).toFixed(2))} x {Number(Number(physicalSize?.height).toFixed(2))} {physicalSize?.unit}
              </Badge>
            ) : null}
          </div>
        </div>
      </div>

      <ActionRow align="start" className="ask-border-t ask-border-borderSubtle/80 ask-pt-3">
        {!active ? (
          <Button size="sm" variant="primary" onClick={() => onSelect?.(view.id)}>
            {t('ui.switch_view', 'Switch view')}
          </Button>
        ) : null}
        {canEdit ? (
          <Button size="sm" variant="secondary" onClick={() => onEdit?.(view.id)}>
            {t('common.edit', 'Edit')}
          </Button>
        ) : null}
        {canDelete ? (
          <Button
            size="sm"
            variant="ghost"
            onClick={() => onDelete?.(view.id)}
            title={t('common.delete', 'Delete')}
          >
            {t('common.delete', 'Delete')}
          </Button>
        ) : null}
      </ActionRow>
    </div>
  );
}
