"use client";

import { useEffect, useState } from "react";

const MOODS = [
  { key: "flow", emoji: "🌊", label: "心流" },
  { key: "ok", emoji: "🙂", label: "平稳" },
  { key: "tired", emoji: "😴", label: "疲惫" },
  { key: "anxious", emoji: "😰", label: "焦虑" },
  { key: "lonely", emoji: "🌑", label: "孤单" },
  { key: "excited", emoji: "✨", label: "兴奋" },
];

const TIPS: Record<string, string> = {
  flow: "保持节奏，结束时写下今天的小胜利",
  ok: "适合处理琐事与规划下周",
  tired: "缩短会议，优先睡眠与补水",
  anxious: "出去走走 20 分钟，或发消息给一位朋友",
  lonely: "去联合办公或咖啡馆坐一会儿，找人气",
  excited: "把冲劲用在一件重要推进上",
};

export default function NomadMoodCheck() {
  const [mood, setMood] = useState("ok");
  const [note, setNote] = useState("");
  const [saved, setSaved] = useState(false);
  useEffect(() => {
    try {
      const raw = localStorage.getItem("nomadro-mood");
      if (raw) {
        const s = JSON.parse(raw) as { mood?: string; note?: string; day?: string };
        if (s.day === new Date().toDateString()) {
          if (s.mood) setMood(s.mood);
          if (s.note) setNote(s.note);
          setSaved(true);
        }
      }
    } catch { /* ignore */ }
  }, []);
  const save = () => {
    localStorage.setItem("nomadro-mood", JSON.stringify({
      mood, note, day: new Date().toDateString(),
    }));
    setSaved(true);
  };
  return (
    <section className="section kit-section" id="mood">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">🪞 MOOD</span>
          <h2>游民心情签到</h2>
          <p>旅居情绪也需要被看见，一分钟记录就好</p>
        </div>
        <div className="kit-card reveal">
          <div className="kit-chips wrap">
            {MOODS.map((m) => (
              <button key={m.key} type="button" className={`kit-chip${mood === m.key ? " active" : ""}`} onClick={() => setMood(m.key)}>
                {m.emoji} {m.label}
              </button>
            ))}
          </div>
          <p className="kit-note">{TIPS[mood]}</p>
          <label className="kit-field">
            <span>一句话（可选）</span>
            <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="今天最想记住的事…" maxLength={80} />
          </label>
          <div className="kit-actions">
            <button type="button" className="btn btn-primary" onClick={save}>{saved ? "已保存，再更新" : "保存今日心情"}</button>
          </div>
        </div>
      </div>
    </section>
  );
}