Epicnabbo-Catalogus-Updated-Daily/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';

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', ' ') : '—';
}

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

// Map an application status to an ok/danger/neutral pill tone.
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() {
  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="muted" style={{ marginBottom: '0.5rem' }}>
        <Link href="/admin/radio">Radio</Link> ·{' '}
        <Link href="/admin/radio/settings">Settings</Link> ·{' '}
        <Link href="/admin/radio/banners">Banners</Link> ·{' '}
        <Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
        <Link href="/admin/radio/history">History</Link>
      </nav>

      <h1>Radio Moderation</h1>
      <p className="muted" style={{ marginTop: '-0.4rem' }}>
        Latest shouts, DJ applications and on-air schedules (25 most recent of each).
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
        <StatusCard
          label="Pending applications"
          value={pendingApps}
          state={pendingApps > 0 ? 'warn' : 'ok'}
          icon="📝"
        />
        <StatusCard label="Schedules" value={schedules.length} icon="🗓️" />
        <StatusCard
          label="Active schedules"
          value={activeSchedules}
          state={activeSchedules > 0 ? 'ok' : 'neutral'}
          icon="🎙️"
        />
      </div>

      <section className="mt-6">
        <h2>Recent Shouts ({shouts.length})</h2>
        {shouts.length === 0 ? (
          <p className="muted">No shouts to moderate.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>User</th>
                <th>Message</th>
                <th>Posted</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {shouts.map((s) => (
                <tr key={String(s.id)}>
                  <td>{String(s.id)}</td>
                  <td>{String(s.userId)}</td>
                  <td>{s.message}</td>
                  <td className="muted">{formatDate(s.createdAt)}</td>
                  <td>
                    <form action={deleteShout}>
                      <input type="hidden" name="id" value={String(s.id)} />
                      <button type="submit" className="btn btn-danger">
                        Delete
                      </button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      <section className="mt-6">
        <h2>DJ Applications ({applications.length})</h2>
        {applications.length === 0 ? (
          <p className="muted">No applications submitted.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>User</th>
                <th>Real Name</th>
                <th>Age</th>
                <th>Style</th>
                <th>Discord</th>
                <th>Status</th>
                <th>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 ?? '—'}</td>
                  <td>{a.discordUsername ?? '—'}</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="muted">{formatDate(a.createdAt)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      <section className="mt-6">
        <h2>Schedules ({schedules.length})</h2>
        {schedules.length === 0 ? (
          <p className="muted">No schedules configured.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>User</th>
                <th>Day</th>
                <th>Start</th>
                <th>End</th>
                <th>Show</th>
                <th>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 ?? '—'}</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 ? 'active' : 'inactive'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}