/* global React, SH_EL */
// Skyhearth mobile — condition modals: ascension fanfare, death, collapse.
// Phone-sized siblings of the desktop modals, driven by the shared-core state.
const CORE_M = window.SkyhearthCore;
const RANK_NAMES_M = CORE_M.RANK_NAMES;

function veinColor(id) { return (SH_EL[id] && SH_EL[id].color) || 'var(--stamp-amber)'; }

// ---------- ASCENSION ----------
function AscendModalM({ info, onClose }) {
  const color = veinColor(info.veinId);
  const motes = [16, 38, 60, 82];
  const seenPrimal = (() => { try { return localStorage.getItem('sh-seen-primal') === '1'; } catch (e) { return false; } })();
  if (info.toRank >= 3) { try { localStorage.setItem('sh-seen-primal', '1'); } catch (e) {} }
  const ladder = (info.toRank >= 3 || seenPrimal) ? RANK_NAMES_M : RANK_NAMES_M.slice(0, 3);
  return (
    <div className="m-modal sh-m" style={{ background: `radial-gradient(ellipse at center, ${color}33, rgba(20,16,10,0.82) 70%)` }}>
      <div className="m-card brackets" style={{ animation: 'ascend-rise 520ms cubic-bezier(0.2,0.7,0.2,1) both' }}>
        <div style={{ position: 'relative', height: 168, overflow: 'hidden', borderBottom: '1.5px solid var(--ink-faded)' }}>
          <div style={{ position: 'absolute', top: '52%', left: '50%', width: 460, height: 460, transform: 'translate(-50%,-50%)', background: `repeating-conic-gradient(from 0deg, ${color}26 0deg 5deg, transparent 5deg 11deg)`, animation: 'ray-spin 42s linear infinite', WebkitMaskImage: 'radial-gradient(circle, #000 14%, transparent 60%)', maskImage: 'radial-gradient(circle, #000 14%, transparent 60%)' }} />
          <div style={{ position: 'absolute', top: '52%', left: '50%', width: 220, height: 220, transform: 'translate(-50%,-50%)', background: `radial-gradient(circle, ${color}44, transparent 64%)` }} />
          {motes.map((x, i) => <span key={i} style={{ position: 'absolute', bottom: 16, left: `${x}%`, width: 5, height: 5, borderRadius: '50%', background: color, boxShadow: `0 0 8px ${color}`, animation: `mote-drift ${3 + (i % 3)}s ease-in ${i * 0.5}s infinite` }} />)}
          <img className="drop-white" src="assets/drift-mote.png" alt="" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 124, height: 124, objectFit: 'contain' }} />
          <div style={{ position: 'absolute', top: 12, left: 0, right: 0, textAlign: 'center' }}><span className="stamp stamp-amber" style={{ fontSize: 8 }}>ASCENSION · CONFIRMED</span></div>
        </div>
        <div style={{ textAlign: 'center', padding: '18px 20px 20px' }}>
          <div className="fell" style={{ fontSize: 27, lineHeight: 1.05 }}>{info.formName}</div>
          <div className="row" style={{ justifyContent: 'center', margin: '16px 0 4px' }}>
            {ladder.map((rn, i) => {
              const reached = i <= info.toRank, isNew = i === info.toRank;
              return (
                <React.Fragment key={rn}>
                  {i > 0 && <span style={{ width: 18, height: 1, alignSelf: 'flex-start', marginTop: 6, background: i <= info.toRank ? 'var(--ink)' : 'var(--ink-ghost)' }} />}
                  <div className="col aic" style={{ width: 58 }}>
                    <div style={{ width: 13, height: 13, borderRadius: '50%', border: `1.5px solid ${reached ? 'var(--ink)' : 'var(--ink-ghost)'}`, background: isNew ? color : reached ? 'var(--ink)' : 'transparent', boxShadow: isNew ? `0 0 0 4px ${color}40` : 'none' }} />
                    <span className="fell" style={{ fontSize: 10.5, marginTop: 5, color: reached ? 'var(--ink)' : 'var(--ink-faded)', fontWeight: isNew ? 600 : 400 }}>{rn}</span>
                  </div>
                </React.Fragment>
              );
            })}
          </div>
          <button className="btn-primary" style={{ marginTop: 16, fontSize: 14, padding: 11 }} onPointerDown={onClose}>Continue ▸</button>
        </div>
      </div>
    </div>
  );
}

