/* global React, Footer */
const { useState: useStateC } = React;

// ============================================================================
// COURSE PAGE
// ============================================================================
function CoursePage({ course, lessons, go, openLesson }) {
  const completed = lessons.filter((l) => l.status === "completed").length;
  const pct = Math.round((completed / lessons.length) * 100);

  const statusLabel = {
    completed: "Concluída",
    in_progress: "Em curso",
    not_started: "Não iniciada",
  };

  return (
    <main className="course-page">
      <section className="course-hero">
        <div
          className="course-hero-bg"
          data-hebrew={course.hebrew}
          style={{ "--hero-hue": course.hue }}
        />
        <div className="course-hero-content">
          <div className="course-breadcrumb">
            <span className="crumb-link" onClick={() => go("dashboard")}>Início</span>
            <span className="crumb-sep">›</span>
            <span className="crumb-link">{course.category}</span>
            <span className="crumb-sep">›</span>
            <span>{course.title}</span>
          </div>
          <div className="course-hero-heb">{course.hebrew}</div>
          <h1>{course.title}</h1>
          <p className="course-hero-desc">{course.description}</p>
          <div className="course-stats">
            <div className="stat">
              <strong>{course.lessonsCount || lessons.length}</strong>
              Aulas
            </div>
            <div className="stat">
              <strong>{course.duration}</strong>
              Duração
            </div>
            <div className="stat">
              <strong>{course.level}</strong>
              Nível
            </div>
            <div className="stat">
              <strong>{course.teacher.split(" ").slice(-1)[0]}</strong>
              Mestre
            </div>
          </div>
        </div>
      </section>

      <section className="course-body">
        <div>
          <h2 className="lesson-list-title">
            Aulas do módulo
            <span className="count">{lessons.length} entradas</span>
          </h2>

          {lessons.map((l, i) => (
            <div className="lesson-row" key={l.id} onClick={() => openLesson(l)}>
              <div className="lesson-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="lesson-info">
                <h4>{l.title}</h4>
                <p>{l.desc}</p>
              </div>
              <div className="lesson-duration">{l.duration}</div>
              <span className={`status-pill status-${l.status}`}>
                {statusLabel[l.status]}
              </span>
            </div>
          ))}
        </div>

        <aside className="course-side">
          <h3>Sobre o módulo</h3>
          <div className="course-side-row">
            <span className="lbl">Mestre</span>
            <span className="val">{course.teacher}</span>
          </div>
          <div className="course-side-row">
            <span className="lbl">Categoria</span>
            <span className="val">{course.category}</span>
          </div>
          <div className="course-side-row">
            <span className="lbl">Idioma</span>
            <span className="val">Português · Hebraico</span>
          </div>
          <div className="course-side-row">
            <span className="lbl">Atualizado</span>
            <span className="val">Mai 2026</span>
          </div>

          <div className="course-side-progress">
            <div className="label-row">
              <span>Seu progresso</span>
              <span>{pct}%</span>
            </div>
            <div className="progress-bar">
              <div className="progress-bar-fill" style={{ width: pct + "%" }} />
            </div>
            <div className="label-row" style={{ marginTop: 8 }}>
              <span>{completed} concluídas</span>
              <span>{lessons.length - completed} restantes</span>
            </div>
            <button
              className="btn btn-gold"
              style={{ width: "100%", marginTop: 18 }}
              onClick={() => openLesson(lessons.find((l) => l.status === "in_progress") || lessons[0])}
            >
              ▷ Continuar de onde parou
            </button>
          </div>
        </aside>
      </section>

      <Footer />
    </main>
  );
}

