import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, RotateCcw, Volume2, List, LayoutGrid } from 'lucide-react';

const vocabulary = [
  // LEKCJA 1
  { de: "die E-Mail-Adresse, -n", pl: "adres mailowy", lesson: 1 },
  { de: "der Familienname, -n", pl: "nazwisko", lesson: 1 },
  { de: "das Geburtsdatum, -daten", pl: "data urodzenia", lesson: 1 },
  { de: "die Hausnummer, -n", pl: "numer domu", lesson: 1 },
  { de: "das Land, Länder", pl: "kraj", lesson: 1 },
  { de: "die Personalien (Pl.)", pl: "dane osobowe, personalia", lesson: 1 },
  { de: "die Postleitzahl, -en", pl: "kod pocztowy", lesson: 1 },
  { de: "der Punkt, -e", pl: "punkt, kropka", lesson: 1 },
  { de: "die Staatsangehörigkeit, -en", pl: "obywatelstwo", lesson: 1 },
  { de: "die Stadt, Städte", pl: "miasto", lesson: 1 },
  { de: "die Straße, -n", pl: "ulica", lesson: 1 },
  { de: "die Telefonnummer, -n", pl: "numer telefonu", lesson: 1 },
  { de: "der Unterstrich, -e", pl: "podkreślnik", lesson: 1 },
  { de: "der Vorname, -n", pl: "imię", lesson: 1 },
  { de: "der Wohnort, -e", pl: "miejsce zamieszkania", lesson: 1 },

  // LEKCJA 2
  { de: "das Arbeitszimmer, -", pl: "gabinet", lesson: 2 },
  { de: "das Badezimmer, -", pl: "łazienka", lesson: 2 },
  { de: "der Balkon, -s/-e", pl: "balkon", lesson: 2 },
  { de: "befinden sich", pl: "znajdować się", lesson: 2 },
  { de: "bestehen aus (Dat.)", pl: "składać się z", lesson: 2 },
  { de: "der Bodensee", pl: "jezioro Bodeńskie", lesson: 2 },
  { de: "direkt", pl: "prosto", lesson: 2 },
  { de: "einladen", pl: "zapraszać", lesson: 2 },
  { de: "das Esszimmer, -", pl: "jadalnia", lesson: 2 },
  { de: "faulenzen", pl: "leniuchować", lesson: 2 },
  { de: "die Ferienwohnung, -en", pl: "apartament wakacyjny", lesson: 2 },
  { de: "fernsehen", pl: "oglądać telewizję", lesson: 2 },
  { de: "der Flur, -e", pl: "korytarz", lesson: 2 },
  { de: "die Garage, -n", pl: "garaż", lesson: 2 },
  { de: "die Garderobe, -n", pl: "garderoba", lesson: 2 },
  { de: "die Gegend, -en", pl: "okolica", lesson: 2 },
  { de: "hängen", pl: "wisieć", lesson: 2 },
  { de: "das Haus, Häuser", pl: "dom", lesson: 2 },
  { de: "der Hobbyraum, -räume", pl: "pomieszczenie hobby", lesson: 2 },
  { de: "das Kinderzimmer, -", pl: "pokój dziecięcy", lesson: 2 },
  { de: "die Kleidung, -en", pl: "ubranie", lesson: 2 },
  { de: "kochen", pl: "gotować", lesson: 2 },
  { de: "die Küche, -n", pl: "kuchnia", lesson: 2 },
  { de: "laut", pl: "głośny", lesson: 2 },
  { de: "der Raum, Räume", pl: "pomieszczenie", lesson: 2 },
  { de: "ruhig", pl: "cichy, spokojny", lesson: 2 },
  { de: "das Schlafzimmer, -", pl: "sypialnia", lesson: 2 },
  { de: "schmutzig", pl: "brudny", lesson: 2 },
  { de: "der Schuh, -e", pl: "but", lesson: 2 },
  { de: "stehen", pl: "stać", lesson: 2 },
  { de: "die Terrasse, -n", pl: "taras", lesson: 2 },
  { de: "die Toilette, -n", pl: "toaleta", lesson: 2 },
  { de: "der Urlaub, -e", pl: "urlop", lesson: 2 },
  { de: "verbringen", pl: "spędzać", lesson: 2 },
  { de: "das Wochenende, -n", pl: "weekend", lesson: 2 },
  { de: "die Wohnung, -en", pl: "mieszkanie", lesson: 2 },
  { de: "das Wohnzimmer, -", pl: "pokój dzienny", lesson: 2 },

  // LEKCJA 3
  { de: "altmodisch", pl: "staromodny", lesson: 3 },
  { de: "die Altstadt, -städte", pl: "stare miasto", lesson: 3 },
  { de: "an", pl: "na (w pionie)", lesson: 3 },
  { de: "auf", pl: "na (w poziomie)", lesson: 3 },
  { de: "die Badewanne, -n", pl: "wanna", lesson: 3 },
  { de: "bequem", pl: "wygodny", lesson: 3 },
  { de: "das Bett, -en", pl: "łóżko", lesson: 3 },
  { de: "das Bild, -er", pl: "obraz", lesson: 3 },
  { de: "das Dachgeschoss, -e", pl: "poddasze", lesson: 3 },
  { de: "die Decke, -n", pl: "sufit", lesson: 3 },
  { de: "deshalb", pl: "dlatego", lesson: 3 },
  { de: "dunkel", pl: "ciemny", lesson: 3 },
  { de: "die Dusche, -n", pl: "prysznic", lesson: 3 },
  { de: "die Ecke, -n", pl: "róg", lesson: 3 },
  { de: "einfach", pl: "prosty", lesson: 3 },
  { de: "das Einfamilienhaus, -häuser", pl: "dom jednorodzinny", lesson: 3 },
  { de: "der Elektroherd, -e", pl: "kuchenka elektryczna", lesson: 3 },
  { de: "das Erdgeschoss, -e", pl: "parter", lesson: 3 },
  { de: "das Fenster, -", pl: "okno", lesson: 3 },
  { de: "das Fensterbrett, -er", pl: "parapet", lesson: 3 },
  { de: "der Fernseher, -", pl: "telewizor", lesson: 3 },
  { de: "der Fußboden, -böden", pl: "podłoga", lesson: 3 },
  { de: "gefährlich", pl: "niebezpieczny", lesson: 3 },
  { de: "gehören (Dat.)", pl: "należeć do", lesson: 3 },
  { de: "gemütlich", pl: "przytulny", lesson: 3 },
  { de: "gestrichen", pl: "pomalowany", lesson: 3 },
  { de: "hässlich", pl: "brzydki", lesson: 3 },
  { de: "hell", pl: "jasny", lesson: 3 },
  { de: "herrschen", pl: "panować", lesson: 3 },
  { de: "hinter", pl: "za", lesson: 3 },
  { de: "in", pl: "w, do", lesson: 3 },
  { de: "komfortabel", pl: "komfortowy", lesson: 3 },
  { de: "die Kommode, -n", pl: "komoda", lesson: 3 },
  { de: "der Kühlschrank, -schränke", pl: "lodówka", lesson: 3 },
  { de: "die Lampe, -n", pl: "lampa", lesson: 3 },
  { de: "liegen", pl: "leżeć", lesson: 3 },
  { de: "luxuriös", pl: "luksusowy", lesson: 3 },
  { de: "die Mikrowelle, -n", pl: "mikrofalówka", lesson: 3 },
  { de: "die Mitte, -n", pl: "środek", lesson: 3 },
  { de: "modern", pl: "nowoczesny", lesson: 3 },
  { de: "neben", pl: "obok", lesson: 3 },
  { de: "neu", pl: "nowy", lesson: 3 },
  { de: "die Ordnung", pl: "porządek", lesson: 3 },
  { de: "der Papierkorb, -körbe", pl: "kosz na śmieci", lesson: 3 },
  { de: "das / der Poster, -", pl: "plakat", lesson: 3 },
  { de: "das Regal, -e", pl: "regał", lesson: 3 },
  { de: "das Reihenhaus, -häuser", pl: "dom szeregowy", lesson: 3 },
  { de: "das Rollo, -s", pl: "roleta", lesson: 3 },
  { de: "sauber", pl: "czysty", lesson: 3 },
  { de: "der Schrank, Schränke", pl: "szafa", lesson: 3 },
  { de: "der Schreibtisch, -e", pl: "biurko", lesson: 3 },
  { de: "der Sessel, -", pl: "fotel", lesson: 3 },
  { de: "sicher", pl: "bezpieczny", lesson: 3 },
  { de: "sitzen", pl: "siedzieć", lesson: 3 },
  { de: "das Sofa, -s", pl: "sofa", lesson: 3 },
  { de: "der Spiegel, -", pl: "lustro", lesson: 3 },
  { de: "der Stadtrand, -ränder", pl: "peryferie miasta", lesson: 3 },
  { de: "das Stadtzentrum, -zentren", pl: "centrum miasta", lesson: 3 },
  { de: "die Stereoanlage, -n", pl: "wieża stereo", lesson: 3 },
  { de: "der Stock", pl: "piętro", lesson: 3 },
  { de: "der Stuhl, Stühle", pl: "krzesło", lesson: 3 },
  { de: "teilen", pl: "dzielić", lesson: 3 },
  { de: "der Teppich, -e", pl: "dywan", lesson: 3 },
  { de: "der Tisch, -e", pl: "stół", lesson: 3 },
  { de: "die Tür, -en", pl: "drzwi", lesson: 3 },
  { de: "über", pl: "nad", lesson: 3 },
  { de: "unter", pl: "pod", lesson: 3 },
  { de: "vor", pl: "przed", lesson: 3 },
  { de: "die Wand, Wände", pl: "ściana", lesson: 3 },
  { de: "der Wohnblock, -s", pl: "blok mieszkalny", lesson: 3 },
  { de: "zwischen", pl: "między", lesson: 3 },

  // LEKCJA 4
  { de: "allein", pl: "sam", lesson: 4 },
  { de: "der Blick, -e", pl: "widok, spojrzenie", lesson: 4 },
  { de: "eingerichtet", pl: "urządzony", lesson: 4 },
  { de: "entwickeln", pl: "rozwijać", lesson: 4 },
  { de: "die Etage, -n", pl: "piętro", lesson: 4 },
  { de: "fein", pl: "doskonały, wyśmienity", lesson: 4 },
  { de: "vom Feinsten", pl: "wysokiej jakości", lesson: 4 },
  { de: "das Gebäude, -", pl: "budynek", lesson: 4 },
  { de: "der Gemeinschaftsgarten, -gärten", pl: "wspólny ogród", lesson: 4 },
  { de: "die Gesamtmiete, -n", pl: "całościowy czynsz", lesson: 4 },
  { de: "gleichzeitig", pl: "jednocześnie", lesson: 4 },
  { de: "integriert", pl: "zintegrowany", lesson: 4 },
  { de: "jedenfalls", pl: "w każdym razie", lesson: 4 },
  { de: "die Kaltmiete, -n", pl: "czynsz (bez dodatkowych opłat)", lesson: 4 },
  { de: "der Keller, -", pl: "piwnica", lesson: 4 },
  { de: "die Lage, -n", pl: "położenie, miejsce", lesson: 4 },
  { de: "leisten, sich", pl: "sprawiać sobie", lesson: 4 },
  { de: "die Miete, -n", pl: "czynsz; zur Miete - wynajmować", lesson: 4 },
  { de: "wohnen", pl: "mieszkać (jako lokator)", lesson: 4 },
  { de: "mieten", pl: "wynajmować", lesson: 4 },
  { de: "der Mieter, -", pl: "najemca", lesson: 4 },
  { de: "die Nähe", pl: "pobliże", lesson: 4 },
  { de: "die Nebenkosten (Pl.)", pl: "dodatkowe koszty", lesson: 4 },
  { de: "offen", pl: "otwarty", lesson: 4 },
  { de: "reich", pl: "bogaty", lesson: 4 },
  { de: "sondern", pl: "lecz", lesson: 4 },
  { de: "teuer", pl: "drogi", lesson: 4 },
  { de: "der Traum, Träume", pl: "marzenie", lesson: 4 },
  { de: "träumen von (Dat.)", pl: "marzyć o", lesson: 4 },
  { de: "umziehen", pl: "przeprowadzać się", lesson: 4 },
  { de: "die Wiese, -n", pl: "łąka", lesson: 4 },
  { de: "zeigen", pl: "pokazywać", lesson: 4 },
  { de: "zwar", pl: "wprawdzie", lesson: 4 }
];

