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';
import { getTranslations } from "next-intl/server";

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

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

  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">{t("title")}</Link> ·{' '}
        <Link href="/admin/radio/moderation">{t("moderation")}</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>

      <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)]">{t("moderationPage.title")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("moderationPage.subtitle")}</p>
        </div>
      </div>

      <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}" />
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("moderationPage.recentShouts", { count: shouts.length })}</h2>
        {shouts.length === 0 ? (
          <div className="admin-empty">{t("noShouts")}</div>
        ) : (
          <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>{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">
                        {t("deleteShout")}
                      </button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}