/* MoodSlider.jsx — じぶん湯 Today's Dial */
'use strict';

function MoodSlider() {
  const [energy, setEnergy]   = React.useState(50);  // 0-100
  const [warmth, setWarmth]   = React.useState(60);  // 0-100

  // Derived recommendations
  const temp     = Math.round(37 + (warmth / 100) * 4);  // 37~41
  const duration = Math.round(10 + (energy > 50 ? (100 - energy) / 100 : 1) * 15 + (warmth / 100) * 5);
  const herb     = energy < 30  ? 'よもぎ（深い回復）'
                 : energy < 60  ? 'クロモジ（ほどよい鎮静）'
                 : 'ヒノキ（爽快なリフレッシュ）';
  const tempNote = warmth < 30  ? 'ぬるめ — ゆっくり長めに'
                 : warmth < 70  ? '標準 — 心地よい温さ'
                 : '熱め — 短めで芯まで温める';

  const energyLabel = energy < 30 ? 'LOW · 低め' : energy < 70 ? 'MEDIUM · ふつう' : 'HIGH · 高め';
  const warmthLabel = warmth < 30 ? 'MILD · ぬるめ' : warmth < 70 ? 'WARM · 標準' : 'HOT · 熱め';

  const accentColor = warmth < 30 ? '#34486e' : warmth < 70 ? '#c4aa6c' : '#b4563a';

  const s = {
    wrap: {
      maxWidth: 720,
      margin: '0 auto',
    },
    dialGrid: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 32,
      marginBottom: 48,
    },
    dialBlock: {
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
    },
    dialLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
    },
    dialValue: (color) => ({
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 22,
      fontWeight: 500,
      color: color || '#1a1a1a',
      lineHeight: 1.2,
    }),
    sliderWrap: {
      position: 'relative',
      padding: '8px 0',
    },
    sliderTrack: {
      position: 'relative',
      height: 2,
      background: 'rgba(26,26,26,0.12)',
      borderRadius: 1,
    },
    sliderFill: (val, color) => ({
      position: 'absolute',
      left: 0,
      top: 0,
      height: '100%',
      width: `${val}%`,
      background: color || '#1a1a1a',
      borderRadius: 1,
      transition: 'width 0.1s',
    }),
    slider: {
      position: 'absolute',
      top: -8,
      left: 0,
      width: '100%',
      height: 18,
      opacity: 0,
      cursor: 'pointer',
      margin: 0,
    },
    thumb: (val, color) => ({
      position: 'absolute',
      top: -5,
      left: `calc(${val}% - 6px)`,
      width: 12,
      height: 12,
      borderRadius: '50%',
      background: color || '#1a1a1a',
      border: '2px solid #f4efe4',
      boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
      pointerEvents: 'none',
      transition: 'left 0.1s',
    }),
    resultCard: {
      border: '1px solid rgba(26,26,26,0.15)',
      padding: '36px 32px',
      background: 'rgba(255,255,255,0.5)',
    },
    resultHeader: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
      marginBottom: 24,
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    paramRow: {
      display: 'flex',
      gap: 0,
      borderTop: '1px solid rgba(26,26,26,0.1)',
      borderBottom: '1px solid rgba(26,26,26,0.1)',
      marginBottom: 24,
    },
    paramItem: {
      flex: 1,
      padding: '16px 0',
      textAlign: 'center',
      borderRight: '1px solid rgba(26,26,26,0.1)',
    },
    paramItemLast: {
      flex: 1,
      padding: '16px 0',
      textAlign: 'center',
    },
    paramNum: (color) => ({
      fontFamily: '"Cormorant Garamond", "Times New Roman", serif',
      fontSize: 36,
      fontWeight: 400,
      color: color,
      lineHeight: 1,
      display: 'block',
    }),
    paramUnit: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      color: '#8a857b',
      letterSpacing: '0.15em',
    },
    herbRow: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
    },
    herbDot: {
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: '#5c7a4e',
      flexShrink: 0,
    },
    herbText: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 14,
      color: '#1a1a1a',
    },
    herbLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      color: '#8a857b',
      letterSpacing: '0.12em',
      marginRight: 8,
    },
    noteText: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 11,
      color: '#8a857b',
      lineHeight: 1.7,
      marginTop: 12,
    },
    tickRow: {
      display: 'flex',
      justifyContent: 'space-between',
      marginTop: 6,
    },
    tick: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 8,
      color: 'rgba(26,26,26,0.3)',
      letterSpacing: '0.1em',
    },
  };

  const makeSlider = (value, setter, color, min, max) =>
    React.createElement('div', { style: s.sliderWrap },
      React.createElement('div', { style: s.sliderTrack },
        React.createElement('div', { style: s.sliderFill(value, color) }),
        React.createElement('div', { style: s.thumb(value, color) }),
        React.createElement('input', {
          type: 'range',
          min, max,
          value,
          style: s.slider,
          onChange: (e) => setter(Number(e.target.value)),
        })
      )
    );

  return React.createElement('div', { style: s.wrap },
    React.createElement('div', { style: s.dialGrid },
      // Energy dial
      React.createElement('div', { style: s.dialBlock },
        React.createElement('div', { style: s.dialLabel }, 'ENERGY · 今日の気力'),
        React.createElement('div', { style: s.dialValue('#5c7a4e') }, energyLabel),
        makeSlider(energy, setEnergy, '#5c7a4e', 0, 100),
        React.createElement('div', { style: s.tickRow },
          React.createElement('span', { style: s.tick }, 'LOW'),
          React.createElement('span', { style: s.tick }, 'HIGH')
        )
      ),
      // Warmth dial
      React.createElement('div', { style: s.dialBlock },
        React.createElement('div', { style: s.dialLabel }, 'WARMTH · 温めたい度'),
        React.createElement('div', { style: s.dialValue(accentColor) }, warmthLabel),
        makeSlider(warmth, setWarmth, accentColor, 0, 100),
        React.createElement('div', { style: s.tickRow },
          React.createElement('span', { style: s.tick }, 'MILD'),
          React.createElement('span', { style: s.tick }, 'HOT')
        )
      )
    ),

    // Result card
    React.createElement('div', { style: s.resultCard },
      React.createElement('div', { style: s.resultHeader },
        React.createElement('span', null, '— GUIDED PRESCRIPTION · 導かれた処方'),
        React.createElement('span', { style: { color: accentColor } }, `${energy < 30 ? '●' : energy < 70 ? '◎' : '○'} ${energy} / 100`)
      ),
      React.createElement('div', { style: s.paramRow },
        React.createElement('div', { style: s.paramItem },
          React.createElement('span', { style: s.paramNum(accentColor) }, temp),
          React.createElement('span', { style: s.paramUnit }, '°C · TEMP')
        ),
        React.createElement('div', { style: s.paramItem },
          React.createElement('span', { style: s.paramNum('#1a1a1a') }, duration),
          React.createElement('span', { style: s.paramUnit }, 'MIN · DURATION')
        ),
        React.createElement('div', { style: s.paramItemLast },
          React.createElement('span', { style: s.paramNum('#c4aa6c') }, warmth < 30 ? 'S' : warmth < 70 ? 'M' : 'L'),
          React.createElement('span', { style: s.paramUnit }, 'FLOWER AMOUNT')
        )
      ),
      React.createElement('div', { style: s.herbRow },
        React.createElement('span', { style: s.herbLabel }, 'HERB ·'),
        React.createElement('div', { style: s.herbDot }),
        React.createElement('span', { style: s.herbText }, herb)
      ),
      React.createElement('div', { style: s.noteText }, tempNote)
    )
  );
}

window.MoodSlider = MoodSlider;