"use client";

import { useEffect, useMemo, useState, useTransition } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Check, CircleDashed, ClipboardCheck, FileText, Lock, PlayCircle } from "lucide-react";
import { toast } from "sonner";
import { toggleLessonComplete } from "@/app/(public)/courses/[slug]/learn/actions";
import ProgressBar from "@/components/ProgressBar";
import { markdownToSafeHtml } from "@/lib/courses/lessonMarkdown";
import {
  getLessonContentTypeLabel,
  isFinalExam,
  type LessonActivityMeta,
  type LessonContentType,
} from "@/lib/courses/lessonContent";

type ClassroomLesson = {
  id: string;
  title: string;
  description: string;
  lectureContent: string;
  activity: LessonActivityMeta | null;
  contentType: LessonContentType;
  materialUrl: string | null;
  videoUrl: string | null;
  youtubeUrl: string | null;
  estimatedDuration: number;
  isFreePreview: boolean;
};

type ClassroomModule = {
  id: string;
  title: string;
  lessons: ClassroomLesson[];
};

type StudentClassroomClientProps = {
  courseSlug: string;
  courseTitle: string;
  modules: ClassroomModule[];
  initialSelectedLessonId: string;
  initialCompletedLessonIds: string[];
  isEnrolled: boolean;
};

type CompletionCertificate = {
  certificateId: string;
  certificateNumber: string | null;
};

type ActivityResult = {
  score: number;
  correct: number;
  total: number;
  passed: boolean;
  questionResults: Record<string, boolean>;
};

