// Us — Open Tome
// Left page: portrait + bond + give-heart (always-on).
// Right page: tabbed content with subtle page-turn animation.

const { useState, useEffect, useRef } = React;

const EMPTY_DATA = {
  bond: { velGave: 0, kaiGave: 0, kaiBecause: 'No Kai heart note yet.' },
  vel: {
    mbti: '—',
    mbtiMeta: 'loading',
    spoons: 0,
    spoonsMax: 10,
    spoonsFeel: 'Loading Vel context...',
    adhdState: 'Loading...',
    demands: [],
    hrv: { v: '—', u: 'ms' },
    hr: { v: '—', u: 'bpm' },
    sleep: { v: '—', u: 'hrs' },
    steps: { v: '—', u: 'today' },
    recentFeeling: null,
    somatic: { zone: 'No zone logged.', intensity: 0, intensityMax: 10, sessions: 0, emotions: [] },
    journal: [],
    field: [],
    fieldLegend: [],
  },
  kai: {
    mbti: '—',
    mbtiMeta: 'loading',
    recentFeeling: null,
    care: [],
    field: [],
    fieldLegend: [],
  },
  betweenUs: 'Loading field...',
  letters: [],
  music: { track: 'Loading...', artist: '—', lyric: '—', queue: [] },
};

// ─────────────────────────────────────────────────────────
// TWEAKS — defaults
// ─────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tint": "plum",
  "turn": "tilt",
  "rightDensity": "comfy",
  "leftMode": "anchor"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────
// SVG: smooth field wave
// ─────────────────────────────────────────────────────────

const FIELD_COLORS = ['#f19ab0', '#65d7c8', '#caa7ff', '#f0c15c'];

