import { useEffect, useState, useCallback } from "react";
import { BUILTIN_SITES, type SiteConfig } from "./sites";

const KEY = "grabber.sites.v1";

export function useSites() {
  const [custom, setCustom] = useState<SiteConfig[]>([]);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    try {
      const raw = localStorage.getItem(KEY);
      if (raw) setCustom(JSON.parse(raw) as SiteConfig[]);
    } catch {
      // ignore
    }
    setHydrated(true);
  }, []);

  const persist = useCallback((list: SiteConfig[]) => {
    setCustom(list);
    try {
      localStorage.setItem(KEY, JSON.stringify(list));
    } catch {
      // ignore
    }
  }, []);

  const addSite = useCallback(
    (site: SiteConfig) => {
      persist([...custom.filter((s) => s.id !== site.id), site]);
    },
    [custom, persist],
  );

  const removeSite = useCallback(
    (id: string) => {
      persist(custom.filter((s) => s.id !== id));
    },
    [custom, persist],
  );

  const all = [...BUILTIN_SITES, ...custom];

  return { sites: all, custom, addSite, removeSite, hydrated };
}