/* global React, window */
// Vibramood · screens.jsx — Onboarding / Check-in / Map / Biome / Journal
const { Icon, MobileHeader } = window.WFMobile;
const { Vibra } = window.VMVibras;
const VM = window.VM;

// ─── Shared header ───────────────────────────────────────────────────────────
function VMHeader({ audio, onAudio, onSettings }) {
  return (
    <MobileHeader
      title={
        <div className="vm-hd">
          <div className="vm-hd-avatar">
            <Vibra which={VM.player.companion} size={28} />
          </div>
          <div className="vm-hd-meta">
            <div className="name">Hai, {VM.player.name}</div>
            <div className="sub">Bersama Tito · hari ke-{VM.player.streak}</div>
          </div>
          <div className="vm-hd-chips">
            <span className="vm-pill sage" title="Daun terkumpul">
              <Icon name="leaf" size={11}/>
              <span className="num">{VM.player.leaves}</span>
            </span>
            <button
              className={'vm-pill aqua' + (audio ? '' : ' off')}
              onClick={onAudio}
              aria-pressed={audio}
              aria-label={audio ? 'Matikan suara' : 'Nyalakan suara'}
              style={{ background: audio ? 'var(--vm-aqua-50)' : '#f1eee6', cursor: 'pointer', border: 0 }}
            >
              <span className={'vm-wave' + (audio ? '' : ' off')}>
                <i/><i/><i/><i/>
              </span>
            </button>
          </div>
        </div>
      }
      right={
        <button className="wm-icon-btn" aria-label="Pengaturan" onClick={onSettings}>
          <Icon name="sparkle" size={18}/>
        </button>
      }
    />
  );
}

// ─── 1. Onboarding ───────────────────────────────────────────────────────────
function ScreenOnboarding({ pick, onPick, name, onName, onContinue }) {
  const choices = ['tito', 'lumi', 'fern', 'mossy'];
  return (
    <div className="wm-stack" style={{ padding: '20px 20px 32px' }}>
      <div className="vm-onboard">
        <div className="eyebrow">Vibramood</div>
        <h1>Pilih Vibra sahabatmu</h1>
        <p>Setiap Vibra membantumu mengenali perasaan dengan cara yang lembut.</p>
      </div>

      <div className="vm-vibra-carousel">
        {choices.map((k) => (
          <button
            key={k}
            className={'vm-vibra-slot' + (pick === k ? ' active' : '')}
            onClick={() => onPick(k)}
            style={{ background: 'transparent', border: 0 }}
          >
            <Vibra which={k} size={pick === k ? 96 : 72}/>
            <span className="name">{k[0].toUpperCase() + k.slice(1)}</span>
          </button>
        ))}
      </div>

      <div className="vm-onboard">
        <p style={{ maxWidth: 260 }}>
          {pick === 'tito'  && 'Tito si tetesan tenang akan menemanimu bernapas.'}
          {pick === 'lumi'  && 'Lumi si sinar hangat akan menyimpan momen syukurmu.'}
          {pick === 'fern'  && 'Fern si daun lembut akan menenangkan pikiran khawatir.'}
          {pick === 'mossy' && 'Mossy si pelukan lembut mengajakmu istirahat tanpa takut.'}
        </p>
      </div>

      <div className="vm-name-field">
        <span className="lbl">Nama</span>
        <input
          value={name}
          onChange={(e) => onName(e.target.value)}
          placeholder="Kayla"
          aria-label="Nama kamu"
        />
      </div>

      <button className="vm-finish-btn" onClick={onContinue}>
        Mulai petualangan
      </button>
    </div>
  );
}

// ─── 2. Mood Check-in ────────────────────────────────────────────────────────
function ScreenCheckin({ mood, onMood, intensity, onIntensity, onConfirm }) {
  const active = VM.findMood(mood) || VM.moods[0];
  return (
    <div className="wm-stack" style={{ padding: '16px 18px 24px' }}>
      <div className="vm-checkin-hero">
        <div className="greeting">SELAMAT SIANG, {VM.player.name.toUpperCase()}</div>
        <div className="ask">Bagaimana hatimu sekarang?</div>
      </div>

      <div className="vm-mood-grid">
        {VM.moods.map((m) => (
          <button
            key={m.key}
            className={'vm-mood' + (mood === m.key ? ' active' : '')}
            onClick={() => onMood(m.key)}
            style={{ '--mood-color': m.color, background: mood === m.key ? '#fff' : undefined, border: 0 }}
          >
            <Vibra which={m.vibra} size={64}/>
            <span className="label">{m.label}</span>
            <span className="help">{m.helper}</span>
          </button>
        ))}
      </div>

      <div className="vm-intensity" style={{ '--mood-color': active.color, '--pct': intensity + '%' }}>
        <div className="row">
          <span className="lbl">Seberapa kuat rasanya?</span>
          <span className="val">
            {intensity < 34 ? 'Sedikit' : intensity < 67 ? 'Cukup' : 'Sangat'}
          </span>
        </div>
        <div className="track">
          <div className="fill"/>
          <div className="knob"/>
        </div>
        <div className="ticks">
          <span>Sedikit</span>
          <span>Cukup</span>
          <span>Sangat</span>
        </div>
      </div>

      <button className="vm-finish-btn" onClick={onConfirm}>
        Lanjut ke Peta Vibra
      </button>
    </div>
  );
}

