import type { Preset } from '@cdx-ui/styles';
import { Box } from '@mui/material';

interface PresetPreviewProps {
  preset: Preset;
  isSelected: boolean;
}

// Converts a pixel value from the 151×85 design space to a cqw-based length
// that scales uniformly with the container width.
const q = (px: number) => `calc(${String(px)} * 100cqw / 151)`;

// Top-left corner only — card body and content panel share the same values.
const CORNER_RADIUS: Record<Preset, string> = {
  prestige: '0',
  poise: `${q(6)} 0 0 0`,
  pulse: `${q(16)} 0 0 0`,
};

// Left border of the content panel uses a blue tint for poise.
const PANEL_BORDER_COLOR: Record<Preset, string> = {
  prestige: '#E0E0E0',
  poise: '#DFE8F1',
  pulse: '#E0E0E0',
};

const SIDEBAR_RX: Record<Preset, string> = {
  prestige: '0',
  poise: q(3),
  pulse: q(6),
};

const TITLE_RX: Record<Preset, string> = {
  prestige: '0',
  poise: q(2.5),
  pulse: q(4),
};

const ROW_RX: Record<Preset, string> = {
  prestige: '0',
  poise: q(2.5),
  pulse: q(6),
};

// Box-shadow equivalents of the SVG filter0 (elevation 2) and filter1 (elevation 1),
// expressed in cqw so shadows scale with the container.
const ELEVATION_2 = [
  `0 ${q(3)} ${q(1)} ${q(-2)} rgba(0,0,0,0.2)`,
  `0 ${q(2)} ${q(2)} 0 rgba(0,0,0,0.14)`,
  `0 ${q(1)} ${q(5)} 0 rgba(0,0,0,0.12)`,
].join(', ');

const ELEVATION_1 = [
  `0 ${q(2)} ${q(1)} ${q(-1)} rgba(0,0,0,0.2)`,
  `0 ${q(1)} ${q(1)} 0 rgba(0,0,0,0.14)`,
  `0 ${q(1)} ${q(3)} 0 rgba(0,0,0,0.12)`,
].join(', ');

export function PresetPreview({ preset, isSelected: s }: PresetPreviewProps) {
  const pbc = PANEL_BORDER_COLOR[preset];
  const rx = CORNER_RADIUS[preset];

  return (
    <Box
      sx={{
        width: '100%',
        aspectRatio: '151 / 85',
        position: 'relative',
        overflow: 'hidden',
        containerType: 'inline-size',
      }}
    >
      {/*
       * Card body: inset q(5) from the container's left/top so the elevation shadow
       * is visible in that margin strip. Bleeds right to the container edge and
       * q(8) below (clipped by overflow:hidden).
       */}
      <Box
        sx={{
          position: 'absolute',
          left: q(5),
          top: q(5),
          right: 0,
          bottom: q(-8),
          bgcolor: 'white',
          borderRadius: rx,
          boxShadow: ELEVATION_2,
        }}
      />

      {/* Sidebar icon placeholders — three 18×18 blocks */}
      <Box
        sx={{
          position: 'absolute',
          left: q(15),
          top: q(15),
          width: q(18),
          height: q(18),
          borderRadius: SIDEBAR_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.2)' : '#E0E0E0',
        }}
      />
      <Box
        sx={{
          position: 'absolute',
          left: q(15),
          top: q(39),
          width: q(18),
          height: q(18),
          borderRadius: SIDEBAR_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.08)' : '#EEEEEE',
        }}
      />
      <Box
        sx={{
          position: 'absolute',
          left: q(15),
          top: q(63),
          width: q(18),
          height: q(18),
          borderRadius: SIDEBAR_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.04)' : '#F5F5F5',
        }}
      />

      {/*
       * Content panel: starts at (45, 15) in design space, bleeds right and below.
       * borderTop + borderLeft replicate the SVG inner-stroke mask; borderRadius
       * curves the top-left corner of those borders naturally.
       */}
      <Box
        sx={{
          position: 'absolute',
          left: q(45),
          top: q(15),
          right: 0,
          bottom: q(-8),
          bgcolor: 'white',
          borderRadius: rx,
          borderTop: `1px solid ${pbc}`,
          borderLeft: `1px solid ${pbc}`,
          boxShadow: ELEVATION_1,
        }}
      />

      {/* Content title placeholder */}
      <Box
        sx={{
          position: 'absolute',
          left: q(57),
          top: q(28),
          width: q(32),
          height: q(8),
          borderRadius: TITLE_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.12)' : '#F5F5F5',
        }}
      />

      {/* Content row placeholders */}
      <Box
        sx={{
          position: 'absolute',
          left: q(57),
          top: q(42),
          width: q(78),
          height: q(12),
          borderRadius: ROW_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.08)' : '#F5F5F5',
        }}
      />
      <Box
        sx={{
          position: 'absolute',
          left: q(57),
          top: q(58),
          width: q(78),
          height: q(12),
          borderRadius: ROW_RX[preset],
          bgcolor: s ? 'rgba(26,108,218,0.08)' : '#F5F5F5',
        }}
      />
    </Box>
  );
}