// ============================================================================
// LESSON PAGE
// ============================================================================
function LessonPage({ course, lesson, lessons, go, openLesson, openCourse }) {
  const idx = lessons.findIndex((l) => l.id === lesson.id);
  const videoEmbed = window.driveEmbedUrl(lesson.driveVideoUrl);
  const pdfEmbed = window.driveEmbedUrl(lesson.drivePdfUrl);
  const [showPdf, setShowPdf] = useStateC(false);

  function setStatus(status) {
    window.BNStore.updateLesson(course.id, lesson.id, { status });
  }

  return (
    <main className="lesson-page">
      <div className="lesson-back" onClick={() => openCourse(course)}>
        ← &nbsp;Voltar para {course.title}
      </div>

      <div className="lesson-grid">
        <div>
          <div className="lesson-video">
            {videoEmbed ? (
              <iframe
                src={videoEmbed}
                title={lesson.title}
                allow="autoplay; encrypted-media"
                allowFullScreen
                style={{ width: "100%", height: "100%", border: 0 }}
              />
            ) : (
              <>
                <span className="lesson-video-label">Google Drive · Vídeo</span>
                <div className="lesson-video-placeholder">
                  <div style={{ textAlign: "center" }}>
                    <button className="lesson-video-play" title="Sem vídeo configurado">▶</button>
                    <div style={{ marginTop: 16, color: "var(--bone-mute)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                      Nenhum link do Google Drive cadastrado
                    </div>
                    <div style={{ marginTop: 4, color: "var(--bone-mute)", fontSize: 11 }}>
                      Adicione no painel admin → Aulas
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>

          <div className="lesson-heading">
            <div className="lesson-heading-num">{String(idx + 1).padStart(2, "0")}</div>
            <div className="lesson-heading-text">
              <h1>{lesson.title}</h1>
              <div className="meta">
                {course.teacher} · {lesson.duration} · Aula {idx + 1} de {lessons.length}
              </div>
            </div>
          </div>

          <div className="lesson-text-section">
            <h3>Descrição da aula</h3>
            <p>{lesson.desc || "Sem descrição cadastrada para esta aula."}</p>
            {lesson.id === 1 && course.id === "torah-bereshit" && (
              <>
                <blockquote>
                  <span className="heb">בְּרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָרֶץ</span>
                  "No princípio criou Elohim os céus e a terra." — Bereshit 1:1
                </blockquote>
                <p>
                  Reflita: o que significa começar com bet (ב), a segunda letra do
                  alfabeto? Os sábios apontam que o alfabeto inteiro estava disponível,
                  e ainda assim a Torah escolheu abrir com a letra da bênção (berachá).
                </p>
              </>
            )}
          </div>

          {/* PDF inline viewer */}
          {showPdf && pdfEmbed && (
            <div className="lesson-text-section">
              <h3>Material em PDF</h3>
              <iframe
                src={pdfEmbed}
                title="PDF da aula"
                style={{ width: "100%", height: 700, border: "1px solid var(--ink-3)", borderRadius: 10, background: "#fff" }}
              />
            </div>
          )}
        </div>

        <aside className="lesson-side">
          <div className="side-panel">
            <h4>
              Material em PDF
              <span className="tag">DRIVE</span>
            </h4>
            {pdfEmbed ? (
              <>
                <div className="pdf-preview" onClick={() => setShowPdf((v) => !v)}>
                  <div className="pdf-icon">PDF</div>
                  <div className="pdf-meta">
                    <div className="pdf-name">Apostila — Aula {idx + 1}</div>
                    <div className="pdf-info">Google Drive · clique para abrir</div>
                  </div>
                </div>
                <button className="btn btn-outline btn-sm" style={{ width: "100%", marginTop: 12 }} onClick={() => setShowPdf((v) => !v)}>
                  {showPdf ? "Esconder" : "Visualizar"}
                </button>
              </>
            ) : (
              <div style={{ color: "var(--bone-mute)", fontSize: 12, padding: "8px 0" }}>
                Nenhum PDF cadastrado para esta aula.
              </div>
            )}
          </div>

          <div className="side-panel">
            <h4>
              Status da aula
              <span className="tag">PROGRESSO</span>
            </h4>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["not_started", "in_progress", "completed"].map((s) => (
                <button
                  key={s}
                  className={`status-pill status-${s}`}
                  onClick={() => setStatus(s)}
                  style={{ cursor: "pointer", opacity: lesson.status === s ? 1 : 0.55 }}
                >
                  {s === "not_started" ? "Não iniciada" : s === "in_progress" ? "Em curso" : "Concluída"}
                </button>
              ))}
            </div>
          </div>

          <div className="side-panel">
            <h4>
              Próximas aulas
              <span className="tag">{lessons.length} total</span>
            </h4>
            <div className="next-lesson">
              {lessons.map((l, i) => (
                <div
                  key={l.id}
                  className={"nl-row " + (l.id === lesson.id ? "current" : "")}
                  onClick={() => openLesson(l)}
                >
                  <span style={{ display: "flex", gap: 10, alignItems: "center" }}>
                    <span className="nl-num">{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 200 }}>
                      {l.title}
                    </span>
                  </span>
                  <span className="nl-num">{l.duration}</span>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </div>

      <Footer />
    </main>
  );
}

Object.assign(window, { CoursePage, LessonPage });