'use client';
import { useState } from 'react';
import { useToast } from './ToastProvider';
import { getResponseErrorTextWithRequestId } from '@/lib/api-client';
interface ExportHtmlButtonProps {
linkId: string;
period: string;
linkData?: {
shortUrl: string;
longUrl: string;
title: string | null;
};
getExportNode?: () => HTMLElement | null;
disabled?: boolean;
disabledReason?: string;
}
function getSlugForFileName(shortUrl: string | undefined, fallback = 'report') {
const safeFallback = fallback || 'report';
if (!shortUrl) return safeFallback;
const lastSegment = shortUrl.split('/').pop() || safeFallback;
const normalized = lastSegment
.trim()
.replace(/[^a-zA-Z0-9_-]+/g, '-')
.replace(/-+/g, '-')
.replace(/^-+|-+$/g, '');
return normalized || safeFallback;
}
function cloneNodeWithInlineStyles(node: Node): Node | null {
if (node.nodeType === Node.TEXT_NODE) {
return document.createTextNode(node.textContent || '');
}
if (node.nodeType !== Node.ELEMENT_NODE) {
return null;
}
const element = node as Element;
if (element instanceof HTMLElement && element.dataset.exportExclude === 'true') {
return null;
}
const clone = element.cloneNode(false) as Element;
const computed = window.getComputedStyle(element);
let inlineStyle = '';
for (let i = 0; i < computed.length; i += 1) {
const property = computed.item(i);
if (!property) continue;
inlineStyle += `${property}:${computed.getPropertyValue(property)};`;
}
if (inlineStyle) {
clone.setAttribute('style', inlineStyle);
}
for (const attr of Array.from(element.attributes)) {
if (attr.name === 'class' || attr.name === 'style' || attr.name.startsWith('data-export')) {
continue;
}
clone.setAttribute(attr.name, attr.value);
}
for (const child of Array.from(node.childNodes)) {
const childClone = cloneNodeWithInlineStyles(child);
if (childClone) {
clone.appendChild(childClone);
}
}
return clone;
}
function serializeNodeAsStandaloneHtml(node: HTMLElement, title: string) {
const cloned = cloneNodeWithInlineStyles(node);
if (!cloned || !(cloned instanceof Element)) {
throw new Error('Не удалось подготовить HTML-экспорт');
}
return [
'',
'',
'',
'',
'',
`${title}`,
'',
'',
'',
'',
cloned.outerHTML,
'',
'',
'',
].join('');
}
function downloadHtmlFile(html: string, fileName: string) {
const blob = new Blob([html], { type: 'text/html;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();
document.body.removeChild(anchor);
URL.revokeObjectURL(url);
}
export default function ExportHtmlButton({
linkId,
period,
linkData,
getExportNode,
disabled = false,
disabledReason,
}: ExportHtmlButtonProps) {
const toast = useToast();
const [isGenerating, setIsGenerating] = useState(false);
const handleExport = async () => {
if (disabled) {
if (disabledReason) {
toast.info(disabledReason);
}
return;
}
setIsGenerating(true);
try {
const fileSlug = getSlugForFileName(linkData?.shortUrl, linkId);
const fileName = `snaplink-report-${fileSlug}-${period}days.html`;
const exportNode = getExportNode?.();
if (exportNode) {
const pageTitle = linkData?.title?.trim() || linkData?.shortUrl || 'Статистика ссылки';
const html = serializeNodeAsStandaloneHtml(exportNode, pageTitle);
downloadHtmlFile(html, fileName);
toast.success('HTML успешно скачан');
return;
}
const response = await fetch(`/api/links/${linkId}/stats/export-html?period=${period}`);
if (!response.ok) {
throw new Error(await getResponseErrorTextWithRequestId(response, 'Ошибка получения данных'));
}
const html = await response.text();
downloadHtmlFile(html, fileName);
toast.success('HTML успешно скачан');
} catch (error) {
const message = error instanceof Error ? error.message : 'Не удалось экспортировать HTML';
toast.error(message);
} finally {
setIsGenerating(false);
}
};
return (
);
}