/**
 * 설정 화면 — 매매 알림 팝업 배치 미리보기
 */
import React from 'react';
import {
  type TradeAlertPopupLayout,
  type TradeAlertPopupPosition,
  tradeAlertPopupClassNames,
} from '../utils/tradeAlertPopupLayout';

interface Props {
  position: TradeAlertPopupPosition;
  layout: TradeAlertPopupLayout;
  gridCols: number;
  enabled?: boolean;
}

const MOCK_ITEMS = [
  { id: '1', side: 'BUY' as const,  title: 'KRW-BTC 매수',  price: '98,500,000' },
  { id: '2', side: 'SELL' as const, title: 'KRW-ETH 매도',  price: '4,620,000' },
  { id: '3', side: 'BUY' as const,  title: 'KRW-SOL 매수',  price: '245,000' },
  { id: '4', side: 'SELL' as const, title: 'KRW-XRP 매도', price: '890' },
];

const PreviewCard: React.FC<{ side: 'BUY' | 'SELL'; title: string; price: string; compact?: boolean }> = ({
  side, title, price, compact,
}) => (
  <div className={`tsn-card tsn-card--preview ${side === 'BUY' ? 'tsn-card--buy' : 'tsn-card--sell'}${compact ? ' tsn-card--compact' : ''}`}>
    <div className="tsn-card-header tsn-card-header--preview">
      <span className={`tsn-badge ${side === 'BUY' ? 'tsn-badge--buy' : 'tsn-badge--sell'}`}>{side}</span>
      <span className="tsn-card-title">{title}</span>
    </div>
    {!compact && (
      <div className="tsn-preview-body">
        <span>₩{price}</span>
      </div>
    )}
  </div>
);

export const TradeAlertPopupPreview: React.FC<Props> = ({
  position,
  layout,
  gridCols,
  enabled = true,
}) => {
  const { stack, cards } = tradeAlertPopupClassNames(position, layout);
  const visible = layout === 'single' ? MOCK_ITEMS.slice(0, 1) : MOCK_ITEMS.slice(0, layout === 'grid' ? gridCols * 2 : 3);
  const compact = layout === 'grid' || layout === 'strip';

  return (
    <div className={`stg-alert-preview${enabled ? '' : ' stg-alert-preview--off'}`}>
      <div className="stg-alert-preview-frame">
        <div className="stg-alert-preview-screen">
          <span className="stg-alert-preview-label">화면</span>
          <div
            className={`${stack} tsn-stack--preview`}
            style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
          >
            <div
              className={cards}
              style={layout === 'grid' ? { ['--tsn-grid-cols' as string]: gridCols } : undefined}
            >
              {visible.map(item => (
                <PreviewCard
                  key={item.id}
                  side={item.side}
                  title={item.title}
                  price={item.price}
                  compact={compact}
                />
              ))}
            </div>
            {layout === 'single' && MOCK_ITEMS.length > 1 && (
              <span className="tsn-single-more">+{MOCK_ITEMS.length - 1}건</span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default TradeAlertPopupPreview;