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

type Props = {
  id: number;
  nombre: string;
  tienePrestamos?: boolean;
};

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

  const titleId = `del-mat-${id}`;

  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/materiales/${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 hover:!bg-[color:var(--color-danger)] hover:!text-[color:var(--color-ink)]"
        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,26rem)]"
      >
        <div className="p-5 sm:p-6 flex flex-col gap-4">
          <h2 id={titleId} className="text-lg font-semibold">
            Eliminar material
          </h2>
          <p className="text-sm">
            ¿Seguro que quieres eliminar <strong>{nombre}</strong>? Esta acción no se puede deshacer.
          </p>
          {tienePrestamos && (
            <p className="text-sm" style={{ color: 'var(--color-danger-text)' }}>
              Este material tiene préstamos asociados y no podrá eliminarse.
            </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}>
              Cancelar
            </button>
            <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>
    </>
  );
}