// Auth + Parental Consent screens (GDPR / COPPA ready)

// ─── Auth Gate — Google-only pro jednoduchost ────────────────
function AuthScreen({ palette, metaphor, age, playfulness, onAuthenticated, onSkip }) {
  const [err, setErr] = useState(null);
  const [busy, setBusy] = useState(false);

  const fbAvailable = typeof window.firebase !== 'undefined' && !!readPublicConfig();

  const doGoogle = async () => {
    setErr(null); setBusy(true);
    try {
      await signInWithGoogle();
      onAuthenticated?.();
    } catch (e) {
      setErr(humanizeAuthError(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{ position: 'relative', minHeight: '100%', zIndex: 1, padding: '40px 24px 48px' }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <motion.div animate={{ y: [0, -6, 0] }} transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}>
          <Pandicka size={140} pose="wave" expression="happy" accent={palette.accent}/>
        </motion.div>
        <h1 id="auth-title" style={{
          fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 28, color: palette.ink,
          margin: '10px 0 6px', lineHeight: 1.1,
        }}>Ahoj, rodiči!</h1>
        <div style={{ fontFamily: '"Baloo 2"', fontSize: 15, color: palette.inkSoft, maxWidth: 320, margin: '0 auto' }}>
          Přihlas se jedním klikem přes Google. Žádná hesla k zapamatování.
        </div>
      </div>

      {!fbAvailable && (
        <div role="status" style={{
          padding: 12, borderRadius: 14, background: palette.sun + '40', maxWidth: 360, margin: '0 auto 14px',
          fontFamily: '"Baloo 2"', fontSize: 13, color: palette.ink, textAlign: 'center',
        }}>
          🧪 Demo režim — přihlášení zatím neaktivní. Pokračuj tlačítkem níže, data zůstanou v tvém zařízení.
        </div>
      )}

      <div style={{ maxWidth: 360, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 12 }}
        aria-labelledby="auth-title">

        <motion.button
          onClick={doGoogle}
          disabled={busy || !fbAvailable}
          whileHover={fbAvailable && !busy ? { y: -2 } : undefined}
          whileTap={fbAvailable && !busy ? { y: 2, scale: 0.98 } : undefined}
          style={{
            height: 60, padding: '0 22px', borderRadius: 30,
            background: '#fff', color: '#3B2A2F',
            border: '1.5px solid rgba(0,0,0,0.12)',
            cursor: busy || !fbAvailable ? 'not-allowed' : 'pointer',
            opacity: busy || !fbAvailable ? 0.55 : 1,
            boxShadow: '0 4px 0 rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.08)',
            fontFamily: '"Baloo 2", "Baloo 2", system-ui', fontWeight: 600, fontSize: 17,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          }}
          aria-label="Přihlásit se účtem Google"
        >
          <GoogleLogo/>
          {busy ? 'Přihlašuji…' : 'Pokračovat s Google'}
        </motion.button>

        {err && (
          <div role="alert" style={{
            padding: '10px 12px', borderRadius: 12, background: palette.danger + '20',
            color: palette.danger, fontFamily: '"Baloo 2"', fontSize: 13, fontWeight: 600,
          }}>{err}</div>
        )}

      </div>

      <div style={{
        textAlign: 'center', marginTop: 28, maxWidth: 340, margin: '28px auto 0',
        fontFamily: '"Baloo 2"', fontSize: 12, color: palette.inkSoft, lineHeight: 1.5,
      }}>
        Přihlášením potvrzuješ, že jsi rodič nebo zákonný zástupce a souhlasíš s{' '}
        <a href="privacy.html" target="_blank" style={{ color: palette.primaryDeep }}>ochranou soukromí</a>
        {' '}a <a href="terms.html" target="_blank" style={{ color: palette.primaryDeep }}>podmínkami</a>.
        <br/>
        Používáme Google pouze pro přihlášení, neposíláme žádné zprávy ani příspěvky.
      </div>
    </div>
  );
}

function GoogleLogo() {
  return (
    <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
    </svg>
  );
}

function readPublicConfig() {
  try {
    if (typeof window.PANDICKA_FIREBASE_CONFIG === 'object' && window.PANDICKA_FIREBASE_CONFIG?.apiKey) {
      return window.PANDICKA_FIREBASE_CONFIG;
    }
    const raw = localStorage.getItem('pandicka-firebase-config');
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
}

function humanizeAuthError(e) {
  const msg = String(e?.code || e?.message || e);
  if (/popup-closed-by-user/.test(msg)) return 'Okno pro přihlášení bylo zavřené. Zkus to znovu.';
  if (/popup-blocked/.test(msg)) return 'Prohlížeč zablokoval okno. Povol popups pro tuto stránku.';
  if (/account-exists-with-different-credential/.test(msg)) return 'Tento e-mail je registrovaný jinou metodou.';
  if (/network-request-failed/.test(msg)) return 'Problém se sítí. Zkus to znovu.';
  if (/cancelled-popup-request|auth\/cancelled/.test(msg)) return 'Přihlášení zrušeno.';
  return 'Něco se pokazilo. Zkus to prosím znovu.';
}

// ─── Parental Consent (GDPR / COPPA) ──────────────────────────
function ConsentScreen({ palette, metaphor, age, playfulness, user, onAccept, onDecline }) {
  const [consent, setConsent] = useState({
    parentalConsent: false,
    privacyPolicy: false,
    terms: false,
    analyticsOptIn: false,
    voiceRecognitionOptIn: false,
  });
  const [busy, setBusy] = useState(false);

  const required = consent.parentalConsent && consent.privacyPolicy && consent.terms;

  const accept = async () => {
    if (!required) return;
    setBusy(true);
    try {
      await recordConsent(user?.uid, consent);
      onAccept?.(consent);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{ position: 'relative', minHeight: '100%', zIndex: 1, padding: '28px 24px 48px' }}>
      <div style={{ textAlign: 'center', marginBottom: 20 }}>
        <Pandicka size={110} pose="read" expression="thinking" accent={palette.accent}/>
        <h1 id="consent-title" style={{
          fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 24, color: palette.ink,
          margin: '6px 0 4px', lineHeight: 1.1,
        }}>Než začneme…</h1>
        <div style={{ fontFamily: '"Baloo 2"', fontSize: 13, color: palette.inkSoft, maxWidth: 360, margin: '0 auto' }}>
          Pandička je určená dětem. Potřebujeme, aby rodič nebo zákonný zástupce potvrdil souhlas
          se zpracováním osobních údajů dítěte dle GDPR.
        </div>
      </div>

      <SoftCard palette={palette} playfulness={playfulness}
        style={{ padding: 18, maxWidth: 420, margin: '0 auto 14px', display: 'flex', flexDirection: 'column', gap: 12 }}
        aria-labelledby="consent-title">
        <ConsentCheck
          id="c-parent" checked={consent.parentalConsent}
          onChange={v => setConsent(c => ({ ...c, parentalConsent: v }))}
          palette={palette} required
          label="Potvrzuji, že jsem rodič nebo zákonný zástupce dítěte."
          hint="Pro použití aplikace dítětem je nutný souhlas rodiče (COPPA / GDPR čl. 8)."
        />
        <ConsentCheck
          id="c-privacy" checked={consent.privacyPolicy}
          onChange={v => setConsent(c => ({ ...c, privacyPolicy: v }))}
          palette={palette} required
          label={<>Přečetl/a jsem si <a href="privacy.html" target="_blank" style={{ color: palette.primaryDeep }}>zásady ochrany soukromí</a>.</>}
          hint="Zpracováváme jen data nutná pro chod hry (jméno dítěte, pokrok, odměny). Neprodáváme data třetím stranám."
        />
        <ConsentCheck
          id="c-terms" checked={consent.terms}
          onChange={v => setConsent(c => ({ ...c, terms: v }))}
          palette={palette} required
          label={<>Souhlasím s <a href="terms.html" target="_blank" style={{ color: palette.primaryDeep }}>podmínkami použití</a>.</>}
        />
        <div style={{ height: 1, background: palette.ink + '15' }}/>
        <ConsentCheck
          id="c-analytics" checked={consent.analyticsOptIn}
          onChange={v => setConsent(c => ({ ...c, analyticsOptIn: v }))}
          palette={palette}
          label="Souhlasím s anonymní statistikou používání (bez osobních údajů)."
          hint="Pomáhá nám to zlepšovat úkoly. Můžeš kdykoli vypnout."
        />
        <ConsentCheck
          id="c-voice" checked={consent.voiceRecognitionOptIn}
          onChange={v => setConsent(c => ({ ...c, voiceRecognitionOptIn: v }))}
          palette={palette}
          label="Povolit mikrofon pro logopedické úkoly (rozpoznávání řeči)."
          hint="Nahrávky zpracováváme v prohlížeči, na server nic neposíláme."
        />
      </SoftCard>

      <div style={{ maxWidth: 420, margin: '0 auto', display: 'flex', gap: 10 }}>
        <BigButton palette={palette} variant="ghost" size="md" onClick={onDecline}
          style={{ flex: 1 }}>Odmítnout</BigButton>
        <BigButton palette={palette} variant="primary" size="md" disabled={!required || busy}
          onClick={accept} style={{ flex: 1 }}>
          {busy ? 'Ukládám…' : 'Souhlasím 🐾'}
        </BigButton>
      </div>

      <div style={{
        textAlign: 'center', marginTop: 18, fontFamily: '"Baloo 2"', fontSize: 11, color: palette.inkSoft,
      }}>
        Souhlas můžeš kdykoli odvolat v sekci „Rodič → Soukromí". Máš právo na výmaz všech dat.
      </div>
    </div>
  );
}

function ConsentCheck({ id, checked, onChange, label, hint, palette, required }) {
  return (
    <label htmlFor={id} style={{
      display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer',
      padding: 10, borderRadius: 14,
      background: checked ? palette.success + '12' : 'transparent',
      border: `1.5px solid ${checked ? palette.success + '60' : palette.ink + '15'}`,
    }}>
      <input id={id} type="checkbox" checked={checked}
        onChange={e => onChange(e.target.checked)}
        required={required}
        style={{ marginTop: 2, width: 20, height: 20, cursor: 'pointer', accentColor: palette.primaryDeep }}/>
      <div>
        <div style={{ fontFamily: '"Baloo 2"', fontWeight: 600, fontSize: 14, color: palette.ink }}>
          {label}{required ? ' *' : ''}
        </div>
        {hint && (
          <div style={{ fontFamily: '"Baloo 2"', fontSize: 12, color: palette.inkSoft, marginTop: 2 }}>
            {hint}
          </div>
        )}
      </div>
    </label>
  );
}

// ─── Privacy / Data control (inside Parent Dashboard) ───────
function PrivacyPanelScreen({ palette, playfulness, user, onBack }) {
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState(null);

  const exportData = async () => {
    setBusy(true); setMsg(null);
    try {
      const data = await exportMyData(user?.uid);
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `pandicka-data-${new Date().toISOString().slice(0,10)}.json`;
      a.click();
      URL.revokeObjectURL(url);
      setMsg('Data stažena. Uložila se ti do počítače.');
    } finally { setBusy(false); }
  };

  const eraseAll = async () => {
    if (!confirm('Opravdu chceš smazat všechny své údaje? Tahle akce se nedá vrátit.')) return;
    setBusy(true); setMsg(null);
    try {
      await deleteAllMyData(user?.uid);
      setMsg('Smazáno. Za chvilku se stránka načte znovu.');
      setTimeout(() => location.reload(), 1500);
    } finally { setBusy(false); }
  };

  return (
    <div style={{ padding: '22px 20px 40px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <motion.button whileTap={{ scale: 0.9 }} onClick={onBack} aria-label="Zpět" style={{
          width: 44, height: 44, borderRadius: 14, border: 'none',
          background: palette.card, boxShadow: playfulShadow(1), cursor: 'pointer',
        }}>←</motion.button>
        <div>
          <div style={{ fontFamily: '"Baloo 2"', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: palette.inkSoft }}>Soukromí</div>
          <div style={{ fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 20, color: palette.ink }}>Tvoje data, tvoje pravidla</div>
        </div>
      </div>

      {msg && (
        <div role="status" style={{
          padding: 12, borderRadius: 14, background: palette.success + '25',
          fontFamily: '"Baloo 2"', fontSize: 13, color: palette.ink, marginBottom: 12,
        }}>{msg}</div>
      )}

      <SoftCard palette={palette} playfulness={playfulness} style={{ padding: 16, marginBottom: 12 }}>
        <div style={{ fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 16, color: palette.ink, marginBottom: 4 }}>
          📥 Stáhnout moje data
        </div>
        <div style={{ fontFamily: '"Baloo 2"', fontSize: 13, color: palette.inkSoft, marginBottom: 10 }}>
          Všechny tvé profily, pokrok a nastavení v JSON souboru.
        </div>
        <BigButton palette={palette} variant="secondary" size="sm" onClick={exportData} disabled={busy}>
          Stáhnout
        </BigButton>
      </SoftCard>

      <SoftCard palette={palette} playfulness={playfulness} style={{ padding: 16, marginBottom: 12 }}>
        <div style={{ fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 16, color: palette.ink, marginBottom: 4 }}>
          🗑️ Smazat všechna data
        </div>
        <div style={{ fontFamily: '"Baloo 2"', fontSize: 13, color: palette.inkSoft, marginBottom: 10 }}>
          Právo na výmaz (GDPR čl. 17). Nevratné.
        </div>
        <button onClick={eraseAll} disabled={busy} style={{
          padding: '10px 18px', borderRadius: 999, border: 'none', cursor: 'pointer',
          background: palette.danger, color: '#fff', fontFamily: '"Baloo 2"', fontWeight: 600, fontSize: 14,
          boxShadow: '0 3px 0 rgba(0,0,0,0.15)',
        }}>Smazat vše</button>
      </SoftCard>

      <SoftCard palette={palette} playfulness={playfulness} style={{ padding: 16 }}>
        <div style={{ fontFamily: '"Baloo 2"', fontWeight: 700, fontSize: 16, color: palette.ink, marginBottom: 4 }}>
          📄 Dokumenty
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 8 }}>
          <a href="privacy.html" target="_blank" style={linkStyle(palette)}>Zásady ochrany soukromí</a>
          <a href="terms.html" target="_blank" style={linkStyle(palette)}>Podmínky použití</a>
        </div>
      </SoftCard>
    </div>
  );
}

function linkStyle(palette) {
  return {
    padding: '8px 14px', borderRadius: 999,
    background: palette.ink + '10', color: palette.ink,
    fontFamily: '"Baloo 2"', fontWeight: 600, fontSize: 13,
    textDecoration: 'none',
  };
}

Object.assign(window, { AuthScreen, ConsentScreen, PrivacyPanelScreen });