/* global React, Nav, Footer, CourseCard, Rail, GoogleIcon */
const { useState: useStateS, useEffect: useEffectS } = React;

// ============================================================================
// LANDING
// ============================================================================
function LandingPage({ go }) {
  return (
    <main className="landing">
      <div className="landing-bg" />
      <canvas
        className="landing-sparkles"
        data-sparkles
        data-count="90"
        data-color="#d4ad5a"
        data-min-size="0.4"
        data-max-size="1.8"
        data-speed="0.35"
      />
      <section className="landing-hero">
        <div>
          <div className="landing-eyebrow">Beit Midrash · Estudo Online</div>
          <div className="landing-hebrew">תּוֹרָה · חָכְמָה · עֵדוּת</div>
          <h1>
            Estude a Torah<br />
            e viva a nossa <em>Masorah em Mashiach.</em>
          </h1>
          <p className="landing-lede">
            Uma yeshivah para o século XXI. Aulas em vídeo, PDFs comentados,
            shiurim semanais e estudos, tudo sobre o Nosso Mashiach Yeshua.
          </p>
          <div className="landing-cta">
            <button className="btn btn-gold btn-lg" onClick={() => go("login")}>
              <GoogleIcon size={18} />
              Área de Estudante
            </button>
          </div>
        </div>

        <aside className="landing-art">
          <div className="landing-art-emblem" role="img" aria-label="Emblema do Beit Net'zer" />
          <div className="landing-art-gradient" />
          <div className="landing-art-frame" />
          <div className="landing-art-caption">
            <div className="heb">וִיהִי כְּעֵץ שָׁתוּל עַל פַּלְגֵי מָיִם</div>
            <p className="quote">"Será como árvore plantada junto a correntes de águas."</p>
            <div className="attr">Tehilim · 1:3</div>
          </div>
        </aside>
      </section>

      <section className="landing-pillars">
        <div className="pillar">
          <h3>Torah &amp; Tanach</h3>
          <p>
            Estudo verso a verso dos cinco livros, profetas e escritos, com
            comentários clássicos e aplicação prática.
          </p>
        </div>
        <div className="pillar">
          <h3>Brit Chadashah</h3>
          <p>
            Os escritos do Mashiach lidos a partir de suas raízes hebraicas e do
            judaísmo do Segundo Templo.
          </p>
        </div>
      </section>

      <Footer />
    </main>
  );
}

// ============================================================================
// LOGIN
// ============================================================================
function LoginPage({ onLogin, approvedEmails }) {
  const ADMIN_EMAIL = "marcelo.santos304@gmail.com";
  const [email, setEmail] = useStateS("");
  const [error, setError] = useStateS(null);
  const [loading, setLoading] = useStateS(false);

  function tryLogin(testEmail) {
    setError(null);
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      const e = (testEmail || email).trim().toLowerCase();
      if (!e) {
        setError("Informe um email para entrar.");
        return;
      }
      // Bloqueia admin nessa área — admin entra por "Área de Professores"
      if (e === ADMIN_EMAIL) {
        setError("Use a Área de Professores (botão no topo) para acessar como administrador.");
        return;
      }
      if (approvedEmails.includes(e)) {
        const name = e
          .split("@")[0]
          .split(".")
          .map((p) => p[0].toUpperCase() + p.slice(1))
          .join(" ");
        onLogin({ email: e, name, role: "student" });
      } else {
        setError("Seu email ainda não está autorizado. Entre em contato com a administração.");
      }
    }, 400);
  }

  return (
    <main className="login-screen">
      <div className="login-card">
        <div className="login-mark" aria-label="Beit Net'zer" />
        <h2>Área de Estudante</h2>
        <p className="login-sub">Acesso somente para alunos aprovados pela administração</p>

        {error && (
          <div className="login-error">
            <span style={{ fontSize: 16, lineHeight: 1 }}>⚠</span>
            <span>{error}</span>
          </div>
        )}

        <ProfilePicker
          filter={(p) => p.role === "student"}
          onPick={(p) => tryLogin(p.email)}
        />

        <input
          className="login-email-input"
          type="email"
          placeholder="seu.email@gmail.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && tryLogin()}
        />

        <button
          className="btn btn-google login-google-btn"
          onClick={() => tryLogin()}
          disabled={loading}
        >
          <GoogleIcon size={18} />
          {loading ? "Verificando…" : "Continuar com Google"}
        </button>

        <p className="login-hint">
          O acesso é restrito a emails aprovados pela administração.<br />
          Para solicitar acesso, escreva para <code>secretaria@beitnetzer.com</code>
        </p>
      </div>
    </main>
  );
}

