EpicNext-Cms/src/app/admin/radio/page.tsx

import Link from 'next/link';
import { prisma } from '@/lib/prisma';
import { deleteShout } from '@/actions/admin-radio';
import { StatusCard } from '@/components/admin/dashboard';
import { getTranslations } from "next-intl/server";

export const dynamic = 'force-dynamic';

type Shout = {
  id: bigint;
  userId: bigint;
  message: string;
  createdAt: Date | null;
};

type Application = {
  id: bigint;
  userId: bigint;
  realName: string;
  age: number;
  status: string;
  musicStyle: string | null;
  discordUsername: string | null;
  createdAt: Date | null;
};

type Schedule = {
  id: bigint;
  userId: bigint;
  day: string;
  startTime: Date;
  endTime: Date;
  showName: string | null;
  isActive: boolean;
};

function formatDate(d: Date | null): string {
  return d ? d.toISOString().slice(0, 16).replace('T', ' ') : '\u2014';
}

function formatTime(d: Date | null): string {
  return d ? d.toISOString().slice(11, 16) : '\u2014';
}

function statusBadgeClass(status: string): string {
  const s = status.toLowerCase();
  if (s === 'approved' || s === 'accepted') return 'ok';
  if (s === 'rejected' || s === 'denied') return 'danger';
  return '';
}

export default async function AdminRadioPage() {
  const t = await getTranslations("pages.admin.radio");

  let shouts: Shout[] = [];
  let applications: Application[] = [];
  let schedules: Schedule[] = [];

  try {
    shouts = await prisma.radioShouts.findMany({
      select: { id: true, userId: true, message: true, createdAt: true },
      orderBy: { id: 'desc' },
      take: 25,
    });
  } catch {
    shouts = [];
  }

  try {
    applications = await prisma.radioApplications.findMany({
      select: {
        id: true,
        userId: true,
        realName: true,
        age: true,
        status: true,
        musicStyle: true,
        discordUsername: true,
        createdAt: true,
      },
      orderBy: { id: 'desc' },
      take: 25,
    });
  } catch {
    applications = [];
  }

  try {
    schedules = await prisma.radioSchedules.findMany({
      select: {
        id: true,
        userId: true,
        day: true,
        startTime: true,
        endTime: true,
        showName: true,
        isActive: true,
      },
      orderBy: { id: 'desc' },
      take: 25,
    });
  } catch {
    schedules = [];
  }

  const pendingApps = applications.filter(
    (a) => a.status.toLowerCase() === 'pending',
  ).length;
  const activeSchedules = schedules.filter((sc) => sc.isActive).length;

  return (
    <main>
      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
        <Link href="/admin/radio">{t("title")}</Link> ·{' '}
        <Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
        <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
        <Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
        <Link href="/admin/radio/history">{t("history")}</Link>
      </nav>

      <h1>{t("title")}</h1>
      <p className="text-xs text-gray-500 dark:text-gray-400">
        {t("subtitle")}
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
        <StatusCard
          label={t("pendingApplications")}
          value={pendingApps}
          state={pendingApps > 0 ? 'warn' : 'ok'}
          icon="\u{1F4DD}"
        />
        <StatusCard label={t("schedules")} value={schedules.length} icon="\u{1F5D3}\uFE0F" />
        <StatusCard
          label={t("activeSchedules")}
          value={activeSchedules}
          state={activeSchedules > 0 ? 'ok' : 'neutral'}
          icon="\u{1F399}\uFE0F"
        />
      </div>

      <section className="mt-6">
        <h2>{t("shouts")} ({shouts.length})</h2>
        {shouts.length === 0 ? (
          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noShouts")}</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>{t("user")}</th>
                <th>{t("message")}</th>
                <th>{t("posted")}</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {shouts.map((s) => (
                <tr key={String(s.id)}>
                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{String(s.id)}</td>
                  <td>{String(s.userId)}</td>
                  <td>{s.message}</td>
                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(s.createdAt)}</td>
                  <td>
                    <form action={deleteShout}>
                      <input type="hidden" name="id" value={String(s.id)} />
                      <button type="submit" className="btn btn-danger">
                        {t("deleteShout")}
                      </button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      <section className="mt-6">
        <h2>{t("applications")} ({applications.length})</h2>
        {applications.length === 0 ? (
          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noApplications")}</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>{t("user")}</th>
                <th>{t("realName")}</th>
                <th>{t("age")}</th>
                <th>{t("style")}</th>
                <th>Discord</th>
                <th>{t("status")}</th>
                <th>{t("applied")}</th>
              </tr>
            </thead>
            <tbody>
              {applications.map((a) => (
                <tr key={String(a.id)}>
                  <td>{String(a.id)}</td>
                  <td>{String(a.userId)}</td>
                  <td>{a.realName}</td>
                  <td>{a.age}</td>
                  <td>{a.musicStyle ?? '\u2014'}</td>
                  <td>{a.discordUsername ?? '\u2014'}</td>
                  <td>
                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
                      {a.status}
                    </span>
                  </td>
                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(a.createdAt)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      <section className="mt-6">
        <h2>{t("schedules")} ({schedules.length})</h2>
        {schedules.length === 0 ? (
          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noSchedules")}</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>{t("user")}</th>
                <th>{t("day")}</th>
                <th>{t("start")}</th>
                <th>{t("end")}</th>
                <th>{t("show")}</th>
                <th>{t("active")}</th>
              </tr>
            </thead>
            <tbody>
              {schedules.map((sc) => (
                <tr key={String(sc.id)}>
                  <td>{String(sc.id)}</td>
                  <td>{String(sc.userId)}</td>
                  <td>{sc.day}</td>
                  <td>{formatTime(sc.startTime)}</td>
                  <td>{formatTime(sc.endTime)}</td>
                  <td>{sc.showName ?? '\u2014'}</td>
                  <td>
                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                      {sc.isActive ? t("active") : t("inactive")}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}