import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import { o as obtenerUsuario, h as obtenerToken } from './AppLayout_DAKNch61.mjs';

const EXTENSIONES = ".pdf,.png,.jpg,.jpeg,.raw,.dng,.cr2,.nef,.arw,.xls,.xlsx,.ppt,.pptx";
function formatBytes(bytes) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
function formatFecha(iso) {
  try {
    return new Date(iso).toLocaleString("es-CL", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit"
    });
  } catch {
    return iso;
  }
}
function iconoArchivo(mime) {
  if (mime.startsWith("image/")) return "🖼";
  if (mime === "application/pdf") return "📄";
  if (mime.includes("spreadsheet") || mime.includes("excel")) return "📊";
  if (mime.includes("presentation") || mime.includes("powerpoint")) return "📊";
  return "📎";
}
function ArchivoLink({ archivo, actividadId }) {
  const [descargando, setDescargando] = useState(false);
  async function descargar() {
    if (descargando) return;
    setDescargando(true);
    try {
      const token = obtenerToken();
      const res = await fetch(`/api/actividades/${actividadId}/archivos/${archivo.nombre_archivo}`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        credentials: "include"
      });
      if (!res.ok) throw new Error(`Error ${res.status}`);
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = archivo.nombre_original;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    } catch {
      alert("No se pudo descargar el archivo. Intente nuevamente.");
    } finally {
      setDescargando(false);
    }
  }
  return /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      onClick: descargar,
      disabled: descargando,
      className: "flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800 hover:underline disabled:opacity-50 disabled:cursor-wait",
      children: [
        /* @__PURE__ */ jsx("span", { children: iconoArchivo(archivo.tipo_mime) }),
        /* @__PURE__ */ jsx("span", { className: "truncate max-w-xs", children: archivo.nombre_original }),
        /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-xs flex-shrink-0", children: [
          "(",
          formatBytes(archivo.tamano),
          ")"
        ] })
      ]
    }
  );
}
function SeccionObservaciones({ actividadId, soloLectura = false }) {
  const [observaciones, setObservaciones] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [enviando, setEnviando] = useState(false);
  const [error, setError] = useState(null);
  const [texto, setTexto] = useState("");
  const [archivos, setArchivos] = useState([]);
  const inputRef = useRef(null);
  const usuarioActualId = obtenerUsuario()?.id ?? null;
  useEffect(() => {
    cargar();
  }, [actividadId]);
  async function cargar() {
    setCargando(true);
    setError(null);
    try {
      const token = obtenerToken();
      const res = await fetch(`/api/actividades/${actividadId}/observaciones`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        credentials: "include"
      });
      if (res.status === 401) {
        window.location.href = "/login";
        return;
      }
      if (!res.ok) throw new Error(`Error ${res.status}`);
      setObservaciones(await res.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Error al cargar observaciones");
    } finally {
      setCargando(false);
    }
  }
  async function enviar(e) {
    e.preventDefault();
    if (!texto.trim()) return;
    setEnviando(true);
    setError(null);
    try {
      const token = obtenerToken();
      const fd = new FormData();
      fd.append("texto", texto.trim());
      for (const f of archivos) fd.append("archivos", f);
      const res = await fetch(`/api/actividades/${actividadId}/observaciones`, {
        method: "POST",
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        credentials: "include",
        body: fd
      });
      if (res.status === 401) {
        window.location.href = "/login";
        return;
      }
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: `Error ${res.status}` }));
        throw new Error(err.error || `Error ${res.status}`);
      }
      setTexto("");
      setArchivos([]);
      if (inputRef.current) inputRef.current.value = "";
      await cargar();
    } catch (e2) {
      setError(e2 instanceof Error ? e2.message : "Error al guardar la observación");
    } finally {
      setEnviando(false);
    }
  }
  async function eliminar(obsId) {
    if (!window.confirm("¿Eliminar esta observación y sus archivos adjuntos?")) return;
    setError(null);
    try {
      const token = obtenerToken();
      const res = await fetch(`/api/actividades/${actividadId}/observaciones/${obsId}`, {
        method: "DELETE",
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        credentials: "include"
      });
      if (!res.ok) throw new Error(`Error ${res.status}`);
      await cargar();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Error al eliminar");
    }
  }
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
    cargando ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 text-center py-4", children: "Cargando observaciones…" }) : observaciones.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-400 italic", children: "Sin observaciones registradas." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: observaciones.map((obs) => /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg bg-gray-50 p-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 whitespace-pre-wrap flex-1", children: obs.texto }),
        !soloLectura && obs.creado_por === usuarioActualId && /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: () => eliminar(obs.id),
            className: "flex-shrink-0 text-gray-300 hover:text-red-500 transition-colors p-0.5",
            title: "Eliminar observación",
            "aria-label": "Eliminar",
            children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
          }
        )
      ] }),
      obs.archivos.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1.5 border-t border-gray-200 pt-3", children: obs.archivos.map((arch) => /* @__PURE__ */ jsx(ArchivoLink, { archivo: arch, actividadId }, arch.id)) }),
      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-gray-400", children: [
        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-500", children: obs.usuario_nombre }),
        " — ",
        formatFecha(obs.creado_en)
      ] })
    ] }, obs.id)) }),
    !soloLectura && /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "border border-gray-200 rounded-lg p-4 space-y-3 bg-white", children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-gray-700", children: "Agregar observación" }),
      /* @__PURE__ */ jsx(
        "textarea",
        {
          rows: 3,
          maxLength: 5e3,
          required: true,
          placeholder: "Describa la observación, hallazgo o evidencia registrada durante el trabajo…",
          value: texto,
          onChange: (e) => setTexto(e.target.value),
          className: "input resize-y"
        }
      ),
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: [
          "Adjuntar archivos ",
          /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "(PDF, PNG, JPG, EXCEL, PPTX, RAW…)" })
        ] }),
        /* @__PURE__ */ jsx(
          "input",
          {
            ref: inputRef,
            type: "file",
            multiple: true,
            accept: EXTENSIONES,
            onChange: (e) => setArchivos(Array.from(e.target.files ?? [])),
            className: "text-sm text-gray-600 file:mr-3 file:py-1 file:px-3 file:rounded file:border file:border-gray-300 file:bg-white file:text-sm file:text-gray-600 hover:file:bg-gray-50 cursor-pointer"
          }
        ),
        archivos.length > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-gray-500", children: [
          archivos.length,
          " archivo",
          archivos.length > 1 ? "s" : "",
          " seleccionado",
          archivos.length > 1 ? "s" : "",
          ":",
          " ",
          archivos.map((f) => f.name).join(", ")
        ] })
      ] }),
      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: error }),
      /* @__PURE__ */ jsx(
        "button",
        {
          type: "submit",
          disabled: enviando || !texto.trim(),
          className: "btn-primary text-sm disabled:opacity-50 disabled:cursor-not-allowed",
          children: enviando ? "Guardando…" : "Guardar Observación"
        }
      )
    ] })
  ] });
}

export { SeccionObservaciones as S };
