/* screens-11.jsx — Tag Explorer (YOUN-21) */ const API_URL_TAGS = "https://younalyse-api-646149995822.europe-west1.run.app"; const TagsScreen = ({ userId, onToast }) => { const [tags, setTags] = React.useState([]); const [total, setTotal] = React.useState(0); const [loading, setLoading] = React.useState(true); const [tab, setTab] = React.useState("all"); const [search, setSearch] = React.useState(""); const [selectedChannel, setSelectedChannel] = React.useState(""); const [availableChannels, setAvailableChannels] = React.useState([]); const [pageSize, setPageSize] = React.useState(50); const [page, setPage] = React.useState(0); // Панель тегов — только для таба избранное const [selectedTags, setSelectedTags] = React.useState([]); const [copiedTags, setCopiedTags] = React.useState(false); const T = window.T || {}; // ── Загрузка каналов ────────────────────────────────────────────────── React.useEffect(() => { if (!userId) return; fetch(`${API_URL_TAGS}/api/tags/channels-list?user_id=${userId}`) .then((r) => r.json()) .then((d) => setAvailableChannels(d.channels || [])) .catch(() => {}); }, [userId]); // ── Загрузка тегов ──────────────────────────────────────────────────── const load = ( currentTab = tab, currentPage = page, currentPageSize = pageSize, ) => { if (!userId) return; setLoading(true); const params = new URLSearchParams({ user_id: userId }); if (selectedChannel) params.set("channel_name", selectedChannel); if (currentTab === "favorites") params.set("favorites_only", "true"); if (currentTab === "hidden") params.set("show_hidden", "true"); fetch(`${API_URL_TAGS}/api/tags?${params}`) .then((r) => r.json()) .then((d) => { const all = d.tags || []; setTotal(all.length); // Пагинация на фронте const start = currentPage * currentPageSize; setTags(all.slice(start, start + currentPageSize)); setLoading(false); }) .catch(() => setLoading(false)); }; React.useEffect(() => { setPage(0); setSelectedTags([]); load(tab, 0, pageSize); }, [userId, selectedChannel, tab]); React.useEffect(() => { load(tab, page, pageSize); }, [page, pageSize]); // ── Преференции ─────────────────────────────────────────────────────── const setPreference = async (tag, update) => { // Оптимистичное обновление — меняем состояние локально без перезагрузки setTags((prev) => prev.map((t) => (t.tag === tag ? { ...t, ...update } : t)), ); if (update.is_hidden) { setSelectedTags((prev) => prev.filter((t) => t !== tag)); } // Фоновый запрос fetch(`${API_URL_TAGS}/api/tags/preferences`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: userId, tag, ...update }), }).catch(() => { // При ошибке — перезагружаем реальное состояние load(); }); }; const handleFavorite = (t) => setPreference(t.tag, { is_favorite: !t.is_favorite }); const handleHide = (t) => { setPreference(t.tag, { is_hidden: true }); // При скрытии — убираем из текущего списка если таб "все" if (tab !== "hidden") { setTags((prev) => prev.filter((item) => item.tag !== t.tag)); setTotal((prev) => prev - 1); } }; const handleRestore = (t) => { setPreference(t.tag, { is_hidden: false }); if (tab === "hidden") { setTags((prev) => prev.filter((item) => item.tag !== t.tag)); setTotal((prev) => prev - 1); } }; // ── Фильтрация (поиск) ──────────────────────────────────────────────── const filtered = React.useMemo(() => { if (!search) return tags; const q = search.toLowerCase(); return tags.filter((t) => t.tag.toLowerCase().includes(q)); }, [tags, search]); const totalPages = Math.ceil(total / pageSize); // ── Копирование тегов ───────────────────────────────────────────────── const handleCopyTags = () => { if (!selectedTags.length) return; navigator.clipboard.writeText(selectedTags.join(", ")).then(() => { setCopiedTags(true); setTimeout(() => setCopiedTags(false), 2000); }); }; // ── Рендер ──────────────────────────────────────────────────────────── return (
{/* ── Основная таблица ── */}
{availableChannels.length > 0 && ( )}
{[ { id: "all", label: T.commentsAll || "Все" }, { id: "favorites", label: T.commentsFavorites || "★ Избранное", }, { id: "hidden", label: T.commentsHidden || "Скрытые" }, ].map((t) => ( ))}
{/* Размер страницы */}
{T.transcriptsPerPage || "На странице:"}
{[25, 50, 100].map((n) => ( ))}
{loading ? (
{T.loading || "Загружаем…"}
) : filtered.length === 0 ? (
{tab === "favorites" ? "★" : tab === "hidden" ? "🫥" : "🏷️"}
{tab === "favorites" ? T.tagsNoFavorites || "Нет избранных тегов" : tab === "hidden" ? T.tagsNoHidden || "Нет скрытых тегов" : T.tagsEmpty || "Тегов пока нет"}
{tab === "all" && (
{T.tagsEmptyHint || "Запустите анализ канала чтобы собрать теги."}
)}
) : ( {tab === "favorites" && ( )} {filtered.map((t) => { const isSelected = selectedTags.includes(t.tag); return ( {/* Радиокнопка "В теги" — только на табе Избранное */} {tab === "favorites" && ( )} ); })}
{T.tagsColTag || "Тег"} {T.tagsColVideos || "Видео"} {T.tagsColChannels || "Каналы"} {T.tagsColInTags || "В теги"}
{t.tag} {t.count} {t.channels?.join(", ") || "—"}
{/* Звёздочка — только добавление в избранное */} {/* Скрыть / Восстановить */}
)}
{/* Пагинация */} {totalPages > 1 && (
{page * pageSize + 1}–{Math.min((page + 1) * pageSize, total)}{" "} {T.paginationOf || "из"} {total}
{Array.from({ length: Math.min(totalPages, 7) }, (_, i) => { const p = totalPages <= 7 ? i : page < 4 ? i : page > totalPages - 4 ? totalPages - 7 + i : page - 3 + i; return ( ); })}
)}
{/* ── Панель тегов — только на табе Избранное ── */} {tab === "favorites" && (
{T.tagsFavPanel || "Теги для видео"}
{selectedTags.length === 0 ? ( {T.tagsFavPlaceholder || "Выберите теги из избранного слева"} ) : ( selectedTags.map((tag) => ( {tag} )) )}
{selectedTags.join(", ").length} / 500
)}
); }; Object.assign(window, { TagsScreen });