function getYouTubeEmbedUrl(url: string | null | undefined): string | null {
  if (!url?.trim()) return null;
  const trimmed = url.trim();
  const watchMatch = trimmed.match(/(?:youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+)/);
  if (watchMatch) return `https://www.youtube.com/embed/${watchMatch[1]}`;
  const embedMatch = trimmed.match(/(?:youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
  if (embedMatch) return trimmed;
  const shortMatch = trimmed.match(/(?:youtu\.be\/)([a-zA-Z0-9_-]+)/);
  if (shortMatch) return `https://www.youtube.com/embed/${shortMatch[1]}`;
  return null;
}

function getIsPdfUrl(url: string | null | undefined): boolean {
  if (!url) return false;
  return /\.pdf(?:$|\?)/i.test(url.trim());
}

function isAssessmentType(contentType: LessonContentType): boolean {
  return contentType === "ACTIVITY" || contentType === "QUIZ" || contentType === "FINAL_EXAM";
}

export default function StudentClassroomClient({
  courseSlug,
  courseTitle,
  modules,
  initialSelectedLessonId,
  initialCompletedLessonIds,
  isEnrolled,
}: StudentClassroomClientProps) {
  const router = useRouter();
  const [isSaving, startTransition] = useTransition();
  const [selectedLessonId, setSelectedLessonId] = useState(initialSelectedLessonId);
  const [completedLessonIds, setCompletedLessonIds] = useState(initialCompletedLessonIds);
  const [completionCertificate, setCompletionCertificate] = useState<CompletionCertificate | null>(null);
  const [activityAnswers, setActivityAnswers] = useState<Record<string, string>>({});
  const [activityResult, setActivityResult] = useState<ActivityResult | null>(null);

  useEffect(() => {
    setSelectedLessonId(initialSelectedLessonId);
  }, [initialSelectedLessonId]);

  useEffect(() => {
    setCompletedLessonIds(initialCompletedLessonIds);
  }, [initialCompletedLessonIds]);

  const flatLessons = useMemo(() => modules.flatMap((module) => module.lessons), [modules]);
  const completedSet = useMemo(() => new Set(completedLessonIds), [completedLessonIds]);

  const totalLessons = flatLessons.length;
  const completedCount = completedLessonIds.length;
  const progressPercent = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;

  const selectedLesson =
    flatLessons.find((lesson) => lesson.id === selectedLessonId) ?? flatLessons[0] ?? null;

  useEffect(() => {
    setActivityAnswers({});
    setActivityResult(null);
  }, [selectedLesson?.id]);

  const selectedLessonTypeLabel = selectedLesson ? getLessonContentTypeLabel(selectedLesson.contentType) : "";
  const selectedLessonActivity = selectedLesson?.activity?.questions?.length ? selectedLesson.activity : null;
  const selectedLectureHtml = markdownToSafeHtml(selectedLesson?.lectureContent || selectedLesson?.description || "");

  const isRestricted = (lessonId: string) => {
    if (!isEnrolled) return false;
    const lessonIndex = flatLessons.findIndex((lesson) => lesson.id === lessonId);
    if (lessonIndex <= 0) return false;
    if (completedSet.has(lessonId)) return false;
    const previousLesson = flatLessons[lessonIndex - 1];
    return !completedSet.has(previousLesson.id);
  };

  const isLockedForUser = (lesson: ClassroomLesson) => !isEnrolled && !lesson.isFreePreview;

  const navigateToLesson = (lessonId: string) => {
    if (isRestricted(lessonId)) return;
    setSelectedLessonId(lessonId);
    router.push(`/courses/${courseSlug}/learn?lesson=${lessonId}`, { scroll: false });
  };

  const handleToggleComplete = async () => {
    if (!selectedLesson || isSaving || !isEnrolled) return;

    const lessonId = selectedLesson.id;
    const wasCompleted = completedSet.has(lessonId);

    setCompletedLessonIds((prev) =>
      wasCompleted ? prev.filter((id) => id !== lessonId) : [...prev, lessonId],
    );

    startTransition(async () => {
      const result = await toggleLessonComplete({ courseSlug, lessonId });

      if (!result.success) {
        setCompletedLessonIds((prev) =>
          wasCompleted ? [...prev, lessonId] : prev.filter((id) => id !== lessonId),
        );
        return;
      }

      setCompletedLessonIds((prev) => {
        if (result.isCompleted) {
          return prev.includes(lessonId) ? prev : [...prev, lessonId];
        }
        return prev.filter((id) => id !== lessonId);
      });

      if (result.newlyIssuedCertificate && result.certificateId) {
        setCompletionCertificate({
          certificateId: result.certificateId,
          certificateNumber: result.certificateNumber ?? null,
        });
      }

      router.refresh();
    });
  };

  const submitActivity = async () => {
    if (!selectedLesson || !selectedLessonActivity) return;

    const total = selectedLessonActivity.questions.length;
    if (total === 0) return;

    const unanswered = selectedLessonActivity.questions.filter((question) => !activityAnswers[question.id]);
    if (unanswered.length > 0) {
      toast.error("Responde todas las preguntas antes de enviar.");
      return;
    }

    let correct = 0;
    const questionResults: Record<string, boolean> = {};

    for (const question of selectedLessonActivity.questions) {
      const answerId = activityAnswers[question.id];
      const selectedOption = question.options.find((option) => option.id === answerId);
      const isCorrect = Boolean(selectedOption?.isCorrect);
      if (isCorrect) correct += 1;
      questionResults[question.id] = isCorrect;
    }

    const score = Math.round((correct / total) * 100);
    const passingScore = selectedLesson.contentType === "ACTIVITY" ? 0 : selectedLessonActivity.passingScorePercent;
    const passed = selectedLesson.contentType === "ACTIVITY" ? true : score >= passingScore;

    setActivityResult({ score, correct, total, passed, questionResults });

    if (passed && isEnrolled && !completedSet.has(selectedLesson.id)) {
      await handleToggleComplete();
    }
  };

  if (!selectedLesson) {
    return (
      <div className="rounded-xl border border-slate-200 bg-white p-6">
        <h1 className="text-2xl font-semibold text-slate-900">No lessons available yet</h1>
        <p className="mt-2 text-sm text-slate-600">This course does not have lessons configured.</p>
      </div>
    );
  }

  return (
    <div className="relative grid gap-6 lg:grid-cols-[1.7fr_1fr]">
      {completionCertificate ? (
        <>
          <div className="pointer-events-none fixed inset-0 z-40 overflow-hidden">
            {Array.from({ length: 36 }).map((_, index) => (
              <span
                key={`confetti-${index}`}
                className="absolute top-[-24px] h-3 w-2 rounded-sm opacity-90"
                style={{
                  left: `${(index * 2.7) % 100}%`,
                  backgroundColor: ["#0ea5e9", "#22c55e", "#f59e0b", "#a855f7", "#ef4444"][index % 5],
                  animation: `acve-confetti-fall ${2.2 + (index % 5) * 0.35}s linear ${index * 0.04}s 1`,
                }}
              />
            ))}
          </div>
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/55 p-4">
            <div className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-2xl">
              <p className="text-xs font-semibold uppercase tracking-wide text-emerald-600">Course completed</p>
              <h2 className="mt-2 text-3xl font-semibold text-slate-900">Congratulations</h2>
              <p className="mt-2 text-sm text-slate-600">
                You completed all lessons in this course and your ACVE certificate was issued.
              </p>
              <p className="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-sm text-slate-700">
                Certificate: {completionCertificate.certificateNumber ?? "Issued"}
              </p>
              <div className="mt-5 flex flex-wrap gap-2">
                <a
                  className="acve-button-primary inline-flex px-4 py-2 text-sm font-semibold"
                  href={`/api/certificates/${completionCertificate.certificateId}/pdf`}
                >
                  Download PDF
                </a>
                <Link
                  className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
                  href="/profile"
                >
                  Open Profile
                </Link>
                <button
                  type="button"
                  onClick={() => setCompletionCertificate(null)}
                  className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
          <style jsx global>{`
            @keyframes acve-confetti-fall {
              0% {
                transform: translateY(-24px) rotate(0deg);
              }
              100% {
                transform: translateY(110vh) rotate(540deg);
              }
            }
          `}</style>
        </>
      ) : null}

      <section className="space-y-4 rounded-xl border border-slate-200 bg-white p-5">
        <Link href={`/courses/${courseSlug}`} className="text-sm font-medium text-slate-600 hover:text-slate-900">
          {"<-"} Back to Course
        </Link>

        <div
          className={`overflow-hidden rounded-xl border border-slate-200 ${
            selectedLesson.contentType === "VIDEO" ? "aspect-video bg-black" : "bg-slate-50 p-5"
          }`}
        >
          {isLockedForUser(selectedLesson) ? (
            <div className="flex h-full min-h-[220px] flex-col items-center justify-center gap-4 bg-slate-900 p-6 text-center">
              <p className="text-lg font-medium text-white">Contenido premium</p>
              <p className="max-w-sm text-sm text-slate-300">
                Inscríbete en el curso para desbloquear todas las secciones y registrar tu avance.
              </p>
              <Link
                href={`/courses/${courseSlug}`}
                className="rounded-md bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100"
              >
                Ver curso e inscripción
              </Link>
            </div>
          ) : selectedLesson.contentType === "VIDEO" ? (
            getYouTubeEmbedUrl(selectedLesson.youtubeUrl) ? (
              <iframe
                key={`${selectedLesson.id}-${selectedLesson.youtubeUrl}`}
                className="h-full w-full"
                src={getYouTubeEmbedUrl(selectedLesson.youtubeUrl)!}
                title={selectedLesson.title}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            ) : selectedLesson.videoUrl ? (
              <video
                key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
                className="h-full w-full"
                controls
                onEnded={() => {
                  if (isEnrolled) {
                    void handleToggleComplete();
                  }
                }}
                src={selectedLesson.videoUrl}
              />
            ) : (
              <div className="flex h-full items-center justify-center text-sm text-slate-300">
                Video not available for this lesson
              </div>
            )
          ) : selectedLesson.contentType === "LECTURE" ? (
            <article
              className="space-y-4 text-[16px] leading-8 text-slate-800 [&_a]:font-medium [&_a]:text-blue-700 [&_a]:underline [&_blockquote]:rounded-r-md [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:bg-slate-100 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_h1]:mt-6 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:mt-5 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-7 [&_p]:my-3 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-7"
              dangerouslySetInnerHTML={{ __html: selectedLectureHtml }}
            />
          ) : isAssessmentType(selectedLesson.contentType) && selectedLessonActivity ? (
            <div className="space-y-4">
              <p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
                {selectedLessonTypeLabel}
              </p>

              {selectedLessonActivity.instructions ? (
                <p className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm leading-relaxed text-slate-700">
                  {selectedLessonActivity.instructions}
                </p>
              ) : null}

              <div className="space-y-3">
                {selectedLessonActivity.questions.map((question, index) => (
                  <div key={question.id} className="rounded-xl border border-slate-200 bg-white p-4">
                    <p className="text-sm font-semibold text-slate-900">
                      {index + 1}. {question.prompt}
                    </p>
                    <div className="mt-3 grid gap-2">
                      {question.options.map((option) => {
                        const isSelected = activityAnswers[question.id] === option.id;
                        const showResult = Boolean(activityResult);
                        const isCorrect = option.isCorrect;
                        return (
                          <button
                            key={option.id}
                            type="button"
                            onClick={() =>
                              setActivityAnswers((prev) => ({
                                ...prev,
                                [question.id]: option.id,
                              }))
                            }
                            className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
                              isSelected ? "border-slate-500 bg-slate-900 text-white" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
                            } ${
                              showResult && isCorrect
                                ? "border-emerald-300 bg-emerald-50 text-emerald-900"
                                : ""
                            }`}
                          >
                            {option.text}
                          </button>
                        );
                      })}
                    </div>
                    {activityResult && question.explanation ? (
                      <p className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
                        {question.explanation}
                      </p>
                    ) : null}
                  </div>
                ))}
              </div>

              <button
                type="button"
                onClick={() => void submitActivity()}
                className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800"
              >
                Enviar respuestas
              </button>

              {activityResult ? (
                <div
                  className={`rounded-lg border px-4 py-3 text-sm ${
                    activityResult.passed
                      ? "border-emerald-200 bg-emerald-50 text-emerald-900"
                      : "border-amber-200 bg-amber-50 text-amber-900"
                  }`}
                >
                  Resultado: {activityResult.correct}/{activityResult.total} ({activityResult.score}%)
                  {selectedLesson.contentType !== "ACTIVITY" ? (
                    <span>
                      {" "}
                      | Mínimo: {selectedLessonActivity.passingScorePercent}%{" "}
                      {activityResult.passed ? "(Aprobado)" : "(No aprobado)"}
                    </span>
                  ) : (
                    <span> | Actividad completada</span>
                  )}
                </div>
              ) : null}

              {isFinalExam(selectedLesson.contentType) ? (
                <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                  Debes aprobar esta evaluación final para graduarte y emitir el certificado del curso.
                </div>
              ) : null}
            </div>
          ) : (
            <div className="space-y-4">
              <p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
                {selectedLessonTypeLabel}
              </p>
              {selectedLesson.description ? (
                <p className="text-sm leading-relaxed text-slate-700">{selectedLesson.description}</p>
              ) : (
                <p className="text-sm text-slate-600">Este contenido no tiene descripción adicional.</p>
              )}
            </div>
          )}
        </div>

        {selectedLesson.materialUrl ? (
          getIsPdfUrl(selectedLesson.materialUrl) ? (
            <iframe
              className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
              src={selectedLesson.materialUrl}
              title={`${selectedLesson.title} material`}
            />
          ) : (
            <a
              className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
              href={selectedLesson.materialUrl}
              rel="noreferrer"
              target="_blank"
            >
              Abrir material
            </a>
          )
        ) : null}

        <div className="space-y-2 rounded-xl border border-slate-200 bg-white p-4">
          <h1 className="text-2xl font-semibold text-slate-900">{selectedLesson.title}</h1>
          <p className="inline-flex w-fit rounded-full border border-slate-300 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold text-slate-700">
            {selectedLessonTypeLabel}
          </p>
          {selectedLesson.description ? (
            <p className="text-sm text-slate-600">{selectedLesson.description}</p>
          ) : null}
          <p className="text-xs text-slate-500">
            Duration: {Math.max(1, Math.ceil(selectedLesson.estimatedDuration / 60))} min
          </p>
        </div>

        {isEnrolled && !isAssessmentType(selectedLesson.contentType) && (
          <button
            type="button"
            onClick={() => void handleToggleComplete()}
            disabled={isSaving}
            className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
          >
            {completedSet.has(selectedLesson.id) ? "Marcar como pendiente" : "Marcar como completada"}
          </button>
        )}
      </section>

      <aside className="rounded-xl border border-slate-200 bg-white p-4">
        <h2 className="mb-3 text-lg font-semibold text-slate-900">Contenido del curso</h2>
        <p className="mb-3 text-xs text-slate-500">{courseTitle}</p>
        <div className="mb-4">
          <ProgressBar value={progressPercent} label={`${completedCount}/${totalLessons} lecciones (${progressPercent}%)`} />
        </div>

        <div className="max-h-[70vh] space-y-4 overflow-y-auto pr-1">
          {modules.map((module, moduleIndex) => (
            <div key={module.id} className="rounded-xl border border-slate-200 bg-slate-50/40">
              <div className="border-b border-slate-200 px-3 py-2">
                <p className="text-sm font-semibold text-slate-800">
                  Módulo {moduleIndex + 1}: {module.title}
                </p>
              </div>

              <div className="space-y-1 p-2">
                {module.lessons.map((lesson, lessonIndex) => {
                  const completed = completedSet.has(lesson.id);
                  const restricted = isRestricted(lesson.id);
                  const locked = isLockedForUser(lesson);
                  const active = lesson.id === selectedLesson.id;

                  return (
                    <button
                      key={lesson.id}
                      type="button"
                      disabled={restricted}
                      onClick={() => navigateToLesson(lesson.id)}
                      className={`flex w-full items-center gap-2 rounded-lg border px-2 py-2 text-left text-sm transition-colors ${
                        active
                          ? "border-slate-300 bg-white text-slate-900"
                          : "border-transparent bg-white/70 text-slate-700 hover:border-slate-200"
                      } ${restricted ? "cursor-not-allowed opacity-60 hover:border-transparent" : ""}`}
                    >
                      <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center">
                        {completed ? (
                          <Check className="h-4 w-4 text-emerald-600" />
                        ) : restricted || locked ? (
                          <Lock className="h-4 w-4 text-slate-400" />
                        ) : lesson.contentType === "LECTURE" ? (
                          <FileText className="h-4 w-4 text-slate-500" />
                        ) : lesson.contentType === "ACTIVITY" ? (
                          <CircleDashed className="h-4 w-4 text-slate-500" />
                        ) : lesson.contentType === "QUIZ" || lesson.contentType === "FINAL_EXAM" ? (
                          <ClipboardCheck className="h-4 w-4 text-slate-500" />
                        ) : (
                          <PlayCircle className="h-4 w-4 text-slate-500" />
                        )}
                      </span>
                      <span className="min-w-0 flex-1 line-clamp-1">
                        {lessonIndex + 1}. {lesson.title}
                        <span className="ml-1.5 inline rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-700">
                          {getLessonContentTypeLabel(lesson.contentType)}
                        </span>
                        {lesson.isFreePreview && (
                          <span className="ml-1.5 inline rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-800">
                            Vista previa
                          </span>
                        )}
                        {isFinalExam(lesson.contentType) && (
                          <span className="ml-1.5 inline rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-800">
                            Obligatoria
                          </span>
                        )}
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
}