/* Diagnosis.jsx — じぶん湯 体調診断 */
'use strict';

const DX_QUESTIONS = [
  {
    id: 'energy',
    q: '今日の気力は？',
    en: 'Energy Level',
    options: [
      { value: 'low',    label: '低い',    icon: '○', hint: 'くたびれぎみ' },
      { value: 'medium', label: 'ふつう',  icon: '◎', hint: 'まあまあ' },
      { value: 'high',   label: '高い',    icon: '●', hint: 'エネルギッシュ' },
    ],
  },
  {
    id: 'body',
    q: '体のどこが気になりますか？',
    en: 'Body Focus',
    options: [
      { value: 'cold',    label: '冷え',    icon: '❄', hint: '末端冷え性気味' },
      { value: 'stiff',   label: 'こわばり', icon: '⊞', hint: '肩・首まわり' },
      { value: 'skin',    label: '肌荒れ',  icon: '◇', hint: 'かさつき・乾燥' },
      { value: 'fatigue', label: '疲れ',    icon: '◈', hint: '全身だるさ' },
    ],
  },
  {
    id: 'mood',
    q: '今夜求めるのは？',
    en: 'Tonight\'s Wish',
    options: [
      { value: 'relax',   label: 'ほぐれたい',   icon: '~', hint: '頭も体も' },
      { value: 'refresh', label: 'すっきりしたい', icon: '↑', hint: '気分転換' },
      { value: 'sleep',   label: '眠りたい',    icon: '◐', hint: 'ぐっすり眠る' },
    ],
  },
];

