// ===== Menus =====
function MenusPage({ menus, onSetMenus }) {
  const [open, setOpen] = useState(null);
  const [showAdd, setShowAdd] = useState(false);

  // sortOrder で並び替え（未設定なら配列順を維持するため index を採用）
  const sorted = useMemo(() => {
    return menus.slice().sort((a, b) => {
      const ao = a.sortOrder !== undefined ? a.sortOrder : (a.sort_order !== undefined ? a.sort_order : 999);
      const bo = b.sortOrder !== undefined ? b.sortOrder : (b.sort_order !== undefined ? b.sort_order : 999);
      return ao - bo;
    });
  }, [menus]);

  const onSave = (menu) => {
    if (menu.id && menus.some(m => m.id === menu.id)) {
      onSetMenus(menus.map(m => m.id === menu.id ? menu : m));
    } else {
      // 新規は末尾に追加（sortOrder = 既存最大 + 1）
      const maxOrder = menus.reduce((mx, m) => Math.max(mx, m.sortOrder || 0), 0);
      onSetMenus([...menus, { ...menu, id: 'me-' + Date.now(), sortOrder: maxOrder + 1 }]);
    }
    setOpen(null); setShowAdd(false);
  };
  const onDel = (id) => {
    if (!confirm('このメニューを削除しますか？')) return;
    onSetMenus(menus.filter(m => m.id !== id));
    setOpen(null);
  };
  const toggleActive = (id) => {
    onSetMenus(menus.map(m => m.id === id ? { ...m, active: !m.active } : m));
  };

  // sorted 配列での隣同士を入れ替えて全体に sortOrder を再付与
  const moveMenu = (id, dir) => {
    const idx = sorted.findIndex(m => m.id === id);
    if (idx < 0) return;
    const swap = idx + dir;
    if (swap < 0 || swap >= sorted.length) return;
    const arr = sorted.slice();
    [arr[idx], arr[swap]] = [arr[swap], arr[idx]];
    // 全menuに sortOrder を再付与
    const reordered = arr.map((m, i) => ({ ...m, sortOrder: i + 1 }));
    onSetMenus(reordered);
  };

  return (
    <div>
      <div className="filter-bar">
        <p className="text-soft" style={{margin:0, fontSize:12.5}}>LP予約フォームに表示されるメニューを管理します</p>
        <div style={{flex:1}}/>
        <button className="btn primary" onClick={() => setShowAdd(true)}><Icon name="plus" size={14}/> メニューを追加</button>
      </div>

      <div className="card">
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>メニュー名</th>
                <th style={{width:80}}>所要時間</th>
                <th style={{width:110}}>料金</th>
                <th style={{width:80}}>人気</th>
                <th style={{width:90}}>表示</th>
                <th style={{width:90}}></th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((m, i) => (
                <tr key={m.id}>
                  <td>
                    <div style={{fontWeight:600}}>{m.name}
                      {m.adminOnly && <span style={{marginLeft:6, fontSize:10, padding:'1px 6px', borderRadius:3, background:'#fcefdf', color:'#8a6a10', fontWeight:700}}>管理専用</span>}
                    </div>
                  </td>
                  <td className="mono">{m.duration}分</td>
                  <td className="mono" style={{fontWeight:700}}>¥{m.price.toLocaleString()}</td>
                  <td>{m.popular ? <span className="pill new"><Icon name="star" size={10}/> 人気</span> : <span className="text-muted">—</span>}</td>
                  <td><Toggle value={m.active} onChange={() => toggleActive(m.id)}/></td>
                  <td>
                    <button className="btn sm" disabled={i === 0} onClick={() => moveMenu(m.id, -1)} title="上に移動">↑</button>
                    <button className="btn sm" disabled={i === sorted.length - 1} style={{marginLeft:4}} onClick={() => moveMenu(m.id, +1)} title="下に移動">↓</button>
                    <button className="btn sm" style={{marginLeft:6}} onClick={() => setOpen(m)}><Icon name="edit" size={12}/></button>
                    <button className="btn sm danger" style={{marginLeft:4}} onClick={() => onDel(m.id)}><Icon name="trash" size={12}/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {(open || showAdd) && (
        <MenuEditModal
          menu={open}
          onClose={() => { setOpen(null); setShowAdd(false); }}
          onSave={onSave}
          onDelete={onDel}
        />
      )}
    </div>
  );
}

function MenuEditModal({ menu, onClose, onSave, onDelete }) {
  const [form, setForm] = useState(() => menu ? { ...menu } : {
    name: '', duration: 60, price: 8000, color: 'green', popular: false, active: true
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <Modal
      title={menu ? 'メニューを編集' : 'メニューを追加'}
      onClose={onClose}
      footer={
        <>
          {menu && <button className="btn danger left" onClick={() => onDelete(menu.id)}><Icon name="trash" size={14}/> 削除</button>}
          <button className="btn" onClick={onClose}>キャンセル</button>
          <button className="btn primary" onClick={() => { if (!form.name.trim()) return alert('メニュー名を入力'); onSave(form); }}>
            <Icon name="check" size={14}/> 保存
          </button>
        </>
      }
    >
      <div className="field">
        <label className="field-label">メニュー名</label>
        <input className="input" value={form.name} onChange={e => set('name', e.target.value)} placeholder="例：60分整体コース"/>
      </div>
      <div className="field-row">
        <div className="field">
          <label className="field-label">所要時間（分）</label>
          <input type="number" className="input" value={form.duration} onChange={e => set('duration', parseInt(e.target.value)||0)}/>
        </div>
        <div className="field">
          <label className="field-label">料金（円）</label>
          <input type="number" className="input" value={form.price} onChange={e => set('price', parseInt(e.target.value)||0)}/>
        </div>
      </div>
      <div className="field" style={{display:'flex', alignItems:'center', gap:10}}>
        <Toggle value={form.popular} onChange={v => set('popular', v)}/>
        <span style={{fontSize:13}}>「人気」マークを表示</span>
      </div>
      <div className="field" style={{display:'flex', alignItems:'center', gap:10, marginTop:14}}>
        <Toggle value={form.active} onChange={v => set('active', v)}/>
        <span style={{fontSize:13}}>LP予約フォームに表示する</span>
      </div>
      <div className="field" style={{display:'flex', alignItems:'center', gap:10, marginTop:14, paddingTop:14, borderTop:'1px dashed var(--line)'}}>
        <Toggle value={form.adminOnly === true} onChange={v => set('adminOnly', v)}/>
        <div>
          <div style={{fontSize:13}}>管理画面専用（LPには出さない）</div>
          <div style={{fontSize:11, color:'var(--ink-mute)', marginTop:2}}>
            ONにすると LP の予約フォームには表示されず、管理画面で予約を追加する時だけ選べます。<br/>
            ※ 廃止予定の旧メニュー・常連限定メニューに使用
          </div>
        </div>
      </div>
    </Modal>
  );
}

window.MenusPage = MenusPage;