/*
Spanish A1 React App (single-file App component)

Features included:
 - Flashcards (Spanish <-> English)
 - Multiple-choice Practice
 - Conversation (fill-in-the-blank / translate) with tolerant checking
 - Progress tracking saved in localStorage (points, level, accuracy, streak)
 - Simple gamification (points + levels)
 - Tailwind-ready classes (use with a Vite + Tailwind project)

How to run (quick setup):
1) Create a new Vite React app:
   npm create vite@latest spanish-a1 -- --template react
   cd spanish-a1

2) Install dependencies and Tailwind (follow Tailwind + Vite guide):
   npm install
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

   // tailwind.config.cjs -> add:
   // module.exports = { content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {} }, plugins: [], }

   // src/index.css -> replace with Tailwind base imports:
   // @tailwind base;
   // @tailwind components;
   // @tailwind utilities;

3) Replace src/App.jsx contents with the code in this file (export default App at bottom).
4) Start dev server:
   npm run dev

You can also bundle using `npm run build` and serve the dist folder.

Note: This file is written as a single React component file to paste into src/App.jsx. It assumes Tailwind is active so classes will style correctly. If you don't want Tailwind, the markup will still function — you'll just need to add styles.
*/

import React, { useEffect, useMemo, useState } from 'react'

// ---------- Small A1 dataset ----------
const VOCAB = [
  { es: 'hola', en: 'hello' },
  { es: 'adiós', en: 'goodbye' },
  { es: 'por favor', en: 'please' },
  { es: 'gracias', en: 'thank you' },
  { es: 'lo siento', en: 'sorry' },
  { es: 'sí', en: 'yes' },
  { es: 'no', en: 'no' },
  { es: '¿cómo estás?', en: 'how are you?' },
  { es: 'bien', en: 'well/fine' },
  { es: 'mal', en: 'bad' },
  { es: '¿qué tal?', en: "what's up?" },
  { es: 'buenos días', en: 'good morning' },
  { es: 'buenas noches', en: 'good night' },
  { es: '¿cómo te llamas?', en: "what's your name?" },
  { es: 'me llamo...', en: 'my name is...' },
]

const PHRASES = [
  { es: '¿Dónde está el baño?', en: 'Where is the bathroom?' },
  { es: 'Necesito ayuda', en: 'I need help' },
  { es: '¿Cuánto cuesta?', en: 'How much does it cost?' },
  { es: 'No entiendo', en: "I don't understand" },
  { es: '¿Puede repetirlo, por favor?', en: 'Can you repeat that, please?' },
]

const MC_QUESTIONS = [
  {
    question: "How do you say 'thank you' in Spanish?",
    correct: 'gracias',
    options: ['hola', 'gracias', 'por favor', 'adiós'],
  },
  {
    question: "How do you say 'good morning' in Spanish?",
    correct: 'buenos días',
    options: ['buenas noches', 'buenos días', 'hola', 'bien'],
  },
  {
    question: "How do you say 'I don't understand' in Spanish?",
    correct: 'No entiendo',
    options: ['No entiendo', 'Me llamo', 'Necesito ayuda', 'Lo siento'],
  },
]

// ---------- Utilities ----------
const STORAGE_KEY = 'spanish_a1_progress_v1'

const DEFAULT_PROGRESS = {
  points: 0,
  level: 1,
  total_correct: 0,
  total_attempts: 0,
  streak: 0,
  last_practice: null,
}

function loadProgress() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (!raw) return { ...DEFAULT_PROGRESS }
    const parsed = JSON.parse(raw)
    return { ...DEFAULT_PROGRESS, ...parsed }
  } catch (e) {
    console.error('loadProgress error', e)
    return { ...DEFAULT_PROGRESS }
  }
}

function saveProgress(p) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(p))
  } catch (e) {
    console.error('saveProgress error', e)
  }
}

function addPoints(progress, pts) {
  progress.points += pts
  progress.level = 1 + Math.floor(progress.points / 100)
  progress.last_practice = new Date().toISOString()
  saveProgress(progress)
}

function normalizeAnswer(s) {
  if (!s) return ''
  return s
    .toLowerCase()
    .normalize('NFD')
    .replace(/\p{Diacritic}/gu, '')
    .replace(/[^a-z0-9ñ¿¡ ]/g, '')
    .trim()
}