const RECIPES = {
  'low_cold_relax':    { name: 'ぬく湯・よもぎ処方',        solid: '温浴固形',   liquid: 'ローズマリー',  flower: '多め',     herb: 'よもぎ',   temp: 40, min: 20, color: '#34486e' },
  'low_cold_refresh':  { name: '炭酸+柚子処方',             solid: '炭酸タブレット', liquid: '柚子液',     flower: '少量',     herb: 'ヒノキ',   temp: 39, min: 15, color: '#b4563a' },
  'low_cold_sleep':    { name: '深夜の温め処方',             solid: '温浴固形',   liquid: 'ラベンダー', flower: '多め',     herb: 'よもぎ',   temp: 40, min: 25, color: '#34486e' },
  'low_stiff_relax':   { name: '肩こり解消処方',             solid: '薬用固形',   liquid: 'ユーカリ',   flower: '中量',     herb: 'ヨモギ+クロモジ', temp: 41, min: 20, color: '#5c7a4e' },
  'low_stiff_refresh': { name: '清涼ハーブ処方',             solid: '炭酸タブレット', liquid: 'ペパーミント', flower: '少量',   herb: 'クロモジ', temp: 38, min: 15, color: '#b4563a' },
  'low_stiff_sleep':   { name: 'まどろみ処方',               solid: '温浴固形',   liquid: 'ラベンダー', flower: '多め',     herb: 'スギナ',   temp: 40, min: 20, color: '#34486e' },
  'low_skin_relax':    { name: '保湿・巡り処方',             solid: 'シアバター固形', liquid: '桃の葉',   flower: '中量',     herb: 'ドクダミ', temp: 39, min: 20, color: '#c4aa6c' },
  'low_skin_refresh':  { name: '柑橘保湿処方',               solid: 'シアバター固形', liquid: '柚子液',   flower: '少量',     herb: 'ヒノキ',   temp: 38, min: 15, color: '#c4aa6c' },
  'low_skin_sleep':    { name: '夜の保湿処方',               solid: 'シアバター固形', liquid: '桃の葉',   flower: '多め',     herb: 'ドクダミ', temp: 39, min: 20, color: '#c4aa6c' },
  'low_fatigue_relax': { name: '全身回復処方',               solid: '薬用固形',   liquid: 'ローズマリー', flower: '多め',   herb: 'よもぎ',   temp: 40, min: 25, color: '#5c7a4e' },
  'low_fatigue_refresh': { name: '活力回復処方',             solid: '炭酸タブレット', liquid: 'ユーカリ', flower: '少量',   herb: 'ヒノキ',   temp: 39, min: 15, color: '#b4563a' },
  'low_fatigue_sleep': { name: '疲労解消・睡眠処方',         solid: '温浴固形',   liquid: 'ラベンダー', flower: '多め',     herb: 'スギナ',   temp: 40, min: 20, color: '#34486e' },

  'medium_cold_relax':   { name: 'やわらか温め処方',         solid: '温浴固形',   liquid: '柚子液',    flower: '中量',     herb: 'よもぎ',   temp: 40, min: 15, color: '#c4aa6c' },
  'medium_cold_refresh': { name: '柑橘目覚め処方',           solid: '炭酸タブレット', liquid: '柚子液',  flower: '少量',     herb: 'ヒノキ',   temp: 38, min: 12, color: '#b4563a' },
  'medium_cold_sleep':   { name: 'ほんのり処方',             solid: '温浴固形',   liquid: 'ラベンダー', flower: '中量',   herb: 'スギナ',   temp: 39, min: 18, color: '#34486e' },
  'medium_stiff_relax':  { name: 'ふわりほぐし処方',         solid: '薬用固形',   liquid: 'ユーカリ',  flower: '中量',     herb: 'クロモジ', temp: 40, min: 18, color: '#5c7a4e' },
  'medium_stiff_refresh': { name: 'クールダウン処方',        solid: '炭酸タブレット', liquid: 'ペパーミント', flower: '少量', herb: 'クロモジ', temp: 38, min: 12, color: '#b4563a' },
  'medium_stiff_sleep':  { name: '夜のほぐし処方',           solid: '温浴固形',   liquid: 'ラベンダー', flower: '中量',   herb: 'よもぎ',   temp: 39, min: 18, color: '#34486e' },
  'medium_skin_relax':   { name: '肌うるおい処方',           solid: 'シアバター固形', liquid: '桃の葉',  flower: '中量',   herb: 'ドクダミ', temp: 38, min: 18, color: '#c4aa6c' },
  'medium_skin_refresh': { name: '透明感処方',               solid: 'シアバター固形', liquid: '柚子液',  flower: '少量',   herb: 'ヒノキ',   temp: 38, min: 12, color: '#c4aa6c' },
  'medium_skin_sleep':   { name: '夜の肌リセット処方',       solid: 'シアバター固形', liquid: '桃の葉',  flower: '多め',   herb: 'ドクダミ', temp: 39, min: 20, color: '#c4aa6c' },
  'medium_fatigue_relax': { name: 'ゆるり回復処方',          solid: '薬用固形',   liquid: 'ローズマリー', flower: '中量', herb: 'よもぎ',   temp: 40, min: 18, color: '#5c7a4e' },
  'medium_fatigue_refresh': { name: 'リフレッシュ処方',      solid: '炭酸タブレット', liquid: 'ユーカリ', flower: '少量', herb: 'ヒノキ',   temp: 38, min: 12, color: '#b4563a' },
  'medium_fatigue_sleep': { name: 'ゆっくり眠り処方',        solid: '温浴固形',   liquid: 'ラベンダー', flower: '中量', herb: 'スギナ',   temp: 39, min: 18, color: '#34486e' },

  'high_cold_relax':   { name: '活動後の温め処方',           solid: '温浴固形',   liquid: '柚子液',    flower: '少量',   herb: 'よもぎ',   temp: 39, min: 12, color: '#c4aa6c' },
  'high_cold_refresh': { name: '爽快リフレッシュ処方',       solid: '炭酸タブレット', liquid: '柚子液',  flower: '少量',   herb: 'ヒノキ',   temp: 38, min: 10, color: '#b4563a' },
  'high_cold_sleep':   { name: 'ゆるやか切り替え処方',       solid: '温浴固形',   liquid: 'ラベンダー', flower: '中量', herb: 'スギナ',   temp: 39, min: 15, color: '#34486e' },
  'high_stiff_relax':  { name: '運動後ほぐし処方',           solid: '薬用固形',   liquid: 'ユーカリ',  flower: '少量',   herb: 'クロモジ', temp: 39, min: 15, color: '#5c7a4e' },
  'high_stiff_refresh': { name: '清涼リカバリー処方',        solid: '炭酸タブレット', liquid: 'ペパーミント', flower: '少量', herb: 'クロモジ', temp: 37, min: 10, color: '#b4563a' },
  'high_stiff_sleep':  { name: 'アクティブ後の鎮静処方',     solid: '薬用固形',   liquid: 'ラベンダー', flower: '中量', herb: 'よもぎ',   temp: 39, min: 15, color: '#34486e' },
  'high_skin_relax':   { name: '艶肌処方',                   solid: 'シアバター固形', liquid: '桃の葉',  flower: '少量',   herb: 'ドクダミ', temp: 38, min: 15, color: '#c4aa6c' },
  'high_skin_refresh': { name: '光沢肌処方',                 solid: 'シアバター固形', liquid: '柚子液',  flower: '少量',   herb: 'ヒノキ',   temp: 37, min: 10, color: '#c4aa6c' },
  'high_skin_sleep':   { name: '美肌おやすみ処方',           solid: 'シアバター固形', liquid: '桃の葉',  flower: '中量',   herb: 'ドクダミ', temp: 38, min: 15, color: '#c4aa6c' },
  'high_fatigue_relax': { name: 'ピーク後の回復処方',        solid: '薬用固形',   liquid: 'ローズマリー', flower: '少量', herb: 'よもぎ',   temp: 39, min: 15, color: '#5c7a4e' },
  'high_fatigue_refresh': { name: '体リセット処方',          solid: '炭酸タブレット', liquid: 'ユーカリ', flower: '少量', herb: 'ヒノキ',   temp: 38, min: 10, color: '#b4563a' },
  'high_fatigue_sleep': { name: '完全回復処方',              solid: '薬用固形',   liquid: 'ラベンダー', flower: '多め', herb: 'スギナ',   temp: 39, min: 20, color: '#34486e' },
};

