// ============================================================
// Auditoría de Digitalización
// Optimizada: Finalizados paginados + hojas PDF cargadas por libro
// ============================================================
const AuditoriaDigitalizacion = ({ onSessionExpired }) => {
  const [activeTab, setActiveTab] = useState('digitalized');

  const [digitalized, setDigitalized] = useState({
    items: [],
    summary: {
      total_books: 0,
      mismatch_books: 0,
      database_images: 0,
      filesystem_images: 0,
      difference: 0,
    },
    loading: true,
    error: '',
  });

  const [finalized, setFinalized] = useState({
    items: [],
    summary: {
      total_books: 0,
      database_images: 0,
      jpg_count: 0,
      tiff_count: 0,
      pdf_color_files: 0,
      pdf_bw_files: 0,
      pdf_optimized_files: 0,
    },
    pagination: {
      page: 1,
      per_page: 20,
      total: 0,
      total_pages: 1,
    },
    loading: false,
    error: '',
  });

  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');
  const [onlyMismatch, setOnlyMismatch] = useState(false);

  const formatNumber = (value) =>
    new Intl.NumberFormat('es-MX').format(Number(value || 0));

  const formatDate = (value) => {
    if (!value) return '—';

    const date = new Date(String(value).replace(' ', 'T'));

    if (Number.isNaN(date.getTime())) {
      return value;
    }

    return date.toLocaleString('es-MX', {
      dateStyle: 'short',
      timeStyle: 'short',
    });
  };

  const loadDigitalized = async () => {
    setDigitalized((previous) => ({
      ...previous,
      loading: true,
      error: '',
    }));

    try {
      const params = new URLSearchParams();
      params.set('view', 'digitalized');

      if (search) params.set('search', search);
      if (onlyMismatch) params.set('only_mismatch', '1');

      const response = await window.apiRequest(
        `digitalization/image-audit.php?${params.toString()}`
      );

      const data = response?.data || {};

      setDigitalized({
        items: Array.isArray(data.items) ? data.items : [],
        summary: data.summary || {},
        loading: false,
        error: '',
      });
    } catch (err) {
      if (err?.status === 401) {
        onSessionExpired();
        return;
      }

      setDigitalized((previous) => ({
        ...previous,
        loading: false,
        error: err?.message || 'No fue posible cargar la auditoría.',
      }));
    }
  };

  const loadPdfPagesProgressively = async (items) => {
    for (const item of items) {
      try {
        const response = await window.apiRequest(
          `digitalization/image-audit.php?view=finalized_pdf&book_id=${encodeURIComponent(item.book_id)}`
        );

        const detail = response?.data || {};

        setFinalized((previous) => ({
          ...previous,
          items: previous.items.map((row) =>
            Number(row.book_id) === Number(item.book_id)
              ? {
                  ...row,
                  pdf_color_pages: detail.pdf_color_pages,
                  pdf_bw_pages: detail.pdf_bw_pages,
                  pdf_optimized_pages: detail.pdf_optimized_pages,
                  pdf_pages_status: 'loaded',
                }
              : row
          ),
        }));
      } catch (err) {
        if (err?.status === 401) {
          onSessionExpired();
          return;
        }

        setFinalized((previous) => ({
          ...previous,
          items: previous.items.map((row) =>
            Number(row.book_id) === Number(item.book_id)
              ? {
                  ...row,
                  pdf_pages_status: 'error',
                }
              : row
          ),
        }));
      }
    }
  };

  const loadFinalized = async (page = finalized.pagination.page) => {
    setFinalized((previous) => ({
      ...previous,
      loading: true,
      error: '',
    }));

    try {
      const params = new URLSearchParams();
      params.set('view', 'finalized');
      params.set('page', String(page));
      params.set('per_page', '20');

      if (search) params.set('search', search);

      const response = await window.apiRequest(
        `digitalization/image-audit.php?${params.toString()}`
      );

      const data = response?.data || {};
      const items = Array.isArray(data.items) ? data.items : [];

      setFinalized({
        items,
        summary: data.summary || {},
        pagination: data.pagination || {
          page: 1,
          per_page: 20,
          total: items.length,
          total_pages: 1,
        },
        loading: false,
        error: '',
      });

      window.setTimeout(() => {
        loadPdfPagesProgressively(items);
      }, 50);
    } catch (err) {
      if (err?.status === 401) {
        onSessionExpired();
        return;
      }

      setFinalized((previous) => ({
        ...previous,
        loading: false,
        error: err?.message || 'No fue posible cargar los libros finalizados.',
      }));
    }
  };

  useEffect(() => {
    if (activeTab === 'finalized') {
      loadFinalized(1);
    } else {
      loadDigitalized();
    }
  }, [activeTab, search, onlyMismatch]);

  const submitSearch = (event) => {
    event.preventDefault();
    setSearch(searchInput.trim());
  };

  const clearSearch = () => {
    setSearchInput('');
    setSearch('');
  };

  const changeTab = (tab) => {
    setActiveTab(tab);
    setSearchInput('');
    setSearch('');
    setOnlyMismatch(false);
  };

  const escapeHtml = (value) =>
    String(value ?? '')
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');

  const excelText = (value) =>
    `<td style="mso-number-format:'\\@';">${escapeHtml(value)}</td>`;

  const downloadExcelHtml = (filename, headers, rows) => {
    const html = `
      <html xmlns:o="urn:schemas-microsoft-com:office:office"
            xmlns:x="urn:schemas-microsoft-com:office:excel"
            xmlns="http://www.w3.org/TR/REC-html40">
        <head><meta charset="UTF-8"></head>
        <body>
          <table border="1">
            <thead>
              <tr>${headers.map((h) => `<th>${escapeHtml(h)}</th>`).join('')}</tr>
            </thead>
            <tbody>${rows}</tbody>
          </table>
        </body>
      </html>
    `;

    const blob = new Blob(
      ['\ufeff', html],
      { type: 'application/vnd.ms-excel;charset=utf-8;' }
    );

    const url = URL.createObjectURL(blob);
    const anchor = document.createElement('a');

    anchor.href = url;
    anchor.download = filename;

    document.body.appendChild(anchor);
    anchor.click();
    anchor.remove();

    URL.revokeObjectURL(url);
  };

  const exportCurrent = () => {
    const source = activeTab === 'finalized'
      ? finalized.items
      : digitalized.items;

    if (!source.length) {
      alert('No hay registros para exportar.');
      return;
    }

    if (activeTab === 'finalized') {
      const rows = source.map((item) => `
        <tr>
          ${excelText(item.inventory_number)}
          ${excelText(item.barcode)}
          <td>${escapeHtml(item.series_collection)}</td>
          <td>${escapeHtml(item.title)}</td>
          <td>${escapeHtml(item.converted_by)}</td>
          <td>${escapeHtml(item.completed_at)}</td>
          <td>${Number(item.database_image_count || 0)}</td>
          <td>${Number(item.jpg_count || 0)}</td>
          <td>${Number(item.tiff_count || 0)}</td>
          <td>${Number(item.pdf_color_count || 0)}</td>
          <td>${item.pdf_color_pages ?? ''}</td>
          <td>${Number(item.pdf_bw_count || 0)}</td>
          <td>${item.pdf_bw_pages ?? ''}</td>
          <td>${Number(item.pdf_optimized_count || 0)}</td>
          <td>${item.pdf_optimized_pages ?? ''}</td>
          <td>${escapeHtml(item.relative_path)}</td>
        </tr>
      `).join('');

      downloadExcelHtml(
        `auditoria_finalizados_${new Date().toISOString().slice(0, 10)}.xls`,
        [
          'Inventario',
          'Código de barras',
          'Serie / colección',
          'Título',
          'Convertido por',
          'Fecha de finalización',
          'Imágenes registradas BD',
          'Cantidad JPG',
          'Cantidad TIFF',
          'Cantidad PDF Color',
          'Hojas PDF Color',
          'Cantidad PDF B&N',
          'Hojas PDF B&N',
          'Cantidad PDF Optimizado',
          'Hojas PDF Optimizado',
          'Ruta FINALIZADO',
        ],
        rows
      );

      return;
    }

    const rows = source.map((item) => `
      <tr>
        ${excelText(item.inventory_number)}
        ${excelText(item.barcode)}
        <td>${escapeHtml(item.series_collection)}</td>
        <td>${escapeHtml(item.title)}</td>
        <td>${escapeHtml(item.digitalized_by)}</td>
        <td>${escapeHtml(item.completed_at)}</td>
        <td>${Number(item.database_image_count || 0)}</td>
        <td>${Number(item.filesystem_image_count || 0)}</td>
        <td>${Number(item.difference || 0)}</td>
        <td>${item.images_match ? 'Correcto' : 'Diferencia'}</td>
      </tr>
    `).join('');

    downloadExcelHtml(
      `auditoria_digitalizacion_${new Date().toISOString().slice(0, 10)}.xls`,
      [
        'Inventario',
        'Código de barras',
        'Serie / colección',
        'Título',
        'Digitalizado por',
        'Fecha',
        'Imágenes registradas BD',
        'Imágenes reales',
        'Diferencia',
        'Estado',
      ],
      rows
    );
  };

  const activeState =
    activeTab === 'finalized'
      ? finalized
      : digitalized;

  const tabStyle = (tab) => ({
    border: 'none',
    borderBottom:
      activeTab === tab
        ? '3px solid var(--primary)'
        : '3px solid transparent',
    background: 'transparent',
    color:
      activeTab === tab
        ? 'var(--primary)'
        : 'var(--text-2)',
    padding: '12px 16px 10px',
    fontWeight: activeTab === tab ? 800 : 650,
    cursor: 'pointer',
  });

  return (
    <div className="stack" style={{ gap: 14 }}>
      <div className="card" style={{ overflow: 'hidden' }}>
        <div
          className="card-header"
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 12,
            flexWrap: 'wrap',
          }}
        >
          <div>
            <div className="card-title">
              Auditoría de Digitalización
            </div>
            <div className="card-subtitle">
              Digitalizados y productos finales.
            </div>
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button
              type="button"
              className="btn btn-ghost"
              onClick={() =>
                activeTab === 'finalized'
                  ? loadFinalized(finalized.pagination.page)
                  : loadDigitalized()
              }
              disabled={activeState.loading}
            >
              Actualizar
            </button>

            <button
              type="button"
              className="btn btn-primary"
              onClick={exportCurrent}
              disabled={activeState.loading || !activeState.items.length}
            >
              Exportar a Excel
            </button>
          </div>
        </div>

        <div
          style={{
            borderTop: '1px solid var(--border)',
            display: 'flex',
            gap: 4,
            padding: '0 10px',
          }}
        >
          <button
            type="button"
            style={tabStyle('digitalized')}
            onClick={() => changeTab('digitalized')}
          >
            Digitalizados
          </button>

          <button
            type="button"
            style={tabStyle('finalized')}
            onClick={() => changeTab('finalized')}
          >
            Finalizados
          </button>
        </div>
      </div>

      <div className="card" style={{ padding: 14 }}>
        <form
          onSubmit={submitSearch}
          style={{
            display: 'flex',
            gap: 8,
            flexWrap: 'wrap',
            alignItems: 'center',
          }}
        >
          <input
            className="input"
            type="search"
            value={searchInput}
            onChange={(event) => setSearchInput(event.target.value)}
            placeholder="Buscar por inventario, código, título, autor, serie o usuario…"
            style={{
              flex: '1 1 380px',
              minWidth: 260,
            }}
          />

          <button type="submit" className="btn btn-primary">
            Buscar
          </button>

          {(search || searchInput) && (
            <button
              type="button"
              className="btn btn-ghost"
              onClick={clearSearch}
            >
              Limpiar
            </button>
          )}

          {activeTab === 'digitalized' && (
            <label
              style={{
                marginLeft: 'auto',
                display: 'inline-flex',
                gap: 7,
                alignItems: 'center',
                fontSize: 13,
              }}
            >
              <input
                type="checkbox"
                checked={onlyMismatch}
                onChange={(event) =>
                  setOnlyMismatch(event.target.checked)
                }
              />
              Mostrar solo diferencias
            </label>
          )}
        </form>
      </div>

      {activeState.error && (
        <div
          role="alert"
          style={{
            padding: 12,
            borderRadius: 8,
            border: '1px solid #fecaca',
            background: '#fef2f2',
            color: '#991b1b',
          }}
        >
          {activeState.error}
        </div>
      )}

      <div className="card" style={{ overflow: 'hidden' }}>
        {activeState.loading ? (
          <div style={{ padding: 40, textAlign: 'center' }}>
            <strong>Cargando información…</strong>
          </div>
        ) : activeTab === 'finalized' ? (
          <FinalizedAuditTable
            items={finalized.items}
            formatNumber={formatNumber}
            formatDate={formatDate}
          />
        ) : (
          <DigitalizedAuditTable
            items={digitalized.items}
            formatNumber={formatNumber}
            formatDate={formatDate}
          />
        )}
      </div>

      {activeTab === 'finalized' && !finalized.loading && (
        <div
          className="card"
          style={{
            padding: 12,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 10,
          }}
        >
          <button
            type="button"
            className="btn btn-ghost"
            disabled={finalized.pagination.page <= 1}
            onClick={() =>
              loadFinalized(finalized.pagination.page - 1)
            }
          >
            Anterior
          </button>

          <div className="text-sm text-2">
            Página {finalized.pagination.page} de{' '}
            {finalized.pagination.total_pages} ·{' '}
            {formatNumber(finalized.pagination.total)} libro(s)
          </div>

          <button
            type="button"
            className="btn btn-ghost"
            disabled={
              finalized.pagination.page
              >= finalized.pagination.total_pages
            }
            onClick={() =>
              loadFinalized(finalized.pagination.page + 1)
            }
          >
            Siguiente
          </button>
        </div>
      )}
    </div>
  );
};

