import { RouteManager } from './RouteManager';
import { GroupsTabs } from './GroupsTabs';
import { apiFetch } from '../_lib/api';

interface Group {
  id: string;
  name: string;
  platform: string;
  platformId: string;
  isActive: boolean;
  accountId: string | null;
  tenantId: string | null;
}

interface SharedGroup extends Group {
  sharedByTenantName: string;
}

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

type FetchResult<T> = { ok: true; data: T } | { ok: false; status: number; error: string };

async function fetchJson<T>(path: string): Promise<FetchResult<T>> {
  let res: Response;
  try {
    res = await apiFetch(path);
  } catch (err) {
    return { ok: false, status: 0, error: `API unreachable: ${(err as Error).message}` };
  }
  if (!res.ok) {
    const body = await res.text().catch(() => '');
    return { ok: false, status: res.status, error: body.slice(0, 200) || res.statusText };
  }
  return { ok: true, data: (await res.json()) as T };
}

export default async function GroupsPage({
  searchParams,
}: {
  searchParams: Promise<{ tab?: 'mine' | 'shared' }>;
}) {
  const { tab: rawTab } = await searchParams;
  const tab: 'mine' | 'shared' = rawTab === 'shared' ? 'shared' : 'mine';
  const [groupsR, sharedR, routesR] = await Promise.all([
    fetchJson<Group[]>('/groups'),
    tab === 'shared' ? fetchJson<SharedGroup[]>('/groups/shared') : Promise.resolve(null),
    fetchJson<Route[]>('/routes'),
  ]);

  const groups = groupsR?.ok ? groupsR.data : [];
  const shared = sharedR && sharedR.ok ? sharedR.data : [];
  const routes = routesR?.ok ? routesR.data : [];
  const errors = [groupsR, sharedR, routesR]
    .filter((r): r is { ok: false; status: number; error: string } => !!r && !r.ok && r.status !== 401)
    .map((e) => `${e.status === 0 ? 'API unreachable' : `API ${e.status}`}: ${e.error}`);

  return (
    <div className="max-w-3xl">
      <h1 className="text-xl font-semibold mb-6">Groups &amp; Routes</h1>
      {errors.length > 0 && (
        <div className="mb-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-800">
          <div className="font-medium mb-1">Failed to load some data</div>
          <ul className="list-disc pl-5 space-y-0.5">
            {errors.map((e) => <li key={e}>{e}</li>)}
          </ul>
        </div>
      )}
      <GroupsTabs current={tab} counts={{ mine: groups.length, shared: shared.length }} />
      {tab === 'shared' && (
        <div className="mt-4">
          <h2 className="text-sm font-medium mb-2">Shared with me</h2>
          <p className="text-xs text-gray-500 mb-3">
            Groups other tenants have shared with you. You can use them as TARGET groups in your routes.
          </p>
          {shared.length === 0 ? (
            <p className="text-sm text-gray-400 italic">No groups shared with you yet.</p>
          ) : (
            <ul className="space-y-2">
              {shared.map((g) => (
                <li key={g.id} className="border border-gray-200 rounded bg-white px-4 py-3 flex items-center justify-between">
                  <div>
                    <span className="text-sm font-medium">{g.name}</span>
                    {!g.isActive && <span className="ml-2 text-xs text-red-500 font-medium">(Bot removed)</span>}
                    <span className="text-xs text-gray-400 ml-2">shared by {g.sharedByTenantName}</span>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
      {tab === 'mine' && (
        <div className="mt-4">
          <RouteManager groups={groups} initialRoutes={routes} />
        </div>
      )}
    </div>
  );
}