// Tile data + Tile component. Uses /tiles/*.svg.
// Mahjong has 34 unique tiles × 4 copies = 136 + 8 bonus flowers/seasons.

const TILES = {
  wan: [  // 万 — Characters / Cracks / Myriads
    { id: 'wan-1', num: 1, zh: '一万', en: 'One of Characters' },
    { id: 'wan-2', num: 2, zh: '二万', en: 'Two of Characters' },
    { id: 'wan-3', num: 3, zh: '三万', en: 'Three of Characters' },
    { id: 'wan-4', num: 4, zh: '四万', en: 'Four of Characters' },
    { id: 'wan-5', num: 5, zh: '五万', en: 'Five of Characters' },
    { id: 'wan-6', num: 6, zh: '六万', en: 'Six of Characters' },
    { id: 'wan-7', num: 7, zh: '七万', en: 'Seven of Characters' },
    { id: 'wan-8', num: 8, zh: '八万', en: 'Eight of Characters' },
    { id: 'wan-9', num: 9, zh: '九万', en: 'Nine of Characters' },
  ],
  tiao: [  // 条 — Bamboo / Sticks
    { id: 'tiao-1', num: 1, zh: '一条', en: 'One of Bamboo' },
    { id: 'tiao-2', num: 2, zh: '二条', en: 'Two of Bamboo' },
    { id: 'tiao-3', num: 3, zh: '三条', en: 'Three of Bamboo' },
    { id: 'tiao-4', num: 4, zh: '四条', en: 'Four of Bamboo' },
    { id: 'tiao-5', num: 5, zh: '五条', en: 'Five of Bamboo' },
    { id: 'tiao-6', num: 6, zh: '六条', en: 'Six of Bamboo' },
    { id: 'tiao-7', num: 7, zh: '七条', en: 'Seven of Bamboo' },
    { id: 'tiao-8', num: 8, zh: '八条', en: 'Eight of Bamboo' },
    { id: 'tiao-9', num: 9, zh: '九条', en: 'Nine of Bamboo' },
  ],
  bing: [  // 饼 — Dots / Circles / Coins
    { id: 'bing-1', num: 1, zh: '一饼', en: 'One of Dots' },
    { id: 'bing-2', num: 2, zh: '二饼', en: 'Two of Dots' },
    { id: 'bing-3', num: 3, zh: '三饼', en: 'Three of Dots' },
    { id: 'bing-4', num: 4, zh: '四饼', en: 'Four of Dots' },
    { id: 'bing-5', num: 5, zh: '五饼', en: 'Five of Dots' },
    { id: 'bing-6', num: 6, zh: '六饼', en: 'Six of Dots' },
    { id: 'bing-7', num: 7, zh: '七饼', en: 'Seven of Dots' },
    { id: 'bing-8', num: 8, zh: '八饼', en: 'Eight of Dots' },
    { id: 'bing-9', num: 9, zh: '九饼', en: 'Nine of Dots' },
  ],
  wind: [
    { id: 'east', zh: '东', en: 'East Wind' },
    { id: 'south', zh: '南', en: 'South Wind' },
    { id: 'west', zh: '西', en: 'West Wind' },
    { id: 'north', zh: '北', en: 'North Wind' },
  ],
  dragon: [
    { id: 'red', zh: '中', en: 'Red Dragon' },
    { id: 'green', zh: '發', en: 'Green Dragon' },
    { id: 'white', zh: '白', en: 'White Dragon' },
  ],
};

// Flower & season bonus tiles — Taiwan variant only
const FLOWER_TILES = {
  flower: [
    { id: 'mei', num: 1, zh: '梅', en: 'Plum Blossom' },
    { id: 'lan', num: 2, zh: '蘭', en: 'Orchid' },
    { id: 'ju',  num: 3, zh: '菊', en: 'Chrysanthemum' },
    { id: 'zhu', num: 4, zh: '竹', en: 'Bamboo Shoot' },
  ],
  season: [
    { id: 'spring', num: 1, zh: '春', en: 'Spring' },
    { id: 'summer', num: 2, zh: '夏', en: 'Summer' },
    { id: 'autumn', num: 3, zh: '秋', en: 'Autumn' },
    { id: 'winter', num: 4, zh: '冬', en: 'Winter' },
  ],
};

const FLOWER_META = {
  flower: { label: 'Flowers', sub: '花 · Huā', desc: 'Four flower tiles. Each player\'s seat number has a matching flower — drawing your own flower is worth 1 台 bonus.' },
  season: { label: 'Seasons', sub: '季 · Jì', desc: 'Four season tiles. Same matching rule as flowers — your seat number matches one season for a 1 台 bonus.' },
};

