// Home — daily path with lessons.
function HomeHeader({ name, streak, level, xp, xpMax, onOpenProfile }) {
  return (
    <div style={{
      padding: '6px 22px 14px',
      background: 'linear-gradient(180deg, #DDE9DF 0%, transparent 100%)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <button onClick={() => { OASound.tap(); onOpenProfile && onOpenProfile(); }} className="oa-no-tap" aria-label="Buka profil" style={{
          width: 56, height: 56, borderRadius: 28,
          background: OA_THEME.card, border: `2px solid ${OA_THEME.sage}`,
          overflow: 'hidden', display:'flex', alignItems:'flex-end', justifyContent:'center',
          padding: 0, cursor: 'pointer',
        }}>
          <Mascot size={62} mood="happy" />
        </button>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, color: OA_THEME.inkSoft, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 700 }}>{greetingNow()}</div>
          <div style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 26, lineHeight: 1.1, color: OA_THEME.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        </div>
        <div title="streak" style={{
          display:'flex', alignItems:'center', gap: 6,
          background: OA_THEME.card, border: `1.5px solid ${OA_THEME.line}`,
          borderRadius: 999, padding: '8px 12px',
          boxShadow: '0 2px 0 rgba(60,82,76,0.06)',
        }}>
          <span style={{ fontSize: 20 }}>🔥</span>
          <span style={{ fontWeight: 800, fontSize: 18, color: OA_THEME.ink }}>{streak}</span>
        </div>
      </div>

      <div style={{
        marginTop: 14,
        background: OA_THEME.card,
        border: `1.5px solid ${OA_THEME.line}`,
        borderRadius: 16, padding: '12px 14px',
        boxShadow: '0 2px 0 rgba(60,82,76,0.06)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: OA_THEME.gold, color: '#fff', fontWeight: 900, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 16, boxShadow:'0 2px 0 #00000018 inset' }}>{level}</div>
            <div style={{ fontWeight: 800, fontSize: 18 }}>Tingkat {level} · {levelName(level)}</div>
          </div>
          <div style={{ fontSize: 16, color: OA_THEME.inkSoft, fontWeight: 700 }}>{xp}/{xpMax}</div>
        </div>
        <div style={{ height: 12, background: '#EAE2D5', borderRadius: 8, overflow: 'hidden' }}>
          <div style={{
            width: `${Math.min(100, (xp / xpMax) * 100)}%`, height: '100%',
            background: `linear-gradient(90deg, ${OA_THEME.sage}, ${OA_THEME.sageDeep})`,
            borderRadius: 8, transition: 'width .6s cubic-bezier(.2,.7,.2,1)',
          }} />
        </div>
      </div>
    </div>
  );
}

function greetingNow() {
  const h = new Date().getHours();
  if (h < 11) return 'Selamat pagi';
  if (h < 15) return 'Selamat siang';
  if (h < 18) return 'Selamat sore';
  return 'Selamat malam';
}

function levelName(level) {
  const names = ['Baru', 'Pemula', 'Tenang', 'Tekun', 'Cermat', 'Bijak', 'Terampil', 'Mahir', 'Lestari'];
  return names[Math.min(level - 1, names.length - 1)] || 'Bijak';
}

function PathNode({ icon, label, status, side, onClick, locked, showStartTip }) {
  const offset = side === 'L' ? -50 : side === 'R' ? 50 : 0;
  const ring = status === 'done' ? OA_THEME.sageDeep
            : status === 'current' ? OA_THEME.gold
            : OA_THEME.line;
  const fill = status === 'done' ? OA_THEME.sage
            : status === 'current' ? OA_THEME.card
            : '#E6DFD3';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', transform: `translateX(${offset}px)`, position: 'relative' }}>
      {showStartTip && status === 'current' && (
        <div style={{
          background: OA_THEME.card,
          border: `2px solid ${OA_THEME.gold}`,
          borderRadius: 14, padding: '6px 12px',
          fontSize: 14, fontWeight: 800, color: OA_THEME.goldDeep,
          marginBottom: 8, position: 'relative',
          boxShadow: '0 3px 0 rgba(168,125,52,0.18)',
          letterSpacing: 0.4, textTransform: 'uppercase',
        }}>MULAI
          <span style={{ position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%) rotate(45deg)', width: 12, height: 12, background: OA_THEME.card, borderRight: `2px solid ${OA_THEME.gold}`, borderBottom: `2px solid ${OA_THEME.gold}` }} />
        </div>
      )}
      <button onClick={() => { if (!locked) { OASound.tap(); onClick && onClick(); } }} disabled={locked} className="oa-no-tap" aria-label={label} style={{
        width: 92, height: 92, borderRadius: '50%',
        background: fill,
        border: `4px solid ${ring}`,
        boxShadow: status === 'locked' ? 'none' : `0 6px 0 ${status === 'done' ? OA_THEME.sageDeep : status === 'current' ? OA_THEME.goldDeep : '#0000'}, 0 1px 0 rgba(255,255,255,0.6) inset`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 36, color: status === 'done' ? '#fff' : OA_THEME.ink,
        cursor: locked ? 'not-allowed' : 'pointer',
        opacity: status === 'locked' ? 0.55 : 1,
        animation: status === 'current' ? 'oaPulse 2.4s ease-in-out infinite' : 'none',
        position: 'relative',
      }}>
        {status === 'done' ? '✓' : status === 'locked' ? '🔒' : icon}
      </button>
      <div style={{
        marginTop: 10, fontSize: 16, fontWeight: 700,
        color: status === 'locked' ? OA_THEME.inkSoft : OA_THEME.ink,
        textAlign: 'center', maxWidth: 130,
      }}>{label}</div>
    </div>
  );
}