const auditCell = {
  padding: '11px 12px',
  borderBottom: '1px solid var(--border)',
  verticalAlign: 'top',
  fontSize: 13,
};

const auditNumberCell = {
  ...auditCell,
  textAlign: 'right',
  fontVariantNumeric: 'tabular-nums',
  whiteSpace: 'nowrap',
};

const PdfPagesValue = ({ item, field }) => {
  if (item.pdf_pages_status === 'pending') {
    return <span className="text-xs text-3">Calculando…</span>;
  }

  if (item.pdf_pages_status === 'error') {
    return <span style={{ color: '#b45309' }}>No leído</span>;
  }

  const value = item[field];

  return (
    <span>
      {value === null || value === undefined
        ? 'No leído'
        : value}
    </span>
  );
};

const FinalizedAuditTable = ({ items, formatNumber, formatDate }) => (
  <div style={{ overflowX: 'auto' }}>
    <table
      style={{
        width: '100%',
        borderCollapse: 'collapse',
        minWidth: 1650,
      }}
    >
      <thead>
        <tr style={{ background: 'var(--surface-2)' }}>
          {[
            'Inventario',
            'Título',
            'Convertido por',
            'Finalizado',
            'Registradas BD',
            'JPG',
            'TIFF',
            'PDF Color',
            'Hojas Color',
            'PDF B&N',
            'Hojas B&N',
            'PDF Optimizado',
            'Hojas Optimizado',
            'Ruta',
          ].map((label) => (
            <th
              key={label}
              style={{
                textAlign: 'left',
                padding: '11px 12px',
                borderBottom: '1px solid var(--border)',
                fontSize: 12,
                whiteSpace: 'nowrap',
              }}
            >
              {label}
            </th>
          ))}
        </tr>
      </thead>

      <tbody>
        {items.map((item) => (
          <tr key={item.assignment_id}>
            <td style={auditCell}>
              <strong>{item.inventory_number || item.barcode || '—'}</strong>
            </td>

            <td style={{ ...auditCell, minWidth: 260 }}>
              <div style={{ fontWeight: 650 }}>
                {item.title || 'Sin título'}
              </div>
              <div className="text-xs text-3">
                {item.series_collection || 'Sin serie'}
              </div>
            </td>

            <td style={auditCell}>
              {item.converted_by || '—'}
            </td>

            <td style={{ ...auditCell, whiteSpace: 'nowrap' }}>
              {formatDate(item.completed_at)}
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.database_image_count)}
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.jpg_count)}
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.tiff_count)}
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.pdf_color_count)}
            </td>

            <td style={auditNumberCell}>
              <PdfPagesValue item={item} field="pdf_color_pages"/>
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.pdf_bw_count)}
            </td>

            <td style={auditNumberCell}>
              <PdfPagesValue item={item} field="pdf_bw_pages"/>
            </td>

            <td style={auditNumberCell}>
              {formatNumber(item.pdf_optimized_count)}
            </td>

            <td style={auditNumberCell}>
              <PdfPagesValue item={item} field="pdf_optimized_pages"/>
            </td>

            <td
              style={{
                ...auditCell,
                maxWidth: 320,
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11,
                wordBreak: 'break-all',
              }}
            >
              {item.folder_exists
                ? item.relative_path
                : 'Carpeta no encontrada'}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const DigitalizedAuditTable = ({ items, formatNumber, formatDate }) => (
  <div style={{ overflowX: 'auto' }}>
    <table
      style={{
        width: '100%',
        borderCollapse: 'collapse',
        minWidth: 1100,
      }}
    >
      <thead>
        <tr style={{ background: 'var(--surface-2)' }}>
          {[
            'Inventario',
            'Título',
            'Digitalizado por',
            'Fecha',
            'Registradas BD',
            'Reales carpeta',
            'Diferencia',
            'Estado',
          ].map((label) => (
            <th
              key={label}
              style={{
                textAlign: 'left',
                padding: '11px 12px',
                borderBottom: '1px solid var(--border)',
                fontSize: 12,
                whiteSpace: 'nowrap',
              }}
            >
              {label}
            </th>
          ))}
        </tr>
      </thead>

      <tbody>
        {items.map((item) => {
          const mismatch = !item.images_match;

          return (
            <tr
              key={item.assignment_id}
              style={{
                background: mismatch ? '#fff7ed' : 'transparent',
              }}
            >
              <td style={auditCell}>
                <strong>{item.inventory_number || item.barcode || '—'}</strong>
              </td>

              <td style={{ ...auditCell, minWidth: 280 }}>
                {item.title || 'Sin título'}
              </td>

              <td style={auditCell}>
                {item.digitalized_by || '—'}
              </td>

              <td style={auditCell}>
                {formatDate(item.completed_at)}
              </td>

              <td style={auditNumberCell}>
                {formatNumber(item.database_image_count)}
              </td>

              <td style={auditNumberCell}>
                {formatNumber(item.filesystem_image_count)}
              </td>

              <td style={auditNumberCell}>
                {item.difference > 0 ? '+' : ''}
                {formatNumber(item.difference)}
              </td>

              <td style={auditCell}>
                {mismatch ? 'Diferencia' : 'Correcto'}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);