function Diagnosis() {
  const [step, setStep]     = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [result, setResult] = React.useState(null);

  const q = DX_QUESTIONS[step];

  const handleSelect = (value) => {
    const newAnswers = { ...answers, [q.id]: value };
    setAnswers(newAnswers);
    if (step < DX_QUESTIONS.length - 1) {
      setTimeout(() => setStep(step + 1), 260);
    } else {
      const key = `${newAnswers.energy}_${newAnswers.body}_${newAnswers.mood}`;
      const recipe = RECIPES[key] || RECIPES['medium_fatigue_relax'];
      setTimeout(() => setResult(recipe), 260);
    }
  };

  const reset = () => {
    setStep(0);
    setAnswers({});
    setResult(null);
  };

  const elementColors = {
    solid: '#b4563a', liquid: '#34486e', flower: '#c4aa6c', herb: '#5c7a4e',
  };

  const styles = {
    wrap: {
      maxWidth: 680,
      margin: '0 auto',
      padding: '0 0 40px',
    },
    progress: {
      display: 'flex',
      gap: 6,
      marginBottom: 40,
    },
    dot: (active, done) => ({
      flex: 1,
      height: 2,
      background: done ? '#1a1a1a' : active ? '#1a1a1a' : 'rgba(26,26,26,0.15)',
      transition: 'background 0.3s',
    }),
    qLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
      marginBottom: 12,
      textTransform: 'uppercase',
    },
    question: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 'clamp(20px, 3vw, 28px)',
      fontWeight: 500,
      color: '#1a1a1a',
      marginBottom: 36,
      lineHeight: 1.5,
    },
    optGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
      gap: 12,
    },
    opt: (selected) => ({
      padding: '24px 16px',
      border: `1px solid ${selected ? '#1a1a1a' : 'rgba(26,26,26,0.15)'}`,
      background: selected ? 'rgba(26,26,26,0.04)' : 'rgba(255,255,255,0.5)',
      cursor: 'pointer',
      transition: 'all 0.2s',
      textAlign: 'center',
    }),
    optIcon: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 20,
      marginBottom: 10,
      color: '#1a1a1a',
    },
    optLabel: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 14,
      fontWeight: 500,
      color: '#1a1a1a',
      marginBottom: 4,
    },
    optHint: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 10,
      color: '#8a857b',
      letterSpacing: '0.06em',
    },
    resultCard: {
      border: '1px solid rgba(26,26,26,0.2)',
      padding: '48px 40px',
      background: 'rgba(255,255,255,0.5)',
      position: 'relative',
    },
    resultLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
      marginBottom: 20,
    },
    resultName: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 'clamp(22px, 3vw, 32px)',
      fontWeight: 500,
      color: '#1a1a1a',
      marginBottom: 32,
      lineHeight: 1.4,
    },
    ingRow: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 16,
      marginBottom: 32,
    },
    ingItem: (col) => ({
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      padding: '12px 16px',
      borderLeft: `3px solid ${col}`,
      background: 'rgba(255,255,255,0.6)',
    }),
    ingDot: (col) => ({
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: col,
      flexShrink: 0,
    }),
    ingKind: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      color: '#8a857b',
      letterSpacing: '0.12em',
      display: 'block',
      marginBottom: 2,
    },
    ingVal: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 13,
      color: '#1a1a1a',
    },
    paramRow: {
      display: 'flex',
      gap: 24,
      borderTop: '1px solid rgba(26,26,26,0.12)',
      paddingTop: 24,
      flexWrap: 'wrap',
    },
    paramItem: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 11,
      color: '#5c584d',
      letterSpacing: '0.1em',
    },
    resetBtn: {
      marginTop: 32,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#5c584d',
      border: '1px solid rgba(26,26,26,0.2)',
      padding: '10px 20px',
      cursor: 'pointer',
      background: 'transparent',
      transition: 'all 0.2s',
    },
  };

  if (result) {
    return React.createElement('div', { style: styles.wrap },
      React.createElement('div', { style: styles.resultCard },
        React.createElement('div', { style: styles.resultLabel }, '— TODAY\'S PRESCRIPTION · 本日の処方'),
        React.createElement('div', { style: styles.resultName }, result.name),
        React.createElement('div', { style: styles.ingRow },
          React.createElement('div', { style: styles.ingItem(elementColors.solid) },
            React.createElement('div', { style: styles.ingDot(elementColors.solid) }),
            React.createElement('div', null,
              React.createElement('span', { style: styles.ingKind }, 'SOLID · 固形'),
              React.createElement('span', { style: styles.ingVal }, result.solid)
            )
          ),
          React.createElement('div', { style: styles.ingItem(elementColors.liquid) },
            React.createElement('div', { style: styles.ingDot(elementColors.liquid) }),
            React.createElement('div', null,
              React.createElement('span', { style: styles.ingKind }, 'LIQUID · 液体'),
              React.createElement('span', { style: styles.ingVal }, result.liquid)
            )
          ),
          React.createElement('div', { style: styles.ingItem(elementColors.flower) },
            React.createElement('div', { style: styles.ingDot(elementColors.flower) }),
            React.createElement('div', null,
              React.createElement('span', { style: styles.ingKind }, 'FLOWER · 湯の花'),
              React.createElement('span', { style: styles.ingVal }, result.flower)
            )
          ),
          React.createElement('div', { style: styles.ingItem(elementColors.herb) },
            React.createElement('div', { style: styles.ingDot(elementColors.herb) }),
            React.createElement('div', null,
              React.createElement('span', { style: styles.ingKind }, 'HERB · 和ハーブ'),
              React.createElement('span', { style: styles.ingVal }, result.herb)
            )
          )
        ),
        React.createElement('div', { style: styles.paramRow },
          React.createElement('span', { style: styles.paramItem }, `TEMP · ${result.temp}.0°C`),
          React.createElement('span', { style: styles.paramItem }, `DURATION · ${result.min} MIN`),
        ),
        React.createElement('button', { style: styles.resetBtn, onClick: reset }, '← もう一度診断する')
      )
    );
  }

  return React.createElement('div', { style: styles.wrap },
    React.createElement('div', { style: styles.progress },
      DX_QUESTIONS.map((_, i) =>
        React.createElement('div', { key: i, style: styles.dot(i === step, i < step) })
      )
    ),
    React.createElement('div', { style: styles.qLabel },
      `Q.0${step + 1} · ${q.en}`
    ),
    React.createElement('div', { style: styles.question }, q.q),
    React.createElement('div', { style: styles.optGrid },
      q.options.map(opt =>
        React.createElement('button', {
          key: opt.value,
          style: styles.opt(answers[q.id] === opt.value),
          onClick: () => handleSelect(opt.value),
        },
          React.createElement('div', { style: styles.optIcon }, opt.icon),
          React.createElement('div', { style: styles.optLabel }, opt.label),
          React.createElement('div', { style: styles.optHint }, opt.hint)
        )
      )
    )
  );
}

window.Diagnosis = Diagnosis;