/* global React, useSession, asViewer, CourseStore, nextItem, itemHref, ContentBlocks, BlockIcon, Icons, Button, IconButton, Card, Heading, Text, Avatar, Badge, Progress, Divider, Accordion, Tabs, AppShell, navigate, DATA */

const CourseDetailPage = ({ courseId }) => {
  const signedIn = useSession();
  const course = asViewer(DATA.COURSES.find(c => c.id === courseId) || DATA.COURSES[0], signedIn);
  const [tab, setTab] = React.useState("contenido");
  const [saving, setSaving] = React.useState(false);
  const totalLessons = course.syllabus?.reduce((acc, m) => acc + (m.lessons?.length || 0), 0) || course.lessons;
  const structured = !!course.units;
  const pageCount = structured ? course.units.reduce((a, u) => a + u.pages.length, 0) : 0;
  const startHref = structured ? itemHref(course, nextItem(course)) : `#/curso/${course.id}/leccion`;
  const enroll = async () => {
    if (!signedIn) return navigate(structured ? `#/registro/${course.id}` : "#/registro");
    if (structured && await CourseStore.enroll(course.id)) navigate(itemHref(course, nextItem(course)));
  };
  const saveCourse = async () => {
    if (!signedIn) {
      window.CampusAuth.rememberCourseSave(course.id);
      return navigate("#/login");
    }
    setSaving(true);
    try { await CourseStore.setSaved(course.id, !course.saved); }
    finally { setSaving(false); }
  };

  return (
    <AppShell
      active="#/cursos"
      breadcrumbs={[
        ...(signedIn ? [{ label: "Mi espacio", href: "#/mi-espacio" }] : []),
        ...(structured && course.enrolled ? [{ label: "Mis cursos", href: "#/mi-espacio/cursos" }] : [{ label: "Catálogo", href: "#/cursos" }]),
        { label: course.title },
      ]}
    >
      <div data-screen-label="04 Detalle curso">
        {/* Outside the lessons, an enrolled student goes back to their personal space */}
        {structured && course.enrolled && (
          <a href="#/mi-espacio" className="ps-back"><Icons.ChevronLeft size={16} /> Volver a mi espacio</a>
        )}
        {/* Top hero */}
        <div className="grid mb-8" style={{ gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)", gap: 32 }}>
          <div>
            {course.badge && <img className="course-badge course-badge--hero" src={course.badge} alt={`Insignia del curso ${course.title}`} width="120" height="120" />}
            <div className="flex items-center gap-2 mb-3">
              <Badge variant="primary">{course.track}</Badge>
              <Badge variant="outline">{course.level}</Badge>
              {course.new && <Badge variant="emphasis">Nuevo</Badge>}
              {course.cert && <Badge variant="outline" leading={<Icons.Award size={11}/>}>Certificado</Badge>}
            </div>
            <Heading size="h1" serif className="mb-3">{course.title}</Heading>
            <Text size="lg" muted>{course.subtitle}</Text>

            <div className="flex items-center gap-5 wrap mt-4">
              {course.rating && (
                <div className="flex items-center gap-2">
                  <Icons.Star size={16} style={{ color: "var(--emphasis)" }} />
                  <Text size="sm" style={{ fontWeight: 600 }}>{course.rating}</Text>
                  <Text size="sm" muted>({course.students.toLocaleString("es")} estudiantes)</Text>
                </div>
              )}
              <div className="flex items-center gap-2">
                <Icons.Clock size={16} style={{ color: "var(--text-muted)" }}/>
                <Text size="sm">{course.duration} · {structured ? `${course.units.length} unidades · ${pageCount} páginas` : `${totalLessons} lecciones`}</Text>
              </div>
              <div className="flex items-center gap-2">
                <Icons.Globe size={16} style={{ color: "var(--text-muted)" }}/>
                <Text size="sm">{course.language}</Text>
              </div>
              <div className="flex items-center gap-2">
                <Icons.Calendar size={16} style={{ color: "var(--text-muted)" }}/>
                <Text size="sm" muted>{course.version ? `Versión ${course.version}` : "Actualizado may. 2026"}</Text>
              </div>
            </div>

            <div className="flex items-center gap-3 mt-5">
              <Avatar size="md" name={course.instructor.name} color={course.instructor.color} />
              <div>
                <Text size="sm" style={{ fontWeight: 600 }}>{course.instructor.name}</Text>
                <Text size="xs" muted>{course.instructor.role}</Text>
              </div>
            </div>
          </div>

          {/* Sticky CTA card */}
          <Card flush style={{ overflow: "hidden", position: "sticky", top: 80, alignSelf: "start" }}>
            <div className="photo" style={{ backgroundImage: `url(${course.photo})`, aspectRatio: "16/10" }}>
              {!course.comingSoon && <button
                onClick={() => course.enrolled ? navigate(startHref) : enroll()}
                aria-label={structured ? "Empezar el curso" : "Ver tráiler"}
                style={{
                  position: "absolute", inset: 0, margin: "auto",
                  width: 64, height: 64, borderRadius: "50%",
                  border: "none", background: "var(--bh-navy)", cursor: "pointer",
                  display: "grid", placeItems: "center", color: "#fff",
                }}>
                <Icons.Play size={24} />
              </button>}
              <span style={{ position: "absolute", bottom: 12, left: 14, color: "#fff", fontSize: 12, fontWeight: 600, textShadow: "0 1px 3px rgba(0,0,0,0.5)", zIndex: 1 }}>
                {structured ? (course.enrolled ? "Continuar donde lo dejaste" : course.program) : "Próximamente"}
              </span>
            </div>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
              {course.comingSoon ? (
                <>
                  <div>
                    <Text size="xs" muted style={{ fontWeight: 600 }}>Próximamente</Text>
                    <Text size="sm" className="mt-2">
                      Estamos preparando este curso. Todavía no admite inscripciones.
                    </Text>
                  </div>
                  <Button size="lg" block disabled>Inscripción no disponible</Button>
                  <Button variant="outline" block icon={<Icons.Compass size={16}/>} onClick={() => navigate("#/cursos")}>
                    Ver cursos disponibles
                  </Button>
                </>
              ) : course.enrolled ? (
                <>
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <Text size="sm" style={{ fontWeight: 600 }}>Tu progreso</Text>
                      <Text size="sm" style={{ fontWeight: 700, color: "var(--primary-600)" }}>{course.progress}%</Text>
                    </div>
                    <Progress value={course.progress} size="lg" />
                  </div>
                  <Button size="lg" block icon={<Icons.PlayCircle size={18}/>}
                          onClick={() => navigate(startHref)}>
                    {course.progress > 0 ? "Continuar curso" : "Empezar curso"}
                  </Button>
                  <Button variant="outline" block icon={<Icons.Layers size={16}/>}
                          onClick={() => navigate(`#/curso/${course.id}/indice`)}>
                    Ver índice completo
                  </Button>
                </>
              ) : (
                <>
                  <div>
                    <Text size="xs" muted style={{ fontWeight: 600 }}>
                      Acceso completo
                    </Text>
                    <div className="flex items-baseline gap-2 mt-1">
                      <span style={{ fontSize: 32, fontWeight: 500, fontFamily: "var(--font-display)", color: "var(--text-strong)", letterSpacing: "-0.02em" }}>Gratis</span>
                      <Text size="sm" muted>{structured ? "· inscripción abierta" : "· con cuenta institucional"}</Text>
                    </div>
                  </div>
                  <Button size="lg" block icon={<Icons.Plus size={16} stroke={3}/>}
                          onClick={enroll}>
                    {signedIn ? "Inscribirme al curso" : "Crear cuenta e inscribirme"}
                  </Button>
                  <Button variant="outline" block icon={<Icons.Bookmark size={16}/>} onClick={saveCourse} disabled={saving} aria-pressed={!!course.saved}>
                    {saving ? "Guardando…" : course.saved ? "Quitar de guardados" : "Guardar para después"}
                  </Button>
                </>
              )}

              <Divider />

              <div className="flex-col gap-2">
                {(structured ? [
                  { icon: <Icons.Doc size={15}/>,   t: `${pageCount} páginas de estudio interactivas`},
                  { icon: <Icons.Edit size={15}/>,  t: "Casos prácticos y componentes interactivos"},
                  { icon: <Icons.Quiz size={15}/>,  t: `${course.units.length} tests de unidad y examen final`},
                  { icon: <Icons.Award size={15}/>, t: "Certificado al aprobar el examen final"},
                  { icon: <Icons.Clock size={15}/>, t: `${course.modality} · ${course.duration} a tu ritmo`},
                ] : [
                  { icon: <Icons.Video size={15}/>, t: `${totalLessons} videos · ${course.duration} de contenido`},
                  { icon: <Icons.Doc size={15}/>,   t: "Lecturas y casos prácticos descargables"},
                  { icon: <Icons.Quiz size={15}/>,  t: "Quizzes auto-evaluables tras cada módulo"},
                  { icon: <Icons.Award size={15}/>, t: "Certificado oficial al completar"},
                  { icon: <Icons.MessageCircle size={15}/>, t: "Sesiones Q&A en vivo con docentes"},
                ]).map((f, i) => (
                  <div key={i} className="flex items-center gap-2">
                    <span style={{ color: "var(--primary-500)" }}>{f.icon}</span>
                    <Text size="sm">{f.t}</Text>
                  </div>
                ))}
              </div>

              <Divider />
              <div className="flex items-center justify-center gap-3">
                <IconButton title="Compartir"><Icons.ArrowUpRight size={16}/></IconButton>
                <IconButton title="Reportar"><Icons.Flag size={16}/></IconButton>
                <IconButton title="Más"><Icons.More size={16}/></IconButton>
              </div>
            </div>
          </Card>
        </div>

        {/* Tabs */}
        <Tabs
          value={tab}
          onChange={setTab}
          tabs={[
            { value: "contenido",   label: "Contenido",   icon: <Icons.Layers size={14}/> },
            { value: "sobre",       label: "Sobre el curso", icon: <Icons.Doc size={14}/> },
            structured
              ? { value: "instructor", label: "Metodología", icon: <Icons.Users size={14}/> }
              : { value: "instructor", label: "Equipo docente", icon: <Icons.Users size={14}/> },
            { value: "faq",         label: "Preguntas",     icon: <Icons.Quiz size={14}/> },
          ].filter(Boolean)}
        />

        <div style={{ paddingTop: 24, maxWidth: 880 }}>
          {tab === "contenido" && <ContentTab course={course} />}
          {tab === "sobre" && <AboutTab course={course} />}
          {tab === "instructor" && (structured ? <MethodTab course={course} /> : <InstructorTab course={course} />)}
          {tab === "faq" && <FAQTab course={course} />}
        </div>
      </div>
    </AppShell>
  );
};

const ContentTab = ({ course }) => {
  const syllabus = course.syllabus || synthSyllabus(course);
  const totalLessons = syllabus.reduce((a, m) => a + m.lessons.length, 0);
  const completed = syllabus.flatMap(m => m.lessons).filter(l => l.done).length;

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div>
          <Heading size="h3" className="mb-1">Contenido del curso</Heading>
          <Text size="sm" muted>{syllabus.length} módulos · {totalLessons} lecciones · {course.duration} en total</Text>
        </div>
        <div className="flex gap-2">
          <Button variant="link" size="sm" icon={<Icons.Layers size={14}/>}
                  onClick={() => navigate(`#/curso/${course.id}/indice`)}>
            Ver índice expandido
          </Button>
        </div>
      </div>

      {course.enrolled && (
        <Card className="mb-4" style={{ background: "var(--surface)", border: "none" }}>
          <div className="flex items-center gap-4">
            <div style={{ flex: 1 }}>
              <Text size="sm" style={{ fontWeight: 600, marginBottom: 6 }}>
                Has completado {completed} de {totalLessons} lecciones
              </Text>
              <Progress value={(completed/totalLessons)*100} />
            </div>
            <Button size="sm" icon={<Icons.PlayCircle size={14}/>}
                    onClick={() => navigate(`#/curso/${course.id}/leccion`)}>
              {completed > 0 ? "Continuar" : "Empezar"}
            </Button>
          </div>
        </Card>
      )}

      <Accordion
        defaultOpen={course.units && !course.enrolled ? [1] : syllabus.map((m, i) => m.current ? i : null).filter(x => x !== null).slice(0, 1)}
        items={syllabus.map((m, i) => ({
          icon: <ModuleIcon module={m} num={i+1} />,
          title: <span>{m.title} {m.current && <Badge variant="primary" style={{ marginLeft: 8 }}>En curso</Badge>}</span>,
          meta: <Text size="xs" muted>{m.lessons.length} lecciones · {moduleDuration(m)}</Text>,
          content: <LessonList lessons={m.lessons} courseId={course.id} canPlay={course.enrolled} />,
        }))}
      />
    </div>
  );
};