// ============================================================================
// PROFESSOR / ADMIN LOGIN (acesso restrito com senha — admin + professores)
// ============================================================================
function ProfessorLoginPage({ onLogin, goBack }) {
  const ADMIN_EMAIL = "marcelo.santos304@gmail.com";
  const [email, setEmail] = useStateS("");
  const [pwd, setPwd] = useStateS("");
  const [error, setError] = useStateS(null);
  const [loading, setLoading] = useStateS(false);

  async function submit() {
    setError(null);
    const e = email.trim().toLowerCase();
    if (!e || !pwd) {
      setError("Preencha email e senha.");
      return;
    }
    setLoading(true);

    // Caso 1: Admin
    if (e === ADMIN_EMAIL) {
      const ok = await window.BNStore.verifyAdminPassword(pwd);
      setLoading(false);
      if (!ok) {
        setError("Senha de administrador incorreta.");
        setPwd("");
        return;
      }
      onLogin({ email: e, name: "Marcelo Santos", role: "admin" });
      return;
    }

    // Caso 2: Professor
    const teacher = await window.BNStore.verifyTeacherLogin(e, pwd);
    setLoading(false);
    if (!teacher) {
      setError("Email ou senha incorretos. Verifique com a administração.");
      setPwd("");
      return;
    }
    onLogin({
      email: teacher.email,
      name: teacher.name,
      role: "teacher",
      teacherId: teacher.id,
    });
  }

  return (
    <main className="login-screen">
      <div className="login-card">
        <div className="login-mark" aria-label="Beit Net'zer" />
        <h2 style={{ marginBottom: 4 }}>
          <span style={{ fontFamily: "var(--hebrew)", color: "var(--gold)", display: "block", fontSize: 26, marginBottom: 8, letterSpacing: "0.06em", direction: "rtl" }}>
            אֵזוֹר מוֹרִים
          </span>
          Área de Professores
        </h2>
        <p className="login-sub">Acesso restrito · administradores e mestres</p>

        {error && (
          <div className="login-error">
            <span style={{ fontSize: 16, lineHeight: 1 }}>⚠</span>
            <span>{error}</span>
          </div>
        )}

        <ProfilePicker
          filter={(p) => p.role === "admin" || p.role === "teacher"}
          onPick={(p) => {
            setEmail(p.email);
            setPwd("");
            setTimeout(() => {
              const el = document.querySelector('input[type="password"]');
              if (el) el.focus();
            }, 50);
          }}
        />

        <input
          className="login-email-input"
          type="email"
          placeholder="seu.email@gmail.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && submit()}
          autoFocus
        />
        <input
          className="login-email-input"
          type="password"
          placeholder="Senha"
          value={pwd}
          onChange={(e) => setPwd(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && submit()}
        />

        <button className="btn btn-gold" style={{ width: "100%" }} onClick={submit} disabled={loading}>
          {loading ? "Verificando…" : "Entrar"}
        </button>

        <button className="btn btn-ghost btn-sm" style={{ width: "100%", marginTop: 10 }} onClick={goBack}>
          Voltar
        </button>

        <p className="login-hint" style={{ marginTop: 22 }}>
          Esta área é restrita ao corpo docente.<br />
          Se você é <strong style={{ color: "var(--gold)" }}>aluno</strong>, use a Área de Estudante na landing.
        </p>
      </div>
    </main>
  );
}

// ============================================================================
// DASHBOARD
// ============================================================================
function DashboardPage({ user, go, openCourse, data }) {
  // Filtra cursos pelas permissões do aluno (admin/professor vê tudo)
  const canAccess = (course) => {
    if (user.role !== "student") return true;
    return window.BNStore.studentCanAccessCourse(user.email, course.id);
  };
  const visibleCourses = data.courses.filter(canAccess);

  const featured = visibleCourses.find((c) => c.id === "torah-bereshit") || visibleCourses[0];
  const byCategory = (cat) => visibleCourses.filter((c) => c.category === cat);
  const recent = [
    "pirkei-avot",
    "torah-bereshit",
    "hebraico-1",
    "brit-chadashah-1",
    "shiur-festas",
    "tehilim-pdf",
  ].map((id) => visibleCourses.find((c) => c.id === id)).filter(Boolean);

  const materials = window.BNStore.getMaterials().filter((m) =>
    user.role !== "student" ? true : window.BNStore.studentCanAccessMaterial(user.email, m)
  );

  if (!featured) {
    return (
      <main style={{ paddingBottom: 60 }}>
        <section style={{ padding: 80, textAlign: "center" }}>
          <div style={{ fontFamily: "var(--hebrew)", color: "var(--gold)", fontSize: 28, marginBottom: 16 }}>שָׁלוֹם</div>
          <h2 style={{ fontFamily: "var(--serif)", fontSize: 28, marginBottom: 12 }}>Sem cursos liberados ainda</h2>
          <p style={{ color: "var(--bone-mute)", maxWidth: 460, margin: "0 auto", lineHeight: 1.6 }}>
            Sua conta ainda não tem cursos liberados pela administração.<br />
            {materials.length > 0
              ? "Confira a biblioteca abaixo enquanto isso."
              : "Entre em contato para obter acesso."}
          </p>
        </section>

        {materials.length > 0 && <MaterialsRail materials={materials} />}

        <Footer />
      </main>
    );
  }

  return (
    <main>
      {/* Hero / featured */}
      <section className="dash-hero">
        <div className="dash-hero-bg" data-hebrew={featured.hebrew} style={{ "--hero-hue": featured.hue }} />
        <div className="dash-hero-content">
          <div className="dash-hero-tag">Destaque · Módulo Principal</div>
          <h1>{featured.title}</h1>
          <p className="dash-hero-desc">{featured.description}</p>
          <div className="dash-hero-meta">
            <span>{featured.teacher}</span>
            <span className="dot" />
            <span>{featured.lessonsCount} aulas</span>
            <span className="dot" />
            <span>{featured.duration}</span>
            <span className="dot" />
            <span>{featured.level}</span>
          </div>
          <div className="dash-hero-actions">
            <button className="btn btn-gold btn-lg" onClick={() => openCourse(featured)}>
              ▷ &nbsp;Continuar estudo
            </button>
            <button className="btn btn-ghost btn-lg">＋ Minha lista</button>
          </div>
        </div>
      </section>

      <Rail title="Aulas Recentes" hebrew="לאחרונה" courses={recent} onOpen={openCourse} />
      <Rail title="Módulos de Torah" hebrew="תּוֹרָה" courses={byCategory("Módulos de Torah")} onOpen={openCourse} />
      <Rail title="Brit Chadashah" hebrew="ברית חדשה" courses={byCategory("Brit Chadashah")} onOpen={openCourse} />
      <Rail title="Hebraico Bíblico" hebrew="עברית" courses={byCategory("Hebraico Bíblico")} onOpen={openCourse} />
      <Rail title="PDFs de Estudo" hebrew="מסמכים" courses={byCategory("PDFs de Estudo")} onOpen={openCourse} />
      <Rail title="Shiurim Especiais" hebrew="שיעורים" courses={byCategory("Shiurim Especiais")} onOpen={openCourse} />

      {materials.length > 0 && <MaterialsRail materials={materials} />}

      <Footer />
    </main>
  );
}

// ============================================================================
// Materials Rail (biblioteca de materiais avulsos do admin)
// ============================================================================
function MaterialsRail({ materials }) {
  const [active, setActive] = useStateS(null);
  const KIND_COLORS = {
    "PDF":       { hue: 38, label: "PDF" },
    "Documento": { hue: 28, label: "DOC" },
    "Áudio":     { hue: 220, label: "MP3" },
    "Vídeo":     { hue: 0,   label: "VID" },
    "Apostila":  { hue: 48, label: "APO" },
    "Outro":     { hue: 175, label: "REC" },
  };
  return (
    <section className="rail">
      <div className="rail-head">
        <h2 className="rail-title">Biblioteca</h2>
        <span className="rail-title-heb">סִפְרִיָּה</span>
        <span className="rail-link">{materials.length} materiais</span>
      </div>
      <div className="rail-track">
        {materials.map((m) => {
          const meta = KIND_COLORS[m.kind] || KIND_COLORS.Outro;
          return (
            <article
              key={m.id}
              className="card"
              style={{ "--card-hue": meta.hue }}
              onClick={() => setActive(m)}
            >
              <div className="card-thumb" data-heb={m.hebrew || meta.label}>
                <span className="card-thumb-badge">{m.kind}</span>
                <span className="card-thumb-pdf">{m.category}</span>
              </div>
              <div className="card-body">
                <div className="card-cat">Biblioteca · {m.category}</div>
                <h3 className="card-title">{m.title}</h3>
                <p className="card-desc">{m.description || "Material do Beit Net'zer disponível na biblioteca."}</p>
                <div className="card-footer">
                  <span style={{ color: "var(--gold)" }}>↗ Abrir</span>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      {/* Modal de visualização */}
      {active && (
        <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setActive(null)}>
          <div className="modal" style={{ maxWidth: 980, width: "100%" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 4 }}>
                  {active.kind} · {active.category}
                </div>
                <h3 style={{ margin: 0 }}>{active.title}</h3>
                {active.description && <p className="sub" style={{ marginTop: 6 }}>{active.description}</p>}
              </div>
              <button className="icon-btn" onClick={() => setActive(null)} title="Fechar">✕</button>
            </div>
            <div style={{ marginTop: 16 }}>
              {window.driveEmbedUrl(active.driveUrl) ? (
                <iframe
                  src={window.driveEmbedUrl(active.driveUrl)}
                  title={active.title}
                  style={{ width: "100%", height: 600, border: "1px solid var(--ink-3)", borderRadius: 10, background: "#fff" }}
                  allow="autoplay; encrypted-media"
                  allowFullScreen
                />
              ) : (
                <div style={{ padding: 40, textAlign: "center", color: "var(--bone-mute)" }}>
                  Link inválido.
                </div>
              )}
            </div>
            <div className="modal-actions">
              <button className="btn btn-gold" onClick={() => setActive(null)}>Fechar</button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}


// Profile picker reutilizável — exibe avatares dos últimos usuários (estilo Disney+)
function ProfilePicker({ filter, onPick }) {
  const all = window.BNStore.getRecentProfiles();
  const profiles = filter ? all.filter(filter) : all;
  if (profiles.length === 0) return null;
  return (
    <div className="profile-picker">
      <div className="profile-picker-title">Quem é você?</div>
      <div className="profile-grid">
        {profiles.map((p) => {
          const initials = p.name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
          const roleLabel = p.role === "admin" ? "Admin" : p.role === "teacher" ? "Mestre" : "Aluno";
          return (
            <button
              key={p.email}
              type="button"
              className={`profile-card ${p.role}`}
              onClick={() => onPick(p)}
            >
              <div className="profile-avatar">{initials}</div>
              <div className="profile-name" title={p.name}>{p.name.split(" ")[0]}</div>
              <div className="profile-role">{roleLabel}</div>
              <span
                className="profile-card-remove"
                title="Esquecer este perfil"
                onClick={(e) => {
                  e.stopPropagation();
                  if (!confirm(`Esquecer "${p.name}" deste dispositivo?`)) return;
                  window.BNStore.removeRecentProfile(p.email);
                  window.location.reload();
                }}
              >✕</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { LandingPage, LoginPage, DashboardPage, MaterialsRail, ProfessorLoginPage, ProfilePicker });