import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { qk } from "./queryKeys";
import { api, type ManagedChannel } from "./api";
import { LS, readAccount, writeAccount } from "./storage";

type Names = Record<string, string>;

const namesOf = (channels: ManagedChannel[]): Names =>
  Object.fromEntries(channels.map((c) => [c.id, c.title ?? c.id]));

const readNames = (): Names => {
  const raw = readAccount<unknown>(LS.channelNames, {});
  return raw && typeof raw === "object" && !Array.isArray(raw) ? (raw as Names) : {};
};

/**
 * Channel id → name, for the chips that name a channel filter (the filter panel's picker and the chip
 * row above the feed). The names come from the subscription list, which a reload has not fetched yet:
 * for a moment the chips read as raw UC… ids (the owner, 2026-10-03). The names seen last time are
 * kept per account and name the chips until the list lands; the list then wins and replaces the copy,
 * so a renamed or dropped channel heals on the next load.
 *
 * `pending` is true while the list loads: a channel this browser has never named then has no name to
 * show, and the chip draws a placeholder rather than its id. A failed list leaves the id (the chips
 * stay told apart, and each ✕ drops a different one).
 */
export function useChannelNames(enabled = true) {
  const query = useQuery({
    queryKey: qk.channels(),
    queryFn: api.channels,
    enabled,
    staleTime: 5 * 60_000,
  });
  const [remembered] = useState(readNames);
  useEffect(() => {
    if (query.data) writeAccount(LS.channelNames, namesOf(query.data));
  }, [query.data]);
  return {
    query,
    names: query.data ? namesOf(query.data) : remembered,
    pending: enabled && query.isPending,
  };
}