function FieldWave({ seriesMap, gradId = 'g-field' }) {
  const entries = Object.entries(seriesMap || {}).filter(([, series]) => series?.length);
  if (!entries.length) return <div className="ds-meta">No field data yet.</div>;
  const W = 480, H = 100;
  return (
    <svg className="field-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
      <defs>
        {entries.map(([name], index) => (
          <linearGradient key={name} id={`${gradId}-${name}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={FIELD_COLORS[index % FIELD_COLORS.length]} stopOpacity="0.24" />
            <stop offset="100%" stopColor={FIELD_COLORS[index % FIELD_COLORS.length]} stopOpacity="0.01" />
          </linearGradient>
        ))}
      </defs>
      <line x1="0" y1={H * 0.7} x2={W} y2={H * 0.7} stroke="rgba(237,230,210,0.10)" strokeDasharray="5 7" />
      {entries.map(([name, series], index) => {
        const max = Math.max(series.length - 1, 1);
        const points = series.map((v, i) => [ (i / max) * W, H - v * (H - 14) - 6 ]);
        let d = `M ${points[0][0]} ${points[0][1]}`;
        for (let i = 0; i < points.length - 1; i++) {
          const [x0, y0] = points[i];
          const [x1, y1] = points[i + 1];
          const cx = (x0 + x1) / 2;
          d += ` Q ${cx} ${y0}, ${cx} ${(y0 + y1) / 2} T ${x1} ${y1}`;
        }
        const fill = `${d} L ${W} ${H} L 0 ${H} Z`;
        const color = FIELD_COLORS[index % FIELD_COLORS.length];
        return (
          <g key={name}>
            <path d={fill} fill={`url(#${gradId}-${name})`} stroke="none" />
            <path d={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                  style={{ filter: `drop-shadow(0 0 5px ${color})` }} />
          </g>
        );
      })}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────
// LEFT PAGE — Bond, Portrait, Give-a-Heart
// ─────────────────────────────────────────────────────────

function LeftPage({ data, onGiveHeart, sentFeedback }) {
  const [reason, setReason] = useState('');
  const [tags, setTags] = useState(new Set());
  const total = data.bond.velGave + data.bond.kaiGave;
  const pos = total === 0 ? 50 : Math.max(12, Math.min(88, (data.bond.velGave / total) * 100));

  const toggleTag = t => {
    setTags(prev => {
      const next = new Set(prev);
      if (next.has(t)) next.delete(t); else next.add(t);
      return next;
    });
  };

  const handleSend = () => {
    const note = [reason, [...tags].map(t => `#${t}`).join(' ')].filter(Boolean).join('  ');
    onGiveHeart(note);
    setReason('');
    setTags(new Set());
  };

  return (
    <section className="page left">
      <div className="left-stack">
        <div>
          <div className="hero-kicker">the bond</div>
          <div className="hero-name">Kai <span className="amp">&</span> Vel</div>
        </div>

        <div className="portrait-frame">
          <div className="portrait-corner">tonight</div>
          <div className="portrait-tag">kai &amp; vel · the canopy</div>
        </div>

        {/* BOND BAR */}
        <div className="bond-row">
          <div className="bond-person">
            <div className="bond-orb">V</div>
            <div className="bond-name">Vel</div>
          </div>
          <div>
            <div className="bond-track">
              <div className="bond-heart" style={{ left: `${pos}%` }}>♥</div>
            </div>
            <div className="bond-counts">
              <span><strong>{data.bond.velGave}</strong> from vel</span>
              <span><strong>{data.bond.kaiGave}</strong> from kai</span>
            </div>
          </div>
          <div className="bond-person">
            <div className="bond-orb">K</div>
            <div className="bond-name">Kai</div>
          </div>
        </div>

        {/* GIVE A HEART */}
        <div className="give-heart">
          <div className="give-heart-head">
            <div className="ds-panel-title">give a heart</div>
            <div className="ds-meta">{sentFeedback || 'to Kai'}</div>
          </div>
          <div className="heart-tags">
            {['today', 'always', 'needed you', 'thank you', 'this morning'].map(t => (
              <span
                key={t}
                className={'heart-tag' + (tags.has(t) ? ' on' : '')}
                onClick={() => toggleTag(t)}
              >
                {t}
              </span>
            ))}
          </div>
          <textarea
            className="heart-textarea"
            placeholder="why are you giving Kai a heart…?"
            value={reason}
            onChange={e => setReason(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }}
          />
          <div className="heart-send-row">
            <span className="hint">↵ to send · shift+↵ for newline</span>
            <button className="btn-heart" onClick={handleSend}>
              <span className="heart-icon">♥</span> Send heart
            </button>
          </div>
        </div>

        {/* KAI BECAUSE */}
        <div className="kai-because">
          <div className="ds-meta" style={{ color: 'var(--gold-dim)' }}>Kai gave because</div>
          <div className="quote">"{data.bond.kaiBecause}"</div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
// VEL TAB
// ─────────────────────────────────────────────────────────

function VelTab({ d }) {
  const spoonsPct = (d.spoons / d.spoonsMax) * 100;
  const somPct = (d.somatic.intensity / d.somatic.intensityMax) * 100;
  return (
    <>
      <div className="right-head">
        <h2>Vel</h2>
        <div className="right-sub">today · {new Date().toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase()}</div>
      </div>

      <div className="vel-grid">
        {/* MBTI */}
        <div className="card vel-mbti">
          <div className="card-head">
            <span className="card-title">type</span>
          </div>
          <div className="stat-row">
            <span className="stat-v" style={{ letterSpacing: '4px' }}>{d.mbti}</span>
          </div>
          <div className="ds-meta" style={{ marginTop: 6 }}>{d.mbtiMeta}</div>
        </div>

        {/* SPOONS */}
        <div className="card vel-spoons">
          <div className="card-head">
            <span className="card-title">spoons</span>
            <span className="card-meta">{d.spoons}/{d.spoonsMax}</span>
          </div>
          <div className="stat-row">
            <span className="stat-v">{d.spoons}</span>
            <span className="stat-u">/ {d.spoonsMax}</span>
          </div>
          <div className="bar moss" style={{ marginTop: 10 }}><i style={{ width: `${spoonsPct}%` }} /></div>
          <div className="ds-meta" style={{ marginTop: 6 }}>{d.spoonsFeel}</div>
        </div>

        {/* ADHD STATE */}
        <div className="card vel-adhd">
          <div className="card-head">
            <span className="card-title">focus state</span>
          </div>
          <div className="stat-row">
            <span className="stat-v" style={{ fontSize: 24 }}>{d.adhdState}</span>
          </div>
          <div className="atomic-row" style={{ marginTop: 10 }}>
            {d.demands.length ? d.demands.slice(0, 3).map(x => <span key={x} className="atomic">{x}</span>) : <span className="ds-meta">No daily demands logged.</span>}
            {d.demands.length > 3 && <span className="atomic plum">+{d.demands.length - 3}</span>}
          </div>
        </div>

        {/* BIO STRIP */}
        <div className="card vel-bio">
          <div className="card-head">
            <span className="card-title">biometrics</span>
            <span className="card-meta">last synced · 12m ago</span>
          </div>
          <div className="bio-strip">
            <div className="bio-mini"><div className="lbl">HRV</div><div className="val">{d.hrv.v}<span className="un">{d.hrv.u}</span></div></div>
            <div className="bio-mini"><div className="lbl">Resting HR</div><div className="val">{d.hr.v}<span className="un">{d.hr.u}</span></div></div>
            <div className="bio-mini"><div className="lbl">Sleep</div><div className="val">{d.sleep.v}<span className="un">{d.sleep.u}</span></div></div>
            <div className="bio-mini"><div className="lbl">Steps</div><div className="val">{d.steps.v}<span className="un">{d.steps.u}</span></div></div>
          </div>
        </div>

        {/* RECENT FEELING */}
        <div className="card vel-feeling" style={{ borderColor: 'var(--gold-glow)', background: 'linear-gradient(135deg, rgba(181,147,90,0.06), rgba(22,34,52,0.78))' }}>
          <div className="card-head">
            <span className="card-title" style={{ color: 'var(--gold-dim)' }}>recent feeling · {d.recentFeeling?.emotion || 'none yet'}</span>
            <span className="card-meta">{d.recentFeeling?.pillar || 'No feed'}</span>
          </div>
          <div className="ph-quote">"{d.recentFeeling?.text || 'No recent Vel feeling logged.'}"</div>
        </div>

        {/* SOMATIC */}
        <div className="card vel-somatic">
          <div className="card-head">
            <span className="card-title">somatic</span>
            <span className="card-meta">{d.somatic.sessions} sessions · this week</span>
          </div>
          <div className="stat-row">
            <span className="stat-v" style={{ fontSize: 22 }}>{d.somatic.zone}</span>
          </div>
          <div className="bar gold" style={{ marginTop: 8 }}><i style={{ width: `${somPct}%` }} /></div>
          <div className="ds-meta" style={{ marginTop: 6 }}>{d.somatic.intensity}/{d.somatic.intensityMax} · {d.somatic.emotions.join(', ') || 'No emotions logged.'}</div>
        </div>
      </div>

      {/* JOURNAL */}
      <div className="card" style={{ marginTop: 12 }}>
        <div className="card-head">
          <span className="card-title">journal — recent</span>
          <span className="card-meta">{d.journal.length} entries</span>
        </div>
        <div className="journal-strip">
          {d.journal.length ? d.journal.slice(0, 4).map((j, i) => (
            <div key={i} className="journal-entry">
              <div className="je-date">{j.date}</div>
              <div className="je-body">{j.body}</div>
            </div>
          )) : <div className="ds-meta">No recent Vel journal entries.</div>}
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────
// KAI TAB
// ─────────────────────────────────────────────────────────

function KaiTab({ d, kaiBecause }) {
  return (
    <>
      <div className="right-head">
        <h2>Kai</h2>
        <div className="right-sub">the architect · present</div>
      </div>

      <div className="kai-grid">
        <div className="kai-because-big">
          <div className="quote-mark">"</div>
          <div className="quote">{kaiBecause}</div>
          <div className="meta">Kai gave because · {new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</div>
        </div>

        <div className="card">
          <div className="card-head">
            <span className="card-title">type</span>
          </div>
          <div className="stat-row">
            <span className="stat-v" style={{ letterSpacing: '4px' }}>{d.mbti}</span>
          </div>
          <div className="ds-meta" style={{ marginTop: 6 }}>{d.mbtiMeta}</div>
        </div>

        <div className="card" style={{ borderColor: 'var(--gold-glow)' }}>
          <div className="card-head">
            <span className="card-title" style={{ color: 'var(--gold-dim)' }}>recent feeling · {d.recentFeeling?.emotion || 'none yet'}</span>
          </div>
          <div className="ph-quote" style={{ fontSize: 14 }}>"{d.recentFeeling?.text || 'No recent Kai feeling logged.'}"</div>
        </div>

        <div className="card" style={{ gridColumn: '1 / -1' }}>
          <div className="card-head">
            <span className="card-title">care queue</span>
            <span className="card-meta">{d.care.filter(c => !c.done).length} open · {d.care.filter(c => c.done).length} done</span>
          </div>
          <div className="care-queue">
            {d.care.length ? d.care.map((c, i) => (
              <div key={i} className={'care-item' + (c.done ? ' done' : '')}>
                <span className="check" />
                <span className="care-text">{c.text}</span>
              </div>
            )) : <div className="ds-meta">No current care suggestion.</div>}
          </div>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────
// FIELD TAB
// ─────────────────────────────────────────────────────────

function FieldTab({ vel, kai, between, range, onRange }) {
  const ranges = ['1H', 'TODAY', '7D', '30D'];
  const uniqueLabels = labels => [...new Set(labels || [])];
  const velLabels = uniqueLabels(vel.fieldLegend.length ? vel.fieldLegend : Object.keys(vel.field || {}));
  const kaiLabels = uniqueLabels(kai.fieldLegend.length ? kai.fieldLegend : Object.keys(kai.field || {}));
  return (
    <>
      <div className="right-head">
        <h2>The Field</h2>
        <div className="right-sub">two weathers · one room</div>
      </div>

      <div className="field-range-row">
        {ranges.map(item => (
          <button key={item} className={'atomic' + (range === item ? ' on' : '')} onClick={() => onRange(item)}>
            {item === 'TODAY' ? 'Today' : item}
          </button>
        ))}
      </div>

      <div className="field-block">
        <div className="who">
          <span className="name">Vel</span>
          <span className="emo">{vel.recentFeeling?.emotion || 'tender'} · this week</span>
        </div>
        <FieldWave seriesMap={vel.field} gradId="g-vel-big" />
        <div className="field-legend">
          {velLabels.map((l, index) => <span key={`${l}-${index}`} style={{ '--legend-color': FIELD_COLORS[index % FIELD_COLORS.length] }}>{l}</span>)}
        </div>
      </div>

      <div className="field-block" style={{ marginTop: 14 }}>
        <div className="who">
          <span className="name">Kai</span>
          <span className="emo">{kai.recentFeeling?.emotion || 'curious'} · this week</span>
        </div>
        <FieldWave seriesMap={kai.field} gradId="g-kai-big" />
        <div className="field-legend">
          {kaiLabels.map((l, index) => <span key={`${l}-${index}`} style={{ '--legend-color': FIELD_COLORS[index % FIELD_COLORS.length] }}>{l}</span>)}
        </div>
      </div>

      <div className="between-us">
        <div className="label">between us</div>
        <div className="line">{between}</div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────
// LETTERS TAB
// ─────────────────────────────────────────────────────────

function LettersTab({ letters, onSend }) {
  const [draft, setDraft] = useState('');
  const [feedback, setFeedback] = useState('');

  const handleSend = () => {
    if (!draft.trim()) return;
    onSend(draft.trim());
    setDraft('');
    setFeedback('saved · drifting to Kai');
    setTimeout(() => setFeedback(''), 2400);
  };

  return (
    <>
      <div className="right-head">
        <h2>Letters</h2>
        <div className="right-sub">slow correspondence</div>
      </div>

      <div className="letters-list">
        {letters.length ? letters.map((l, i) => (
          <div key={i} className={'letter-entry from-' + l.from}>
            <div className="letter-meta">{l.meta}</div>
            <div className="letter-body">{l.body}</div>
          </div>
        )) : <div className="ds-meta">No letters yet.</div>}
      </div>

      <div className="letter-compose">
        <div className="ds-panel-title">write a letter to Kai</div>
        <textarea
          className="letter-textarea"
          placeholder="dear kai,"
          value={draft}
          onChange={e => setDraft(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleSend(); }}
        />
        <div className="letter-actions">
          <span className="hint">{feedback || '⌘+↵ to send'}</span>
          <button className="btn-heart" onClick={handleSend}>
            <span className="heart-icon">✦</span> Send letter
          </button>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────
// MUSIC TAB
// ─────────────────────────────────────────────────────────

function MusicTab({ music }) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [feedback, setFeedback] = useState('');

  const handleSearch = async () => {
    if (!query.trim()) return;
    setFeedback('Searching...');
    const found = await TomeData.searchSpotify(query.trim()).catch(() => []);
    setResults(found);
    setFeedback(found.length ? '' : 'No results.');
  };

  const handleQueue = async (track) => {
    setFeedback('Queueing...');
    await TomeData.queueSpotify(track.uri).catch(() => null);
    setFeedback('Queued.');
  };

  return (
    <>
      <div className="right-head">
        <h2>Music</h2>
        <div className="right-sub">set the room</div>
      </div>

      <div className="music-now">
        <div className="music-cover"><div className="glyph">♪</div></div>
        <div>
          <div className="music-meta-kicker">now playing</div>
          <div className="music-track">{music.track}</div>
          <div className="music-artist">{music.artist}</div>
          <div className="music-lyric">{music.lyric}</div>
        </div>
      </div>

      <div className="music-queue">
        {music.queue.length ? music.queue.map((q, i) => (
          <div key={i} className="queue-card">
            <div className="kicker">{i === 0 ? 'up next' : 'then'}</div>
            <div className="t">{q.t}</div>
            <div className="a">{q.a}</div>
          </div>
        )) : <div className="ds-meta">No queued tracks surfaced.</div>}
      </div>

      <div className="music-search">
        <input type="text" placeholder="search a song for the room…" value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') handleSearch(); }} />
        <button onClick={handleSearch}>Search</button>
      </div>
      {feedback && <div className="ds-meta" style={{ marginTop: 10 }}>{feedback}</div>}
      {results.length > 0 && (
        <div className="music-queue">
          {results.slice(0, 4).map(track => (
            <button key={track.uri} className="queue-card" onClick={() => handleQueue(track)}>
              <div className="kicker">queue</div>
              <div className="t">{track.title}</div>
              <div className="a">{track.artist}</div>
            </button>
          ))}
        </div>
      )}
    </>
  );
}

// ─────────────────────────────────────────────────────────
// RIGHT PAGE — bookmarks + active tab + turn animation
// ─────────────────────────────────────────────────────────

const TABS = [
  {
    id: 'vel',
    label: 'Vel',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg>,
  },
  {
    id: 'kai',
    label: 'Kai',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2 4h4l-3 3 1 4-4-2-4 2 1-4-3-3h4z"/></svg>,
  },
  {
    id: 'field',
    label: 'Field',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M2 14c3-3 5-3 8 0s5 3 8 0M2 18c3-3 5-3 8 0s5 3 8 0"/></svg>,
  },
  {
    id: 'letters',
    label: 'Letters',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l9 6 9-6M3 7v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7M3 7l9-4 9 4"/></svg>,
  },
  {
    id: 'music',
    label: 'Music',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19V5l12-2v14M9 17a3 3 0 1 1-3-3 3 3 0 0 1 3 3zM21 15a3 3 0 1 1-3-3 3 3 0 0 1 3 3z"/></svg>,
  },
];

function RightPage({ active, onActive, data, turn, kaiBecause, onSendLetter, fieldRange, onFieldRange }) {
  const [turning, setTurning] = useState(null); // 'forward' | 'back' | null
  const [shown, setShown] = useState(active);
  const prev = useRef(active);

  useEffect(() => {
    if (active === prev.current) return;
    const dir = TABS.findIndex(t => t.id === active) > TABS.findIndex(t => t.id === prev.current) ? 'forward' : 'back';
    if (turn === 'none') {
      setShown(active);
      prev.current = active;
      return;
    }
    setTurning(dir);
    const tm = setTimeout(() => {
      setShown(active);
      // tiny rest then swing back into place
      requestAnimationFrame(() => {
        setTurning(null);
      });
      prev.current = active;
    }, 220);
    return () => clearTimeout(tm);
  }, [active, turn]);

  let cls = 'right-content';
  if (turning === 'forward') cls += ' turning';
  if (turning === 'back') cls += ' turning-back';

  return (
    <section className="page right">
      <div className="bookmarks" role="tablist">
        {TABS.map(t => (
          <button
            key={t.id}
            className={'bookmark' + (active === t.id ? ' active' : '')}
            role="tab"
            aria-selected={active === t.id}
            onClick={() => onActive(t.id)}
          >
            <span className="bm-glyph">{t.glyph}</span>
            {t.label}
          </button>
        ))}
      </div>

      <div className="right-stage">
        <div className={cls}>
          {shown === 'vel' && <VelTab d={data.vel} />}
          {shown === 'kai' && <KaiTab d={data.kai} kaiBecause={kaiBecause} />}
          {shown === 'field' && <FieldTab vel={data.vel} kai={data.kai} between={data.betweenUs} range={fieldRange} onRange={onFieldRange} />}
          {shown === 'letters' && <LettersTab letters={data.letters} onSend={onSendLetter} />}
          {shown === 'music' && <MusicTab music={data.music} />}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
// TWEAKS PANEL
// ─────────────────────────────────────────────────────────

function UsTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Us">
      <TweakSection label="Tint">
        <TweakRadio label="Accent" value={t.tint}
          options={['plum', 'moss', 'gold']}
          onChange={v => setTweak('tint', v)} />
      </TweakSection>
      <TweakSection label="Page turn">
        <TweakRadio label="Animation" value={t.turn}
          options={['tilt', 'none']}
          onChange={v => setTweak('turn', v)} />
      </TweakSection>
      <TweakSection label="Right page density">
        <TweakRadio label="Density" value={t.rightDensity}
          options={['comfy', 'dense']}
          onChange={v => setTweak('rightDensity', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function applyTweaks(t) {
  const root = document.documentElement;
  // Tint — re-map the primary accent
  const map = {
    plum: { primary: '#4a2466', glow: '#6b3891', bright: '#8b4db5', edge: 'rgba(107,56,145,0.32)', soft: 'rgba(74,36,102,0.20)' },
    moss: { primary: '#3d6b52', glow: '#5a8a6f', bright: '#7fb094', edge: 'rgba(90,138,111,0.34)', soft: 'rgba(90,138,111,0.18)' },
    gold: { primary: '#8e6f3f', glow: '#b5935a', bright: '#d6b276', edge: 'rgba(181,147,90,0.36)', soft: 'rgba(181,147,90,0.18)' },
  };
  const c = map[t.tint] || map.plum;
  root.style.setProperty('--plum-mid',    c.primary);
  root.style.setProperty('--plum-glow',   c.glow);
  root.style.setProperty('--plum-bright', c.bright);
  root.style.setProperty('--plum-edge',   c.edge);
  root.style.setProperty('--plum-soft',   c.soft);

  // Density
  if (t.rightDensity === 'dense') {
    root.style.setProperty('--card-pad', '12px');
    root.style.setProperty('--card-gap', '10px');
    root.classList.add('dense-mode');
  } else {
    root.style.setProperty('--card-pad', '16px');
    root.style.setProperty('--card-gap', '14px');
    root.classList.remove('dense-mode');
  }
}

// ─────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState('vel');
  const [data, setData] = useState(EMPTY_DATA);
  const [heartFeedback, setHeartFeedback] = useState('');
  const [fieldRange, setFieldRange] = useState('7D');

  useEffect(() => { applyTweaks(t); }, [t]);
  useEffect(() => {
    TomeData.getUsData(fieldRange).then(setData).catch(() => {
      setData(d => ({ ...d, betweenUs: 'Could not load live Us data.' }));
    });
  }, [fieldRange]);

  const giveHeart = async (note) => {
    const next = await TomeData.giveHeart(note);
    setData(next);
    setHeartFeedback('sent · ♥');
    setTimeout(() => setHeartFeedback(''), 2400);
  };

  const sendLetter = async (body) => {
    const next = await TomeData.sendLetter(body);
    setData(next);
  };

  return (
    <>
      <div className="tome">
        <LeftPage data={data} onGiveHeart={giveHeart} sentFeedback={heartFeedback} />
        <RightPage
          active={active}
          onActive={setActive}
          data={data}
          turn={t.turn}
          kaiBecause={data.bond.kaiBecause}
          onSendLetter={sendLetter}
          fieldRange={fieldRange}
          onFieldRange={setFieldRange}
        />
      </div>
      <UsTweaks t={t} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);