'use client';

import {useCallback, useEffect, useRef, useState} from 'react';
import {freshMarketDetail} from '@/lib/market-detail';
import type {WallexDetail, WallexSymbol} from '@/lib/wallex';

export function useWallexMarketDetail(symbol: WallexSymbol) {
  const [data, setData] = useState<WallexDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [now, setNow] = useState(() => Date.now());
  const request = useRef<AbortController | null>(null);

  const refresh = useCallback(async () => {
    if (request.current) return;
    const controller = new AbortController();
    request.current = controller;
    setLoading(true);
    try {
      const response = await fetch(`/api/markets/wallex?symbol=${symbol}`, {cache: 'no-store', signal: controller.signal});
      if (!response.ok) throw new Error('unavailable');
      const result = await response.json() as WallexDetail;
      if (result.symbol !== symbol || !Array.isArray(result.asks) || !Array.isArray(result.bids) || !Array.isArray(result.candles)) throw new Error('invalid-market');
      if (!controller.signal.aborted) setData(result);
    } catch {
      if (!controller.signal.aborted) setData(null);
    } finally {
      if (request.current === controller) {
        request.current = null;
        setLoading(false);
        setNow(Date.now());
      }
    }
  }, [symbol]);

  useEffect(() => {
    const update = () => {if (!document.hidden) void refresh();};
    update();
    const timer = setInterval(update, 60_000);
    const clock = setInterval(() => setNow(Date.now()), 10_000);
    document.addEventListener('visibilitychange', update);
    return () => {
      const controller = request.current;
      request.current = null;
      controller?.abort();
      clearInterval(timer);
      clearInterval(clock);
      document.removeEventListener('visibilitychange', update);
    };
  }, [refresh]);

  return {detail: freshMarketDetail(data, symbol, now), loading, now, refresh};
}