"use client";
import type { RefObject } from "react";
import { X } from "lucide-react";
import { componentKeys, componentLabels, type CourseDocument } from "@/lib/aula/schema";
import { ActionButton, Field } from "./EditorUI";

type Props = {
  dialogRef: RefObject<HTMLDialogElement | null>;
  course: CourseDocument;
  onChange: (course: CourseDocument) => void;
};
export default function AulaComponentsSettings({ dialogRef, course, onChange }: Props) {
  return (
    <dialog
      ref={dialogRef}
      aria-labelledby="aula-components-title"
      className="m-auto max-h-[85dvh] w-[calc(100%-2rem)] max-w-2xl overflow-y-auto rounded-2xl border border-zinc-200 bg-white p-5 shadow-xl backdrop:bg-zinc-950/40 sm:p-6"
    >
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <h2 id="aula-components-title" className="text-lg font-semibold">
            Componentes del módulo
          </h2>
          <p className="mt-1 text-sm text-zinc-500">
            Activa los recursos del módulo. Las ponderaciones se aplican al curso completo. Los
            cambios se guardan automáticamente.
          </p>
        </div>
        <ActionButton
          aria-label="Cerrar configuración"
          onClick={() => dialogRef.current?.close()}
          className="shrink-0 px-2"
        >
          <X className="size-4" />
        </ActionButton>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        {componentKeys.map((key) => (
          <div key={key} className="space-y-3 rounded-xl border border-zinc-200 p-4">
            <label className="flex cursor-pointer items-center justify-between gap-3 text-sm font-medium">
              <span>{componentLabels[key]}</span>
              <input
                type="checkbox"
                className="size-4 accent-[#9d2449]"
                checked={course.componentes[key]}
                onChange={(e) =>
                  onChange({
                    ...course,
                    componentes: { ...course.componentes, [key]: e.target.checked },
                  })
                }
              />
            </label>
            {key in course.porcentajes && (
              <Field
                label="Ponderación (%)"
                type="number"
                min="0"
                max="100"
                disabled={!course.componentes[key]}
                value={course.porcentajes[key as keyof CourseDocument["porcentajes"]]}
                onChange={(e) =>
                  onChange({
                    ...course,
                    porcentajes: { ...course.porcentajes, [key]: Number(e.target.value) },
                  })
                }
              />
            )}
          </div>
        ))}
      </div>
      <div className="mt-5 flex justify-end">
        <ActionButton primary onClick={() => dialogRef.current?.close()}>
          Listo
        </ActionButton>
      </div>
    </dialog>
  );
}