// ---------- UI Components ----------
function Header({ progress }) {
  return (
    <div className="flex items-center justify-between p-4 bg-gradient-to-r from-sky-400 to-indigo-500 text-white rounded-lg">
      <div className="text-lg font-semibold">Spanish A1 — Learn & Practice</div>
      <div className="text-right">
        <div>Points: <span className="font-bold">{progress.points}</span></div>
        <div>Level: <span className="font-bold">{progress.level}</span></div>
      </div>
    </div>
  )
}

function Tabs({ tabs, current, setCurrent }) {
  return (
    <div className="flex space-x-2">
      {tabs.map((t) => (
        <button
          key={t}
          onClick={() => setCurrent(t)}
          className={`px-4 py-2 rounded-md ${current === t ? 'bg-indigo-600 text-white' : 'bg-gray-100'}`}>
          {t}
        </button>
      ))}
    </div>
  )
}

function Flashcards({ progress, updateGlobal }) {
  const [deck, setDeck] = useState(() => [...VOCAB].sort(() => Math.random() - 0.5))
  const [idx, setIdx] = useState(0)
  const [showFront, setShowFront] = useState(true)

  useEffect(() => saveProgress(progress), [progress])

  const entry = deck[idx % deck.length]

  function flip() {
    setShowFront((s) => !s)
  }
  function next() {
    setIdx((i) => i + 1)
    setShowFront(true)
  }
  function know() {
    addPoints(progress, 5)
    // small chance to remove
    if (Math.random() < 0.25) {
      setDeck((d) => d.filter((_, i) => i !== idx % d.length))
      setIdx((i) => Math.max(0, i - 1))
    } else {
      setIdx((i) => i + 1)
    }
    updateGlobal()
  }

  if (!entry) return <div className="p-4">No flashcards</div>

  return (
    <div className="p-4 space-y-4">
      <div className="p-6 border rounded-lg text-3xl text-center bg-white">{showFront ? entry.es : entry.en}</div>
      <div className="flex gap-2">
        <button className="px-3 py-2 bg-gray-200 rounded" onClick={flip}>Flip</button>
        <button className="px-3 py-2 bg-gray-200 rounded" onClick={next}>Next</button>
        <button className="px-3 py-2 bg-green-500 text-white rounded" onClick={know}>I know it (+5)</button>
      </div>
    </div>
  )
}

function Practice({ progress, updateGlobal }) {
  const [current, setCurrent] = useState(() => MC_QUESTIONS[Math.floor(Math.random() * MC_QUESTIONS.length)])
  const [selected, setSelected] = useState(null)
  const [feedback, setFeedback] = useState('')

  useEffect(() => saveProgress(progress), [progress])

  function newQuestion() {
    setCurrent(MC_QUESTIONS[Math.floor(Math.random() * MC_QUESTIONS.length)])
    setSelected(null)
    setFeedback('')
  }

  function submit() {
    if (!selected) {
      setFeedback('Please choose an option')
      return
    }
    progress.total_attempts += 1
    if (normalizeAnswer(selected) === normalizeAnswer(current.correct)) {
      setFeedback('Correct! +10 points')
      addPoints(progress, 10)
      progress.total_correct += 1
      progress.streak += 1
    } else {
      setFeedback(`Not quite. Correct: ${current.correct}`)
      progress.streak = 0
    }
    saveProgress(progress)
    updateGlobal()
    setTimeout(newQuestion, 1100)
  }

  const options = useMemo(() => [...current.options].sort(() => Math.random() - 0.5), [current])

  return (
    <div className="p-4 space-y-4">
      <div className="text-lg font-medium">{current.question}</div>
      <div className="space-y-2">
        {options.map((opt) => (
          <label key={opt} className={`w-full block p-3 border rounded ${selected===opt ? 'bg-indigo-50 border-indigo-400':''}`}>
            <input type="radio" name="mc" className="mr-2" checked={selected===opt} onChange={() => setSelected(opt)} />
            {opt}
          </label>
        ))}
      </div>
      <div className="flex gap-2">
        <button className="px-4 py-2 bg-indigo-600 text-white rounded" onClick={submit}>Submit</button>
        <button className="px-4 py-2 bg-gray-200 rounded" onClick={newQuestion}>Skip</button>
      </div>
      {feedback && <div className="mt-2 text-sm">{feedback}</div>}
    </div>
  )
}

