/**
 * 알림 팝업 표시 방식 미니 아이콘 (위치 + 배치)
 */
import React from 'react';
import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';

interface Props {
  position: TradeAlertPopupPosition;
  layout: TradeAlertPopupLayout;
  size?: number;
  className?: string;
}

/** 화면 프레임 안 카드 배치를 그린 24×18 미니 프리뷰 */
const ICON_H = 18;

function slotOrigin(
  position: TradeAlertPopupPosition,
  cols: number,
  rows: number,
): { x: number; y: number } {
  const blockW = cols === 1 ? 5 : cols === 3 ? 9.4 : 6.2;
  const blockH = rows === 1 ? 3.2 : rows === 3 ? 10.2 : 6.2;

  switch (position) {
    case 'left':
      return { x: 2, y: (ICON_H - blockH) / 2 };
    case 'bottom':
      return { x: (24 - blockW) / 2, y: ICON_H - blockH - 1.5 };
    case 'right':
    default:
      return { x: 24 - blockW - 2, y: (ICON_H - blockH) / 2 };
  }
}

export const TradeAlertPopupModeIcon: React.FC<Props> = ({
  position,
  layout,
  size = 22,
  className,
}) => {
  const w = 24;
  const h = ICON_H;
  const cards: React.ReactNode[] = [];

  const card = (x: number, y: number, cw: number, ch: number, key: string) => (
    <rect
      key={key}
      x={x}
      y={y}
      width={cw}
      height={ch}
      rx={1}
      fill="currentColor"
      opacity={0.85}
    />
  );

  if (layout === 'single') {
    const slots = slotOrigin(position, 1, 1);
    cards.push(card(slots.x, slots.y, 5, 4, 's'));
  } else if (layout === 'strip') {
    const o = slotOrigin(position, 3, 1);
    for (let i = 0; i < 3; i++) {
      cards.push(card(o.x + i * 3.2, o.y, 2.6, 3.2, `h${i}`));
    }
  } else if (layout === 'grid') {
    const o = slotOrigin(position, 2, 2);
    for (let r = 0; r < 2; r++) {
      for (let c = 0; c < 2; c++) {
        cards.push(card(o.x + c * 3.2, o.y + r * 3.4, 2.6, 2.8, `g${r}${c}`));
      }
    }
  } else {
    // stack
    const o = slotOrigin(position, 1, 3);
    for (let i = 0; i < 3; i++) {
      cards.push(card(o.x, o.y + i * 3.4, 5, 2.8, `v${i}`));
    }
  }

  return (
    <svg
      width={size}
      height={Math.round(size * (h / w))}
      viewBox={`0 0 ${w} ${h}`}
      className={className}
      aria-hidden
    >
      <rect
        x={0.5}
        y={0.5}
        width={w - 1}
        height={h - 1}
        rx={2}
        fill="none"
        stroke="currentColor"
        strokeWidth={1}
        opacity={0.45}
      />
      {cards}
    </svg>
  );
};

export default TradeAlertPopupModeIcon;