const ModuleIcon = ({ module, num }) => {
  const state = module.done ? "done" : module.current ? "current" : "todo";
  return (
    <div style={{
      width: 32, height: 32, borderRadius: "50%",
      background: state === "done" ? "var(--bh-ocean)" : state === "current" ? "var(--primary-500)" : "var(--surface-2)",
      color: state === "todo" ? "var(--text-muted)" : "#fff",
      display: "grid", placeItems: "center",
      fontSize: 13, fontWeight: 600, flexShrink: 0,
    }}>
      {state === "done" ? <Icons.Check size={16} stroke={3}/> : num}
    </div>
  );
};

const LessonList = ({ lessons, courseId, canPlay }) => (
  <div className="flex-col">
    {lessons.map((l, i) => {
      const iconMap = { video: Icons.Video, reading: Icons.Doc, quiz: Icons.Quiz, doc: Icons.Doc };
      const Ico = iconMap[l.type] || Icons.Video;
      return (
        <div
          key={i}
          className="lesson-row"
          data-state={l.done ? "done" : l.current ? "current" : "todo"}
          data-locked={canPlay && l.locked ? "true" : undefined}
          title={canPlay && l.locked ? "Se desbloquea al completar lo anterior" : undefined}
          onClick={() => canPlay && !l.locked && navigate(l.href || `#/curso/${courseId}/leccion`)}
        >
          <div style={{
            width: 22, height: 22, borderRadius: "50%", flexShrink: 0,
            background: l.done ? "var(--bh-ocean)" : l.current ? "var(--primary-500)" : "transparent",
            border: l.done || l.current ? "none" : "1.5px solid var(--border-strong)",
            color: "#fff", display: "grid", placeItems: "center",
          }}>
            {l.done && <Icons.Check size={12} stroke={3}/>}
            {l.current && <Icons.Play size={9} />}
          </div>
          <Ico size={16} style={{ color: "var(--text-muted)", flexShrink: 0 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <Text size="sm" className="lesson-row-title" style={{
              fontWeight: l.current ? 600 : 500,
              color: l.current ? "var(--primary-700)" : "var(--text-strong)",
            }}>{l.title}</Text>
          </div>
          <Text size="xs" muted>{l.dur}</Text>
          {(!canPlay || l.locked) && <Icons.Lock size={14} style={{ color: "var(--text-subtle)" }} aria-label="Bloqueada" />}
        </div>
      );
    })}
  </div>
);

const AboutTab = ({ course }) => (
  <div className="flex-col gap-8">
    <section>
      <Heading size="h3" className="mb-3">Sobre este curso</Heading>
      <Text size="lg" muted style={{ lineHeight: 1.7 }}>
        {course.description ||
          "Un recorrido riguroso por los marcos normativos, prácticos y operativos relevantes para esta disciplina. Combina lecturas, video-clases con especialistas, casos de estudio y evaluaciones progresivas."}
      </Text>
    </section>

    <section>
      <Heading size="h4" className="mb-3">Lo que aprenderás</Heading>
      <div className="grid grid-2 gap-3">
        {(course.outcomes || [
          "Identificar y aplicar los marcos normativos internacionales relevantes a casos concretos.",
          "Distinguir los mecanismos universales, regionales y nacionales de protección.",
          "Analizar críticamente jurisprudencia y observaciones generales de los órganos de tratados.",
          "Diseñar estrategias de incidencia con sociedad civil y organismos internacionales.",
          "Comunicar hallazgos de manera técnica, accesible y con perspectiva de derechos.",
          "Acompañar a víctimas y comunidades con un enfoque ético y centrado en su dignidad.",
        ]).map((p, i) => (
          <div key={i} className="flex items-start gap-2">
            <Icons.CheckCircle size={18} style={{ color: "var(--primary-500)", flexShrink: 0, marginTop: 1 }}/>
            <Text size="sm">{p}</Text>
          </div>
        ))}
      </div>
    </section>

    <section>
      <Heading size="h4" className="mb-3">Requisitos previos</Heading>
      <ul style={{ paddingLeft: 18, margin: 0, color: "var(--text)" }}>
        {(course.requirements || [
          "No se requieren conocimientos previos en derecho.",
          "Acceso a lecturas en español (algunas opcionales en inglés).",
          "Disposición de 3 a 5 horas semanales durante 4 semanas.",
        ]).map((r, i) => <li key={i}>{r}</li>)}
      </ul>
    </section>

    <section>
      <Heading size="h4" className="mb-3">¿Para quién es este curso?</Heading>
      <div className="grid grid-3 gap-3">
        {(course.audience ? course.audience.map(a => ({ i: <BlockIcon name={a.icon} size={18}/>, t: a.title, d: a.text })) : [
          { i: <Icons.Shield size={18}/>, t: "Defensores y activistas", d: "Personas en organizaciones de DDHH y sociedad civil." },
          { i: <Icons.Users size={18}/>,  t: "Funcionarios públicos", d: "De instituciones nacionales y locales." },
          { i: <Icons.Book size={18}/>,   t: "Estudiantes y docentes", d: "De ciencias sociales, derecho y relaciones internacionales." },
        ]).map((x, i) => (
          <Card key={i} style={{ background: "var(--surface)", border: "none" }}>
            <div style={{ color: "var(--primary-600)", marginBottom: 10 }}>{x.i}</div>
            <Text style={{ fontWeight: 600, color: "var(--text-strong)", marginBottom: 4 }}>{x.t}</Text>
            <Text size="sm" muted>{x.d}</Text>
          </Card>
        ))}
      </div>
    </section>
  </div>
);

const InstructorTab = ({ course }) => (
  <div className="flex-col gap-6">
    <Card>
      <div className="flex items-start gap-4">
        <Avatar size="2xl" name={course.instructor.name} color={course.instructor.color} />
        <div style={{ flex: 1 }}>
          <Heading size="h3" className="mb-1">{course.instructor.name}</Heading>
          <Text muted className="mb-3">{course.instructor.role}</Text>
          <Text size="sm">
            Doctora en Derecho Internacional Público con 18 años de experiencia en mediación de conflictos
            en el Cuerno de África y América Central. Ex-asesora de la Oficina de Asuntos Políticos de la ONU
            y autora de tres libros sobre diplomacia preventiva.
          </Text>
        </div>
      </div>
    </Card>

    <div>
      <Heading size="h4" className="mb-3">Equipo docente colaborador</Heading>
      <div className="grid grid-3">
        {DATA.FACULTY.slice(1, 4).map(f => (
          <Card key={f.name} hover>
            <Avatar size="lg" name={f.name} color={f.color} className="mb-3" />
            <Text style={{ fontWeight: 600, color: "var(--text-strong)" }}>{f.name}</Text>
            <Text size="sm" muted className="mt-1">{f.role}</Text>
          </Card>
        ))}
      </div>
    </div>
  </div>
);

const MethodTab = ({ course }) => (
  <div className="flex-col gap-8">
    <section>
      <Heading size="h3" className="mb-3">Cómo está construido el curso</Heading>
      <Text size="lg" muted style={{ lineHeight: 1.7 }}>
        Cada unidad parte de una pregunta vertebradora y se estudia en tres páginas que combinan explicación,
        conceptos clave, comparaciones, casos prácticos y componentes interactivos. La unidad se cierra con un
        test de diez preguntas con respuestas justificadas.
      </Text>
    </section>
    <ContentBlocks blocks={[
      { t: "figures", items: [
        { value: String(course.units.length), label: "unidades con pregunta vertebradora" },
        { value: String(course.units.reduce((a, u) => a + u.pages.length, 0)), label: "páginas de estudio" },
        { value: String(course.units.reduce((a, u) => a + u.quiz.questions.length, 0) + course.final.questions.length), label: "preguntas de evaluación" },
        { value: "70 %", label: "de aciertos para aprobar cada evaluación" },
      ]},
      { t: "chips", title: "Tipos de fuente que verás citadas", items: [
        { code: "T", label: "Texto de tratado u otra norma" },
        { code: "I", label: "Interpretación de un órgano competente" },
        { code: "A", label: "Aportación académica" },
        { code: "E", label: "Ejemplo docente (hipotético)" },
      ]},
      { t: "callout", tone: "info", title: "Nota metodológica", text: "Los ejemplos son hipotéticos. Este material es **formación, no asesoramiento jurídico** para casos concretos." },
    ]} />
    <div>
      <Heading size="h4" className="mb-3">Responsable académico</Heading>
      <div className="flex items-center gap-3">
        <Avatar size="lg" name={course.instructor.name} color={course.instructor.color} />
        <div>
          <Text style={{ fontWeight: 600, color: "var(--text-strong)" }}>{course.instructor.name}</Text>
          <Text size="sm" muted>{course.instructor.role} · {course.program}</Text>
        </div>
      </div>
    </div>
  </div>
);

const FAQTab = ({ course }) => course.faq ? (
  <Accordion items={course.faq.map(f => ({ title: f.q, content: <Text size="sm">{f.a}</Text> }))} />
) : (
  <Accordion items={[
    { title: "¿El certificado tiene validez oficial?",
      content: <Text size="sm">Sí. BH Academy está acreditada por el Instituto de DDHH de La Haya y los certificados incluyen un código verificable y firma digital de la dirección académica.</Text> },
    { title: "¿Cuánto tiempo tengo para completar el curso?",
      content: <Text size="sm">Una vez inscrito, tienes acceso permanente al contenido. Puedes avanzar a tu ritmo, hacer pausas y retomar cuando quieras.</Text> },
    { title: "¿Hay sesiones en vivo o todo es a tu ritmo?",
      content: <Text size="sm">Combinamos lecciones grabadas (la mayor parte) con sesiones Q&A en vivo opcionales cada 2 semanas, registradas para quienes no puedan asistir.</Text> },
    { title: "¿Puedo descargar las lecturas y materiales?",
      content: <Text size="sm">Las lecturas, slides y casos prácticos están disponibles en PDF. Los videos solo son visualizables en la plataforma.</Text> },
    { title: "¿Ofrecen este curso para mi organización?",
      content: <Text size="sm">Sí, contamos con planes institucionales con paneles de gestión, reportes y rutas formativas personalizadas. Escríbenos a institucional@ong-bluehuman.org.</Text> },
  ]} />
);

function synthSyllabus(course) {
  return Array.from({ length: course.modules || 5 }, (_, i) => ({
    title: `Módulo ${i + 1}`,
    done: i === 0,
    current: i === 1,
    lessons: Array.from({ length: 4 }, (_, j) => ({
      type: j === 3 ? "quiz" : j === 2 ? "reading" : "video",
      title: `Lección ${i + 1}.${j + 1}`,
      dur: `${10 + j * 4} min`,
      done: i === 0,
      current: i === 1 && j === 0,
    })),
  }));
}

function moduleDuration(m) {
  const mins = m.lessons.reduce((a, l) => {
    const n = parseInt(l.dur);
    return isNaN(n) ? a : a + n;
  }, 0);
  if (mins < 60) return `${mins} min`;
  const h = Math.floor(mins / 60);
  const r = mins % 60;
  return r ? `${h} h ${r} min` : `${h} h`;
}

window.CourseDetailPage = CourseDetailPage;