/* RecipeBuilder.jsx — じぶん湯 レシピビルダー */
'use strict';

const ELEMENTS = {
  solid: {
    label: '固形',
    en: 'SOLID',
    color: '#b4563a',
    bg: 'rgba(180,86,58,0.08)',
    items: [
      { id: 'solid_relax',  name: 'ぬくもり固形',   sub: '温浴・保温',   icon: '●' },
      { id: 'solid_spa',    name: '温泉固形',        sub: '硫酸塩系',     icon: '◎' },
      { id: 'solid_carb',   name: '炭酸タブレット', sub: '血行促進',     icon: '○' },
      { id: 'solid_med',    name: '薬用固形',        sub: '肩こり・冷え', icon: '◉' },
      { id: 'solid_shea',   name: 'シアバター固形', sub: '保湿・美肌',   icon: '◌' },
    ],
  },
  liquid: {
    label: '液体',
    en: 'LIQUID',
    color: '#34486e',
    bg: 'rgba(52,72,110,0.08)',
    items: [
      { id: 'liq_rose',  name: 'ローズマリー液',  sub: '血行・覚醒',   icon: '▲' },
      { id: 'liq_lav',   name: 'ラベンダー液',    sub: '鎮静・睡眠',   icon: '▽' },
      { id: 'liq_yuzu',  name: '柚子液',          sub: '温め・清潔感', icon: '◁' },
      { id: 'liq_euca',  name: 'ユーカリ液',      sub: '呼吸・清涼',   icon: '▷' },
      { id: 'liq_peach', name: '桃の葉液',        sub: '肌あれ・乾燥', icon: '△' },
      { id: 'liq_mint',  name: 'ペパーミント液',  sub: '清涼・頭皽',   icon: '▼' },
    ],
  },
  flower: {
    label: '湯の花',
    en: 'FLOWER',
    color: '#c4aa6c',
    bg: 'rgba(196,170,108,0.08)',
    items: [
      { id: 'flower_s',  name: '湯の花 少量',  sub: 'やさしい濃さ', icon: '·' },
      { id: 'flower_m',  name: '湯の花 中量',  sub: '標準的な濃度', icon: ':' },
      { id: 'flower_l',  name: '湯の花 多め',  sub: '濃厚な湯質',   icon: '⁝' },
    ],
  },
  herb: {
    label: '和ハーブ',
    en: 'HERB',
    color: '#5c7a4e',
    bg: 'rgba(92,122,78,0.08)',
    items: [
      { id: 'herb_yomogi',   name: 'よもぎ',     sub: '血行・抗炎症',   icon: '⌇' },
      { id: 'herb_hinoki',   name: 'ヒノキ',     sub: '浄化・リラックス', icon: '⌆' },
      { id: 'herb_kuromoji', name: 'クロモジ',   sub: '鎮静・高貴な香り', icon: '⌅' },
      { id: 'herb_sugina',   name: 'スギナ',     sub: 'ミネラル・保湿',  icon: '⌈' },
      { id: 'herb_dokudami', name: 'ドクダミ',   sub: '肌あれ・デトックス', icon: '⌋' },
    ],
  },
};

const MAX_SELECT = 4;

