// modal.jsx — Ticket detail modal

function TicketModal({ ticket, isArchived, onClose, onChangeStatus, onDelete, onRestore }) {
  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  if (!ticket) return null;

  const onBackClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  const statusActions = [
    { id: "pendiente", label: "Marcar pendiente", icon: "clock" },
    { id: "proceso",   label: "Iniciar proceso",  icon: "arrowR" },
    { id: "finalizado",label: "Finalizar",        icon: "check" },
  ].filter(s => s.id !== ticket.estado);

  return (
    <div className="modal-back" onMouseDown={onBackClick}>
      <div className="modal" onMouseDown={e => e.stopPropagation()}>
        <div className="modal-h">
          <span className="modal-code">{ticket.id}</span>
          <h2>{ticket.cliente}</h2>
          <StatusBadge value={isArchived ? "finalizado" : ticket.estado} />
          <button className="modal-x" onClick={onClose} aria-label="Cerrar">
            <Icon name="x" />
          </button>
        </div>

        <div className="modal-body">
          <div className="info-grid">
            <div className="info-cell">
              <div className="info-label">Cliente</div>
              <div className="info-value">{ticket.cliente}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Celular</div>
              <div className="info-value mono">{ticket.celular}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Proyecto</div>
              <div className="info-value">{ticket.proyecto}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Prioridad</div>
              <div className="info-value"><PriorityBadge value={ticket.prioridad} /></div>
            </div>
            <div className="info-cell">
              <div className="info-label">Creado</div>
              <div className="info-value mono">{fmtDate(ticket.fecha)}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">{ticket.cerradoEn ? "Cerrado" : "Estado"}</div>
              <div className="info-value">
                {ticket.cerradoEn
                  ? <span className="mono">{fmtDate(ticket.cerradoEn)}</span>
                  : <StatusBadge value={ticket.estado} />}
              </div>
            </div>
          </div>

          <h3 className="section-title">Descripción</h3>
          <div className="modal-desc">{ticket.descripcion}</div>

          {ticket.archivos && ticket.archivos.length > 0 && (
            <AttachmentList archivos={ticket.archivos} />
          )}

          <h3 className="section-title" style={{ marginTop: 18 }}>Historial</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 12.5, color: "var(--ink-2)" }}>
            <TimelineRow color="var(--pending)" label="Ticket creado" date={fmtDate(ticket.fecha)} />
            {ticket.estado === "proceso" || ticket.estado === "finalizado" || isArchived
              ? <TimelineRow color="var(--progress)" label="Movido a En proceso" date="—" />
              : null}
            {ticket.cerradoEn
              ? <TimelineRow color="var(--done)" label="Finalizado y archivado" date={fmtDate(ticket.cerradoEn)} />
              : null}
          </div>
        </div>

        <div className="modal-foot">
          <div className="left">
            {!isArchived && statusActions.map(s => (
              <button
                key={s.id}
                className={"btn btn-sm " + (s.id === "finalizado" ? "btn-primary" : "")}
                onClick={() => onChangeStatus(ticket.id, s.id)}
              >
                <Icon name={s.icon} style={{ width: 13, height: 13 }} />
                {s.label}
              </button>
            ))}
          </div>
          <div className="right">
            {!isArchived && (
              <button className="btn btn-sm btn-danger" onClick={() => onDelete(ticket.id)}>
                <Icon name="trash" style={{ width: 13, height: 13 }} />
                Eliminar
              </button>
            )}
            <button className="btn btn-sm" onClick={onClose}>Cerrar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function AttachmentList({ archivos }) {
  return (
    <>
      <h3 className="section-title">
        Archivos adjuntos ({archivos.length})
      </h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {archivos.map((a, i) => <Attachment key={a.id ?? i} archivo={a} />)}
      </div>
    </>
  );
}

function Attachment({ archivo }) {
  const url  = archivo.url || null;
  const kind = archivo.type;
  const isMedia = kind === "image" || kind === "video";

  return (
    <div>
      {kind === "image" && url && (
        <a href={url} target="_blank" rel="noreferrer"
           style={{ display: "block", marginBottom: 8 }}>
          <img
            src={url}
            alt=""
            style={{
              width: "100%",
              maxHeight: 320,
              objectFit: "contain",
              background: "var(--bg-1)",
              border: "1px solid var(--border)",
              borderRadius: "var(--radius-sm)",
              display: "block",
            }}
          />
        </a>
      )}

      {kind === "video" && url && (
        <video
          src={url}
          controls
          style={{
            width: "100%",
            maxHeight: 320,
            background: "#000",
            border: "1px solid var(--border)",
            borderRadius: "var(--radius-sm)",
            marginBottom: 8,
          }}
        />
      )}

      {/* Solo mostramos nombre/tamaño cuando NO es imagen ni video (PDF, doc, etc.). */}
      {!isMedia && (
        <div className="modal-attach">
          <div className="ma-thumb">
            <Icon name="paperclip" />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontWeight: 600, fontSize: 13.5,
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
            }}>{archivo.name}</div>
            <div style={{ color: "var(--ink-2)", fontSize: 11.5, fontFamily: "var(--font-mono)" }}>
              {archivo.size > 0 ? `${fmtSize(archivo.size)} · ` : ""}archivo
            </div>
          </div>
          {url && (
            <a className="btn btn-sm btn-ghost"
               href={url} target="_blank" rel="noreferrer"
               style={{ textDecoration: "none" }}>
              <Icon name="eye" style={{ width: 13, height: 13 }} /> Ver
            </a>
          )}
        </div>
      )}
    </div>
  );
}

function TimelineRow({ color, label, date }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: color, boxShadow: `0 0 0 3px color-mix(in oklab, ${color} 16%, transparent)` }}></span>
      <span style={{ color: "var(--ink)", fontWeight: 500 }}>{label}</span>
      <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)" }}>{date}</span>
    </div>
  );
}

window.TicketModal = TicketModal;