import { useState, useEffect, useRef } from "react";

const QUESTIONS = [
  { q: "What is the plural of 'child'?", o: ["A. childs", "B. childes", "C. children", "D. childrens"], a: "C" },
  { q: "Choose the correct sentence:", o: ["A. She don't like cats", "B. She doesn't likes cats", "C. She doesn't like cats", "D. She not like cats"], a: "C" },
  { q: "What is the past tense of 'go'?", o: ["A. goed", "B. went", "C. gone", "D. goes"], a: "B" },
  { q: "Which word is an adjective?", o: ["A. quickly", "B. beauty", "C. beautiful", "D. beautify"], a: "C" },
  { q: "What does 'enormous' mean?", o: ["A. tiny", "B. very large", "C. colorful", "D. ancient"], a: "B" },
  { q: "Choose the correct question tag: 'She is smart, ___?'", o: ["A. is she", "B. isn't she", "C. doesn't she", "D. wasn't she"], a: "B" },
  { q: "Which sentence uses the Present Perfect correctly?", o: ["A. I have went there", "B. I have go there", "C. I have been there", "D. I been there"], a: "C" },
  { q: "What is the synonym of 'happy'?", o: ["A. sad", "B. joyful", "C. angry", "D. tired"], a: "B" },
  { q: "Which word is spelled correctly?", o: ["A. recieve", "B. beleive", "C. achieve", "D. freind"], a: "C" },
  { q: "Choose the correct preposition: 'She arrived ___ Monday.'", o: ["A. in", "B. at", "C. on", "D. by"], a: "C" },
];

const STORAGE_KEY = "quiz_results_v1";

