import { Suspense } from 'react';
import { CommandsManager } from '@/components/modules/commands-manager';
import { listGuildChannelsForDashboard, listGuildRolesForDashboard } from '@/lib/discord-guild-resources';
import { getLocale, t } from '@/lib/i18n';
import { getCommandGlobalRules } from '@/lib/module-configs/command-global-rules';
import { listCommandOverridesDashboard } from '@/lib/module-configs/commands';

interface CommandsPageProps {
  params: Promise<{ guildId: string }>;
}

export default async function CommandsPage({ params }: CommandsPageProps) {
  const { guildId } = await params;
  const [locale, commands, globalRules, channels, roles] = await Promise.all([
    getLocale(),
    listCommandOverridesDashboard(guildId),
    getCommandGlobalRules(guildId),
    listGuildChannelsForDashboard(guildId).catch(() => []),
    listGuildRolesForDashboard(guildId).catch(() => [])
  ]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">{t(locale, 'modulePages.commands.title')}</h1>
        <p className="text-sm text-muted-foreground">{t(locale, 'modulePages.commands.description')}</p>
      </div>
      <Suspense fallback={null}>
        <CommandsManager
          guildId={guildId}
          initialCommands={commands}
          initialGlobalRules={globalRules}
          channels={channels}
          roles={roles}
        />
      </Suspense>
    </div>
  );
}