function RecipeBuilder() {
  const [selected, setSelected] = React.useState([]);
  const [activeTab, setActiveTab] = React.useState('solid');

  const toggle = (itemId, catKey) => {
    const exists = selected.find(s => s.id === itemId);
    if (exists) {
      setSelected(selected.filter(s => s.id !== itemId));
    } else {
      if (selected.length >= MAX_SELECT) return;
      // Remove same flower if selecting another
      const filtered = catKey === 'flower'
        ? selected.filter(s => !s.id.startsWith('flower_'))
        : selected;
      const item = ELEMENTS[catKey].items.find(i => i.id === itemId);
      setSelected([...filtered, { ...item, catKey }]);
    }
  };

  const isSelected = (id) => selected.some(s => s.id === id);
  const catColor = (key) => ELEMENTS[key].color;

  const s = {
    wrap: {
      maxWidth: 900,
      margin: '0 auto',
    },
    tabs: {
      display: 'flex',
      gap: 0,
      borderBottom: '1px solid rgba(26,26,26,0.15)',
      marginBottom: 32,
    },
    tab: (active, key) => ({
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.18em',
      padding: '12px 20px',
      cursor: 'pointer',
      background: 'transparent',
      border: 'none',
      borderBottom: active ? `2px solid ${ELEMENTS[key].color}` : '2px solid transparent',
      color: active ? ELEMENTS[key].color : '#8a857b',
      transition: 'all 0.2s',
      marginBottom: -1,
    }),
    itemGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
      gap: 10,
      marginBottom: 40,
    },
    item: (sel, catKey) => ({
      padding: '16px',
      border: `1px solid ${sel ? ELEMENTS[catKey].color : 'rgba(26,26,26,0.12)'}`,
      background: sel ? ELEMENTS[catKey].bg : 'rgba(255,255,255,0.5)',
      cursor: selected.length >= MAX_SELECT && !sel ? 'not-allowed' : 'pointer',
      opacity: selected.length >= MAX_SELECT && !sel ? 0.4 : 1,
      transition: 'all 0.18s',
      display: 'flex',
      flexDirection: 'column',
      gap: 6,
    }),
    itemIcon: (catKey) => ({
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 18,
      color: ELEMENTS[catKey].color,
    }),
    itemName: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 13,
      fontWeight: 500,
      color: '#1a1a1a',
    },
    itemSub: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 10,
      color: '#8a857b',
    },
    counter: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: selected.length >= MAX_SELECT ? '#b4563a' : '#8a857b',
      marginBottom: 24,
    },
    blend: {
      border: '1px solid rgba(26,26,26,0.15)',
      padding: '32px 28px',
      background: 'rgba(255,255,255,0.5)',
    },
    blendTitle: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
      marginBottom: 20,
    },
    blendItems: {
      display: 'flex',
      flexWrap: 'wrap',
      gap: 10,
      minHeight: 52,
    },
    blendTag: (catKey) => ({
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      padding: '8px 14px',
      background: ELEMENTS[catKey].bg,
      borderLeft: `3px solid ${ELEMENTS[catKey].color}`,
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 13,
      color: '#1a1a1a',
    }),
    blendTagRemove: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 12,
      color: '#8a857b',
      cursor: 'pointer',
      lineHeight: 1,
      marginLeft: 4,
    },
    emptyHint: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 12,
      color: '#8a857b',
      padding: '12px 0',
    },
    resetBtn: {
      marginTop: 20,
      display: 'inline-flex',
      gap: 6,
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      letterSpacing: '0.18em',
      color: '#8a857b',
      background: 'transparent',
      border: '1px solid rgba(26,26,26,0.12)',
      padding: '8px 14px',
      cursor: 'pointer',
    },
  };

  return React.createElement('div', { style: s.wrap },
    // Tabs
    React.createElement('div', { style: s.tabs },
      Object.keys(ELEMENTS).map(key =>
        React.createElement('button', {
          key,
          style: s.tab(activeTab === key, key),
          onClick: () => setActiveTab(key),
        }, `${ELEMENTS[key].en} · ${ELEMENTS[key].label}`)
      )
    ),

    // Counter
    React.createElement('div', { style: s.counter },
      `SELECTED ${selected.length} / ${MAX_SELECT}${selected.length >= MAX_SELECT ? ' — MAX REACHED' : ''}`
    ),

    // Item grid for active tab
    React.createElement('div', { style: s.itemGrid },
      ELEMENTS[activeTab].items.map(item =>
        React.createElement('button', {
          key: item.id,
          style: s.item(isSelected(item.id), activeTab),
          onClick: () => toggle(item.id, activeTab),
          disabled: selected.length >= MAX_SELECT && !isSelected(item.id),
        },
          React.createElement('div', { style: s.itemIcon(activeTab) }, item.icon),
          React.createElement('div', { style: s.itemName }, item.name),
          React.createElement('div', { style: s.itemSub }, item.sub)
        )
      )
    ),

    // Blend preview
    React.createElement('div', { style: s.blend },
      React.createElement('div', { style: s.blendTitle }, '— YOUR BLEND · 今日の処方箋'),
      React.createElement('div', { style: s.blendItems },
        selected.length === 0
          ? React.createElement('div', { style: s.emptyHint }, '上から素材を選んでください。最大4種まで。')
          : selected.map(item =>
              React.createElement('div', { key: item.id, style: s.blendTag(item.catKey) },
                React.createElement('span', null, item.name),
                React.createElement('span', {
                  style: s.blendTagRemove,
                  onClick: () => setSelected(selected.filter(s => s.id !== item.id)),
                }, '×')
              )
            )
      ),
      selected.length > 0 && React.createElement('button', {
        style: s.resetBtn,
        onClick: () => setSelected([]),
      }, '× CLEAR ALL')
    )
  );
}

window.RecipeBuilder = RecipeBuilder;