export default function App() {
  const [selectedLesson, setSelectedLesson] = useState(0); // 0 = All
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isFlipped, setIsFlipped] = useState(false);
  const [viewMode, setViewMode] = useState('flashcard'); // 'flashcard' or 'list'

  const filteredVocab = selectedLesson === 0 
    ? vocabulary 
    : vocabulary.filter(v => v.lesson === selectedLesson);

  const currentWord = filteredVocab[currentIndex];

  const handleNext = () => {
    setIsFlipped(false);
    setTimeout(() => {
      setCurrentIndex((prev) => (prev + 1) % filteredVocab.length);
    }, 150);
  };

  const handlePrev = () => {
    setIsFlipped(false);
    setTimeout(() => {
      setCurrentIndex((prev) => (prev - 1 + filteredVocab.length) % filteredVocab.length);
    }, 150);
  };

  const handleLessonChange = (lessonNum) => {
    setSelectedLesson(lessonNum);
    setCurrentIndex(0);
    setIsFlipped(false);
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col items-center p-4 font-sans text-slate-800">
      <header className="w-full max-w-2xl mb-8 mt-4 text-center">
        <h1 className="text-3xl font-bold text-indigo-700 mb-2">Fiszki Niemiecki</h1>
        <p className="text-slate-500">Kapitel 1: Wortscharz</p>
      </header>

      {/* Kontrolki lekcji */}
      <div className="w-full max-w-2xl flex flex-wrap justify-center gap-2 mb-8">
        {[0, 1, 2, 3, 4].map((num) => (
          <button
            key={num}
            onClick={() => handleLessonChange(num)}
            className={`px-4 py-2 rounded-full font-medium transition-all ${
              selectedLesson === num 
                ? 'bg-indigo-600 text-white shadow-md' 
                : 'bg-white text-slate-600 hover:bg-slate-200 shadow-sm border border-slate-200'
            }`}
          >
            {num === 0 ? 'Wszystkie' : `Lekcja ${num}`}
          </button>
        ))}
      </div>

      {/* Przełącznik widoku */}
      <div className="flex bg-slate-200 p-1 rounded-lg mb-8 shadow-inner">
        <button 
          onClick={() => setViewMode('flashcard')}
          className={`flex items-center gap-2 px-4 py-2 rounded-md transition-all ${viewMode === 'flashcard' ? 'bg-white shadow-sm' : 'text-slate-500'}`}
        >
          <LayoutGrid size={18} /> Fiszki
        </button>
        <button 
          onClick={() => setViewMode('list')}
          className={`flex items-center gap-2 px-4 py-2 rounded-md transition-all ${viewMode === 'list' ? 'bg-white shadow-sm' : 'text-slate-500'}`}
        >
          <List size={18} /> Lista
        </button>
      </div>

      {viewMode === 'flashcard' ? (
        <div className="w-full max-w-md flex flex-col items-center">
          {/* Licznik */}
          <div className="mb-4 text-slate-400 font-medium">
            Słówko {currentIndex + 1} z {filteredVocab.length}
          </div>

          {/* Karta */}
          <div 
            onClick={() => setIsFlipped(!isFlipped)}
            className="group relative w-full h-80 perspective-1000 cursor-pointer"
          >
            <div className={`relative w-full h-full transition-all duration-500 preserve-3d ${isFlipped ? 'rotate-y-180' : ''}`}>
              {/* Front (Niemiecki) */}
              <div className="absolute w-full h-full backface-hidden bg-white rounded-3xl shadow-xl flex flex-col items-center justify-center p-8 border-b-8 border-indigo-500">
                <span className="text-sm font-bold text-indigo-400 uppercase tracking-widest mb-4">Po niemiecku</span>
                <h2 className="text-3xl md:text-4xl font-bold text-slate-800 text-center leading-tight">
                  {currentWord?.de}
                </h2>
                <div className="mt-8 text-slate-300">
                  <RotateCcw size={24} />
                </div>
              </div>

              {/* Back (Polski) */}
              <div className="absolute w-full h-full backface-hidden rotate-y-180 bg-indigo-50 rounded-3xl shadow-xl flex flex-col items-center justify-center p-8 border-b-8 border-emerald-500">
                <span className="text-sm font-bold text-emerald-500 uppercase tracking-widest mb-4">Po polsku</span>
                <h2 className="text-3xl md:text-4xl font-semibold text-slate-800 text-center">
                  {currentWord?.pl}
                </h2>
                <div className="mt-8 text-indigo-200">
                  <RotateCcw size={24} />
                </div>
              </div>
            </div>
          </div>

          {/* Nawigacja */}
          <div className="flex items-center gap-8 mt-10">
            <button 
              onClick={(e) => { e.stopPropagation(); handlePrev(); }}
              className="p-4 rounded-full bg-white text-indigo-600 shadow-lg hover:scale-110 active:scale-95 transition-all"
            >
              <ChevronLeft size={32} />
            </button>
            <button 
              onClick={(e) => { e.stopPropagation(); setIsFlipped(!isFlipped); }}
              className="px-8 py-4 rounded-2xl bg-indigo-600 text-white font-bold shadow-lg hover:bg-indigo-700 active:scale-95 transition-all"
            >
              Odwróć
            </button>
            <button 
              onClick={(e) => { e.stopPropagation(); handleNext(); }}
              className="p-4 rounded-full bg-white text-indigo-600 shadow-lg hover:scale-110 active:scale-95 transition-all"
            >
              <ChevronRight size={32} />
            </button>
          </div>
        </div>
      ) : (
        /* Widok listy */
        <div className="w-full max-w-2xl bg-white rounded-2xl shadow-xl overflow-hidden mb-12 border border-slate-200">
          <table className="w-full text-left">
            <thead className="bg-slate-50 border-b border-slate-200">
              <tr>
                <th className="px-6 py-4 text-indigo-600 font-bold uppercase text-xs tracking-wider">Niemiecki</th>
                <th className="px-6 py-4 text-indigo-600 font-bold uppercase text-xs tracking-wider">Polski</th>
                <th className="px-6 py-4 text-indigo-600 font-bold uppercase text-xs tracking-wider text-right">Lekcja</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filteredVocab.map((word, idx) => (
                <tr key={idx} className="hover:bg-indigo-50 transition-colors">
                  <td className="px-6 py-4 font-bold text-slate-800">{word.de}</td>
                  <td className="px-6 py-4 text-slate-600 italic">{word.pl}</td>
                  <td className="px-6 py-4 text-right">
                    <span className="inline-block px-2 py-1 rounded bg-slate-100 text-slate-500 text-xs font-mono">L{word.lesson}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Style CSS dla efektu obracania (Tailwind nie ma go domyślnie) */}
      <style dangerouslySetInnerHTML={{ __html: `
        .perspective-1000 { perspective: 1000px; }
        .preserve-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
      `}} />
    </div>
  );
}

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