"use client";

import { useEffect, useRef, useState, useCallback } from "react";
import { PTE_QUESTIONS } from "./questions.js";

function normalizeText(text) {
  return text
    .toLowerCase()
    .replace(/[^a-z\s]/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

function calculateScore(spoken, expected) {
  const spokenWords = normalizeText(spoken).split(" ").filter(Boolean);
  const expectedWords = normalizeText(expected).split(" ").filter(Boolean);

  if (!spokenWords.length || !expectedWords.length) return null;

  let matched = 0;
  const used = new Set();

  const wordDetails = expectedWords.map((word) => {
    const idx = spokenWords.findIndex((w, i) => w === word && !used.has(i));
    if (idx !== -1) {
      used.add(idx);
      matched++;
      return { word, correct: true };
    }
    return { word, correct: false };
  });

  const wordAccuracy = Math.round((matched / expectedWords.length) * 100);
  const fluencyRatio = Math.min(spokenWords.length / expectedWords.length, 1.15);

  const content = Math.min(6, Math.round((matched / expectedWords.length) * 6));
  const fluency = Math.min(5, Math.max(1, Math.round(fluencyRatio * 5)));
  const pronunciation = Math.min(5, Math.max(1, Math.round((wordAccuracy / 100) * 5)));

  const overall = Math.min(
    90,
    Math.round((content / 6) * 40 + (fluency / 5) * 25 + (pronunciation / 5) * 25)
  );

  let feedback = "";
  if (overall >= 75) {
    feedback =
      "Excellent performance. Your fluency and pronunciation are strong. Keep maintaining a natural pace.";
  } else if (overall >= 60) {
    feedback =
      "Good attempt. Focus on clearer pronunciation and covering every word in the passage.";
  } else if (overall >= 40) {
    feedback =
      "Fair attempt. Read more slowly, stress important words, and avoid skipping words.";
  } else {
    feedback =
      "You need more practice. First read the passage silently, then speak clearly and confidently.";
  }

  return {
    overall,
    content,
    fluency,
    pronunciation,
    wordAccuracy,
    matched,
    expectedCount: expectedWords.length,
    spokenCount: spokenWords.length,
    wordDetails,
    feedback,
  };
}

export default function ReadAloudPage() {
  const [current, setCurrent] = useState(0);
  const [phase, setPhase] = useState("idle"); // idle | prep | recording | done
  const [prepTime, setPrepTime] = useState(35);
  const [recordTime, setRecordTime] = useState(40);
  const [transcript, setTranscript] = useState("");
  const [analysis, setAnalysis] = useState(null);
  const [error, setError] = useState("");
  const [bestScore, setBestScore] = useState(0);
  const [attempts, setAttempts] = useState(0);

  const recognitionRef = useRef(null);
  const prepTimerRef = useRef(null);
  const recordTimerRef = useRef(null);
  const audioCtxRef = useRef(null);
  const transcriptRef = useRef("");

  const totalQuestions = PTE_QUESTIONS.length;
  const question = PTE_QUESTIONS[current];
  const wordCount = question.split(/\s+/).filter(Boolean).length;
  const progress = ((current + 1) / totalQuestions) * 100;

  const playBeep = useCallback((type) => {
    try {
      if (!audioCtxRef.current) {
        audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
      }

      const ctx = audioCtxRef.current;

      const makeTone = (freq, duration, delay = 0) => {
        setTimeout(() => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.type = "sine";
          osc.frequency.value = freq;
          gain.gain.value = 0.22;
          osc.start();
          gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + duration);
          osc.stop(ctx.currentTime + duration);
        }, delay);
      };

      if (type === "start") {
        makeTone(520, 0.12, 0);
        makeTone(660, 0.12, 140);
        makeTone(780, 0.16, 280);
      } else if (type === "stop") {
        makeTone(780, 0.14, 0);
        makeTone(520, 0.22, 180);
      } else if (type === "tick") {
        makeTone(1000, 0.08, 0);
      }
    } catch (e) {}
  }, []);

  const cleanup = useCallback(() => {
    clearInterval(prepTimerRef.current);
    clearInterval(recordTimerRef.current);
    try {
      if (recognitionRef.current) recognitionRef.current.stop();
    } catch (e) {}
  }, []);

  useEffect(() => {
    return () => cleanup();
  }, [cleanup]);

  const resetQuestion = useCallback(() => {
    cleanup();
    setPhase("idle");
    setPrepTime(35);
    setRecordTime(40);
    setTranscript("");
    setAnalysis(null);
    setError("");
    transcriptRef.current = "";
  }, [cleanup]);

  const finishRecording = useCallback(() => {
    clearInterval(recordTimerRef.current);
    try {
      if (recognitionRef.current) recognitionRef.current.stop();
    } catch (e) {}
  }, []);

  const startRecording = useCallback(() => {
    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) {
      setError("Please use Google Chrome browser for speech recognition.");
      setPhase("idle");
      return;
    }

    transcriptRef.current = "";
    setTranscript("");
    setAnalysis(null);
    setError("");
    setPhase("recording");
    setRecordTime(40);
    playBeep("start");

    const recognition = new SR();
    recognitionRef.current = recognition;
    recognition.lang = "en-US";
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = (event) => {
      let finalText = "";
      let interimText = "";

      for (let i = 0; i < event.results.length; i++) {
        const chunk = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          finalText += chunk + " ";
        } else {
          interimText += chunk;
        }
      }

      transcriptRef.current = finalText;
      setTranscript(finalText + interimText);
    };

    recognition.onerror = (event) => {
      if (event.error === "not-allowed") {
        setError("Microphone permission denied. Please allow microphone access and reload.");
        setPhase("idle");
      }
    };

    recognition.onend = () => {
      playBeep("stop");
      const finalSpeech = transcriptRef.current.trim();

      if (!finalSpeech) {
        setError("No speech detected. Please speak clearly and try again.");
        setPhase("done");
        return;
      }

      const result = calculateScore(finalSpeech, question);
      if (result) {
        setAnalysis(result);
        setAttempts((prev) => prev + 1);
        setBestScore((prev) => Math.max(prev, result.overall));
      } else {
        setError("Unable to analyze speech. Please try again.");
      }

      setPhase("done");
    };

    try {
      recognition.start();
    } catch (e) {
      setError("Could not start recording. Please refresh and try again.");
      setPhase("idle");
      return;
    }

    let t = 40;
    recordTimerRef.current = setInterval(() => {
      t -= 1;
      setRecordTime(t);
      if (t <= 0) {
        clearInterval(recordTimerRef.current);
        finishRecording();
      }
    }, 1000);
  }, [finishRecording, playBeep, question]);

  const startPractice = useCallback(() => {
    cleanup();
    setPhase("prep");
    setPrepTime(35);
    setRecordTime(40);
    setTranscript("");
    setAnalysis(null);
    setError("");
    transcriptRef.current = "";

    let t = 35;
    prepTimerRef.current = setInterval(() => {
      t -= 1;
      setPrepTime(t);

      if (t <= 3 && t >= 1) playBeep("tick");

      if (t <= 0) {
        clearInterval(prepTimerRef.current);
        startRecording();
      }
    }, 1000);
  }, [cleanup, playBeep, startRecording]);

  const skipQuestion = () => {
    cleanup();
    setCurrent((prev) => (prev < totalQuestions - 1 ? prev + 1 : 0));
    setPhase("idle");
    setPrepTime(35);
    setRecordTime(40);
    setTranscript("");
    setAnalysis(null);
    setError("");
    transcriptRef.current = "";
  };

  const goPrev = () => {
    if (current === 0) return;
    cleanup();
    setCurrent((prev) => prev - 1);
    setPhase("idle");
    setPrepTime(35);
    setRecordTime(40);
    setTranscript("");
    setAnalysis(null);
    setError("");
    transcriptRef.current = "";
  };

  const goNext = () => {
    if (current >= totalQuestions - 1) return;
    cleanup();
    setCurrent((prev) => prev + 1);
    setPhase("idle");
    setPrepTime(35);
    setRecordTime(40);
    setTranscript("");
    setAnalysis(null);
    setError("");
    transcriptRef.current = "";
  };

  return (
    <div className="page">
      <header className="topHeader">
        <div className="topHeaderInner">
          <div className="brandWrap">
            <div className="brandIcon">E</div>
            <div className="brandText">
              <div className="brandTitle">EVEE PTE CLASSES</div>
              <div className="brandSub">OVERSEAS ADMISSIONS HUB</div>
            </div>
          </div>

          <div className="headerStats">
            <div className="miniStat">
              <div className="miniValue">{attempts}</div>
              <div className="miniLabel">ATTEMPTS</div>
            </div>
            <div className="miniStat">
              <div className="miniValue gold">{bestScore}</div>
              <div className="miniLabel">BEST SCORE</div>
            </div>
          </div>
        </div>

        <div className="subHeader">
          <div className="subHeaderInner">
            <div className="moduleInfo">
              <span className="modulePill">SPEAKING</span>
              <span className="moduleName">Read Aloud</span>
              <span className="divider">|</span>
              <span className="moduleCount">
                Item {current + 1} of {totalQuestions}
              </span>
            </div>

            <div className="aiStatus">
              <span className="dot" />
              AI Scoring
            </div>
          </div>
        </div>

        <div className="progressTrack">
          <div className="progressFill" style={{ width: `${progress}%` }} />
        </div>
      </header>

      <main className="container">
        <section className="panel">
          <div className="panelHead dark">
            <p className="instructionText">
              {phase === "idle" &&
                'Look at the text below. When you are ready, click "Begin". You will have 35 seconds to prepare. Then a tone will sound and you must read the text aloud.'}
              {phase === "prep" &&
                `Preparation time remaining: ${prepTime} seconds. Read the passage silently and prepare to speak.`}
              {phase === "recording" &&
                `Recording in progress. Please read the text aloud clearly and naturally. Time remaining: ${recordTime} seconds.`}
              {phase === "done" &&
                "Recording completed. Review your score report below."}
            </p>
          </div>

          <div className="statusBar">
            <div
              className={`statusBadge ${
                phase === "recording"
                  ? "red"
                  : phase === "prep"
                  ? "blue"
                  : phase === "done"
                  ? "green"
                  : "gray"
              }`}
            >
              <span className="smallDot" />
              {phase === "idle" && "READY"}
              {phase === "prep" && "PREPARING"}
              {phase === "recording" && "RECORDING"}
              {phase === "done" && "COMPLETED"}
            </div>

            {(phase === "prep" || phase === "recording") && (
              <div className="timerBox">
                <div className="timerText">
                  <div className="timerLabel">
                    {phase === "prep" ? "Prep Time" : "Record Time"}
                  </div>
                  <div className={`timerValue ${phase === "recording" ? "red" : "blue"}`}>
                    {phase === "prep" ? prepTime : recordTime}
                    <span>s</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </section>

        <section className="panel">
          <div className="panelHead light">
            <div className="panelTitle">Reading Passage</div>
            <div className="wordCount">{wordCount} words</div>
          </div>
          <div className="passageBody">
            <p className="passageText">{question}</p>
          </div>
        </section>

        {transcript && (
          <section className="panel">
            <div className="panelHead sky">
              <div className="panelTitle">Live Transcript</div>
            </div>
            <div className="transcriptBody">{transcript}</div>
          </section>
        )}

        <div className="actions">
          {(phase === "idle" || phase === "done") && (
            <>
              <button className="btn primary" onClick={startPractice}>
                {phase === "done" ? "Try Again" : "Begin"}
              </button>
              <button className="btn secondary" onClick={goPrev} disabled={current === 0}>
                Previous
              </button>
              <button className="btn gold" onClick={skipQuestion}>Skip</button>
              <button className="btn secondary" onClick={goNext} disabled={current === totalQuestions - 1}>
                Next
              </button>
            </>
          )}

          {phase === "recording" && (
            <>
              <button className="btn danger" onClick={finishRecording}>
                Stop Recording
              </button>
              <button className="btn gold" onClick={skipQuestion}>Skip</button>
              <button className="btn secondary" onClick={resetQuestion}>Cancel</button>
            </>
          )}

          {phase === "prep" && (
            <>
              <button className="btn gold" onClick={skipQuestion}>Skip</button>
              <button className="btn secondary" onClick={resetQuestion}>Cancel</button>
            </>
          )}
        </div>

        {error && (
          <div className="errorBox">{error}</div>
        )}

        {analysis && (
          <section className="report">
            <div className="reportHead">
              <div>
                <div className="reportMini">EVEE PTE CLASSES</div>
                <h2>Read Aloud Score Report</h2>
              </div>
              <div className="itemBadge">
                {current + 1}/{totalQuestions}
              </div>
            </div>

            <div className="reportBody">
              <div className="scoreCircleWrap">
                <div className="scoreCircle">
                  <div className="scoreNumber">{analysis.overall}</div>
                  <div className="scoreSub">out of 90</div>
                </div>
              </div>

              <div className="skills">
                {[
                  { label: "Content", value: analysis.content, max: 6 },
                  { label: "Oral Fluency", value: analysis.fluency, max: 5 },
                  { label: "Pronunciation", value: analysis.pronunciation, max: 5 },
                ].map((item) => (
                  <div className="skillRow" key={item.label}>
                    <div className="skillLabel">{item.label}</div>
                    <div className="skillBarWrap">
                      <div className="skillBarTrack">
                        <div
                          className="skillBarFill"
                          style={{ width: `${(item.value / item.max) * 100}%` }}
                        />
                      </div>
                      <div className="skillValue">
                        {item.value}/{item.max}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="accuracyBox">
                <div className="accuracyHead">
                  <span>Word Accuracy</span>
                  <strong>{analysis.wordAccuracy}%</strong>
                </div>
                <div className="skillBarTrack big">
                  <div
                    className="skillBarFill"
                    style={{ width: `${analysis.wordAccuracy}%` }}
                  />
                </div>
                <div className="accuracyMeta">
                  <span>{analysis.matched} matched</span>
                  <span>{analysis.spokenCount} spoken</span>
                  <span>{analysis.expectedCount} expected</span>
                </div>
              </div>

              <div className="wordAnalysis">
                <div className="wordTitle">Word Analysis</div>
                <div className="wordWrap">
                  {analysis.wordDetails.map((w, i) => (
                    <span key={i} className={w.correct ? "word ok" : "word miss"}>
                      {w.word}
                    </span>
                  ))}
                </div>
              </div>

              <div className="feedbackBox">
                <div className="feedbackTitle">Examiner Feedback</div>
                <p>{analysis.feedback}</p>
              </div>
            </div>
          </section>
        )}
      </main>

      <style jsx>{`
        .page {
          min-height: 100vh;
          background: linear-gradient(to bottom, #e8ecf2, #d5dbe5);
          color: #1f2937;
          font-family: Arial, Helvetica, sans-serif;
        }

        .topHeader {
          background: #002145;
          color: white;
        }

        .topHeaderInner,
        .subHeaderInner,
        .container {
          max-width: 1100px;
          margin: 0 auto;
        }

        .topHeaderInner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 20px;
        }

        .brandWrap {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .brandIcon {
          width: 42px;
          height: 42px;
          border-radius: 8px;
          background: linear-gradient(135deg, #ffb81c, #e6a200);
          color: #002145;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 900;
          font-size: 22px;
          box-shadow: 0 8px 20px rgba(255, 184, 28, 0.25);
        }

        .brandText {
          border-left: 1px solid rgba(255,255,255,0.12);
          padding-left: 12px;
        }

        .brandTitle {
          font-size: 15px;
          font-weight: 800;
          letter-spacing: 0.08em;
        }

        .brandSub {
          font-size: 9px;
          color: #ffb81c;
          letter-spacing: 0.28em;
          font-weight: 700;
          margin-top: 2px;
        }

        .headerStats {
          display: flex;
          gap: 12px;
        }

        .miniStat {
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 10px;
          padding: 8px 14px;
          min-width: 88px;
          text-align: center;
        }

        .miniValue {
          font-size: 18px;
          font-weight: 800;
          line-height: 1;
          color: white;
        }

        .miniValue.gold {
          color: #ffb81c;
        }

        .miniLabel {
          margin-top: 4px;
          font-size: 9px;
          letter-spacing: 0.16em;
          color: rgba(255,255,255,0.45);
        }

        .subHeader {
          background: #001a36;
          border-top: 1px solid rgba(255,255,255,0.05);
        }

        .subHeaderInner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 20px;
        }

        .moduleInfo {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
        }

        .modulePill {
          background: rgba(255,184,28,0.1);
          border: 1px solid rgba(255,184,28,0.2);
          color: #ffb81c;
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 10px;
          font-weight: 800;
          letter-spacing: 0.12em;
        }

        .moduleName,
        .moduleCount,
        .divider,
        .aiStatus {
          font-size: 11px;
        }

        .moduleName { color: rgba(255,255,255,0.65); }
        .moduleCount { color: rgba(255,255,255,0.35); }
        .divider { color: rgba(255,255,255,0.18); }

        .aiStatus {
          display: flex;
          align-items: center;
          gap: 6px;
          color: rgba(255,255,255,0.35);
        }

        .dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #34d399;
          animation: pulse 1.6s infinite;
        }

        .progressTrack {
          height: 3px;
          background: #001a36;
        }

        .progressFill {
          height: 3px;
          background: linear-gradient(90deg, #ffb81c, #ffca4f);
          transition: width 0.6s ease;
        }

        .container {
          padding: 20px;
        }

        .panel,
        .report {
          background: white;
          border-radius: 14px;
          box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
          border: 1px solid rgba(0,0,0,0.06);
          overflow: hidden;
          margin-bottom: 16px;
        }

        .panelHead {
          padding: 12px 18px;
          border-bottom: 1px solid #eef2f7;
        }

        .panelHead.dark {
          background: #002145;
          color: white;
          border-bottom: none;
        }

        .panelHead.light {
          background: #f7f8fb;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .panelHead.sky {
          background: #eff6ff;
        }

        .instructionText {
          font-size: 13px;
          line-height: 1.75;
          font-weight: 500;
        }

        .statusBar {
          background: #f7f8fb;
          padding: 12px 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          border-bottom: 1px solid #eef2f7;
        }

        .statusBadge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 7px 12px;
          border-radius: 10px;
          font-size: 11px;
          font-weight: 800;
          letter-spacing: 0.08em;
        }

        .statusBadge.red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
        .statusBadge.blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
        .statusBadge.green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
        .statusBadge.gray { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

        .smallDot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: currentColor;
          opacity: 0.85;
        }

        .timerLabel {
          font-size: 9px;
          text-transform: uppercase;
          letter-spacing: 0.18em;
          color: #9ca3af;
          font-weight: 800;
        }

        .timerValue {
          font-size: 34px;
          font-weight: 900;
          line-height: 1;
          margin-top: 2px;
        }

        .timerValue.blue { color: #2563eb; }
        .timerValue.red { color: #ef4444; }
        .timerValue span {
          font-size: 14px;
          color: #cbd5e1;
          font-weight: 500;
          margin-left: 2px;
        }

        .panelTitle {
          font-size: 11px;
          font-weight: 800;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: #002145;
        }

        .wordCount {
          font-size: 11px;
          color: #9ca3af;
          background: #f3f4f6;
          padding: 4px 8px;
          border-radius: 8px;
          font-family: monospace;
        }

        .passageBody {
          padding: 24px 28px;
        }

        .passageText {
          font-size: 18px;
          line-height: 2.1;
          color: #1a1a2e;
          font-weight: 420;
        }

        .transcriptBody {
          padding: 16px 18px;
          font-size: 14px;
          line-height: 1.9;
          color: #374151;
        }

        .actions {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          justify-content: center;
          margin-bottom: 18px;
        }

        .btn {
          border: none;
          border-radius: 10px;
          padding: 12px 22px;
          font-size: 14px;
          font-weight: 800;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .btn:hover:not(:disabled) {
          transform: translateY(-1px);
        }

        .btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .btn.primary {
          background: #002145;
          color: white;
          box-shadow: 0 10px 20px rgba(0, 33, 69, 0.18);
        }

        .btn.secondary {
          background: white;
          color: #6b7280;
          border: 1px solid #d1d5db;
        }

        .btn.gold {
          background: #ffb81c;
          color: #002145;
        }

        .btn.danger {
          background: #dc2626;
          color: white;
          box-shadow: 0 10px 20px rgba(220, 38, 38, 0.15);
        }

        .errorBox {
          background: white;
          border-left: 4px solid #ef4444;
          border-radius: 10px;
          padding: 14px 16px;
          color: #b91c1c;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 16px;
        }

        .reportHead {
          background: linear-gradient(90deg, #002145, #003366);
          padding: 18px 20px;
          color: white;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .reportMini {
          font-size: 8px;
          color: #ffb81c;
          font-weight: 800;
          letter-spacing: 0.28em;
          margin-bottom: 4px;
        }

        .reportHead h2 {
          font-size: 17px;
          font-weight: 800;
        }

        .itemBadge {
          background: rgba(255,255,255,0.12);
          border-radius: 10px;
          padding: 8px 12px;
          font-weight: 800;
          font-size: 13px;
        }

        .reportBody {
          padding: 22px;
        }

        .scoreCircleWrap {
          display: flex;
          justify-content: center;
          margin-bottom: 28px;
        }

        .scoreCircle {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          border: 8px solid #ffb81c;
          background: radial-gradient(circle at center, #ffffff 55%, #fff8e6 100%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 18px 40px rgba(255, 184, 28, 0.18);
        }

        .scoreNumber {
          font-size: 48px;
          line-height: 1;
          font-weight: 900;
          color: #002145;
        }

        .scoreSub {
          margin-top: 6px;
          font-size: 11px;
          color: #9ca3af;
          font-weight: 700;
        }

        .skills {
          display: flex;
          flex-direction: column;
          gap: 18px;
          margin-bottom: 24px;
        }

        .skillRow {
          display: flex;
          gap: 14px;
          align-items: center;
        }

        .skillLabel {
          width: 140px;
          font-size: 14px;
          font-weight: 700;
          color: #374151;
          flex-shrink: 0;
        }

        .skillBarWrap {
          flex: 1;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .skillBarTrack {
          flex: 1;
          height: 10px;
          background: #f3f4f6;
          border-radius: 999px;
          overflow: hidden;
        }

        .skillBarTrack.big {
          height: 9px;
        }

        .skillBarFill {
          height: 100%;
          background: linear-gradient(90deg, #ffb81c, #ffca4f);
          border-radius: 999px;
          transition: width 0.8s ease;
        }

        .skillValue {
          width: 52px;
          text-align: right;
          font-size: 15px;
          font-weight: 900;
          color: #002145;
        }

        .accuracyBox,
        .wordAnalysis,
        .feedbackBox {
          background: #f7f8fb;
          border: 1px solid #eef2f7;
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 18px;
        }

        .accuracyHead {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 12px;
          font-weight: 800;
          color: #6b7280;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }

        .accuracyHead strong {
          color: #002145;
        }

        .accuracyMeta {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          gap: 8px;
          flex-wrap: wrap;
          font-size: 10px;
          color: #9ca3af;
        }

        .wordTitle,
        .feedbackTitle {
          font-size: 11px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.14em;
          color: #6b7280;
          margin-bottom: 12px;
        }

        .wordWrap {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .word {
          padding: 4px 8px;
          border-radius: 8px;
          font-size: 12px;
          font-weight: 600;
          border: 1px solid transparent;
        }

        .word.ok {
          background: #ecfdf5;
          color: #047857;
          border-color: #a7f3d0;
        }

        .word.miss {
          background: #fef2f2;
          color: #dc2626;
          border-color: #fecaca;
          text-decoration: line-through;
        }

        .feedbackBox p {
          font-size: 14px;
          line-height: 1.85;
          color: #374151;
        }

        @keyframes pulse {
          0%,100% { opacity: 1; }
          50% { opacity: 0.45; }
        }

        @media (max-width: 768px) {
          .topHeaderInner,
          .subHeaderInner,
          .container {
            padding-left: 14px;
            padding-right: 14px;
          }

          .headerStats {
            display: none;
          }

          .brandTitle {
            font-size: 13px;
          }

          .brandSub {
            font-size: 8px;
            letter-spacing: 0.18em;
          }

          .moduleInfo {
            gap: 6px;
          }

          .moduleCount {
            display: none;
          }

          .passageBody {
            padding: 18px;
          }

          .passageText {
            font-size: 16px;
            line-height: 1.95;
          }

          .skillRow {
            flex-direction: column;
            align-items: stretch;
          }

          .skillLabel {
            width: auto;
          }

          .reportHead {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
          }

          .itemBadge {
            align-self: flex-end;
          }

          .actions {
            justify-content: stretch;
          }

          .btn {
            width: 100%;
          }
        }
      `}</style>
    </div>
  );
}