import { RouteManager } from './RouteManager';

interface Group {
  id: string;
  name: string;
  platform: string;
}

interface Route {
  id: string;
  sourceGroupId: string;
  targetGroupId: string;
  sourceGroup: { name: string };
  targetGroup: { name: string };
}

async function fetchJson<T>(url: string): Promise<T | null> {
  try {
    const res = await fetch(url, { cache: 'no-store' });
    if (!res.ok) return null;
    return res.json();
  } catch {
    return null;
  }
}

export default async function GroupsPage() {
  const apiUrl = process.env.API_URL ?? 'http://localhost:3001';
  const [groups, routes] = await Promise.all([
    fetchJson<Group[]>(`${apiUrl}/groups`),
    fetchJson<Route[]>(`${apiUrl}/routes`),
  ]);

  return (
    <div className="max-w-2xl">
      <h1 className="text-xl font-semibold mb-6">Groups &amp; Routes</h1>
      <RouteManager groups={groups ?? []} initialRoutes={routes ?? []} />
    </div>
  );
}