// Language — complete a peribahasa (Indonesian proverb).
const PERIBAHASA = [
  { full: 'Sedikit demi sedikit, lama-lama menjadi __',  blank: 'bukit',  options: ['bukit', 'gunung', 'lembah', 'sungai'] },
  { full: 'Bagai air di atas daun __',                   blank: 'talas',  options: ['talas', 'pisang', 'kelapa', 'jati'] },
  { full: 'Tak ada __ tak retak',                        blank: 'gading', options: ['gading', 'permata', 'batu', 'kayu'] },
  { full: 'Bersatu kita teguh, bercerai kita __',        blank: 'runtuh', options: ['runtuh', 'jatuh', 'pecah', 'lemah'] },
  { full: 'Berakit-rakit ke hulu, berenang-renang ke __',blank: 'tepian', options: ['tepian', 'lautan', 'sungai', 'muara'] },
  { full: 'Lain ladang lain belalang, lain lubuk lain __', blank: 'ikannya', options: ['ikannya', 'airnya', 'isinya', 'rasanya'] },
  { full: 'Air tenang menghanyutkan, ilmu padi makin berisi makin __', blank: 'merunduk', options: ['merunduk', 'menunduk', 'condong', 'kuat'] },
  { full: 'Ada gula ada __',                             blank: 'semut',  options: ['semut', 'lebah', 'lalat', 'kupu'] },
  { full: 'Tong kosong nyaring __',                      blank: 'bunyinya', options: ['bunyinya', 'suaranya', 'gemanya', 'nyanyinya'] },
  { full: 'Sambil menyelam minum __',                    blank: 'air',    options: ['air', 'teh', 'susu', 'kopi'] },
];

function pickFive(arr) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a.slice(0, 5);
}

function LanguageGame({ onExit, onComplete }) {
  const [items] = React.useState(() => pickFive(PERIBAHASA));
  const [idx, setIdx] = React.useState(0);
  const [hearts, setHearts] = React.useState(5);
  const [taps, setTaps] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const [correct, setCorrect] = React.useState(0);

  const q = items[idx];
  const shuffled = React.useMemo(() => {
    const o = q.options.slice();
    for (let i = o.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [o[i], o[j]] = [o[j], o[i]];
    }
    return o;
  }, [idx]);

  const before = q.full.split('__')[0];
  const after = q.full.split('__')[1] || '';

  const choose = (v) => {
    if (picked !== null) return;
    setTaps(t => t + 1);
    setPicked(v);
    if (v === q.blank) {
      OASound.match();
      setCorrect(c => c + 1);
      setTimeout(() => {
        if (idx + 1 >= items.length) {
          const total = correct + 1;
          const acc = Math.round((total / items.length) * 100);
          onComplete({ taps, hearts, accuracy: acc });
        } else {
          setIdx(idx + 1);
          setPicked(null);
        }
      }, 1100);
    } else {
      OASound.miss();
      setHearts(h => Math.max(0, h - 1));
      setTimeout(() => setPicked(null), 1100);
    }
  };

  const progress = idx / items.length;

  return (
    <div style={{ minHeight: '100dvh', background: 'linear-gradient(180deg, #EDE0D8 0%, #EDE6DC 60%)', display: 'flex', flexDirection: 'column', paddingTop: 'max(20px, env(safe-area-inset-top))' }}>
      <GameTopBar onExit={onExit} progress={progress} hearts={hearts} />

      <div style={{ padding: '0 22px 12px', display:'flex', alignItems:'flex-end', gap: 14 }}>
        <Mascot size={64} mood={picked === q.blank ? 'cheer' : picked !== null ? 'think' : 'happy'} />
        <div style={{ flex: 1 }}>
          <SpeechBubble accent={OA_THEME.rose}>
            <b style={{ color: OA_THEME.roseDeep }}>Lengkapi peribahasa.</b> Pilih kata yang tepat.
          </SpeechBubble>
        </div>
      </div>

      <div style={{ padding: '8px 22px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{
          background: OA_THEME.card, border: `2px solid ${OA_THEME.line}`,
          borderRadius: 22, padding: '24px 20px',
          boxShadow: '0 4px 0 rgba(60,82,76,0.08)',
          marginBottom: 18,
        }}>
          <div style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 24, color: OA_THEME.ink, lineHeight: 1.4, textAlign: 'center' }}>
            {before}
            <span style={{
              display: 'inline-block', minWidth: 90, padding: '4px 14px', margin: '0 6px',
              background: picked === q.blank ? '#EAF1EB' : '#F2EADC',
              border: `2px dashed ${picked === q.blank ? OA_THEME.sage : OA_THEME.gold}`,
              borderRadius: 10, color: picked === q.blank ? OA_THEME.sageDeep : OA_THEME.goldDeep,
              fontWeight: 800, fontStyle: 'normal', fontFamily: 'Nunito',
            }}>{picked === q.blank ? q.blank : '___'}</span>
            {after}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {shuffled.map(v => {
            const isPicked = picked === v;
            const isCorrect = picked !== null && v === q.blank;
            const isWrong = isPicked && v !== q.blank;
            const bg = isCorrect ? '#EAF1EB' : isWrong ? '#FCEFE9' : OA_THEME.card;
            const border = isCorrect ? OA_THEME.sage : isWrong ? OA_THEME.rose : OA_THEME.line;
            return (
              <button key={v} onClick={() => choose(v)} disabled={picked !== null} className="oa-no-tap" style={{
                minHeight: 70, padding: '12px 8px',
                background: bg, border: `2px solid ${border}`,
                borderRadius: 18, fontSize: 22, fontWeight: 800, color: OA_THEME.ink,
                cursor: picked !== null ? 'default' : 'pointer',
                boxShadow: `0 4px 0 ${border}`,
                transition: 'all .2s',
              }}>{v}</button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.LanguageGame = LanguageGame;