// category-manager.jsx — add/edit/delete expense categories
const ES_CM = window.ExpenseStore;

const EMOJI_SUGGESTIONS = [
  "🍱","🥬","🛒","🚇","📚","📦","👕","✈️","📱","💡","💧","🔥","🏢","🏛️","🏠","🧹","💊",
  "🍜","🍣","☕","🍺","🎮","🎬","💇","🐕","🐈","🎂","🎁","💄","💍","💪","🏋️","🧘","⛽",
  "🚗","🚕","🚲","🛵","🅿️","🎫","🎤","🎸","📷","📸","🛏️","🛋️","🧺","🧴","🪥","👶","🍼",
  "💰","🪙","💳","📈","📊","🪴","🌷","🛠️","🔧","⚡","🌐","💼","📝","🖥️","⌨️","🎧","•","⋯",
];

function CategoryManager({ open, state, setState, onClose }) {
  // Source: state.settings.categories, falling back to defaults
  const initial = (state.settings?.categories || ES_CM.DEFAULT_CATEGORIES).map(c => ({...c}));
  const [list, setList] = React.useState(initial);
  const [editingId, setEditingId] = React.useState(null);
  const [emojiPickerFor, setEmojiPickerFor] = React.useState(null);

  React.useEffect(() => {
    if (open) {
      setList((state.settings?.categories || ES_CM.DEFAULT_CATEGORIES).map(c => ({...c})));
      setEditingId(null);
      setEmojiPickerFor(null);
    }
  }, [open]);

  if (!open) return null;

  function update(id, patch) {
    setList(list.map(c => c.id === id ? { ...c, ...patch } : c));
  }
  function remove(id) {
    // Count expenses using this cat
    const count = ES_CM.live(state.expenses).filter(e => e.cat === id).length;
    let msg = `刪除「${list.find(c => c.id === id)?.label}」?`;
    if (count > 0) msg += `\n\n有 ${count} 筆現有記錄使用此類別,刪除後它們會顯示為原始 ID,但金額仍會計算。`;
    if (!confirm(msg)) return;
    setList(list.filter(c => c.id !== id));
  }
  function move(id, delta) {
    const idx = list.findIndex(c => c.id === id);
    const ni = idx + delta;
    if (ni < 0 || ni >= list.length) return;
    const copy = [...list];
    [copy[idx], copy[ni]] = [copy[ni], copy[idx]];
    setList(copy);
  }
  function addNew() {
    const id = "u_" + Math.random().toString(36).slice(2, 8);
    setList([...list, { id, label: "新類別", glyph: "•" }]);
    setEditingId(id);
  }
  function resetDefaults() {
    if (!confirm("還原為預設類別? 已新增/修改的項目會遺失,但已記錄的開支不受影響。")) return;
    setList(ES_CM.DEFAULT_CATEGORIES.map(c => ({...c})));
  }
  function save() {
    // Validate: no empty labels
    const clean = list.map(c => ({ ...c, label: (c.label || "").trim() || "?", glyph: (c.glyph || "•") }));
    setState({
      ...state,
      settings: {
        ...state.settings,
        categories: clean,
      },
    });
    onClose();
  }

  return (
    <div className="scrim" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()} style={{maxHeight: "92vh"}}>
        <div className="sheet-handle"></div>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 12}}>
          <h3 style={{margin: 0}}>管理類別</h3>
          <button className="toolbtn primary" onClick={addNew}>+ 新增</button>
        </div>
        <p style={{margin: "0 0 12px", fontSize: 12, color: "var(--text-3)"}}>
          點 emoji 可更改圖示, 點名稱可修改, 拖動 ↑↓ 可重新排序
        </p>

        <div className="cm-list">
          {list.map((c, i) => (
            <div className="cm-row" key={c.id}>
              <button className="cm-glyph" onClick={() => setEmojiPickerFor(emojiPickerFor === c.id ? null : c.id)}>
                {c.glyph || "•"}
              </button>
              <input className="cm-label" value={c.label}
                onChange={e => update(c.id, { label: e.target.value })}
                onFocus={() => setEditingId(c.id)} />
              <div className="cm-actions">
                <button className="cm-icon" disabled={i === 0} onClick={() => move(c.id, -1)}>↑</button>
                <button className="cm-icon" disabled={i === list.length - 1} onClick={() => move(c.id, +1)}>↓</button>
                <button className="cm-icon danger" onClick={() => remove(c.id)}>×</button>
              </div>
              {emojiPickerFor === c.id && (
                <div className="cm-emoji-picker">
                  <div className="cm-emoji-row">
                    <input className="input" value={c.glyph} maxLength="4"
                      placeholder="輸入或貼上 emoji"
                      onChange={e => update(c.id, { glyph: e.target.value })}
                      style={{flex: 1, fontSize: 18, textAlign: "center"}} />
                    <button className="toolbtn" onClick={() => setEmojiPickerFor(null)}>完成</button>
                  </div>
                  <div className="cm-emoji-grid">
                    {EMOJI_SUGGESTIONS.map((e, idx) => (
                      <button key={idx} className="cm-emoji-pick" onClick={() => { update(c.id, { glyph: e }); setEmojiPickerFor(null); }}>{e}</button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        <div style={{display: "flex", gap: 8, marginTop: 14}}>
          <button className="toolbtn" onClick={resetDefaults}>↻ 還原預設</button>
          <button className="toolbtn" style={{flex: 1, padding: "10px"}} onClick={onClose}>取消</button>
          <button className="toolbtn primary" style={{flex: 1, padding: "10px"}} onClick={save}>儲存</button>
        </div>
      </div>
    </div>
  );
}

window.CategoryManager = CategoryManager;