siftlode/frontend/src/components/Channels.tsx

import { useEffect, useRef, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  ArrowDown,
  ArrowUp,
  Ban,
  Check,
  Eye,
  EyeOff,
  History,
  Pencil,
  Plus,
  RefreshCw,
  Search,
  UserMinus,
  X,
} from "lucide-react";
import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
import { accountKey } from "../lib/storage";
import { useDismiss } from "../lib/useDismiss";
import { formatEta, formatTotalHours, formatViews, relativeTime } from "../lib/format";
import { notify } from "../lib/notifications";
import Tooltip from "./Tooltip";
import DataTable, { type Column } from "./DataTable";
import ChannelLink from "./ChannelLink";
import ChannelDiscovery from "./ChannelDiscovery";
import TagManager from "./TagManager";
import { useConfirm } from "./ConfirmProvider";

export type ChannelsView = "subscribed" | "discovery";

export type ChannelStatusFilter = "all" | "needs_full" | "fully_synced" | "hidden";

const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
  { id: "all", labelKey: "channels.filters.all" },
  { id: "needs_full", labelKey: "channels.filters.needsFull" },
  { id: "fully_synced", labelKey: "channels.filters.fullySynced" },
  { id: "hidden", labelKey: "channels.filters.hidden" },
];

export default function Channels({
  canWrite,
  isAdmin,
  onViewChannel,
  onFilterByTag,
  onFocusChannel,
  focusChannelName,
  statusFilter,
  setStatusFilter,
  view,
  setView,
  filtersResetToken,
  onOpenWizard,
}: {
  canWrite: boolean;
  isAdmin: boolean;
  onViewChannel: (id: string, name: string) => void;
  onFilterByTag: (tagId: number, name: string) => void;
  onFocusChannel: (name: string) => void;
  focusChannelName: string | null;
  statusFilter: ChannelStatusFilter;
  setStatusFilter: (f: ChannelStatusFilter) => void;
  // The active tab lives in App so navigation intents that target the subscriptions table
  // (the header's "without full history" link, focus-channel) can force it back here.
  view: ChannelsView;
  setView: (v: ChannelsView) => void;
  // Bumped by the header's "without full history" intent to clear a stale column filter.
  filtersResetToken: number;
  onOpenWizard: () => void;
}) {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const confirm = useConfirm();

  // A YouTube-gated action (sync, backfill, unsubscribe) that 403s means the user hasn't
  // granted the needed scope — surface that with a "Connect" action instead of a vague fail.
  const notifyActionError = (err: unknown, fallbackKey: string) => {
    if (err instanceof HttpError && err.status === 403) {
      notify({
        level: "error",
        message: t("channels.notify.needYouTube"),
        action: { label: t("channels.notify.connect"), onClick: onOpenWizard },
      });
    } else {
      notify({ level: "error", message: t(fallbackKey) });
    }
  };
  const channelsQuery = useQuery({ queryKey: ["channels"], queryFn: api.channels });
  const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
  const statusQuery = useQuery({ queryKey: ["my-status"], queryFn: api.myStatus });
  const blockedQuery = useQuery({ queryKey: ["blocked-channels"], queryFn: api.blockedChannels });
  const [tagManagerOpen, setTagManagerOpen] = useState(false);
  const unblock = useMutation({
    mutationFn: (id: string) => api.unblockChannel(id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["blocked-channels"] });
      qc.invalidateQueries({ queryKey: ["feed"] });
    },
  });

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ["channels"] });
    qc.invalidateQueries({ queryKey: ["tags"] });
    qc.invalidateQueries({ queryKey: ["my-status"] });
  };

  const userTags = (tagsQuery.data ?? []).filter((t) => !t.system);

  const patch = useMutation({
    mutationFn: (v: {
      id: string;
      body: { priority?: number; hidden?: boolean; deep_requested?: boolean };
    }) => api.updateChannel(v.id, v.body),
    // Requesting full history may have just pulled in a channel's recent uploads, so
    // refresh the per-user status and feed too — not only the channel list.
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["channels"] });
      qc.invalidateQueries({ queryKey: ["my-status"] });
      qc.invalidateQueries({ queryKey: ["feed"] });
      qc.invalidateQueries({ queryKey: ["feed-count"] });
    },
  });
  // Priority is updated optimistically in place and NOT re-sorted/refetched, so the list
  // doesn't jump (the server list is priority-sorted; refetching would reorder rows and
  // lose your scroll position). The new order takes effect next time the page loads.
  const bumpPriority = (id: string, current: number, delta: number) => {
    const next = current + delta;
    qc.setQueryData<ManagedChannel[]>(["channels"], (old) =>
      (old ?? []).map((ch) => (ch.id === id ? { ...ch, priority: next } : ch))
    );
    api
      .updateChannel(id, { priority: next })
      .catch(() => qc.invalidateQueries({ queryKey: ["channels"] }));
  };

  // Tagging is updated optimistically in place (no refetch of the whole channel list, which
  // made the toggle feel ~2s slow); only revert by refetching if the server call fails.
  const toggleTag = (id: string, tagId: number, hasTag: boolean) => {
    qc.setQueryData<ManagedChannel[]>(["channels"], (old) =>
      (old ?? []).map((ch) =>
        ch.id === id
          ? {
              ...ch,
              tag_ids: hasTag
                ? ch.tag_ids.filter((x) => x !== tagId)
                : [...ch.tag_ids, tagId],
            }
          : ch
      )
    );
    const call = hasTag
      ? api.detachChannelTag(id, tagId)
      : api.attachChannelTag(id, tagId);
    call.catch(() => qc.invalidateQueries({ queryKey: ["channels"] }));
  };
  const syncSubs = useMutation({
    mutationFn: () => api.syncSubscriptions(),
    onSuccess: (r: { subscriptions?: number }) => {
      invalidate();
      notify({ level: "success", message: t("channels.notify.synced", { count: r.subscriptions ?? 0 }) });
    },
    onError: (e) => notifyActionError(e, "channels.notify.syncFailed"),
  });
  const unsubscribe = useMutation({
    mutationFn: (v: { id: string; name: string }) => api.unsubscribeChannel(v.id),
    onSuccess: (_d, v) => {
      qc.invalidateQueries({ queryKey: ["channels"] });
      qc.invalidateQueries({ queryKey: ["my-status"] });
      notify({ level: "success", message: t("channels.notify.unsubscribed", { name: v.name }) });
    },
    onError: (e) => notifyActionError(e, "channels.notify.unsubscribeFailed"),
  });
  const resetBackfill = useMutation({
    mutationFn: (v: { id: string; name: string }) => api.resetChannelBackfill(v.id),
    onSuccess: (_d, v) => {
      qc.invalidateQueries({ queryKey: ["channels"] });
      qc.invalidateQueries({ queryKey: ["my-status"] });
      notify({ level: "success", message: t("channels.notify.resetDone", { name: v.name }) });
    },
    onError: (e) => notifyActionError(e, "channels.notify.resetFailed"),
  });
  const deepAll = useMutation({
    mutationFn: () => api.deepAll(true),
    onSuccess: (r: { updated?: number }) => {
      qc.invalidateQueries({ queryKey: ["channels"] });
      qc.invalidateQueries({ queryKey: ["my-status"] });
      notify({
        level: "success",
        message: t("channels.notify.fullHistoryRequested", { count: r.updated ?? 0 }),
      });
    },
    onError: (e) => notifyActionError(e, "channels.notify.fullHistoryFailed"),
  });

  // Channel-name search + tag-chip filtering, applied client-side over the status-filtered list
  // (prominent controls instead of the DataTable's hidden per-column popovers).
  const [search, setSearch] = useState("");
  const [tagFilter, setTagFilter] = useState<number[]>([]);
  // A focus-channel intent (header "without full history" / tag manager) seeds the search box.
  useEffect(() => {
    if (focusChannelName) setSearch(focusChannelName);
  }, [focusChannelName]);
  // The header's reset intent clears the search + tag chips (skip the initial mount).
  const resetRef = useRef(filtersResetToken);
  useEffect(() => {
    if (filtersResetToken === resetRef.current) return;
    resetRef.current = filtersResetToken;
    setSearch("");
    setTagFilter([]);
  }, [filtersResetToken]);

  // The Sync-status filter stays a top-level chip set (not a column filter) because the
  // header's "go to full history" deep-link drives it; search/tag filtering + sort + pagination
  // run over whatever the status chip leaves.
  const channels = (channelsQuery.data ?? []).filter((c) =>
    statusFilter === "needs_full"
      ? !c.backfill_done
      : statusFilter === "fully_synced"
        ? c.backfill_done
        : statusFilter === "hidden"
          ? c.hidden
          : true
  );
  const q = search.trim().toLowerCase();
  const visibleChannels = channels.filter((c) => {
    if (q && !`${c.title ?? ""} ${c.handle ?? ""}`.toLowerCase().includes(q)) return false;
    if (tagFilter.length && !tagFilter.some((id) => c.tag_ids.includes(id))) return false;
    return true;
  });
  const s = statusQuery.data;

  const onView = (c: ManagedChannel) =>
    onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"));
  const onUnsub = async (c: ManagedChannel) => {
    const ok = await confirm({
      title: t("channels.row.unsubscribeOnYoutube"),
      message: t("channels.confirmUnsubscribe", { name: c.title ?? c.id }),
      confirmLabel: t("channels.row.unsubscribeOnYoutube"),
      danger: true,
    });
    if (ok) unsubscribe.mutate({ id: c.id, name: c.title ?? c.id });
  };
  const onReset = async (c: ManagedChannel) => {
    const ok = await confirm({
      title: t("channels.row.backfillThis"),
      message: t("channels.confirmReset", { name: c.title ?? c.id }),
      confirmLabel: t("channels.row.backfillThis"),
    });
    if (ok) resetBackfill.mutate({ id: c.id, name: c.title ?? c.id });
  };

  const columns: Column<ManagedChannel>[] = [
    {
      key: "priority",
      header: t("channels.cols.priority"),
      align: "center",
      width: "56px",
      sortable: true,
      hideInCard: true,
      sortValue: (c) => c.priority,
      render: (c) => <PriorityCell c={c} onPriority={(d) => bumpPriority(c.id, c.priority, d)} />,
    },
    {
      key: "channel",
      header: t("channels.cols.channel"),
      sortable: true,
      sortValue: (c) => (c.title ?? c.id).toLowerCase(),
      cardPrimary: true,
      render: (c) => (
        <ChannelLink
          id={c.id}
          title={c.title}
          handle={c.handle}
          thumbnailUrl={c.thumbnail_url}
          onView={() => onView(c)}
        />
      ),
    },
    {
      key: "stored",
      header: t("channels.cols.stored"),
      align: "right",
      nowrap: true,
      sortable: true,
      sortValue: (c) => c.stored_videos,
      render: (c) => <span className="text-muted tabular-nums">{c.stored_videos.toLocaleString()}</span>,
    },
    {
      key: "subs",
      header: t("channels.cols.subs"),
      align: "right",
      nowrap: true,
      sortable: true,
      sortValue: (c) => c.subscriber_count ?? -1,
      render: (c) => (
        <span className="text-muted tabular-nums">
          {c.subscriber_count != null ? formatViews(c.subscriber_count) : "—"}
        </span>
      ),
    },
    {
      key: "lastUpload",
      header: t("channels.cols.lastUpload"),
      nowrap: true,
      sortable: true,
      sortValue: (c) => (c.last_video_at ? new Date(c.last_video_at).getTime() : 0),
      render: (c) => <span className="text-muted">{relativeTime(c.last_video_at) || "—"}</span>,
    },
    {
      key: "length",
      header: t("channels.cols.length"),
      align: "right",
      nowrap: true,
      sortable: true,
      sortValue: (c) => c.total_duration_seconds,
      render: (c) => <span className="text-muted tabular-nums">{formatTotalHours(c.total_duration_seconds)}</span>,
    },
    {
      key: "types",
      header: t("channels.cols.types"),
      nowrap: true,
      render: (c) => (
        <Tooltip hint={t("channels.cols.typesHint")}>
          <span className="text-muted tabular-nums cursor-help">
            {c.count_normal} / {c.count_short} / {c.count_live}
          </span>
        </Tooltip>
      ),
    },
    {
      key: "sync",
      header: t("channels.cols.sync"),
      nowrap: true,
      cardLabel: false,
      render: (c) => <SyncCell c={c} />,
    },
    {
      key: "tags",
      header: t("channels.cols.tags"),
      cardLabel: false,
      render: (c) => (
        <TagsCell
          c={c}
          userTags={userTags}
          onToggleTag={(tagId) => toggleTag(c.id, tagId, c.tag_ids.includes(tagId))}
          onTagClick={onFilterByTag}
        />
      ),
    },
    {
      key: "actions",
      header: t("channels.cols.actions"),
      align: "right",
      nowrap: true,
      width: "104px",
      cardLabel: false,
      render: (c) => (
        <ActionsCell
          c={c}
          isAdmin={isAdmin}
          canWrite={canWrite}
          onHide={() => patch.mutate({ id: c.id, body: { hidden: !c.hidden } })}
          onDeep={() => patch.mutate({ id: c.id, body: { deep_requested: !c.deep_requested } })}
          onReset={() => onReset(c)}
          onUnsubscribe={() => onUnsub(c)}
        />
      ),
    },
  ];

  // Status chips sit in the table's controls row (next to paging) — compact and close to
  // where they act.
  const statusChips = (
    <div className="flex flex-wrap items-center gap-1.5">
      {STATUS_FILTERS.map((f) => (
        <button
          key={f.id}
          onClick={() => setStatusFilter(f.id)}
          className={`text-xs px-2.5 py-1 rounded-full border transition ${
            statusFilter === f.id
              ? "bg-accent text-accent-fg border-accent"
              : "bg-card border-border text-muted hover:border-accent"
          }`}
        >
          {t(f.labelKey)}
        </button>
      ))}
    </div>
  );

  const tabs = (
    <div className="px-4 pt-4 max-w-7xl mx-auto">
      <div className="flex flex-wrap items-center gap-1.5">
        {(["subscribed", "discovery"] as ChannelsView[]).map((v) => (
          <button
            key={v}
            onClick={() => setView(v)}
            className={`text-sm px-3 py-1.5 rounded-full border transition ${
              view === v
                ? "bg-accent text-accent-fg border-accent"
                : "bg-card border-border text-muted hover:border-accent"
            }`}
          >
            {t(`channels.tabs.${v}`)}
          </button>
        ))}
      </div>
    </div>
  );

  if (view === "discovery") {
    return (
      <>
        {tabs}
        <ChannelDiscovery canWrite={canWrite} onOpenWizard={onOpenWizard} />
      </>
    );
  }

  return (
    <>
    {tabs}
    <div className="px-4 pb-4 pt-3 max-w-7xl mx-auto">
      {/* Per-user sync status + catalog-wide actions on one row (search/tags filtering
          now lives in the table headers). */}
      <div className="flex items-start justify-between gap-4 flex-wrap mb-4">
        <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-muted">
          {s && (
            <>
              <Stat label={t("channels.stats.channels")} value={s.channels_total} hint={t("channels.stats.channelsHint")} />
              <Stat
                label={t("channels.stats.recentSynced")}
                value={`${s.channels_recent_synced}/${s.channels_total}`}
                hint={t("channels.stats.recentSyncedHint")}
              />
              <Stat
                label={t("channels.stats.fullHistory")}
                value={`${s.channels_deep_done}/${s.channels_deep_requested}`}
                hint={t("channels.stats.fullHistoryHint")}
              />
              {s.deep_pending_count > 0 && (
                <Stat
                  label={t("channels.stats.left")}
                  value={formatEta(s.deep_eta_seconds)}
                  hint={t("channels.stats.leftHint", { count: s.deep_pending_count })}
                />
              )}
              <Stat label={t("channels.stats.myVideos")} value={s.my_videos.toLocaleString()} hint={t("channels.stats.myVideosHint")} />
              <Stat
                label={t("channels.stats.quotaLeft")}
                value={s.quota_remaining_today.toLocaleString()}
                hint={t("channels.stats.quotaLeftHint")}
              />
            </>
          )}
        </div>
        <div className="flex items-center gap-2 shrink-0">
        <Tooltip
          side="bottom"
          hint={t("channels.syncSubscriptionsHint")}
        >
          <button
            onClick={() => syncSubs.mutate()}
            disabled={syncSubs.isPending}
            className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
          >
            <RefreshCw className={`w-4 h-4 ${syncSubs.isPending ? "animate-spin" : ""}`} />
            {t("channels.syncSubscriptions")}
          </button>
        </Tooltip>
        <Tooltip
          side="bottom"
          hint={t("channels.backfillEverythingHint")}
        >
          <button
            onClick={() => deepAll.mutate()}
            disabled={deepAll.isPending}
            className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
          >
            <History className={`w-4 h-4 ${deepAll.isPending ? "animate-pulse" : ""}`} />
            {t("channels.backfillEverything")}
          </button>
        </Tooltip>
        </div>
      </div>

      <p className="text-xs text-muted mb-4 leading-relaxed">
        <Trans
          i18nKey="channels.intro"
          components={[
            <b className="text-fg/80" />,
            <b className="text-fg/80" />,
            <b className="text-fg/80" />,
          ]}
        />
      </p>

      {/* Channel-name search */}
      <div className="relative mb-3 max-w-sm">
        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted pointer-events-none" />
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder={t("channels.searchPlaceholder")}
          className="w-full bg-card border border-border rounded-lg pl-8 pr-8 py-2 text-sm outline-none focus:border-accent"
        />
        {search && (
          <button
            onClick={() => setSearch("")}
            aria-label={t("common.cancel")}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-fg"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>

      {/* Your tags — click a chip to filter the table by it (add/rename/delete live in the manager). */}
      <div className="flex flex-wrap items-center gap-1.5 mb-4">
        <Tooltip hint={t("channels.tags.yourTagsHint")}>
          <span className="text-xs uppercase tracking-wide text-muted mr-1 cursor-help underline decoration-dotted decoration-muted/40 underline-offset-4">
            {t("channels.tags.yourTags")}
          </span>
        </Tooltip>
        {userTags.map((tg) => {
          const active = tagFilter.includes(tg.id);
          return (
            <button
              key={tg.id}
              onClick={() =>
                setTagFilter((f) => (active ? f.filter((x) => x !== tg.id) : [...f, tg.id]))
              }
              aria-pressed={active}
              className={`text-xs px-2 py-1 rounded-full border transition ${
                active
                  ? "bg-accent text-accent-fg border-accent"
                  : "bg-card border-border text-muted hover:text-fg hover:border-accent"
              }`}
            >
              {tg.name}
            </button>
          );
        })}
        {tagFilter.length > 0 && (
          <button
            onClick={() => setTagFilter([])}
            className="text-xs px-2 py-1 text-muted hover:text-accent transition"
          >
            {t("datatable.clear")}
          </button>
        )}
        <button
          onClick={() => setTagManagerOpen(true)}
          className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
        >
          <Pencil className="w-3 h-3" />
          {t("channels.tags.manage")}
        </button>
      </div>
      {tagManagerOpen && (
        <TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
      )}

      {/* Channel table */}
      {channelsQuery.isLoading ? (
        <div className="text-muted py-8">{t("channels.loading")}</div>
      ) : (
        <DataTable
          rows={visibleChannels}
          columns={columns}
          rowKey={(c) => c.id}
          persistKey={accountKey("siftlode.channelsTable") ?? undefined}
          controlsPosition="top"
          controlsLeading={statusChips}
          rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
          emptyText={t("channels.empty")}
        />
      )}

      {/* Blocked channels — videos from these are hidden everywhere and dropped from live search. */}
      {(blockedQuery.data?.length ?? 0) > 0 && (
        <div className="mt-6 border-t border-border pt-4">
          <div className="flex items-center gap-2 mb-2">
            <Ban className="w-4 h-4 text-muted" />
            <span className="text-xs uppercase tracking-wide text-muted">
              {t("channels.blocked.title")}
            </span>
          </div>
          <div className="flex flex-wrap gap-1.5">
            {blockedQuery.data!.map((c) => (
              <span
                key={c.id}
                className="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-1 py-1 rounded-full bg-card border border-border"
              >
                {c.title ?? c.id}
                <button
                  onClick={() => unblock.mutate(c.id)}
                  title={t("channel.unblock")}
                  aria-label={t("channel.unblock")}
                  className="rounded-full p-0.5 text-muted hover:text-danger transition"
                >
                  <X className="w-3 h-3" />
                </button>
              </span>
            ))}
          </div>
          <p className="text-[11px] text-muted mt-2">{t("channels.blocked.hint")}</p>
        </div>
      )}
    </div>
    </>
  );
}

function Stat({
  label,
  value,
  hint,
}: {
  label: string;
  value: string | number;
  hint?: string;
}) {
  return (
    <Tooltip hint={hint ?? ""}>
      <span className={hint ? "cursor-help" : ""}>
        <span className="text-fg font-semibold">{value}</span> {label}
      </span>
    </Tooltip>
  );
}

function SyncBadge({ ok, label, hint }: { ok: boolean; label: string; hint?: string }) {
  return (
    <Tooltip hint={hint ?? ""}>
      <span
        className={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full border ${
          ok ? "border-accent/40 text-accent" : "border-border text-muted"
        }`}
      >
        {ok && <Check className="w-3 h-3" />}
        {label}
      </span>
    </Tooltip>
  );
}

function PriorityCell({ c, onPriority }: { c: ManagedChannel; onPriority: (delta: number) => void }) {
  const { t } = useTranslation();
  return (
    <Tooltip hint={t("channels.row.priorityHint")}>
      <div className="inline-flex flex-col items-center cursor-help">
        <button onClick={() => onPriority(1)} className="text-muted hover:text-accent" aria-label={t("channels.row.raisePriority")}>
          <ArrowUp className="w-3.5 h-3.5" />
        </button>
        <span className="text-xs text-muted tabular-nums">{c.priority}</span>
        <button onClick={() => onPriority(-1)} className="text-muted hover:text-accent" aria-label={t("channels.row.lowerPriority")}>
          <ArrowDown className="w-3.5 h-3.5" />
        </button>
      </div>
    </Tooltip>
  );
}


// Status only — the backfill *action* lives in the Actions column. When both recent and
// full history are in, collapse to a single "fully synced" chip; otherwise show what's
// present plus the missing/queued state.
function SyncCell({ c }: { c: ManagedChannel }) {
  const { t } = useTranslation();
  if (c.recent_synced && c.backfill_done) {
    return <SyncBadge ok label={t("channels.row.fullySynced")} hint={t("channels.row.fullySyncedHint")} />;
  }
  return (
    <div className="flex flex-wrap items-center gap-1">
      <SyncBadge
        ok={c.recent_synced}
        label={t("channels.row.recent")}
        hint={c.recent_synced ? t("channels.row.recentSyncedHint") : t("channels.row.recentNotSyncedHint")}
      />
      {c.backfill_done ? (
        <SyncBadge ok label={t("channels.row.full")} hint={t("channels.row.fullHint")} />
      ) : c.deep_requested ? (
        <SyncBadge ok={false} label={t("channels.row.fullHistoryQueued")} hint={t("channels.row.queuedRequestedHint")} />
      ) : c.deep_in_queue ? (
        <SyncBadge ok={false} label={t("channels.row.fullHistoryComing")} hint={t("channels.row.queuedByOtherHint")} />
      ) : (
        <SyncBadge ok={false} label={t("channels.row.full")} hint={t("channels.row.fullNotFetchedHint")} />
      )}
    </div>
  );
}

function TagsCell({
  c,
  userTags,
  onToggleTag,
  onTagClick,
}: {
  c: ManagedChannel;
  userTags: Tag[];
  onToggleTag: (tagId: number) => void;
  onTagClick: (tagId: number, name: string) => void;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  // Open the picker upward when there isn't room below (rows near the viewport bottom would
  // otherwise clip it against the scroll container), as long as there's room above.
  const [openUp, setOpenUp] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);
  const btnRef = useRef<HTMLButtonElement | null>(null);
  useDismiss(open, () => setOpen(false), ref);
  const toggle = () => {
    if (!open) {
      const r = btnRef.current?.getBoundingClientRect();
      const est = Math.min(userTags.length * 30 + 12, 264); // matches the max-height cap below
      setOpenUp(!!r && r.bottom + est > window.innerHeight - 8 && r.top - est > 8);
    }
    setOpen((o) => !o);
  };
  if (userTags.length === 0) return null;
  // Show only the tags actually attached to this channel; the “+” opens a per-channel
  // picker to attach/detach (kept the convenient "kirakás" without listing every tag
  // on every row). Tag create/delete still lives in the top "YOUR TAGS" row.
  const attached = userTags.filter((tg) => c.tag_ids.includes(tg.id));
  return (
    <div ref={ref} className="relative flex flex-wrap items-center gap-1 min-w-[160px]">
      {attached.map((tg) => (
        <button
          key={tg.id}
          onClick={() => onTagClick(tg.id, tg.name)}
          title={t("channels.row.filterFeedByTag", { name: tg.name })}
          className="text-[10px] px-1.5 py-0.5 rounded-full bg-accent text-accent-fg border border-accent hover:opacity-80 transition"
        >
          {tg.name}
        </button>
      ))}
      <button
        ref={btnRef}
        onClick={toggle}
        title={t("channels.row.editTags")}
        aria-label={t("channels.row.editTags")}
        className="w-5 h-5 inline-flex items-center justify-center rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
      >
        <Plus className="w-3 h-3" />
      </button>
      {open && (
        <div
          className={`glass-menu absolute left-0 z-30 w-44 max-h-[264px] overflow-y-auto rounded-xl p-1.5 animate-[popIn_0.16s_ease] ${
            openUp ? "bottom-full mb-1" : "top-full mt-1"
          }`}
        >
          {userTags.map((tg) => {
            const on = c.tag_ids.includes(tg.id);
            return (
              <button
                key={tg.id}
                onClick={() => onToggleTag(tg.id)}
                className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md transition ${
                  on ? "text-fg" : "text-muted hover:bg-card"
                }`}
              >
                <span
                  className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
                    on ? "bg-accent border-accent text-accent-fg" : "border-border"
                  }`}
                >
                  {on && <Check className="w-2.5 h-2.5" />}
                </span>
                {tg.name}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function ActionsCell({
  c,
  isAdmin,
  canWrite,
  onHide,
  onDeep,
  onReset,
  onUnsubscribe,
}: {
  c: ManagedChannel;
  isAdmin: boolean;
  canWrite: boolean;
  onHide: () => void;
  onDeep: () => void;
  onReset: () => void;
  onUnsubscribe: () => void;
}) {
  const { t } = useTranslation();
  // Admins get a "reset" trigger that re-fetches the channel from scratch regardless of
  // state — always actionable. Regular users get the per-user "request full history" opt-in,
  // which only applies until the back-catalog is in (or already coming for everyone).
  const done = c.backfill_done;
  const requested = !done && c.deep_requested;
  const optInActionable = !done && !c.deep_in_queue;
  const backfillHint = isAdmin
    ? t("channels.row.resetHint")
    : c.deep_in_queue
      ? t("channels.row.queuedByOtherHint")
      : requested
        ? t("channels.row.queuedRequestedHint")
        : done
          ? t("channels.row.fullHint")
          : t("channels.row.backfillThisHint");
  const enabled = isAdmin || optInActionable;
  return (
    <div className="inline-flex items-center gap-2">
      <Tooltip hint={backfillHint}>
        <button
          onClick={!enabled ? undefined : isAdmin ? onReset : onDeep}
          disabled={!enabled}
          className={`shrink-0 transition ${
            requested
              ? "text-accent"
              : enabled
                ? "text-muted hover:text-fg"
                : "text-muted/40 cursor-default"
          }`}
          aria-label={isAdmin ? t("channels.row.resetBackfill") : t("channels.row.backfillThis")}
        >
          <History className="w-4 h-4" />
        </button>
      </Tooltip>
      <Tooltip hint={c.hidden ? t("channels.row.hiddenHint") : t("channels.row.hideHint")}>
        <button onClick={onHide} className="text-muted hover:text-fg shrink-0" aria-label={c.hidden ? t("channels.row.unhide") : t("channels.row.hideFromFeed")}>
          {c.hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
        </button>
      </Tooltip>
      {canWrite && (
        <Tooltip hint={t("channels.row.unsubscribeHint")}>
          <button
            onClick={onUnsubscribe}
            className="text-muted hover:text-red-400 shrink-0"
            aria-label={t("channels.row.unsubscribeOnYoutube")}
          >
            <UserMinus className="w-4 h-4" />
          </button>
        </Tooltip>
      )}
    </div>
  );
}