import { fetchJson } from '@/lib/utils/server';
import type { BannerActiveListResponse, BannerItem } from '@/types/response/banner/active-list';
import type { LiveChannelListResponse } from '@/types/response/channel/live-list';
import HomeBannerCarousel from './_components/HomeBannerCarousel';
import LiveChannelGrid from './_components/LiveChannelGrid';
import LiveChannelEmpty from './_components/LiveChannelEmpty';
import './_components/home.scss';

const BANNER_POSITION_CODE = 'main-top';
const LIVE_PAGE_SIZE = 24;

async function loadActiveBanners(): Promise<BannerItem[]> {
	const res = await fetchJson<BannerActiveListResponse>('/api/banner/items', {
		method: 'POST',
		body: JSON.stringify({ code: BANNER_POSITION_CODE, onlyActive: true })
	});

	if (!res.success || !res.data) {
		return [];
	}

	return res.data.list.filter(b => b.desktopImage !== null || b.mobileImage !== null);
}

async function loadLiveChannels(): Promise<{ channels: LiveChannelListResponse['channels']; total: number }> {
	const res = await fetchJson<LiveChannelListResponse>(`/api/channel/live-list?limit=${LIVE_PAGE_SIZE}&offset=0`, { method: 'GET' });

	if (!res.success || !res.data) {
		return { channels: [], total: 0 };
	}

	return { channels: res.data.channels, total: res.data.total };
}

export default async function Home() {
	const [banners, live] = await Promise.all([
		loadActiveBanners(),
		loadLiveChannels()
	]);

	return (
		<div className="home">
			<div className="home__inner">
				<HomeBannerCarousel items={banners} />

				{live.channels.length === 0 ? (
					<LiveChannelEmpty />
				) : (
					<LiveChannelGrid
						initialChannels={live.channels}
						initialTotal={live.total}
						pageSize={LIVE_PAGE_SIZE}
					/>
				)}
			</div>
		</div>
	);
}