"use client";
import { formatDuration } from "@/lib/aula/duration";
import { IconActionButton } from "./EditorUI";
import { useState } from "react";
import {
  ArrowDown,
  ArrowUp,
  ChevronDown,
  ClipboardList,
  FileCheck2,
  GripVertical,
  Video,
} from "lucide-react";
import type { CourseSession } from "@/lib/aula/schema";
import { evaluationMomentLabels, timelineGroups } from "@/lib/aula/timeline";

type Props = {
  sessions: CourseSession[];
  selectedId?: string;
  onSelect: (session: CourseSession) => void;
  onMove: (id: string, position: number) => void;
};
export default function AulaTimeline({ sessions, selectedId, onSelect, onMove }: Props) {
  const [dragged, setDragged] = useState<string | null>(null);
  const groups = timelineGroups(sessions);
  return (
    <aside
      aria-label="Cronología del módulo"
      className="sticky top-20 z-20 order-first min-w-0 self-start xl:order-last"
    >
      <details
        open
        className="overflow-hidden rounded-2xl border border-separator bg-surface shadow-none"
      >
        <summary className="flex cursor-pointer list-none items-center justify-between gap-3 p-4 [&::-webkit-details-marker]:hidden">
          <div>
            <h2 className="text-base font-semibold text-foreground">Cronología del módulo</h2>
            <p className="mt-1 text-xs text-muted">
              {groups.length} bloques · Mueve cada clase con sus evaluaciones
            </p>
          </div>
          <ChevronDown className="size-4 shrink-0 text-muted" aria-hidden="true" />
        </summary>
        <div className="max-h-[32dvh] overflow-y-auto overscroll-contain border-t border-separator p-3 xl:max-h-[calc(100dvh-11rem)]">
          {!groups.length ? (
            <p className="p-3 text-sm text-muted">
              Agrega una videoclase, tarea o evaluación para comenzar.
            </p>
          ) : (
            <ol className="space-y-3">
              {groups.map(({ item, evaluations }, position) => {
                const Icon =
                  item.tipo === "video"
                    ? Video
                    : item.tipo === "tarea"
                      ? ClipboardList
                      : FileCheck2;
                const active = selectedId === item.id;
                return (
                  <li
                    key={item.id}
                    draggable
                    onDragStart={(e) => {
                      if ((e.target as HTMLElement).closest("[data-linked-evaluation]")) {
                        e.preventDefault();
                        return;
                      }
                      setDragged(item.id);
                      e.dataTransfer.effectAllowed = "move";
                      e.dataTransfer.setData("text/plain", item.id);
                    }}
                    onDragOver={(e) => {
                      e.preventDefault();
                      e.dataTransfer.dropEffect = "move";
                    }}
                    onDragEnd={() => setDragged(null)}
                    onDrop={(e) => {
                      e.preventDefault();
                      if (dragged) onMove(dragged, position);
                      setDragged(null);
                    }}
                    className={`rounded-xl border border-separator p-2 transition-opacity ${dragged === item.id ? "opacity-50" : ""}`}
                  >
                    <div className="flex items-center gap-2">
                      <GripVertical
                        className="size-3.5 shrink-0 cursor-grab text-muted/50"
                        aria-hidden="true"
                      />
                      <button
                        type="button"
                        onClick={() => onSelect(item)}
                        aria-current={active ? "step" : undefined}
                        className={`flex min-w-0 flex-1 items-start gap-2 rounded-lg p-2 text-left transition-colors hover:bg-default ${active ? "bg-default ring-1 ring-separator" : ""}`}
                      >
                        <Icon className="mt-0.5 size-4 shrink-0 text-muted" aria-hidden="true" />
                        <span className="min-w-0">
                          <span className="block break-words text-sm font-medium text-foreground">
                            {position + 1}. {item.titulo}
                          </span>
                          <span className="mt-1 block text-xs text-muted">
                            {item.tipo === "video"
                              ? formatDuration(Math.round((item.duracionMinutos ?? 0) * 60))
                              : item.tipo === "tarea"
                                ? "Tarea"
                                : "Evaluación"}
                          </span>
                        </span>
                      </button>
                      <div className="flex shrink-0 flex-col gap-1">
                        <IconActionButton
                          aria-label={`Subir ${item.titulo}`}
                          disabled={position === 0}
                          onClick={() => onMove(item.id, position - 1)}
                        >
                          <ArrowUp className="size-4 text-muted" />
                        </IconActionButton>
                        <IconActionButton
                          aria-label={`Bajar ${item.titulo}`}
                          disabled={position === groups.length - 1}
                          onClick={() => onMove(item.id, position + 1)}
                        >
                          <ArrowDown className="size-4 text-muted" />
                        </IconActionButton>
                      </div>
                    </div>
                    {evaluations.length > 0 && (
                      <ol
                        aria-label={`Evaluaciones de ${item.titulo}`}
                        className="mt-2 ml-6 space-y-1 border-l border-separator pl-3"
                      >
                        {evaluations.map((evaluation) => (
                          <li key={evaluation.id} data-linked-evaluation draggable={false}>
                            <button
                              type="button"
                              onClick={() => onSelect(evaluation)}
                              aria-current={selectedId === evaluation.id ? "step" : undefined}
                              className={`flex w-full min-w-0 items-start gap-2 rounded-lg p-2 text-left transition-colors hover:bg-default ${selectedId === evaluation.id ? "bg-default ring-1 ring-separator" : ""}`}
                            >
                              <FileCheck2
                                className="mt-0.5 size-3.5 shrink-0 text-muted"
                                aria-hidden="true"
                              />
                              <span className="min-w-0">
                                <span className="block text-[11px] font-medium text-muted">
                                  {
                                    evaluationMomentLabels[
                                      evaluation.momentoEvaluacion ?? "modular"
                                    ]
                                  }
                                </span>
                                <span className="mt-1 block break-words text-xs leading-relaxed text-foreground">
                                  {evaluation.titulo}
                                  <span className="mt-1 block text-[11px] text-muted">
                                    Asignada a: {item.titulo}
                                  </span>
                                </span>
                              </span>
                            </button>
                          </li>
                        ))}
                      </ol>
                    )}
                  </li>
                );
              })}
            </ol>
          )}
        </div>
      </details>
    </aside>
  );
}