// ─── 3. Map (Peta) ───────────────────────────────────────────────────────────
function ScreenMap({ onOpenBiome, recommendedKey = 'woods' }) {
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--vm-aqua-700)' }}>PETA VIBRA</div>
        <div className="wm-h2">Ke mana hari ini?</div>
        <div className="wm-muted" style={{ fontSize: 13 }}>
          Pilih biome untuk bertualang. Yang bersinar adalah saran berdasarkan perasaanmu.
        </div>
      </div>

      <div className="vm-map-wrap">
        <svg className="bg" viewBox="0 0 540 460" preserveAspectRatio="xMidYMid slice">
          {/* soft hills */}
          <path d="M0 320 Q120 260 240 300 T540 280 L540 460 L0 460Z" fill="#cfe3d1" opacity=".7"/>
          <path d="M0 380 Q140 340 280 360 T540 340 L540 460 L0 460Z" fill="#b8d4bd" opacity=".7"/>
          {/* water */}
          <path d="M0 100 Q120 70 220 90 Q320 110 420 80 Q500 60 540 80 L540 0 L0 0Z" fill="#cfe9ee" opacity=".55"/>
          {/* dotted paths between biomes */}
          <g stroke="#a78f5e" strokeWidth="2" strokeDasharray="3 6" fill="none" opacity=".55">
            <path d="M80 130 Q170 100 260 70"/>
            <path d="M260 70 Q360 100 430 140"/>
            <path d="M110 320 Q190 250 260 200"/>
            <path d="M280 380 Q360 360 440 340"/>
            <path d="M260 200 Q330 280 430 140"/>
          </g>
          {/* tiny clouds */}
          <g fill="#fff" opacity=".75">
            <ellipse cx="80" cy="40" rx="22" ry="8"/>
            <ellipse cx="430" cy="30" rx="28" ry="9"/>
          </g>
        </svg>

        {VM.biomes.map((b) => {
          const isRec = b.key === recommendedKey && b.unlocked;
          const xPct = (b.x / 540) * 100;
          const yPct = (b.y / 460) * 100;
          return (
            <button
              key={b.key}
              className={
                'vm-island' +
                (b.unlocked ? '' : ' locked') +
                (isRec ? ' recommended' : '')
              }
              onClick={() => b.unlocked && onOpenBiome(b.key)}
              style={{ left: xPct + '%', top: yPct + '%', background: 'transparent', border: 0 }}
              aria-label={b.name + (b.unlocked ? '' : ' (terkunci)')}
            >
              <Vibra which={VM.findMood(b.mood).vibra} size={76} silhouette={!b.unlocked}/>
              <span className="label">
                {!b.unlocked && <Icon name="lock" size={10}/>}
                {b.name}
                <span className="pts">{b.vibrasFound}/{b.vibrasTotal}</span>
              </span>
            </button>
          );
        })}
      </div>

      <div className="vm-map-cta" onClick={() => onOpenBiome(recommendedKey)} role="button">
        <div className="face"><Vibra which={VM.findBiome(recommendedKey)?.mood && VM.findMood(VM.findBiome(recommendedKey).mood).vibra} size={52}/></div>
        <div className="body">
          <div className="lbl">SARAN UNTUKMU</div>
          <div className="title">Coba Whisper Woods bersama Fern</div>
          <div className="sub">Cocok untuk perasaan khawatir · 2–5 menit</div>
        </div>
        <Icon name="chevron" size={20} color="var(--vm-aqua-700)"/>
      </div>
    </div>
  );
}

