import React, { useState, useEffect, useRef } from 'react';
import { Volume2, ArrowRight, RefreshCw, Check, X, Shuffle, Settings, PlayCircle } from 'lucide-react';

const RAW_DATA = [
{ id: 1, word: "Elements", definition: "Essential parts of something.", pronunciation: "El-e-ments", example: "We identified the key elements of the story.", level: "B2" },
{ id: 2, word: "Parts", definition: "Pieces or segments of a whole.", pronunciation: "Parts", example: "The machine has many moving parts.", level: "A1" },
{ id: 3, word: "Fragments", definition: "Small parts broken or separated off something.", pronunciation: "Frag-ments", example: "The vase shattered into tiny fragments.", level: "B2" },
{ id: 4, word: "Frustration", definition: "The feeling of being upset or annoyed.", pronunciation: "Frus-tra-tion", example: "He expressed his frustration about the delay.", level: "B2" },
{ id: 5, word: "Reach out", definition: "To contact someone for help.", pronunciation: "Reach - out", example: "Don't hesitate to reach out if you need support.", level: "B2" },
{ id: 6, word: "Alleviate", definition: "To make a problem less severe.", pronunciation: "Al-le-vi-ate", example: "Ice can help alleviate the swelling.", level: "C1" },
{ id: 7, word: "Ease", definition: "Freedom from worry or pain.", pronunciation: "Ease", example: "The news put my mind at ease.", level: "B1" },
{ id: 8, word: "Frustrated", definition: "Feeling annoyed because of inability to change something.", pronunciation: "Frus-tra-ted", example: "I get frustrated when the internet is slow.", level: "B2" },
{ id: 9, word: "Frustrating", definition: "Causing annoyance or upset.", pronunciation: "Frus-tra-ting", example: "It is frustrating to lose your keys.", level: "B2" },
{ id: 10, word: "Recognise", definition: "To acknowledge the existence or validity of something.", pronunciation: "Rec-og-nise", example: "We must recognise the importance of this issue.", level: "B1" },
{ id: 11, word: "Recognition", definition: "Acknowledgment of existence or validity.", pronunciation: "Rec-og-ni-tion", example: "She received recognition for her charity work.", level: "B2" },
{ id: 12, word: "Identifying", definition: "The process of establishing who or what something is.", pronunciation: "I-den-ti-fy-ing", example: "Identifying the problem is the first step.", level: "B2" },
{ id: 13, word: "Identify", definition: "To establish identity.", pronunciation: "I-den-ti-fy", example: "Can you identify the bird by its call?", level: "B2" },
{ id: 14, word: "Identification", definition: "The action of identifying.", pronunciation: "I-den-ti-fi-ca-tion", example: "Please show your identification at the door.", level: "B2" },
{ id: 15, word: "Priorities", definition: "Things that are regarded as more important than others.", pronunciation: "Pri-or-i-ties", example: "My family and health are my main priorities.", level: "B2" },
{ id: 16, word: "Priority", definition: "A thing that is regarded as more important.", pronunciation: "Pri-or-i-ty", example: "Safety is our top priority.", level: "B2" },
{ id: 17, word: "Distribute", definition: "To share something out.", pronunciation: "Dis-trib-ute", example: "Please distribute the worksheets to the class.", level: "B2" },
{ id: 18, word: "Distribution", definition: "The action of sharing something out.", pronunciation: "Dis-tri-bu-tion", example: "The distribution of food was well organized.", level: "B2" },
{ id: 19, word: "Clarify", definition: "To make a statement less confused.", pronunciation: "Clar-i-fy", example: "Could you clarify what you mean?", level: "B2" },
{ id: 20, word: "Clarification", definition: "The action of making something clear.", pronunciation: "Clar-i-fi-ca-tion", example: "I need some clarification on this rule.", level: "C1" },
{ id: 21, word: "Take into account", definition: "To consider facts or circumstances.", pronunciation: "Take-in-to-ac-count", example: "We must take into account the cost of travel.", level: "B2" },
{ id: 22, word: "Consideration", definition: "Careful thought.", pronunciation: "Con-sid-er-a-tion", example: "Thank you for your consideration of my application.", level: "B2" },
{ id: 23, word: "Consider", definition: "To think carefully about something.", pronunciation: "Con-sid-er", example: "You should consider all your options.", level: "A2" },
{ id: 24, word: "Communicating", definition: "Sharing or exchanging information.", pronunciation: "Com-mu-ni-ca-ting", example: "Communicating clearly is vital in a team.", level: "B1" },
{ id: 25, word: "Communicate", definition: "To share or exchange information.", pronunciation: "Com-mu-ni-cate", example: "Animals communicate in many different ways.", level: "B1" },
{ id: 26, word: "Communication", definition: "The exchanging of information or news.", pronunciation: "Com-mu-ni-ca-tion", example: "Good communication prevents misunderstandings.", level: "B1" },
{ id: 27, word: "Absences", definition: "Occasions of being away.", pronunciation: "Ab-sen-ces", example: "Too many absences will affect your grade.", level: "B2" },
{ id: 28, word: "Absent", definition: "Not present.", pronunciation: "Ab-sent", example: "She was absent from the meeting.", level: "B1" },
{ id: 29, word: "Absent-minded", definition: "Habitually forgetful.", pronunciation: "Ab-sent-min-ded", example: "He is so absent-minded he forgot his lunch.", level: "C1" },
{ id: 30, word: "Effective", definition: "Successful in producing a desired result.", pronunciation: "Ef-fec-tive", example: "This is the most effective solution.", level: "B2" },
{ id: 31, word: "Effectiveness", definition: "The degree to which something is successful.", pronunciation: "Ef-fec-tive-ness", example: "We are evaluating the effectiveness of the drug.", level: "B2" },
{ id: 32, word: "Propose", definition: "To put forward a plan or suggestion.", pronunciation: "Pro-pose", example: "I propose we take a break now.", level: "B2" },
{ id: 33, word: "Proposal", definition: "A plan or suggestion.", pronunciation: "Pro-po-sal", example: "The committee accepted the proposal.", level: "B2" },
{ id: 34, word: "Improve", definition: "To make or become better.", pronunciation: "Im-prove", example: "I want to improve my tennis game.", level: "A2" },
{ id: 35, word: "Improvement", definition: "A change that makes something better.", pronunciation: "Im-prove-ment", example: "There is room for improvement in your work.", level: "B1" },
{ id: 36, word: "Possible", definition: "Able to be done or achieved.", pronunciation: "Pos-si-ble", example: "It is possible to walk there in an hour.", level: "A1" },
{ id: 37, word: "Possibility", definition: "A thing that may happen.", pronunciation: "Pos-si-bil-i-ty", example: "There is a possibility of snow tonight.", level: "B1" },
{ id: 38, word: "Flexible", definition: "Able to be easily modified.", pronunciation: "Flex-i-ble", example: "My schedule is quite flexible.", level: "B2" },
{ id: 39, word: "Flexibility", definition: "The quality of bending easily.", pronunciation: "Flex-i-bil-i-ty", example: "Yoga improves your flexibility.", level: "B2" },
{ id: 40, word: "Passion", definition: "Strong and barely controllable emotion.", pronunciation: "Pas-sion", example: "Music is his life's passion.", level: "B2" },
{ id: 41, word: "Passionate", definition: "Showing strong feelings.", pronunciation: "Pas-sion-ate", example: "She is a passionate reader.", level: "B2" },
{ id: 42, word: "Risking", definition: "Exposing to danger or loss.", pronunciation: "Ris-king", example: "He is risking his savings on this investment.", level: "B2" },
{ id: 43, word: "Risk", definition: "A situation involving exposure to danger.", pronunciation: "Risk", example: "There is a high risk of failure.", level: "B1" },
{ id: 44, word: "Risky", definition: "Full of the possibility of danger.", pronunciation: "Ris-ky", example: "It was a risky move, but it paid off.", level: "B2" },
{ id: 45, word: "Weaknesses", definition: "Qualities that are not strong.", pronunciation: "Weak-nes-ses", example: "Everyone has strengths and weaknesses.", level: "B2" },
{ id: 46, word: "Strength", definition: "The quality or state of being strong.", pronunciation: "Strength", example: "She showed great strength during the crisis.", level: "B1" },
{ id: 47, word: "Strengths", definition: "Beneficial qualities or attributes.", pronunciation: "Strengths", example: "Listing your strengths can boost confidence.", level: "B1" },
{ id: 48, word: "Look forward to", definition: "To await eagerly.", pronunciation: "Look-for-ward-to", example: "I look forward to the holidays.", level: "B1" }
];