function Conversation({ progress, updateGlobal }) {
  const pool = useMemo(() => [...PHRASES, ...VOCAB], [])
  const [current, setCurrent] = useState(() => pool[Math.floor(Math.random() * pool.length)])
  const [answer, setAnswer] = useState('')
  const [feedback, setFeedback] = useState('')

  useEffect(() => saveProgress(progress), [progress])

  function newPrompt() {
    setCurrent(pool[Math.floor(Math.random() * pool.length)])
    setAnswer('')
    setFeedback('')
  }

  function check() {
    progress.total_attempts += 1
    const normUser = normalizeAnswer(answer)
    const normTarget = normalizeAnswer(current.es)
    if (normUser === normTarget || normTarget.includes(normUser) || normUser.includes(normTarget)) {
      setFeedback('Good! +15 points')
      addPoints(progress, 15)
      progress.total_correct += 1
      progress.streak += 1
      saveProgress(progress)
      updateGlobal()
      setTimeout(newPrompt, 900)
    } else {
      setFeedback(`Not quite. Expected: ${current.es}`)
      progress.streak = 0
      saveProgress(progress)
      updateGlobal()
    }
  }

  return (
    <div className="p-4 space-y-4">
      <div className="text-lg">Translate into Spanish:</div>
      <div className="p-4 bg-white border rounded">{current.en}</div>
      <input value={answer} onChange={(e) => setAnswer(e.target.value)} className="w-full p-2 border rounded" placeholder="Write your answer here" />
      <div className="flex gap-2">
        <button className="px-4 py-2 bg-green-600 text-white rounded" onClick={check}>Check</button>
        <button className="px-4 py-2 bg-gray-200 rounded" onClick={newPrompt}>New</button>
      </div>
      {feedback && <div className="text-sm">{feedback}</div>}
    </div>
  )
}

function ProgressPanel({ progress, resetProgress, manualSaveKey }) {
  const attempts = progress.total_attempts || 0
  const correct = progress.total_correct || 0
  const accuracy = attempts > 0 ? ((correct / attempts) * 100).toFixed(1) + '%' : '0%'

  return (
    <div className="p-4 space-y-3">
      <div>Points: <strong>{progress.points}</strong></div>
      <div>Level: <strong>{progress.level}</strong></div>
      <div>Accuracy: <strong>{accuracy}</strong> ({correct}/{attempts})</div>
      <div>Streak: <strong>{progress.streak}</strong></div>
      <div>Last practice: <strong>{progress.last_practice ? new Date(progress.last_practice).toLocaleString() : '—'}</strong></div>
      <div className="flex gap-2 mt-2">
        <button onClick={resetProgress} className="px-3 py-2 bg-red-500 text-white rounded">Reset</button>
        <button onClick={() => navigator.clipboard && navigator.clipboard.writeText(JSON.stringify(progress))} className="px-3 py-2 bg-gray-200 rounded">Copy JSON</button>
      </div>
      <div className="text-xs text-gray-500 mt-2">Save key: <code>{manualSaveKey}</code></div>
    </div>
  )
}

// ---------- Main App ----------
export default function App() {
  const [progress, setProgress] = useState(() => loadProgress())
  const [tab, setTab] = useState('Flashcards')

  useEffect(() => saveProgress(progress), [progress])

  function updateGlobal() {
    setProgress(loadProgress())
  }

  function resetProgress() {
    if (!confirm('Reset progress?')) return
    const p = { ...DEFAULT_PROGRESS }
    setProgress(p)
    saveProgress(p)
  }

  return (
    <div className="min-h-screen bg-slate-50 p-6">
      <div className="max-w-4xl mx-auto">
        <Header progress={progress} />

        <div className="flex items-center justify-between mt-6">
          <Tabs tabs={[ 'Flashcards', 'Practice', 'Conversation', 'Progress' ]} current={tab} setCurrent={setTab} />
          <div className="text-sm text-gray-600">A1 • Desktop-friendly • Local progress</div>
        </div>

        <div className="mt-4 bg-white rounded-lg shadow">
          {tab === 'Flashcards' && <Flashcards progress={progress} updateGlobal={updateGlobal} />}
          {tab === 'Practice' && <Practice progress={progress} updateGlobal={updateGlobal} />}
          {tab === 'Conversation' && <Conversation progress={progress} updateGlobal={updateGlobal} />}
          {tab === 'Progress' && <ProgressPanel progress={progress} resetProgress={resetProgress} manualSaveKey={STORAGE_KEY} />}
        </div>

        <footer className="mt-6 text-xs text-gray-500">Made for A1 Spanish learners — expand the content in <code>VOCAB</code> and <code>PHRASES</code>.</footer>
      </div>
    </div>
  )
}