// ─── 4. Biome (Whisper Woods) ────────────────────────────────────────────────
function ScreenBiome({ biomeKey = 'woods', onFinish }) {
  const biome = VM.findBiome(biomeKey) || VM.biomes[2];
  const mood = VM.findMood(biome.mood);
  const set = VM.activities[biomeKey] || VM.activities.woods;
  const pct = Math.round((set.progress.done / set.progress.total) * 100);

  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="vm-biome-hero">
        <div className="row">
          <div className="face"><Vibra which={mood.vibra} size={78}/></div>
          <div className="copy">
            <div className="eyebrow">{biome.id.toUpperCase()}</div>
            <h2>{set.headline}</h2>
            <p>{set.sub}</p>
          </div>
        </div>
        <div className="vm-biome-progress">
          <div className="bar"><i style={{ width: pct + '%' }}/></div>
          <div className="lbl">{set.progress.done}/{set.progress.total} aktivitas</div>
        </div>
      </div>

      <div className="vm-breath">
        <div className="title">{set.primary.title.toUpperCase()}</div>
        <div className="vm-breath-circle">
          <div className="ph">Tarik napas<small>4 detik</small></div>
        </div>
        <div className="desc">{set.primary.desc}</div>
      </div>

      <div className="vm-act-row">
        {set.secondary.map((a) => (
          <div key={a.kind} className="vm-act">
            <div className="ico"><Icon name={a.icon || 'leaf'} size={18}/></div>
            <div className="title">{a.title}</div>
            <div className="sub">{a.desc}</div>
            <div className="dur">{a.duration}</div>
          </div>
        ))}
      </div>

      <button className="vm-finish-btn" onClick={onFinish}>
        Selesai · Klaim daun
      </button>
    </div>
  );
}

// ─── 5. Journal & Collection ─────────────────────────────────────────────────
function ScreenJournal({ view, onView }) {
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="vm-tabs-seg">
        <button className={view === 'journal' ? 'active' : ''} onClick={() => onView('journal')}>Jurnal Mood</button>
        <button className={view === 'collection' ? 'active' : ''} onClick={() => onView('collection')}>Koleksi Vibra</button>
      </div>

      {view === 'journal' ? (
        <>
          <div className="wm-stack-sm">
            <div className="wm-eyebrow" style={{ color: 'var(--vm-aqua-700)' }}>MINGGU INI</div>
            <div className="wm-h2">Pelangi perasaanmu</div>
          </div>

          <div className="vm-week">
            {VM.journalWeek.map((d) => {
              const m = VM.findMood(d.mood);
              return (
                <div key={d.day} className="day" style={{ borderColor: m.color + '55' }}>
                  <span className="lbl">{d.day}</span>
                  <Vibra which={m.vibra} size={36}/>
                </div>
              );
            })}
          </div>

          <div className="wm-stack-sm">
            {VM.journalWeek.slice(-4).reverse().map((d) => {
              const m = VM.findMood(d.mood);
              return (
                <div key={d.day} className="vm-mood-card" style={{ '--mood-color': m.color, '--mood-tint': m.color + '22' }}>
                  <div className="face"><Vibra which={m.vibra} size={44}/></div>
                  <div className="copy">
                    <div className="day">{d.day} · {m.label}</div>
                    <div className="note">"{d.note}"</div>
                  </div>
                  <div className="badge">{m.label}</div>
                </div>
              );
            })}
          </div>

          <div className="vm-summary">
            <div className="ico"><Icon name="sparkle" size={18} color="#fff"/></div>
            <div className="body">
              <div className="ttl">Pola minggu ini</div>
              <div className="sub">Kamu sering merasa <strong>tenang</strong> setelah mengunjungi Whisper Woods. Lanjutkan ya!</div>
            </div>
          </div>
        </>
      ) : (
        <>
          <div className="wm-stack-sm">
            <div className="wm-eyebrow" style={{ color: 'var(--vm-aqua-700)' }}>KOLEKSI VIBRA</div>
            <div className="wm-h2">{VM.player.vibrasCollected} dari {VM.player.vibrasTotal} ditemukan</div>
            <div className="wm-muted" style={{ fontSize: 13 }}>Temukan Vibra baru dengan menjelajah biome.</div>
          </div>

          <div className="vm-collection">
            {VM.vibras.map((v) => (
              <div
                key={v.key}
                className={
                  'vm-coll-card' +
                  (v.collected ? '' : ' locked') +
                  (v.isCompanion ? ' companion' : '')
                }
                title={v.collected ? v.name : 'Belum ditemukan'}
              >
                <Vibra which={v.key.replace('echo-', '')} size={56} silhouette={!v.collected}/>
                <div className="name">{v.collected ? v.name : '???'}</div>
                <div className="meta">{v.collected ? (v.isCompanion ? 'Sahabat' : 'Ditemukan') : 'Misteri'}</div>
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

window.VMScreens = { VMHeader, ScreenOnboarding, ScreenCheckin, ScreenMap, ScreenBiome, ScreenJournal };