/**
 * 차트 칸 타이틀 드래그 시 DragOverlay에 표시하는 미리보기 카드
 */
import React from 'react';
import { Box, Typography } from '@mui/material';
import { ShowChart as ShowChartIcon, DragIndicator as DragIndicatorIcon } from '@mui/icons-material';
import type { StockInfo } from '../../stores/useDashboardStore';

export interface ChartDragOverlayPreviewProps {
  stock: StockInfo;
  width: number;
  height: number;
}

export const ChartDragOverlayPreview: React.FC<ChartDragOverlayPreviewProps> = ({ stock, width, height }) => {
  const maxW = typeof window !== 'undefined' ? Math.min(width, window.innerWidth - 24) : width;
  const maxH = typeof window !== 'undefined' ? Math.min(height, Math.round(window.innerHeight * 0.5)) : height;
  const w = Math.max(200, maxW);
  const h = Math.max(160, maxH);

  return (
    <Box
      sx={{
        width: w,
        height: h,
        borderRadius: 1,
        overflow: 'hidden',
        boxShadow: 12,
        border: '2px solid',
        borderColor: 'primary.main',
        bgcolor: 'background.paper',
        display: 'flex',
        flexDirection: 'column',
        pointerEvents: 'none',
        cursor: 'grabbing',
        opacity: 0.97,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
          px: 1,
          py: 0.5,
          flexShrink: 0,
          bgcolor: 'action.selected',
          borderBottom: '1px solid',
          borderColor: 'divider',
        }}
      >
        <DragIndicatorIcon sx={{ fontSize: 16, color: 'text.secondary', flexShrink: 0 }} />
        <Typography variant="caption" fontWeight="bold" noWrap sx={{ flex: 1, minWidth: 0 }}>
          {stock.koreanName}
        </Typography>
        <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>
          {stock.symbol}
        </Typography>
      </Box>
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'linear-gradient(180deg, #2a2e39 0%, #131722 55%, #0c0e12 100%)',
        }}
      >
        <ShowChartIcon sx={{ fontSize: Math.min(72, h * 0.22), color: 'grey.500', opacity: 0.45 }} />
      </Box>
    </Box>
  );
};
