// =============================================================
// SettingsModal — anchor date, nickname, key dates
// =============================================================
const KEY_ICONS = ["heart", "sakura", "ribbon", "star", "cloud", "strawberry"];

const SettingsModal = ({ open, onClose, settings, onChange }) => {
  const [d, setD] = useState(settings);
  useEffect(() => { setD(settings); }, [open]);

  const updateKey = (id, patch) => setD({ ...d, keyDates: d.keyDates.map(k => k.id === id ? { ...k, ...patch } : k) });
  const addKey = () => setD({ ...d, keyDates: [...d.keyDates, { id: window.xm.uid(), title: "新的纪念日", date: new Date().toISOString().slice(0,10), icon: "heart" }] });
  const removeKey = (id) => setD({ ...d, keyDates: d.keyDates.filter(k => k.id !== id) });

  return (
    <Modal open={open} onClose={onClose} title="小屋的设置 ⚙">
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="她的昵称" value={d.nickname} onChange={(e) => setD({ ...d, nickname: e.target.value })}/>
        <Field label="正式在一起的日期（用于全局倒计时）" type="date" value={d.togetherDate} onChange={(e) => setD({ ...d, togetherDate: e.target.value })}/>
        <div>
          <div style={{ font: "600 13px 'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: "#6B4A2E", marginBottom: 6 }}>重要日期</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {d.keyDates.map(k => (
              <Card key={k.id} style={{ padding: 12, display: "flex", gap: 8, alignItems: "center" }}>
                <select value={k.icon} onChange={(e) => updateKey(k.id, { icon: e.target.value })} style={{ padding: "8px", borderRadius: 12, border: "2px solid #FBE3B0", background: "#FFFDF6", fontFamily: "'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: "#4A2A1A", outline: "none" }}>
                  {KEY_ICONS.map(ic => <option key={ic} value={ic}>{ic}</option>)}
                </select>
                <input value={k.title} onChange={(e) => updateKey(k.id, { title: e.target.value })} style={{ flex: 1, fontFamily: "'Jiangcheng Yuan', 'PingFang SC', sans-serif", fontSize: 14, padding: "8px 12px", borderRadius: 12, border: "2px solid #FBE3B0", background: "#FFFDF6", outline: "none", color: "#4A2A1A" }}/>
                <input type="date" value={k.date} onChange={(e) => updateKey(k.id, { date: e.target.value })} style={{ fontFamily: "Quicksand, sans-serif", padding: "8px 12px", borderRadius: 12, border: "2px solid #FBE3B0", background: "#FFFDF6", outline: "none", color: "#4A2A1A" }}/>
                <button onClick={() => removeKey(k.id)} style={{ background: "transparent", border: "none", color: "#B5946D", cursor: "pointer", fontSize: 18 }}>×</button>
              </Card>
            ))}
            <Button variant="cream" size="sm" onClick={addKey}>＋ 加一个重要日子</Button>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 4 }}>
          <Button variant="ghost" onClick={onClose}>取消</Button>
          <Button onClick={() => { onChange(d); onClose(); }}>保存 ♡</Button>
        </div>
      </div>
    </Modal>
  );
};

Object.assign(window, { SettingsModal });