export default function App() {
const [words, setWords] = useState(RAW_DATA);
const [currentIndex, setCurrentIndex] = useState(0);
const [userInput, setUserInput] = useState("");
const [feedback, setFeedback] = useState(null); // 'correct', 'incorrect'
const [isRevealed, setIsRevealed] = useState(false);
const [hasStarted, setHasStarted] = useState(false); // To handle browser autoplay policies
const [autoPlay, setAutoPlay] = useState(true);
const [voices, setVoices] = useState([]);

const inputRef = useRef(null);
const currentWord = words[currentIndex];

// 1. Initialize Voices
useEffect(() => {
// Safety check for SSR environments
if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;

const loadVoices = () => {
const availableVoices = window.speechSynthesis.getVoices();
if (availableVoices.length > 0) {
setVoices(availableVoices);
}
};

// Load immediately if available
loadVoices();

// Chrome/others load voices asynchronously
window.speechSynthesis.onvoiceschanged = loadVoices;

return () => {
if (window.speechSynthesis) {
window.speechSynthesis.onvoiceschanged = null;
}
};
}, []);

// 2. Focus input on change
useEffect(() => {
if (inputRef.current && hasStarted) {
// Small timeout helps mobile browsers sometimes
setTimeout(() => inputRef.current.focus(), 50);
}
}, [currentIndex, hasStarted]);

// 3. Auto-play Logic
useEffect(() => {
if (hasStarted && autoPlay) {
// Debounce slightly to ensure transition feels natural
const timer = setTimeout(() => {
speakWord(currentWord.word);
}, 300);
return () => clearTimeout(timer);
}
}, [currentIndex, hasStarted, autoPlay]);

const speakWord = (text) => {
if (typeof window === 'undefined' || !('speechSynthesis' in window)) return;

window.speechSynthesis.cancel(); // Stop any previous

const utterance = new SpeechSynthesisUtterance(text);

// Prefer "Google US English" or "Microsoft Zira" or just any EN
// Different browsers name voices differently
const preferredVoice = voices.find(v =>
v.name.includes("Google US English") ||
v.name.includes("Samantha") ||
(v.lang.startsWith("en-") && v.name.includes("Female")) ||
v.lang.startsWith("en-")
);

if (preferredVoice) {
utterance.voice = preferredVoice;
}

utterance.rate = 0.9; // 10% slower is better for dictation
utterance.pitch = 1.0;

window.speechSynthesis.speak(utterance);
};

const handleStart = () => {
setHasStarted(true);
// Triggering audio context on first click usually unlocks autoplay for later
if (autoPlay) speakWord(currentWord.word);
};

const handleShuffle = () => {
const shuffled = [...words].sort(() => Math.random() - 0.5);
setWords(shuffled);
setCurrentIndex(0);
resetCard();
};

const resetCard = () => {
setUserInput("");
setFeedback(null);
setIsRevealed(false);
if (inputRef.current) inputRef.current.focus();
};

const handleNext = () => {
if (currentIndex < words.length - 1) {
setCurrentIndex(prev => prev + 1);
resetCard();
}
};

const handlePrev = () => {
if (currentIndex > 0) {
setCurrentIndex(prev => prev - 1);
resetCard();
}
};

const checkAnswer = (e) => {
e.preventDefault();
if (!userInput) return;

const cleanInput = userInput.trim().toLowerCase();
const cleanTarget = currentWord.word.trim().toLowerCase();

if (cleanInput === cleanTarget) {
setFeedback('correct');
// Optional: Sound effect for correct answer could go here
} else {
setFeedback('incorrect');
}
};

const renderRedactedExample = (text, targetWord) => {
const regex = new RegExp(`(${targetWord})`, 'gi');
const parts = text.split(regex);

return (
<p className="text-lg text-zinc-600 leading-relaxed">
{parts.map((part, i) => {
if (part.toLowerCase() === targetWord.toLowerCase()) {
return (
<span
key={i}
className={`
inline-block px-2 mx-1 rounded bg-zinc-200 text-transparent select-none transition-all duration-300
${isRevealed || feedback === 'correct' ? 'text-zinc-900 bg-green-100 font-semibold' : 'blur-sm cursor-help'}
`}
onClick={() => setIsRevealed(true)}
title="Click to reveal if stuck"
>
{part}
</span>
);
}
return <span key={i}>{part}</span>;
})}
</p>
);
};

const progress = Math.round(((currentIndex + 1) / words.length) * 100);

// START SCREEN (Required for Browser Autoplay Policy)
if (!hasStarted) {
return (
<div className="min-h-screen bg-zinc-50 flex items-center justify-center p-4">
<div className="max-w-md w-full bg-white border border-zinc-200 rounded-xl p-8 shadow-sm text-center space-y-6">
<div className="w-16 h-16 bg-zinc-100 rounded-full flex items-center justify-center mx-auto mb-4">
<PlayCircle className="w-8 h-8 text-zinc-900" />
</div>
<h1 className="text-2xl font-bold text-zinc-900">Vocabulary Dictation</h1>
<p className="text-zinc-500">
This session will read words aloud for you to type.
Click start to enable audio permissions.
</p>
<button
onClick={handleStart}
className="w-full py-3 bg-zinc-900 text-white rounded-lg font-medium hover:bg-zinc-800 transition-all active:scale-[0.98]"
>
Start Session
</button>
</div>
</div>
);
}

return (
<div className="min-h-screen bg-zinc-50 text-zinc-900 font-sans flex flex-col items-center py-8 sm:py-12 px-4 sm:px-6">

{/* Header */}
<div className="w-full max-w-2xl mb-6 flex flex-wrap gap-4 justify-between items-end">
<div>
<h1 className="text-2xl font-bold tracking-tight text-zinc-900">Vocab Master</h1>
<p className="text-zinc-500 text-sm mt-1">Dictation Mode • {words.length} Words</p>
</div>

<div className="flex items-center gap-2">
<button
onClick={() => setAutoPlay(!autoPlay)}
className={`flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-md border transition-colors ${
autoPlay
? 'bg-zinc-900 text-white border-zinc-900'
: 'bg-white text-zinc-500 border-zinc-200 hover:text-zinc-900'
}`}
>
<Volume2 className="w-3.5 h-3.5" />
{autoPlay ? 'Auto-Read: ON' : 'Auto-Read: OFF'}
</button>

<button
onClick={handleShuffle}
className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-zinc-600 bg-white border border-zinc-200 rounded-md hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
>
<Shuffle className="w-3.5 h-3.5" />
Shuffle
</button>
</div>
</div>

{/* Main Card */}
<div className="w-full max-w-2xl bg-white border border-zinc-200 rounded-xl shadow-sm overflow-hidden relative">

{/* Progress Bar */}
<div className="w-full h-1 bg-zinc-100">
<div
className="h-full bg-zinc-900 transition-all duration-300 ease-out"
style={{ width: `${progress}%` }}
/>
</div>

<div className="p-6 sm:p-10 flex flex-col gap-6 sm:gap-8">

{/* Top Meta: ID & Level */}
<div className="flex justify-between items-start">
<span className="text-xs font-mono text-zinc-400">Word #{currentWord.id}</span>
<span className="px-2 py-1 text-xs font-semibold tracking-wider text-zinc-500 uppercase bg-zinc-100 rounded border border-zinc-200">
{currentWord.level}
</span>
</div>

{/* Definition Section */}
<div className="space-y-4">
<div className="space-y-1">
<span className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Meaning</span>
<h2 className="text-xl sm:text-2xl font-medium text-zinc-900 leading-snug">
{currentWord.definition}
</h2>
</div>

{/* Context/Example */}
<div className="bg-zinc-50 p-4 rounded-lg border border-zinc-100">
<div className="flex items-center gap-2 mb-2 text-xs font-semibold text-zinc-400 uppercase tracking-wider">
<span>Example Context</span>
</div>
{renderRedactedExample(currentWord.example, currentWord.word)}
</div>
</div>

{/* Interaction Area */}
<div className="mt-2 space-y-4">

{/* Input Form */}
<form onSubmit={checkAnswer} className="relative group">
<input
ref={inputRef}
type="text"
value={userInput}
onChange={(e) => {
setUserInput(e.target.value);
setFeedback(null);
}}
disabled={feedback === 'correct'}
placeholder="Type what you hear..."
className={`
w-full px-4 py-4 text-lg bg-white border-2 rounded-lg outline-none transition-all
placeholder:text-zinc-300
${feedback === 'correct'
? 'border-green-500 text-green-700 bg-green-50'
: feedback === 'incorrect'
? 'border-red-300 text-red-900 bg-red-50 focus:border-red-400'
: 'border-zinc-200 focus:border-zinc-900'
}
`}
// Aggressively disable autocomplete features
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
data-lpignore="true"
name="vocab-input-field"
/>

{/* Status Icons inside input */}
<div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
{feedback === 'correct' && <Check className="w-6 h-6 text-green-500" />}
{feedback === 'incorrect' && <X className="w-6 h-6 text-red-400" />}
</div>
</form>

{/* Hint & pronunciation */}
<div className="flex justify-between items-center min-h-[24px]">
<div className="text-sm text-zinc-400 font-mono">
{feedback === 'incorrect' && (
<span className="text-red-500 animate-pulse">Incorrect, try again.</span>
)}
{feedback === 'correct' && (
<span className="text-green-600 font-medium flex items-center gap-2">
Correct! <span className="text-zinc-400 font-normal">/ {currentWord.pronunciation} /</span>
</span>
)}
</div>

<button
type="button"
onClick={() => setIsRevealed(!isRevealed)}
className="text-xs text-zinc-400 hover:text-zinc-600 underline decoration-zinc-200 underline-offset-4"
>
{isRevealed ? 'Hide Answer' : 'Reveal Answer'}
</button>
</div>
</div>

{/* Action Bar */}
<div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-zinc-100 mt-2">

<button
onClick={() => speakWord(currentWord.word)}
className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-white border border-zinc-200 text-zinc-700 rounded-lg hover:bg-zinc-50 hover:border-zinc-300 transition-all font-medium group active:scale-[0.98]"
>
<Volume2 className="w-5 h-5 text-zinc-400 group-hover:text-zinc-700 transition-colors" />
Listen Again
</button>

{feedback === 'correct' || isRevealed ? (
<button
onClick={handleNext}
className="flex-[2] flex items-center justify-center gap-2 px-6 py-3 bg-zinc-900 text-white rounded-lg hover:bg-zinc-800 transition-all font-medium shadow-md shadow-zinc-200 active:scale-[0.98]"
>
Next Word
<ArrowRight className="w-4 h-4" />
</button>
) : (
<button
onClick={checkAnswer}
className="flex-[2] flex items-center justify-center gap-2 px-6 py-3 bg-zinc-900 text-white rounded-lg hover:bg-zinc-800 transition-all font-medium shadow-md shadow-zinc-200 active:scale-[0.98]"
>
Check Answer
</button>
)}

</div>

</div>

{/* Revealed Answer Overlay (Fallback) */}
{isRevealed && feedback !== 'correct' && (
<div className="absolute inset-0 bg-white/95 backdrop-blur-sm z-10 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-200">
<p className="text-zinc-500 text-sm uppercase tracking-widest mb-2">The word was</p>
<h3 className="text-4xl font-bold text-zinc-900 mb-2">{currentWord.word}</h3>
<p className="font-mono text-zinc-400 mb-8">{currentWord.pronunciation}</p>

<div className="flex gap-4">
<button
onClick={() => setIsRevealed(false)}
className="px-6 py-2 rounded-lg text-sm font-medium text-zinc-600 hover:bg-zinc-100"
>
Type it out
</button>
<button
onClick={handleNext}
className="px-6 py-2 rounded-lg text-sm font-medium bg-zinc-900 text-white hover:bg-zinc-800"
>
Move to Next
</button>
</div>
</div>
)}

</div>

{/* Navigation Footer */}
<div className="mt-8 flex gap-4">
<button
onClick={handlePrev}
disabled={currentIndex === 0}
className="p-2 text-zinc-400 hover:text-zinc-600 disabled:opacity-30 transition-colors"
>
Previous
</button>
<div className="text-zinc-400 font-mono text-sm py-2">
{currentIndex + 1} / {words.length}
</div>
<button
onClick={handleNext}
disabled={currentIndex === words.length - 1}
className="p-2 text-zinc-400 hover:text-zinc-600 disabled:opacity-30 transition-colors"
>
Next
</button>
</div>

</div>
);
}