function ChapterTag({ children }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap: 12, padding: '12px 4px', margin: '6px 18px' }}>
      <div style={{ flex: 1, height: 1.5, background: OA_THEME.line }} />
      <div style={{
        background: OA_THEME.card, border: `1.5px dashed ${OA_THEME.sage}`,
        borderRadius: 999, padding: '8px 16px',
        fontFamily: 'Lora, serif', fontStyle: 'italic',
        fontSize: 17, color: OA_THEME.sageDeep, fontWeight: 600,
        textAlign: 'center',
      }}>{children}</div>
      <div style={{ flex: 1, height: 1.5, background: OA_THEME.line }} />
    </div>
  );
}

function TabBar({ active, onNav }) {
  const tabs = [
    { i: '🏡', l: 'Beranda', k: 'home' },
    { i: '🏅', l: 'Lencana', k: 'badges' },
    { i: '👤', l: 'Profil', k: 'profile' },
  ];
  return (
    <div style={{
      position: 'fixed', left: 14, right: 14, bottom: 'max(22px, env(safe-area-inset-bottom))',
      maxWidth: 452, margin: '0 auto',
      background: OA_THEME.card,
      border: `1.5px solid ${OA_THEME.line}`,
      borderRadius: 24,
      padding: '10px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      boxShadow: '0 8px 24px rgba(60,82,76,0.12)',
      zIndex: 30,
    }}>
      {tabs.map(t => {
        const isActive = active === t.k;
        return (
          <button key={t.k} onClick={() => { OASound.tap(); onNav(t.k); }} className="oa-no-tap" style={{
            display:'flex', flexDirection:'column', alignItems:'center', gap: 2,
            background: isActive ? '#EAF1EB' : 'transparent',
            border: 'none', borderRadius: 16, padding: '8px 18px',
            cursor: 'pointer', minWidth: 78,
          }}>
            <span style={{ fontSize: 26 }}>{t.i}</span>
            <span style={{ fontSize: 14, fontWeight: 800, color: isActive ? OA_THEME.sageDeep : OA_THEME.inkSoft }}>{t.l}</span>
          </button>
        );
      })}
    </div>
  );
}

function pathFromProfile(profile) {
  const done = profile.completedToday || {};
  const order = ['memory', 'numbers', 'language', 'differences'];
  const labels = {
    memory: { icon: '🃏', label: 'Memori Kartu' },
    numbers: { icon: '🔢', label: 'Hitung Pasar' },
    language: { icon: '📝', label: 'Peribahasa' },
    differences: { icon: '🔍', label: 'Cari Beda' },
  };
  const items = [];
  let foundCurrent = false;
  for (const k of order) {
    const isDone = !!done[k];
    let status = 'next';
    if (isDone) status = 'done';
    else if (!foundCurrent) { status = 'current'; foundCurrent = true; }
    items.push({ id: k, kind: k, ...labels[k], status, side: items.length % 3 === 0 ? 'C' : items.length % 3 === 1 ? 'R' : 'L' });
  }
  return items;
}

function Home({ profile, onOpenLesson, onOpenProfile }) {
  const today = pathFromProfile(profile);
  const allDone = today.every(t => t.status === 'done');
  const next = today.find(t => t.status === 'current');

  const lockedTomorrow = [
    { id: 'm7', icon: '🎵', label: 'Tebak Lagu Lama', status: 'locked', side: 'C' },
    { id: 'm8', icon: '⚡', label: 'Refleks Lembut', status: 'locked', side: 'R' },
    { id: 'm9', icon: '🏅', label: 'Lencana Bab 2', status: 'locked', side: 'L' },
  ];

  return (
    <div style={{ minHeight: '100dvh', background: OA_THEME.cream, paddingBottom: 130 }}>
      <div style={{ paddingTop: 'max(20px, env(safe-area-inset-top))' }}>
        <HomeHeader
          name={profile.name}
          streak={profile.streak}
          level={profile.level}
          xp={profile.xp}
          xpMax={profile.xpMax}
          onOpenProfile={onOpenProfile}
        />

        <div style={{ display:'flex', alignItems:'flex-end', gap: 12, padding: '8px 22px 16px' }}>
          <Mascot size={74} mood={allDone ? 'cheer' : 'happy'} wave={allDone} />
          <div style={{ flex: 1, marginBottom: 6 }}>
            <SpeechBubble accent={OA_THEME.sky}>
              {allDone
                ? 'Hebat, Oma! Latihan hari ini sudah selesai. Sampai besok ya. 🌿'
                : next
                  ? `Yuk Oma, kita mulai dari "${next.label}". Pelan-pelan saja. 🌿`
                  : 'Selamat datang. Mari kita mulai. 🌿'}
            </SpeechBubble>
          </div>
        </div>

        <ChapterTag>Bab 1 · Pagi yang Cerah</ChapterTag>

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, padding: '8px 0 8px' }}>
          {today.map((n, i) => (
            <PathNode key={n.id} {...n} showStartTip onClick={() => onOpenLesson(n.kind)} />
          ))}
        </div>

        <ChapterTag>Bab 2 · Sore yang Tenang</ChapterTag>

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, padding: '8px 0 8px' }}>
          {lockedTomorrow.map(n => (
            <PathNode key={n.id} {...n} locked />
          ))}
        </div>
      </div>
    </div>
  );
}

window.Home = Home;
window.TabBar = TabBar;
window.pathFromProfile = pathFromProfile;