import { a7 as head, a4 as escape_html, a6 as attr, a8 as stringify, a3 as attr_class, aa as clsx, a5 as ensure_array_like, Z as derived } from '../../../../chunks/index.js-BVnekaYQ.js';
import '../../../../chunks/exports.js-8HOoaa4e.js';
import '../../../../chunks/utils2.js-BQzn9ikS.js';
import '../../../../chunks/utils.js-mIi_c4Oz.js';
import '../../../../chunks/root.js-l4cSj5gU.js';
import '../../../../chunks/state.svelte.js-DC2zSH9Y.js';
import { S as StatusBadge } from '../../../../chunks/StatusBadge.js-CQhkJYLd.js';
import { f as formatDate, a as formatDateTime, i as isOverdue } from '../../../../chunks/format.js-B0aMHEZW.js';
import { r as roleAtLeast } from '../../../../chunks/roles.js-aWc1U_OX.js';
import { h as html } from '../../../../chunks/html.js-FW6Ia4bL.js';
import '../../../../chunks/false.js-B2gHlHjM.js';

function _page($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let { data, form } = $$props;
    const d = derived(() => data.device);
    const canManage = derived(() => roleAtLeast(data.user?.role, "gestor"));
    const isAdmin = derived(() => roleAtLeast(data.user?.role, "admin"));
    const activeLoan = derived(() => data.history.find((h) => !h.returned_at));
    const defaultDue = derived(() => {
      const dt = new Date(Date.now() + data.defaultLoanDays * 864e5);
      return dt.toISOString().slice(0, 10);
    });
    head("7s4st0", $$renderer2, ($$renderer3) => {
      $$renderer3.title(($$renderer4) => {
        $$renderer4.push(`<title>${escape_html(d().code)} · Inventario EDUmind</title>`);
      });
    });
    $$renderer2.push(`<nav class="mb-4 text-sm text-slate-500"><a href="/devices" class="hover:underline">Equipos</a> · <span class="font-mono">${escape_html(d().code)}</span></nav> <div class="mb-6 flex flex-wrap items-start justify-between gap-3"><div><div class="flex items-center gap-3"><h1 class="font-mono text-2xl font-bold text-slate-900">${escape_html(d().code)}</h1> `);
    StatusBadge($$renderer2, { status: d().status });
    $$renderer2.push(`<!----></div> <p class="mt-1 text-lg text-slate-700">${escape_html(d().name || d().model || d().category_name || "Equipo")}</p></div> `);
    if (canManage()) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<div class="flex gap-2"><a class="btn-secondary"${attr("href", `/labels?code=${stringify(d().code)}`)}>Etiqueta</a> <a class="btn-secondary"${attr("href", `/devices/${stringify(d().id)}/edit`)}>Editar</a> `);
      if (isAdmin()) {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<button class="btn-danger">Eliminar</button>`);
      } else {
        $$renderer2.push("<!--[-1-->");
      }
      $$renderer2.push(`<!--]--></div>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--></div> `);
    if (form?.error) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<p class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm font-medium text-red-700" role="alert">${escape_html(form.error)}</p>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--> `);
    if (form?.success) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<p class="mb-4 rounded-lg bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700" role="status">${escape_html(form.success)}</p>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--> <div class="grid gap-6 lg:grid-cols-3"><div class="space-y-6 lg:col-span-2"><section class="card p-6"><h2 class="mb-4 font-semibold text-slate-900">Datos del equipo</h2> <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2"><div><dt class="text-xs font-medium uppercase text-slate-400">Categoría</dt> <dd class="text-slate-800">${escape_html(d().category_name || "—")}</dd></div> <div><dt class="text-xs font-medium uppercase text-slate-400">Ubicación</dt> <dd class="text-slate-800">${escape_html(d().location || "—")}</dd></div> <div><dt class="text-xs font-medium uppercase text-slate-400">Marca</dt> <dd class="text-slate-800">${escape_html(d().brand || "—")}</dd></div> <div><dt class="text-xs font-medium uppercase text-slate-400">Modelo</dt> <dd class="text-slate-800">${escape_html(d().model || "—")}</dd></div> <div><dt class="text-xs font-medium uppercase text-slate-400">Nº de serie</dt> <dd class="font-mono text-slate-800">${escape_html(d().serial || "—")}</dd></div> <div><dt class="text-xs font-medium uppercase text-slate-400">Alta</dt> <dd class="text-slate-800">${escape_html(formatDate(d().created_at))}</dd></div> `);
    if (d().notes) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<div class="sm:col-span-2"><dt class="text-xs font-medium uppercase text-slate-400">Notas</dt> <dd class="whitespace-pre-line text-slate-800">${escape_html(d().notes)}</dd></div>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--></dl></section> `);
    if (canManage()) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<section class="card p-6">`);
      if (d().status === "prestado") {
        $$renderer2.push("<!--[0-->");
        $$renderer2.push(`<h2 class="mb-1 font-semibold text-slate-900">Préstamo activo</h2> <p class="text-slate-700">En poder de <strong>${escape_html(d().holder_name || "—")}</strong> desde ${escape_html(formatDateTime(d().checkout_at))}. `);
        if (d().due_at) {
          $$renderer2.push("<!--[0-->");
          $$renderer2.push(`<span${attr_class(clsx(isOverdue(d().due_at, null) ? "font-semibold text-red-600" : "text-slate-500"))}>${escape_html(isOverdue(d().due_at, null) ? "Vencido el" : "Devolución prevista")}
								${escape_html(formatDate(d().due_at))}.</span>`);
        } else {
          $$renderer2.push("<!--[-1-->");
        }
        $$renderer2.push(`<!--]--></p> <div class="mt-4 flex flex-wrap items-center gap-2"><form method="POST" action="?/return"><button class="btn-primary" type="submit">Registrar devolución</button></form> `);
        if (activeLoan()) {
          $$renderer2.push("<!--[0-->");
          $$renderer2.push(`<span class="mx-1 text-slate-300">|</span> <span class="text-sm text-slate-500">Actas:</span> <a class="btn-secondary"${attr("href", `/loans/${stringify(activeLoan().id)}/document?type=entrega`)} target="_blank">Entrega</a> <a class="btn-secondary"${attr("href", `/loans/${stringify(activeLoan().id)}/document?type=recogida`)} target="_blank">Recogida</a> <a class="btn-secondary"${attr("href", `/loans/${stringify(activeLoan().id)}/document?type=ambos`)} target="_blank">Ambas</a>`);
        } else {
          $$renderer2.push("<!--[-1-->");
        }
        $$renderer2.push(`<!--]--></div>`);
      } else if (d().status === "disponible") {
        $$renderer2.push("<!--[1-->");
        $$renderer2.push(`<h2 class="mb-4 font-semibold text-slate-900">Prestar equipo</h2> <form method="POST" action="?/checkout" class="space-y-4"><div class="grid gap-4 sm:grid-cols-2"><div><label class="label" for="user_id">Usuario</label> <select class="input" id="user_id" name="user_id">`);
        $$renderer2.option({ value: "" }, ($$renderer3) => {
          $$renderer3.push(`— Elegir de la lista —`);
        });
        $$renderer2.push(`<!--[-->`);
        const each_array = ensure_array_like(data.borrowers);
        for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
          let u = each_array[$$index];
          $$renderer2.option({ value: u.id }, ($$renderer3) => {
            $$renderer3.push(`${escape_html(u.name)}`);
          });
        }
        $$renderer2.push(`<!--]--></select></div> <div><label class="label" for="borrower_name">…o nombre manual</label> <input class="input" id="borrower_name" name="borrower_name" placeholder="Nombre y apellidos"/></div></div> <div class="grid gap-4 sm:grid-cols-2"><div><label class="label" for="due_at">Devolución prevista</label> <input class="input" id="due_at" name="due_at" type="date"${attr("value", defaultDue())}/></div> <div><label class="label" for="notes">Notas (opcional)</label> <input class="input" id="notes" name="notes" placeholder="Accesorios, cargador…"/></div></div> <button class="btn-primary" type="submit">Registrar préstamo</button></form>`);
      } else {
        $$renderer2.push("<!--[-1-->");
        $$renderer2.push(`<h2 class="mb-1 font-semibold text-slate-900">Estado: ${escape_html(d().status)}</h2> <p class="text-slate-600">Este equipo no está disponible para préstamo. Cambia su estado desde <a${attr("href", `/devices/${stringify(d().id)}/edit`)} class="text-brand-700 hover:underline">editar</a>.</p>`);
      }
      $$renderer2.push(`<!--]--></section>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--></div> <aside class="space-y-6"><section class="card p-6 text-center"><h2 class="mb-3 font-semibold text-slate-900">Etiqueta QR</h2> <div class="mx-auto w-44">${html(data.qrSvg)}</div> <p class="mt-3 font-mono text-lg font-bold text-slate-900">${escape_html(d().code)}</p> <p class="text-sm text-slate-500">${escape_html(d().category_name || "")}</p> `);
    if (canManage()) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<a class="btn-secondary mt-4 w-full"${attr("href", `/labels?code=${stringify(d().code)}`)}>Generar etiqueta PDF</a>`);
    } else {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]--></section></aside></div> <section class="card mt-6 overflow-hidden"><header class="border-b border-slate-200 px-5 py-4"><h2 class="font-semibold text-slate-900">Historial de préstamos</h2></header> `);
    if (data.history.length === 0) {
      $$renderer2.push("<!--[0-->");
      $$renderer2.push(`<p class="px-5 py-10 text-center text-sm text-slate-500">Este equipo aún no tiene préstamos.</p>`);
    } else {
      $$renderer2.push("<!--[-1-->");
      $$renderer2.push(`<div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead class="border-b border-slate-200 bg-slate-50 text-xs uppercase text-slate-500"><tr><th class="px-4 py-3 font-semibold">Usuario</th><th class="px-4 py-3 font-semibold">Salida</th><th class="px-4 py-3 font-semibold">Prevista</th><th class="px-4 py-3 font-semibold">Devolución</th><th class="px-4 py-3 font-semibold">Registrado por</th><th class="px-4 py-3 font-semibold">Actas</th></tr></thead><tbody class="divide-y divide-slate-100"><!--[-->`);
      const each_array_1 = ensure_array_like(data.history);
      for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
        let h = each_array_1[$$index_1];
        $$renderer2.push(`<tr class="hover:bg-slate-50"><td class="px-4 py-3 font-medium text-slate-900">${escape_html(h.borrower_name || "—")}</td><td class="px-4 py-3 text-slate-600">${escape_html(formatDateTime(h.checkout_at))}</td><td class="px-4 py-3 text-slate-600">${escape_html(h.due_at ? formatDate(h.due_at) : "—")}</td><td class="px-4 py-3">`);
        if (h.returned_at) {
          $$renderer2.push("<!--[0-->");
          $$renderer2.push(`<span class="text-emerald-700">${escape_html(formatDateTime(h.returned_at))}</span>`);
        } else {
          $$renderer2.push("<!--[-1-->");
          $$renderer2.push(`<span class="badge bg-amber-100 text-amber-800">En préstamo</span>`);
        }
        $$renderer2.push(`<!--]--></td><td class="px-4 py-3 text-slate-500">${escape_html(h.checked_out_by_name || "—")}</td><td class="px-4 py-3"><div class="flex gap-2 text-xs"><a class="font-medium text-brand-700 hover:underline"${attr("href", `/loans/${stringify(h.id)}/document?type=entrega`)} target="_blank">Entrega</a> <a class="font-medium text-brand-700 hover:underline"${attr("href", `/loans/${stringify(h.id)}/document?type=recogida`)} target="_blank">Recogida</a></div></td></tr>`);
      }
      $$renderer2.push(`<!--]--></tbody></table></div>`);
    }
    $$renderer2.push(`<!--]--></section> `);
    {
      $$renderer2.push("<!--[-1-->");
    }
    $$renderer2.push(`<!--]-->`);
  });
}

export { _page as default };
//# sourceMappingURL=_page.svelte.js-C10AMYMj.js.map
