// views-inbox.jsx — Admin inbox (filters, search, table) + Archive view
//   Desktop: tabla tradicional con columnas.
//   Móvil/Tablet (≤860px): tarjetas verticales tipo "ib-card".

const PER_PAGE = 10;

function InboxView({ tickets, onOpenTicket }) {
  const [search, setSearch] = React.useState("");
  const [pFilter, setPFilter] = React.useState(null);
  const [sFilter, setSFilter] = React.useState(null);
  const [page, setPage] = React.useState(1);

  // Bandeja muestra ÚNICAMENTE tickets activos (pendiente / proceso).
  // Los finalizados están en la sección Archivo.
  const source = tickets;

  const filtered = source.filter(t => {
    if (pFilter && t.prioridad !== pFilter) return false;
    if (sFilter && t.estado !== sFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      const blob = (t.id + " " + t.cliente + " " + t.celular + " " + t.proyecto + " " + t.descripcion).toLowerCase();
      if (!blob.includes(q)) return false;
    }
    return true;
  });

  filtered.sort((a, b) => new Date(b.fecha) - new Date(a.fecha));

  // Paginación
  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  React.useEffect(() => {
    if (page > totalPages) setPage(1);
  }, [totalPages, page]);
  React.useEffect(() => { setPage(1); }, [search, pFilter, sFilter]);
  const visible = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  const counts = {
    total: source.length,
    pendiente: source.filter(t => t.estado === "pendiente").length,
    proceso:   source.filter(t => t.estado === "proceso").length,
    alta:      source.filter(t => t.prioridad === "alta").length,
    media:     source.filter(t => t.prioridad === "media").length,
    baja:      source.filter(t => t.prioridad === "baja").length,
  };

  return (
    <div className="view">
      <div className="view-pad">
        <div className="stat-row">
          <div className="stat">
            <div className="stat-label">Total</div>
            <div className="stat-val">{counts.total}</div>
            <div className="stat-trend">Tickets en el sistema</div>
          </div>
          <div className="stat">
            <div className="stat-label">Pendientes</div>
            <div className="stat-val" style={{ color: "var(--pending)" }}>{counts.pendiente}</div>
            <div className="stat-trend">Esperando atención</div>
          </div>
          <div className="stat">
            <div className="stat-label">En proceso</div>
            <div className="stat-val" style={{ color: "var(--progress)" }}>{counts.proceso}</div>
            <div className="stat-trend">Trabajando ahora</div>
          </div>
          <div className="stat stat-priority">
            <div className="stat-label">Prioridad</div>
            <div className="stat-prio-row">
              <span className="stat-prio-dot" style={{ background: "var(--p-high)" }} />
              <span className="stat-prio-name">Alta</span>
              <span className="stat-prio-count" style={{ color: "var(--p-high)" }}>{counts.alta}</span>
            </div>
            <div className="stat-prio-row">
              <span className="stat-prio-dot" style={{ background: "var(--p-mid)" }} />
              <span className="stat-prio-name">Media</span>
              <span className="stat-prio-count" style={{ color: "var(--p-mid)" }}>{counts.media}</span>
            </div>
            <div className="stat-prio-row">
              <span className="stat-prio-dot" style={{ background: "var(--p-low)" }} />
              <span className="stat-prio-name">Baja</span>
              <span className="stat-prio-count" style={{ color: "var(--p-low)" }}>{counts.baja}</span>
            </div>
          </div>
        </div>

        <div className="toolbar">
          <div className="search">
            <Icon name="search" />
            <input
              type="text"
              placeholder="Buscar por código, cliente, celular, proyecto…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>

          <div className="chip-group">
            <button className="chip" aria-pressed={pFilter === "alta"} onClick={() => setPFilter(pFilter === "alta" ? null : "alta")}>
              <span className="c-dot" style={{ background: "var(--p-high)" }}></span> Alta
            </button>
            <button className="chip" aria-pressed={pFilter === "media"} onClick={() => setPFilter(pFilter === "media" ? null : "media")}>
              <span className="c-dot" style={{ background: "var(--p-mid)" }}></span> Media
            </button>
            <button className="chip" aria-pressed={pFilter === "baja"} onClick={() => setPFilter(pFilter === "baja" ? null : "baja")}>
              <span className="c-dot" style={{ background: "var(--p-low)" }}></span> Baja
            </button>
          </div>

          <div className="chip-group" style={{ marginLeft: 4 }}>
            <button className="chip" aria-pressed={sFilter === "pendiente"} onClick={() => setSFilter(sFilter === "pendiente" ? null : "pendiente")}>
              <span className="c-dot" style={{ background: "var(--pending)" }}></span> Pendiente
            </button>
            <button className="chip" aria-pressed={sFilter === "proceso"} onClick={() => setSFilter(sFilter === "proceso" ? null : "proceso")}>
              <span className="c-dot" style={{ background: "var(--progress)" }}></span> Proceso
            </button>
          </div>

          {(pFilter || sFilter || search) && (
            <button className="btn btn-sm btn-ghost" onClick={() => { setPFilter(null); setSFilter(null); setSearch(""); }}>
              <Icon name="x" style={{ width: 13, height: 13 }} /> Limpiar
            </button>
          )}
        </div>

        {filtered.length === 0 ? (
          <div className="tablewrap tw-with-cards">
            <div className="empty">
              <div className="empty-ico"><Icon name="inbox" /></div>
              <h3>Sin resultados</h3>
              <p>Ajusta los filtros o la búsqueda para ver más tickets.</p>
            </div>
          </div>
        ) : (
          <>
            {/* TABLA — visible solo en desktop (>860px) */}
            <div className="tablewrap tw-with-cards">
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{ width: 90 }}>Código</th>
                    <th>Cliente</th>
                    <th>Celular</th>
                    <th style={{ width: 110 }}>Prioridad</th>
                    <th style={{ width: 130 }}>Estado</th>
                    <th style={{ width: 130 }}>Fecha</th>
                    <th style={{ width: 80, textAlign: "right" }}>Acción</th>
                  </tr>
                </thead>
                <tbody>
                  {visible.map(t => (
                    <tr key={t.id}>
                      <td className="cell-code">{t.id}</td>
                      <td>
                        <div className="cell-client">{t.cliente}</div>
                        <div style={{ color: "var(--ink-2)", fontSize: 12.5, marginTop: 2 }}>{t.proyecto}</div>
                      </td>
                      <td className="cell-phone">{t.celular}</td>
                      <td><PriorityBadge value={t.prioridad} /></td>
                      <td><StatusBadge value={t.estado} /></td>
                      <td className="cell-date">{fmtDate(t.fecha)}</td>
                      <td>
                        <div className="row-actions">
                          <button className="btn btn-sm btn-ghost" onClick={() => onOpenTicket(t.id)} aria-label="Ver detalle" title="Ver detalle">
                            <Icon name="eye" style={{ width: 14, height: 14 }} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* CARDS — visibles solo en móvil/tablet (≤860px) */}
            <div className="ib-list">
              {visible.map(t => (
                <TicketCard key={t.id} ticket={t} onOpen={() => onOpenTicket(t.id)} />
              ))}
            </div>
          </>
        )}

        <Pagination
          page={page}
          totalPages={totalPages}
          onPage={setPage}
          totalItems={filtered.length}
          perPage={PER_PAGE}
        />
      </div>
    </div>
  );
}

function TicketCard({ ticket, onOpen, onRestore }) {
  const archivosCount = ticket.archivos ? ticket.archivos.length : 0;
  const handleCard = (e) => {
    // No abrir si se hizo clic dentro de un botón
    if (e.target.closest("button")) return;
    onOpen();
  };
  return (
    <article
      className="ib-card"
      data-status={ticket.estado}
      data-priority={ticket.prioridad}
      onClick={handleCard}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === "Enter") onOpen(); }}
    >
      <div className="ib-card-body">
        <div className="ib-card-top">
          <span className="ib-code">{ticket.id}</span>
          <PriorityBadge value={ticket.prioridad} />
          <span className="ib-age">{fmtAge(ticket.fecha)}</span>
        </div>

        <h3 className="ib-card-name">{ticket.cliente}</h3>
        <p className="ib-card-proj">{ticket.proyecto}</p>
        <p className="ib-card-desc">{ticket.descripcion}</p>

        <div className="ib-card-foot">
          <StatusBadge value={ticket.estado} />
          <span className="ib-phone">{ticket.celular}</span>
          {archivosCount > 0 && (
            <span className="ib-attach">
              <Icon name="paperclip" style={{ width: 11, height: 11 }} />
              {archivosCount}
            </span>
          )}
        </div>

        <div className="ib-card-actions">
          <button className="btn btn-sm btn-primary" onClick={onOpen}>
            <Icon name="eye" style={{ width: 13, height: 13 }} />
            Ver detalles
          </button>
          {onRestore && (
            <button className="btn btn-sm" onClick={onRestore}>
              <Icon name="rotate" style={{ width: 13, height: 13 }} />
              Restaurar
            </button>
          )}
        </div>
      </div>
    </article>
  );
}

