labre-web/src/components/admin/maestros/EliminarMaestro.tsx

import { useEffect, useRef, useState } from 'react';

type Props = {
  id: number;
  nombre: string;
  alumnosCount: number;
};

export default function EliminarMaestro({ id, nombre, alumnosCount }: Props) {
  const dialogRef = useRef<HTMLDialogElement | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const titleId = `del-mae-${id}`;
  const bloqueado = alumnosCount > 0;

  const open = () => {
    setError(null);
    dialogRef.current?.showModal();
  };
  const close = () => {
    if (loading) return;
    dialogRef.current?.close();
  };

  useEffect(() => {
    const dlg = dialogRef.current;
    if (!dlg) return;
    const onClick = (e: MouseEvent) => {
      if (e.target === dlg) close();
    };
    dlg.addEventListener('click', onClick);
    return () => dlg.removeEventListener('click', onClick);
  });

  const submit = async () => {
    if (loading) return;
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/admin/maestros/${id}`, { method: 'DELETE' });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(json?.error ?? 'No se pudo eliminar');
      dialogRef.current?.close();
      location.reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Error inesperado');
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <button
        type="button"
        className="btn btn-ghost"
        style={{ minHeight: '36px', paddingBlock: '0.25rem' }}
        onClick={open}
      >
        Eliminar
      </button>

      <dialog
        ref={dialogRef}
        aria-labelledby={titleId}
        className="rounded-lg p-0 bg-white text-[color:var(--color-ink)] border-2 border-[color:var(--color-ink)] shadow-[var(--shadow-hard)] backdrop:bg-black/40 w-[min(92vw,28rem)]"
      >
        <div className="p-5 sm:p-6 flex flex-col gap-4">
          <h2 id={titleId} className="text-lg font-semibold">
            Eliminar maestro
          </h2>

          {bloqueado ? (
            <p className="text-sm">
              No se puede eliminar <strong>{nombre}</strong>: tiene{' '}
              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{alumnosCount}</span>{' '}
              alumno{alumnosCount === 1 ? '' : 's'} como tutor. Reasígnalos primero desde su perfil.
            </p>
          ) : (
            <p className="text-sm">
              ¿Seguro que quieres eliminar <strong>{nombre}</strong>?
            </p>
          )}

          {error && (
            <p role="alert" className="text-sm" style={{ color: 'var(--color-danger-text)' }}>
              {error}
            </p>
          )}

          <div className="flex gap-2 justify-end pt-2">
            <button type="button" className="btn btn-ghost" onClick={close} disabled={loading}>
              {bloqueado ? 'Cerrar' : 'Cancelar'}
            </button>
            {!bloqueado && (
              <button
                type="button"
                className="btn"
                style={{ background: 'var(--color-danger)', color: 'var(--color-ink)' }}
                onClick={submit}
                disabled={loading}
              >
                {loading ? 'Eliminando…' : 'Eliminar'}
              </button>
            )}
          </div>
        </div>
      </dialog>
    </>
  );
}