// ---------- DEATH ----------
function DeathModalM({ state, onReset }) {
  const starved = state.deathCause === 'starve';
  const stamp = starved ? 'WASTED AWAY · NO RESERVE' : 'MANIFESTATION · EXPIRED';
  return (
    <div className="m-modal sh-m" style={{ background: 'radial-gradient(ellipse at center, rgba(40,16,10,0.66), rgba(8,6,5,0.94) 72%)' }}>
      <div className="m-card" style={{ borderColor: 'var(--crit)', borderWidth: 2, borderStyle: 'double' }}>
        <div style={{ textAlign: 'center', padding: '22px 24px 6px' }}>
          <span className="stamp" style={{ borderColor: 'var(--crit)', color: 'var(--crit)', fontSize: 8 }}>{stamp}</span>
          <div className="fell" style={{ fontSize: 24, marginTop: 10, color: 'var(--crit)' }}>Death Claims the Vessel</div>
        </div>
        <div style={{ position: 'relative', height: 120, margin: '6px 0' }}>
          <img className="drop-white" src="assets/drift-mote.png" alt="" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 110, height: 110, objectFit: 'contain', filter: 'url(#sh-dropwhite) grayscale(1)', opacity: 0.34 }} />
          <img className="drop-white" src="assets/drift-mote.png" alt="" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 62, height: 62, objectFit: 'contain', animation: 'mote-gather 2.6s ease-in-out infinite' }} />
        </div>
        <div className="mono muted" style={{ textAlign: 'center', fontSize: 10.5, lineHeight: 1.6, padding: '0 26px 18px' }}>
          The <span className="fell" style={{ fontSize: 13, color: 'var(--ink)' }}>{state.formName}</span> {starved ? 'burned its last reserve and could give no more.' : 'has spent its allotted days.'} Its veins scatter — and a new mote begins to drift.
        </div>
        <div style={{ textAlign: 'center', paddingBottom: 20 }}>
          <button className="btn-primary" style={{ fontSize: 14, padding: 11 }} onPointerDown={onReset}>A New Mote Drifts In ▸</button>
        </div>
      </div>
    </div>
  );
}

// ---------- COLLAPSE ----------
function CollapseModalM({ state, onClose }) {
  return (
    <div className="m-modal sh-m" style={{ background: 'radial-gradient(ellipse at center, rgba(28,30,46,0.6), rgba(10,10,16,0.92) 72%)' }}>
      <div className="m-card" style={{ borderColor: 'var(--stamp-amber)', animation: 'ascend-rise 460ms cubic-bezier(0.2,0.7,0.2,1) both' }}>
        <div style={{ textAlign: 'center', padding: '22px 24px 4px' }}>
          <span className="stamp stamp-amber" style={{ fontSize: 8 }}>FATIGUE · MAXED · FORCED REST</span>
          <div className="fell" style={{ fontSize: 23, marginTop: 10 }}>The Spirit Collapses</div>
        </div>
        <div style={{ position: 'relative', height: 104, margin: '4px 0' }}>
          <div style={{ position: 'absolute', top: '54%', left: '50%', width: 150, height: 150, transform: 'translate(-50%,-50%)', background: 'radial-gradient(circle, rgba(122,111,90,0.32), transparent 64%)' }} />
          <img className="drop-white" src="assets/drift-mote.png" alt="" style={{ position: 'absolute', top: '52%', left: '50%', transform: 'translate(-50%,-50%)', width: 92, height: 92, objectFit: 'contain', filter: 'url(#sh-dropwhite) saturate(0.6)' }} />
          <span className="fell" style={{ position: 'absolute', top: 8, left: '58%', fontSize: 22, color: 'var(--ink-faded)', opacity: 0.6 }}>Z</span>
        </div>
        <div className="mono muted" style={{ textAlign: 'center', fontSize: 10.5, lineHeight: 1.6, padding: '0 26px' }}>
          The <span className="fell" style={{ fontSize: 13, color: 'var(--ink)' }}>{state.formName}</span> dropped where it stood. The forced rest clears the exhaustion — but waking untended fractures its trust.
        </div>
        <div className="row center" style={{ gap: 26, margin: '14px 0' }}>
          <div className="col aic"><span className="mono" style={{ fontSize: 11, color: 'var(--crit)', fontWeight: 700 }}>−25</span><span className="label" style={{ marginTop: 2 }}>Bond</span></div>
          <div className="col aic"><span className="mono" style={{ fontSize: 11, color: 'var(--ok)', fontWeight: 700 }}>→ 0</span><span className="label" style={{ marginTop: 2 }}>Fatigue</span></div>
        </div>
        <div style={{ textAlign: 'center', paddingBottom: 20 }}>
          <button className="btn-primary" style={{ fontSize: 14, padding: 11 }} onPointerDown={onClose}>Let It Wake ▸</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AscendModalM, DeathModalM, CollapseModalM });