const SUIT_META = {
  wan: { label: 'Characters', sub: '万 · Wàn', desc: 'Numbered 1–9. The character 万 means "ten thousand."' },
  tiao: { label: 'Bamboo', sub: '条 · Tiáo', desc: 'Numbered 1–9. Sticks of bamboo. The 1-bamboo is traditionally drawn as a bird.' },
  bing: { label: 'Dots', sub: '饼 · Bǐng', desc: 'Numbered 1–9. Circles represent coins, one of the three original suits.' },
  wind: { label: 'Winds', sub: '风 · Fēng', desc: 'Four winds — East, South, West, North. Honor tiles.' },
  dragon: { label: 'Dragons', sub: '箭 · Jiàn', desc: 'Three dragons — Red (中), Green (發), White (板). Honor tiles.' },
};

// Tile visual — wraps the SVG in a "physical" container with shadow + lift.
function Tile({ id, size = 'md', selected, dimmed, onClick, onMouseEnter, onMouseLeave, style, face = true, discard = false }) {
  const dims = {
    xs: { w: 32, h: 41 },
    sm: { w: 44, h: 56 },
    md: { w: 60, h: 77 },
    lg: { w: 78, h: 100 },
    xl: { w: 100, h: 128 },
  }[size];

  const interactive = !!onClick;
  const [hovered, setHovered] = React.useState(false);
  const lifted = selected || hovered;

  return (
    <div
      className={`mj-tile mj-tile-${size} ${dimmed ? 'is-dimmed' : ''}`}
      data-size={size}
      onClick={onClick}
      onMouseEnter={(e) => { setHovered(true); onMouseEnter && onMouseEnter(e); }}
      onMouseLeave={(e) => { setHovered(false); onMouseLeave && onMouseLeave(e); }}
      style={{
        '--tile-w': dims.w + 'px',
        '--tile-h': dims.h + 'px',
        width: 'var(--tile-w)',
        height: 'calc(var(--tile-h) + 6px)',
        position: 'relative',
        cursor: interactive ? 'pointer' : 'default',
        transition: 'filter 180ms',
        filter: dimmed ? 'grayscale(0.7) opacity(0.35)' : 'none',
        flexShrink: 0,
        ...style,
      }}
    >
      {/* back/bottom of tile — bone shadow layer to suggest thickness (stays put on hover) */}
      <div style={{
        position: 'absolute', inset: 0, top: 4,
        borderRadius: 7,
        background: discard ? '#d6cfc0' : '#e8dfc9',
        boxShadow: lifted
          ? '0 10px 20px -4px rgba(0,40,0,0.3)'
          : '0 3px 6px -1px rgba(0,30,0,0.2), 0 1px 2px rgba(0,0,0,0.1)',
        transition: 'background 180ms, box-shadow 180ms',
      }} />
      {/* face — lifts up on hover, revealing the bottom/sides */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        height: 'var(--tile-h)',
        borderRadius: 7,
        background: '#fdfbf2',
        overflow: 'hidden',
        boxShadow: selected ? '0 0 0 1.5px #006C00' : 'none',
        transform: interactive && lifted ? 'translateY(-3px)' : 'none',
        transition: 'transform 180ms cubic-bezier(.2,.7,.3,1), box-shadow 180ms',
      }}>
        {face ? (
          <img
            src={`tiles/${id}.svg`}
            alt={id}
            draggable={false}
            style={{ width: '100%', height: '100%', display: 'block', pointerEvents: 'none' }}
          />
        ) : (
          <div style={{
            width: '100%', height: '100%',
            background: 'linear-gradient(135deg, #1a6a1e, #0c4a15)',
            backgroundImage: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 6px, transparent 6px, transparent 12px)',
            border: '2px solid #003500',
            borderRadius: 6,
          }} />
        )}
      </div>
    </div>
  );
}

// A meld (pung / chow / kong / pair) — tiles grouped visually.
function Meld({ tiles, size = 'md', label, highlighted, onTileClick, rotated }) {
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <div style={{
        display: 'flex',
        gap: 2,
        padding: highlighted ? '10px 12px' : '0',
        background: highlighted ? 'rgba(127,238,100,0.08)' : 'transparent',
        borderRadius: 10,
        transition: 'all 200ms',
      }}>
        {tiles.map((t, i) => (
          <div key={i} style={{ transform: rotated && i === rotated ? 'rotate(90deg)' : 'none' }}>
            <Tile id={t} size={size} onClick={onTileClick ? () => onTileClick(i) : undefined} />
          </div>
        ))}
      </div>
      {label && (
        <div style={{
          fontSize: 12,
          letterSpacing: 0.6,
          textTransform: 'uppercase',
          color: 'var(--ink-muted)',
          fontWeight: 500,
        }}>{label}</div>
      )}
    </div>
  );
}

Object.assign(window, { TILES, SUIT_META, FLOWER_TILES, FLOWER_META, Tile, Meld });