function ArchiveView({ archived, onOpenTicket, onRestore, onDelete }) {
  const [search, setSearch]     = React.useState("");
  const [fromDate, setFromDate] = React.useState("");
  const [toDate, setToDate]     = React.useState("");
  const [priority, setPriority] = React.useState("");
  const [page, setPage]         = React.useState(1);

  // Validador: solo aplica si la fecha es YYYY-MM-DD completa
  const isValidDate = s => /^\d{4}-\d{2}-\d{2}$/.test(s);
  const validFrom = isValidDate(fromDate) ? fromDate : "";
  const validTo   = isValidDate(toDate)   ? toDate   : "";

  const filtered = archived.filter(t => {
    // Búsqueda por texto
    if (search) {
      const q = search.toLowerCase();
      const blob = (t.id + " " + t.cliente + " " + t.proyecto + " " + t.celular + " " + t.descripcion).toLowerCase();
      if (!blob.includes(q)) return false;
    }
    // Prioridad (case-insensitive)
    if (priority && String(t.prioridad).toLowerCase() !== priority.toLowerCase()) return false;
    // Rango de fechas (sobre la fecha de finalización; si falta, sobre la de creación)
    if (validFrom || validTo) {
      const dateStr = String(t.cerradoEn || t.fecha || "");
      const iso = dateStr.slice(0, 10);
      // Si el ticket no tiene fecha alguna, queda fuera cuando hay filtro
      if (!isValidDate(iso)) return false;
      if (validFrom && iso < validFrom) return false;
      if (validTo   && iso > validTo)   return false;
    }
    return true;
  }).sort((a, b) => new Date(b.cerradoEn || b.fecha) - new Date(a.cerradoEn || a.fecha));

  // Paginación
  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  React.useEffect(() => { if (page > totalPages) setPage(1); }, [totalPages, page]);
  React.useEffect(() => { setPage(1); }, [search, fromDate, toDate, priority]);
  const visible = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  // URL del export incluye los mismos filtros aplicados
  const exportParams = new URLSearchParams();
  if (fromDate) exportParams.set("desde",     fromDate);
  if (toDate)   exportParams.set("hasta",     toDate);
  if (priority) exportParams.set("prioridad", priority);
  const exportQs  = exportParams.toString();
  const exportUrl = `${API_BASE}/tickets/finalizados/export${exportQs ? "?" + exportQs : ""}`;

  const clearFilters = () => {
    setSearch(""); setFromDate(""); setToDate(""); setPriority("");
  };
  const hasFilters = search || fromDate || toDate || priority;

  return (
    <div className="view">
      <div className="view-pad">
        <div
          className="archive-header"
          style={{
            marginBottom: 16,
            display: "flex",
            gap: 12,
            alignItems: "center",
            flexWrap: "wrap",
          }}
        >
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em" }}>Tickets finalizados</h2>
            <p style={{ margin: "3px 0 0", color: "var(--ink-2)", fontSize: 13 }}>
              Histórico de solicitudes cerradas. Puedes restaurarlas al tablero si es necesario.
            </p>
          </div>
          <a
            href={exportUrl}
            className="btn btn-primary"
            style={{
              textDecoration: "none",
              flexShrink: 0,
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
            }}
            title={hasFilters
              ? "Descargar el archivo filtrado"
              : "Descargar todos los tickets finalizados"}
            download
          >
            <Icon name="download" style={{ width: 15, height: 15 }} />
            Exportar Excel
          </a>
        </div>

        <div className="toolbar archive-toolbar">
          <div className="search">
            <Icon name="search" />
            <input
              type="text"
              placeholder="Buscar por código, cliente o proyecto…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>

          <label className="filter-field" title="Fecha desde (finalización)">
            <span>Desde</span>
            <input
              type="date"
              value={fromDate}
              onChange={e => setFromDate(e.target.value)}
              max={toDate || undefined}
            />
          </label>

          <label className="filter-field" title="Fecha hasta (finalización)">
            <span>Hasta</span>
            <input
              type="date"
              value={toDate}
              onChange={e => setToDate(e.target.value)}
              min={fromDate || undefined}
            />
          </label>

          <label className="filter-field" title="Prioridad">
            <span>Prioridad</span>
            <select
              value={priority}
              onChange={e => setPriority(e.target.value)}
            >
              <option value="">Todas</option>
              <option value="alta">Alta</option>
              <option value="media">Media</option>
              <option value="baja">Baja</option>
            </select>
          </label>

          {hasFilters && (
            <button className="btn btn-sm btn-ghost" onClick={clearFilters} title="Limpiar filtros">
              <Icon name="x" style={{ width: 13, height: 13 }} /> Limpiar
            </button>
          )}
        </div>

        {/* Indicador de filtros activos + recuento */}
        {hasFilters && (
          <div className="filter-summary">
            <span className="filter-summary-count">
              {filtered.length === 0
                ? <>Sin resultados con los filtros aplicados</>
                : <><b>{filtered.length}</b> de <b>{archived.length}</b> tickets coinciden</>}
            </span>
            <div className="filter-summary-chips">
              {search && (
                <span className="filter-chip">
                  Búsqueda: <b>"{search}"</b>
                  <button onClick={() => setSearch("")} aria-label="Quitar búsqueda">
                    <Icon name="x" style={{ width: 11, height: 11 }} />
                  </button>
                </span>
              )}
              {validFrom && (
                <span className="filter-chip">
                  Desde: <b>{validFrom.split("-").reverse().join("/")}</b>
                  <button onClick={() => setFromDate("")} aria-label="Quitar fecha desde">
                    <Icon name="x" style={{ width: 11, height: 11 }} />
                  </button>
                </span>
              )}
              {validTo && (
                <span className="filter-chip">
                  Hasta: <b>{validTo.split("-").reverse().join("/")}</b>
                  <button onClick={() => setToDate("")} aria-label="Quitar fecha hasta">
                    <Icon name="x" style={{ width: 11, height: 11 }} />
                  </button>
                </span>
              )}
              {priority && (
                <span className="filter-chip">
                  Prioridad: <b>{priority.charAt(0).toUpperCase() + priority.slice(1)}</b>
                  <button onClick={() => setPriority("")} aria-label="Quitar prioridad">
                    <Icon name="x" style={{ width: 11, height: 11 }} />
                  </button>
                </span>
              )}
            </div>
          </div>
        )}

        <div className="tablewrap">
          {filtered.length === 0 ? (
            <div className="empty">
              <div className="empty-ico"><Icon name="archive" /></div>
              <h3>El archivo está vacío</h3>
              <p>Cuando finalices tickets desde el Kanban aparecerán aquí.</p>
            </div>
          ) : (
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 90 }}>Código</th>
                  <th>Cliente</th>
                  <th>Proyecto</th>
                  <th style={{ width: 110 }}>Prioridad</th>
                  <th style={{ width: 130 }}>Cerrado</th>
                  <th style={{ width: 300, textAlign: "right" }}>Acción</th>
                </tr>
              </thead>
              <tbody>
                {visible.map(t => (
                  <tr key={t.id}>
                    <td className="cell-code" data-label="Código">{t.id}</td>
                    <td className="cell-client" data-label="Cliente">{t.cliente}</td>
                    <td data-label="Proyecto" style={{ color: "var(--ink-1)", fontSize: 14 }}>{t.proyecto}</td>
                    <td data-label="Prioridad"><PriorityBadge value={t.prioridad} /></td>
                    <td className="cell-date" data-label="Cerrado">{fmtDate(t.cerradoEn || t.fecha)}</td>
                    <td data-label="Acción">
                      <div className="archive-actions">
                        <button
                          type="button"
                          className="btn btn-sm"
                          onClick={() => onOpenTicket(t.id)}
                          title="Ver detalle"
                        >
                          <Icon name="eye" style={{ width: 14, height: 14 }} />
                          Ver
                        </button>
                        <button
                          type="button"
                          className="btn btn-sm"
                          onClick={() => onRestore(t.id)}
                          title="Restaurar al tablero"
                        >
                          <Icon name="rotate" style={{ width: 14, height: 14 }} />
                          Restaurar
                        </button>
                        <button
                          type="button"
                          className="btn btn-sm btn-danger"
                          onClick={() => onDelete && onDelete(t.id)}
                          title="Eliminar"
                        >
                          <Icon name="trash" style={{ width: 14, height: 14 }} />
                          Eliminar
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        <Pagination
          page={page}
          totalPages={totalPages}
          onPage={setPage}
          totalItems={filtered.length}
          perPage={PER_PAGE}
        />
      </div>
    </div>
  );
}

window.InboxView = InboxView;
window.ArchiveView = ArchiveView;
window.TicketCard = TicketCard;