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

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 = async () => {
      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取消 = 与现有数据合并（保留两边）'
        );

        let finalState;
        if (choice) {
          // overwrite
          finalState = {
            messages:   Array.isArray(data.messages)   ? data.messages   : [],
            favorites:  Array.isArray(data.favorites)  ? data.favorites  : [],
            calendar:   Array.isArray(data.calendar)   ? data.calendar   : [],
            settings:   data.settings || {},
          };
          setState((prev) => ({
            ...prev,
            ...finalState,
            settings: { ...(prev.settings || {}), ...(finalState.settings || {}) }
          }));
        } 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());
            };
            finalState = {
              messages:  mergeBy(prev.messages,  data.messages),
              favorites: mergeBy(prev.favorites, data.favorites),
              calendar:  mergeBy(prev.calendar,  data.calendar),
              settings:  { ...(prev.settings || {}), ...(data.settings || {}) },
            };
            return finalState;
          });
        }

        // 🌐 同步到服务器！
        try {
          // 保存聊天记录
          if (finalState.messages && finalState.messages.length > 0) {
            await fetch('/api/chat/import', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ messages: finalState.messages })
            });
          }

          // 保存日历
          if (finalState.calendar && finalState.calendar.length > 0) {
            await fetch('/api/calendar/import', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ events: finalState.calendar })
            });
          }

          // 保存珍藏
          if (finalState.favorites && finalState.favorites.length > 0) {
            for (const fav of finalState.favorites) {
              await fetch('/api/favorites', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(fav)
              });
            }
          }

          // 保存设置
          if (finalState.settings) {
            await fetch('/api/settings', {
              method: 'PUT',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(finalState.settings)
            });
          }

          toast(choice ? '已覆盖导入并同步到云端 ✓' : '已合并导入并同步到云端 ✓');
        } catch (err) {
          console.error('Import sync error:', err);
          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="hint" style={{marginBottom: 16}}>
              五郎可以主动压缩对话历史来省钱。你可以配置专门的压缩 API（推荐用便宜的 DeepSeek），如果不配置则使用主 API Key。
            </div>
            <div className="field">
              <label>压缩 API Key（可选）</label>
              <input
                type="password"
                value={s.compress_api_key || ''}
                onChange={(e) => updateSettings({ compress_api_key: e.target.value })}
                placeholder="留空使用主 OpenRouter Key"
              />
              <div className="hint">
                推荐：申请 <a href="https://platform.deepseek.com" target="_blank" style={{color: 'var(--amber-600)'}}>DeepSeek API Key</a>，
                只需 $0.14/M（比 OpenRouter 便宜一半）
              </div>
            </div>
            <div className="field">
              <label>API Base URL</label>
              <input
                type="text"
                value={s.compress_base_url || ''}
                onChange={(e) => updateSettings({ compress_base_url: e.target.value })}
                placeholder="https://openrouter.ai/api/v1"
              />
              <div className="hint">
                OpenRouter: https://openrouter.ai/api/v1<br />
                DeepSeek 直连: https://api.deepseek.com
              </div>
            </div>
            <div className="field">
              <label>默认压缩模型</label>
              <input
                type="text"
                value={s.compress_default_model || ''}
                onChange={(e) => updateSettings({ compress_default_model: e.target.value })}
                placeholder="deepseek/deepseek-chat"
              />
              <div className="hint">
                OpenRouter: deepseek/deepseek-chat<br />
                DeepSeek 直连: deepseek-chat
              </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="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;