// Grieks woord van de dag + Opa's verjaardag specials

function GrieksScreen({ now, demoDate }) {
  const H = window.kretaHelpers;
  const WOORDEN = window.GRIEKSE_WOORDEN;
  const today = demoDate || now;
  const todayStr = today.toISOString().slice(0, 10);

  const todayWord = WOORDEN.find(w => w.date === todayStr) || WOORDEN[0];
  const [selected, setSelected] = React.useState(todayWord.date);
  const current = WOORDEN.find(w => w.date === selected) || todayWord;

  const state = H.loadState();
  const learned = state.learned || {};

  const [flipped, setFlipped] = React.useState(false);
  React.useEffect(() => { setFlipped(false); }, [selected]);

  const markLearned = () => {
    const s = H.loadState();
    s.learned = { ...(s.learned || {}), [current.date]: Date.now() };
    H.saveState(s);
    // force refresh
    setSelected(s => s);
    setFlipped(true);
  };

  const totalLearned = Object.keys(learned).length;

  return (
    <div className="screen">
      <h1 className="serif" style={{ fontSize: 30, margin: "8px 0 2px", letterSpacing: -0.6 }}>
        Μάθε Ελληνικά
      </h1>
      <div className="section-sub">Leer Grieks · 1 woord per dag</div>

      {/* progress */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, padding: "10px 14px", background: "rgba(255,255,255,0.6)", borderRadius: 12 }}>
        <div style={{ fontSize: 22 }}>🏛️</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{totalLearned}/{WOORDEN.length} woorden geleerd</div>
          <div className="progress" style={{ marginTop: 4 }}>
            <div style={{ width: (totalLearned / WOORDEN.length * 100) + "%" }} />
          </div>
        </div>
      </div>

      {/* day picker */}
      <div className="hscroll" style={{ marginBottom: 18 }}>
        {WOORDEN.map(w => {
          const isActive = w.date === selected;
          const isToday = w.date === todayStr;
          const isLearned = !!learned[w.date];
          const d = H.parseDateTime(w.date);
          return (
            <button
              key={w.date}
              onClick={() => setSelected(w.date)}
              style={{
                appearance: "none", border: "none", cursor: "pointer",
                padding: "10px 12px",
                minWidth: 56,
                borderRadius: 14,
                background: isActive ? "var(--aegean)" : "white",
                color: isActive ? "white" : "var(--ink)",
                border: isActive ? "none" : "1px solid var(--line-soft)",
                fontFamily: "inherit",
                boxShadow: isActive ? "0 4px 12px rgba(26,84,144,0.3)" : "none",
                textAlign: "center",
                position: "relative",
              }}
            >
              <div style={{ fontSize: 9, fontWeight: 600, textTransform: "uppercase", opacity: 0.75, letterSpacing: 0.5 }}>
                {["zo","ma","di","wo","do","vr","za"][d.getDay()]} {d.getDate()}
              </div>
              <div style={{ fontSize: 16, marginTop: 4 }}>
                {isLearned ? "✓" : (isToday ? "🔥" : "·")}
              </div>
              {isToday && !isActive && (
                <div style={{
                  position: "absolute", top: 4, right: 6,
                  width: 6, height: 6, borderRadius: "50%",
                  background: "var(--bougainvillea)",
                }} />
              )}
            </button>
          );
        })}
      </div>

      {/* Flashcard */}
      <div
        onClick={() => setFlipped(f => !f)}
        style={{
          background: "linear-gradient(160deg, #1a5490 0%, #0d3a6b 100%)",
          color: "white",
          borderRadius: 22,
          padding: "32px 24px",
          textAlign: "center",
          cursor: "pointer",
          minHeight: 220,
          position: "relative",
          overflow: "hidden",
          boxShadow: "0 12px 32px rgba(13,58,107,0.25)",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        {/* decorative meander bar */}
        <div style={{
          position: "absolute", top: 0, left: 0, right: 0, height: 16,
          background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'><path d='M0 15 L0 4 L8 4 L8 11 L4 11 L4 8 L12 8 L12 15 M16 15 L16 4 L24 4 L24 11 L20 11 L20 8 L28 8 L28 15' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1'/></svg>\") repeat-x",
        }} />
        <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 1.5, opacity: 0.7, marginBottom: 10 }}>
          {current.cat}
        </div>
        {!flipped ? (
          <>
            <div className="serif" style={{ fontSize: 44, fontWeight: 700, lineHeight: 1.1, letterSpacing: -0.5 }}>
              {current.gr}
            </div>
            <div style={{ marginTop: 10, fontSize: 15, opacity: 0.75, fontStyle: "italic" }}>
              /{current.phon}/
            </div>
            <div style={{ marginTop: 20, fontSize: 11, opacity: 0.6, letterSpacing: 1, textTransform: "uppercase" }}>
              Tik om te vertalen →
            </div>
          </>
        ) : (
          <>
            <div className="serif" style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1 }}>
              {current.nl}
            </div>
            <div style={{ marginTop: 14, fontSize: 14, opacity: 0.85, fontStyle: "italic", lineHeight: 1.5 }}>
              "{current.example}"
            </div>
            <div style={{ marginTop: 16, fontSize: 11, opacity: 0.6, letterSpacing: 1, textTransform: "uppercase" }}>
              Tik om terug te gaan
            </div>
          </>
        )}
      </div>

      {/* Tip */}
      <div style={{ marginTop: 14, padding: "12px 16px", background: "#fff8dc", borderRadius: 12, border: "1px solid rgba(232,176,32,0.3)", display: "flex", gap: 10 }}>
        <div style={{ fontSize: 22 }}>💡</div>
        <div style={{ flex: 1, fontSize: 13, color: "#6b4a00", lineHeight: 1.5 }}>
          {current.tip}
        </div>
      </div>

      {/* Learned button */}
      <button
        className="btn btn-primary"
        onClick={markLearned}
        style={{
          marginTop: 14,
          width: "100%",
          background: learned[current.date] ? "var(--olive)" : "var(--aegean)",
        }}
      >
        {learned[current.date] ? "✓ Geleerd!" : "Ik ken 'm — afvinken"}
      </button>

      {/* Extra: Grieks alfabet mini */}
      <div className="section-title" style={{ fontSize: 18 }}>Bonus: cijfers 1–5</div>
      <div className="card" style={{ padding: 14 }}>
        {[
          { n: 1, gr: "ένα", phon: "éna" },
          { n: 2, gr: "δύο", phon: "dýo" },
          { n: 3, gr: "τρία", phon: "tría" },
          { n: 4, gr: "τέσσερα", phon: "tésera" },
          { n: 5, gr: "πέντε", phon: "pénte" },
        ].map((x, i, arr) => (
          <div key={x.n} style={{
            display: "flex", alignItems: "center", gap: 12,
            padding: "8px 0",
            borderBottom: i < arr.length - 1 ? "1px solid var(--line-soft)" : "none",
          }}>
            <div className="serif" style={{ fontSize: 22, fontWeight: 700, color: "var(--aegean)", width: 30 }}>
              {x.n}
            </div>
            <div className="serif" style={{ fontSize: 18, fontWeight: 600, flex: 1 }}>
              {x.gr}
            </div>
            <div style={{ fontSize: 13, color: "var(--muted)", fontStyle: "italic" }}>
              /{x.phon}/
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.GrieksScreen = GrieksScreen;