import Link from 'next/link';
import { prisma } from '@/lib/prisma';
import { deleteShout } from '@/actions/admin-radio-moderation';
import { StatusCard } from '@/components/admin/dashboard';
import { Shield } from 'lucide-react';

export const dynamic = 'force-dynamic';

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

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

export default async function AdminRadioModerationPage() {
  let shouts: Shout[] = [];
  try {
    shouts = await prisma.radioShouts.findMany({
      select: {
        id: true,
        userId: true,
        message: true,
        createdAt: true,
        updatedAt: true,
      },
      orderBy: { id: 'desc' },
      take: 50,
    });
  } catch {
    shouts = [];
  }

  return (
    <main>
      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
        <Link href="/admin/radio">Radio</Link> ·{' '}
        <Link href="/admin/radio/moderation">Moderation</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>

      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Shield size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">DJ Moderation</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Review and remove radio shouts (50 most recent).</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">Recent Shouts ({shouts.length})</h2>
        {shouts.length === 0 ? (
          <div className="admin-empty">No shouts to moderate.</div>
        ) : (
          <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="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{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>
    </main>
  );
}