export default function QuizApp() {
  const [phase, setPhase] = useState("name"); // name | quiz | done
  const [name, setName] = useState("");
  const [answers, setAnswers] = useState({});
  const [startTime, setStartTime] = useState(null);
  const [elapsed, setElapsed] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const timerRef = useRef(null);

  useEffect(() => {
    if (phase === "quiz") {
      const t = Date.now();
      setStartTime(t);
      timerRef.current = setInterval(() => setElapsed(Date.now() - t), 1000);
    }
    return () => clearInterval(timerRef.current);
  }, [phase]);

  const fmt = (ms) => {
    const s = Math.floor(ms / 1000);
    const m = Math.floor(s / 60);
    return `${String(m).padStart(2,"0")}:${String(s % 60).padStart(2,"0")}`;
  };

  const answered = Object.keys(answers).length;
  const pct = Math.round((answered / QUESTIONS.length) * 100);

  const handleStart = () => {
    if (name.trim().length < 2) return;
    setPhase("quiz");
  };

  const handleAnswer = (i, opt) => {
    if (submitted) return;
    setAnswers(prev => ({ ...prev, [i]: opt }));
  };

  const handleSubmit = async () => {
    if (answered < QUESTIONS.length) return;
    clearInterval(timerRef.current);
    const duration = Date.now() - startTime;
    let score = 0;
    const detail = QUESTIONS.map((q, i) => {
      const correct = answers[i] === q.a;
      if (correct) score++;
      return { question: q.q, chosen: answers[i], correct: q.a, isCorrect: correct };
    });

    const result = {
      name: name.trim(),
      score,
      total: QUESTIONS.length,
      duration,
      submittedAt: new Date().toISOString(),
      detail,
    };

    try {
      const existing = await window.storage.get(STORAGE_KEY, true).catch(() => null);
      const list = existing ? JSON.parse(existing.value) : [];
      list.push(result);
      await window.storage.set(STORAGE_KEY, JSON.stringify(list), true);
    } catch (e) {}

    setSubmitted(true);
    setPhase("done");
  };

  if (phase === "name") return (
    <div style={{minHeight:"100vh",background:"linear-gradient(135deg,#7c3aed,#a855f7)",display:"flex",alignItems:"center",justifyContent:"center",padding:16}}>
      <div style={{background:"white",borderRadius:16,padding:28,width:"100%",maxWidth:400,boxShadow:"0 8px 32px rgba(0,0,0,.18)"}}>
        <div style={{textAlign:"center",marginBottom:20}}>
          <div style={{fontSize:40,marginBottom:8}}>📝</div>
          <h1 style={{fontSize:20,fontWeight:"bold",color:"#7c3aed"}}>Olimpiade Bahasa Inggris</h1>
          <p style={{color:"#6b7280",fontSize:13,marginTop:4}}>10 Soal · Waktu dicatat otomatis</p>
        </div>
        <label style={{display:"block",fontWeight:"bold",fontSize:13,color:"#374151",marginBottom:6}}>Nama Lengkap</label>
        <input
          value={name}
          onChange={e => setName(e.target.value)}
          onKeyDown={e => e.key === "Enter" && handleStart()}
          placeholder="Tulis nama kamu di sini..."
          style={{width:"100%",border:"2px solid #e5e7eb",borderRadius:10,padding:"10px 14px",fontSize:14,outline:"none",marginBottom:16}}
        />
        <button
          onClick={handleStart}
          disabled={name.trim().length < 2}
          style={{width:"100%",background:name.trim().length>=2?"#7c3aed":"#d1d5db",color:"white",border:"none",borderRadius:10,padding:"12px",fontSize:15,fontWeight:"bold",cursor:name.trim().length>=2?"pointer":"not-allowed"}}
        >
          Mulai Mengerjakan →
        </button>
        <p style={{textAlign:"center",fontSize:11,color:"#9ca3af",marginTop:12}}>Jawaban kamu akan tersimpan otomatis saat selesai</p>
      </div>
    </div>
  );

  if (phase === "done") return (
    <div style={{minHeight:"100vh",background:"linear-gradient(135deg,#7c3aed,#a855f7)",display:"flex",alignItems:"center",justifyContent:"center",padding:16}}>
      <div style={{background:"white",borderRadius:16,padding:28,width:"100%",maxWidth:400,textAlign:"center",boxShadow:"0 8px 32px rgba(0,0,0,.18)"}}>
        <div style={{fontSize:48,marginBottom:8}}>{Object.values(answers).filter((a,i)=>a===QUESTIONS[i].a).length>=8?"🏆":Object.values(answers).filter((a,i)=>a===QUESTIONS[i].a).length>=6?"👍":"💪"}</div>
        <h2 style={{fontSize:20,fontWeight:"bold",color:"#374151"}}>Selesai, {name}!</h2>
        <div style={{background:"#f5f3ff",borderRadius:12,padding:16,margin:"16px 0"}}>
          <div style={{fontSize:36,fontWeight:"bold",color:"#7c3aed"}}>{QUESTIONS.filter((_,i)=>answers[i]===QUESTIONS[i].a).length}<span style={{fontSize:18,color:"#6b7280"}}>/{QUESTIONS.length}</span></div>
          <div style={{color:"#6b7280",fontSize:13}}>Waktu: {fmt(elapsed)}</div>
        </div>
        <p style={{color:"#6b7280",fontSize:13}}>Hasilmu sudah tersimpan. Terima kasih sudah mengerjakan! 🎉</p>
      </div>
    </div>
  );

  return (
    <div style={{minHeight:"100vh",background:"#f5f0ff",paddingBottom:80}}>
      {/* Header */}
      <div style={{background:"linear-gradient(135deg,#7c3aed,#a855f7)",color:"white",padding:"14px 16px",position:"sticky",top:0,zIndex:10}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
          <div>
            <div style={{fontWeight:"bold",fontSize:15}}>📝 Olimpiade B. Inggris</div>
            <div style={{fontSize:12,opacity:.85}}>{name}</div>
          </div>
          <div style={{textAlign:"right"}}>
            <div style={{fontWeight:"bold",fontSize:18}}>{fmt(elapsed)}</div>
            <div style={{fontSize:12,opacity:.85}}>{answered}/{QUESTIONS.length} dijawab</div>
          </div>
        </div>
        <div style={{background:"rgba(255,255,255,.3)",borderRadius:99,height:6,marginTop:8,overflow:"hidden"}}>
          <div style={{background:"white",height:"100%",width:pct+"%",transition:"width .3s"}}/>
        </div>
      </div>

      {/* Questions */}
      <div style={{padding:"12px 12px 0"}}>
        {QUESTIONS.map((q, i) => (
          <div key={i} style={{background:"white",borderRadius:12,padding:14,marginBottom:10,boxShadow:"0 1px 4px rgba(0,0,0,.07)",border:answers[i]?"2px solid #7c3aed":"2px solid transparent"}}>
            <div style={{fontWeight:"bold",fontSize:13,color:"#6b7280",marginBottom:4}}>Soal {i+1}</div>
            <div style={{fontSize:14,color:"#111827",marginBottom:10,fontWeight:"500"}}>{q.q}</div>
            <div style={{display:"flex",flexDirection:"column",gap:6}}>
              {q.o.map(opt => (
                <button key={opt} onClick={() => handleAnswer(i, opt[0])}
                  style={{textAlign:"left",padding:"9px 12px",borderRadius:8,border:"2px solid",fontSize:13,cursor:"pointer",fontWeight:answers[i]===opt[0]?"bold":"normal",
                    borderColor:answers[i]===opt[0]?"#7c3aed":"#e5e7eb",
                    background:answers[i]===opt[0]?"#f5f3ff":"white",
                    color:answers[i]===opt[0]?"#7c3aed":"#374151"}}>
                  {opt}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Submit */}
      <div style={{position:"fixed",bottom:0,left:0,right:0,background:"white",padding:"12px 16px",boxShadow:"0 -2px 10px rgba(0,0,0,.1)"}}>
        {answered < QUESTIONS.length && <p style={{textAlign:"center",color:"#ef4444",fontSize:12,marginBottom:6}}>⚠️ Masih ada {QUESTIONS.length-answered} soal yang belum dijawab</p>}
        <button onClick={handleSubmit} disabled={answered<QUESTIONS.length}
          style={{width:"100%",background:answered>=QUESTIONS.length?"#7c3aed":"#d1d5db",color:"white",border:"none",borderRadius:10,padding:13,fontSize:15,fontWeight:"bold",cursor:answered>=QUESTIONS.length?"pointer":"not-allowed"}}>
          ✅ Kumpulkan Jawaban
        </button>
      </div>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>