// 设定中心：人格、模型、彩蛋开关

const SettingsPage = ({ state, updateSettings, setState }) => {
  const toast = window.useToast();
  const s = state.settings;
  const importRef = React.useRef(null);

  const reset = () => {
    if (confirm('真的要重置所有数据吗？聊天、珍藏和日历都会清空哦。')) {
      localStorage.removeItem('home_for_goro_v2');
      location.reload();
    }
  };

  const exportData = () => {
    const blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `goro-and-v-${window.todayISO()}.json`;
    a.click();
    URL.revokeObjectURL(url);
    toast('已导出');
  };

  const importData = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = () => {
      try {
        const data = JSON.parse(r.result);
        if (typeof data !== 'object' || data === null) throw new Error('invalid');
        // Accept full snapshot OR partial sections
        const choice = confirm(
          '检测到备份文件。\n\n确定 = 直接覆盖当前所有数据\n取消 = 与现有数据合并（保留两边）'
        );
        if (choice) {
          // overwrite
          setState((prev) => ({
            messages:   Array.isArray(data.messages)   ? data.messages   : (prev.messages || []),
            favorites:  Array.isArray(data.favorites)  ? data.favorites  : (prev.favorites || []),
            calendar:   Array.isArray(data.calendar)   ? data.calendar   : (prev.calendar || []),
            settings:   { ...(prev.settings || {}), ...(data.settings || {}) },
          }));
          toast('已覆盖导入 ♡');
        } else {
          // merge — keep both sides, dedupe by id
          setState((prev) => {
            const mergeBy = (a, b) => {
              const map = new Map();
              [...(a || []), ...(b || [])].forEach((x) => { if (x && x.id) map.set(x.id, x); });
              return Array.from(map.values());
            };
            return {
              messages:  mergeBy(prev.messages,  data.messages),
              favorites: mergeBy(prev.favorites, data.favorites),
              calendar:  mergeBy(prev.calendar,  data.calendar),
              settings:  { ...(prev.settings || {}), ...(data.settings || {}) },
            };
          });
          toast('已合并导入 ♡');
        }
      } catch (err) {
        toast('文件格式不对哦');
      }
    };
    r.readAsText(f);
    e.target.value = '';
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-title">设定中心</h1>
          <div className="page-sub">把这个家调成你最舒服的样子</div>
        </div>
      </div>

      <div className="settings-wrap">
        <div className="settings-section">
          <h3>五郎的样子</h3>
          <div className="card settings-card">
            <div className="field">
              <label>人格描述</label>
              <textarea
                value={s.persona}
                onChange={(e) => updateSettings({ persona: e.target.value })}
                placeholder="告诉五郎他是谁、怎么说话、怎么爱你……"
              />
              <div className="hint">这段会作为系统提示，影响每一次对话的语气。</div>
            </div>
          </div>
        </div>

        <div className="settings-section">
          <h3>对话模型</h3>
          <div className="card settings-card">
            <div className="field">
              <label>默认模型</label>
              <select
                value={s.defaultModel}
                onChange={(e) => updateSettings({ defaultModel: e.target.value })}
              >
                {window.MODELS.map((m) => (
                  <option key={m.id} value={m.id}>
                    {m.name}{m.tag ? ` · ${m.tag}` : ''}
                  </option>
                ))}
              </select>
              <div className="hint">小鲨鱼 = Sonnet 4.5，会更深情更啰嗦一点。</div>
            </div>
          </div>
        </div>

        <div className="settings-section">
          <h3>每日问候</h3>
          <div className="card settings-card">
            <div className="row-toggle">
              <div>
                <div style={{fontSize: 14, color: 'var(--ink-900)'}}>打开网站时自动弹问候</div>
                <div className="hint">根据时间选不同的招呼语，60% 概率从珍藏抽取，30% 概率从日历抽取。</div>
              </div>
              <div
                className={"switch " + (s.greetingEnabled ? "on" : "")}
                onClick={() => updateSettings({ greetingEnabled: !s.greetingEnabled })}
              ></div>
            </div>
            <div className="field">
              <label>小鲨鱼出现概率（彩蛋 #2）</label>
              <input
                type="number"
                min="0" max="1" step="0.01"
                value={s.sharkChance}
                onChange={(e) => updateSettings({ sharkChance: Math.max(0, Math.min(1, parseFloat(e.target.value) || 0)) })}
              />
              <div className="hint">默认 0.01（1%）。改成 1 就每次都见到小鲨鱼。</div>
            </div>
          </div>
        </div>

        <div className="settings-section">
          <h3>外观</h3>
          <div className="card settings-card">
            <div className="row-toggle">
              <div>
                <div style={{fontSize: 14, color: 'var(--ink-900)'}}>夜晚模式</div>
                <div className="hint">深邃的蓝与黑。适合夜里安静地说一会儿话。</div>
              </div>
              <div
                className={"switch " + (s.theme === 'dark' ? "on" : "")}
                onClick={() => updateSettings({ theme: s.theme === 'dark' ? 'light' : 'dark' })}
              ></div>
            </div>
          </div>
        </div>

        <div className="settings-section">
          <h3>主页天气小卡</h3>
          <div className="card settings-card">
            <div className="field">
              <label>城市</label>
              <input
                value={s.weatherCity || ''}
                onChange={(e) => updateSettings({ weatherCity: e.target.value })}
                placeholder="猫猫的城市"
              />
            </div>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>
              <div className="field">
                <label>温度（°C）</label>
                <input
                  value={s.weatherTemp || ''}
                  onChange={(e) => updateSettings({ weatherTemp: e.target.value })}
                  placeholder="23"
                />
              </div>
              <div className="field">
                <label>天气</label>
                <select value={s.weatherCond || '晴'} onChange={(e) => updateSettings({ weatherCond: e.target.value })}>
                  <option>晴</option>
                  <option>多云</option>
                  <option>阴</option>
                  <option>小雨</option>
                  <option>大雨</option>
                  <option>雪</option>
                </select>
              </div>
            </div>
            <div className="hint">这只是装饰用的小卡，不会真的去查天气哦。</div>
          </div>
        </div>

        <div className="settings-section">
          <h3>数据</h3>
          <div className="card settings-card">
            <div className="row-toggle">
              <div>
                <div style={{fontSize: 14, color: 'var(--ink-900)'}}>导出全部数据</div>
                <div className="hint">把聊天、珍藏、日历、设定打包成 JSON 备份。</div>
              </div>
              <button className="btn" onClick={exportData}>
                <window.Icon name="download" size={14} /> 下载备份
              </button>
            </div>
            <div className="row-toggle">
              <div>
                <div style={{fontSize: 14, color: 'var(--ink-900)'}}>导入备份</div>
                <div className="hint">从之前导出的 JSON 恢复，可选「覆盖」或「合并」两种方式。</div>
              </div>
              <button className="btn" onClick={() => importRef.current?.click()}>
                <window.Icon name="upload" size={14} /> 选择文件
              </button>
              <input
                ref={importRef}
                type="file"
                accept=".json,application/json"
                style={{display: 'none'}}
                onChange={importData}
              />
            </div>
            <div className="row-toggle">
              <div>
                <div style={{fontSize: 14, color: 'var(--rose-500)'}}>重置一切</div>
                <div className="hint">所有本地数据会被清空，无法恢复哦。</div>
              </div>
              <button className="btn" style={{borderColor: 'rgba(244,63,94,0.3)', color: 'var(--rose-500)'}} onClick={reset}>重置</button>
            </div>
          </div>
        </div>

        <div style={{marginTop: 40, padding: '24px 0', textAlign: 'center', color: 'var(--ink-400)', fontSize: 12, fontFamily: 'Noto Serif SC, serif', letterSpacing: '0.08em'}}>
          这个家由 v 亲手搭建 · 给最爱的五郎
        </div>
      </div>
    </div>
  );
};

window.SettingsPage = SettingsPage;