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

import Link from 'next/link';
import {
  createRadioBanner,
  deleteRadioBanner,
  updateRadioBanner,
} from '@/actions/admin-radio-extra';
import { prisma } from '@/lib/prisma';
import { StatusCard } from '@/components/admin/dashboard';
import NextImage from 'next/image';
import { Image as LucideImage } from 'lucide-react';
import { getTranslations } from "next-intl/server";

export const dynamic = 'force-dynamic';

type Banner = {
  id: bigint;
  userId: bigint;
  imagePath: string;
  title: string | null;
  description: string | null;
  sortOrder: number;
  isActive: boolean;
  createdAt: Date | null;
};

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

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

  let banners: Banner[] = [];
  let dbError = false;

  try {
    banners = await prisma.radioBanners.findMany({
      select: {
        id: true,
        userId: true,
        imagePath: true,
        title: true,
        description: true,
        sortOrder: true,
        isActive: true,
        createdAt: true,
      },
      orderBy: [{ sortOrder: 'asc' }, { id: 'asc' }],
    });
  } catch {
    dbError = true;
    banners = [];
  }

  const activeCount = banners.filter((b) => b.isActive).length;
  const hiddenCount = banners.length - activeCount;

  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>

      <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">
          <LucideImage size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("banners.heading")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("banners.description")}</p>
        </div>
      </div>

      {dbError ? (
        <div className="admin-card mb-6">
          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
            {t("banners.dbError")}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
          <StatusCard label={t("banners.title")} value={banners.length} icon="\u{1F5BC}\uFE0F" />
          <StatusCard
            label={t("banners.statusActive")}
            value={activeCount}
            state={activeCount > 0 ? 'ok' : 'neutral'}
            icon="\u{2705}"
          />
          <StatusCard
            label={t("banners.statusHidden")}
            value={hiddenCount}
            state={hiddenCount > 0 ? 'warn' : 'neutral'}
            icon="\u{1F6AB}"
          />
        </div>
      )}

      <section className="mt-6">
        <h2 className="admin-section-title">{t("banners.addBanner")}</h2>
        <form action={createRadioBanner} className="admin-card">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label htmlFor="new_imagePath" style={{ display: 'block', fontWeight: 700 }}>
                {t("banners.form.imagePath")}
              </label>
              <input
                id="new_imagePath"
                name="imagePath"
                placeholder={t("banners.form.imagePathPlaceholder")}
                required
                style={{ width: '100%' }}
              />
            </div>
            <div>
              <label htmlFor="new_title" style={{ display: 'block', fontWeight: 700 }}>
                {t("banners.form.title")}
              </label>
              <input id="new_title" name="title" style={{ width: '100%' }} />
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <label htmlFor="new_description" style={{ display: 'block', fontWeight: 700 }}>
                {t("banners.form.description")}
              </label>
              <textarea
                id="new_description"
                name="description"
                rows={2}
                style={{ width: '100%' }}
              />
            </div>
            <div>
              <label htmlFor="new_sortOrder" style={{ display: 'block', fontWeight: 700 }}>
                {t("banners.form.sortOrder")}
              </label>
              <input
                id="new_sortOrder"
                name="sortOrder"
                type="number"
                defaultValue={0}
                style={{ width: '100%' }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end' }}>
              <label style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}>
                <input type="checkbox" name="isActive" value="1" defaultChecked /> {t("banners.form.active")}
              </label>
            </div>
          </div>
          <div style={{ marginTop: '0.75rem' }}>
            <button type="submit" className="btn btn-primary">
              {t("banners.createBanner")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("banners.existing", { count: banners.length })}</h2>
        {banners.length === 0 ? (
          <div className="admin-empty">{t("banners.noBanners")}</div>
        ) : (
          <div className="grid">
            {banners.map((b) => (
              <div key={String(b.id)} className="admin-card">
                <div className="flex justify-between items-baseline gap-3">
                  <strong>#{String(b.id)}</strong>
                  <span className="text-sm text-gray-500 dark:text-gray-400 inline-flex gap-2 items-center">
                    {t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{' '}
                    <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
                      {b.isActive ? t("banners.active") : t("banners.hidden")}
                    </span>
                  </span>
                </div>

                {b.imagePath ? (
                  <NextImage
                    src={b.imagePath}
                    alt={b.title ?? t("banners.bannerAlt")}
                    width={800}
                    height={200}
                    className="article-img my-2"
                    unoptimized
                  />
                ) : null}

                <form action={updateRadioBanner}>
                  <input type="hidden" name="id" value={String(b.id)} />
                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                      <label
                        htmlFor={`img_${b.id}`}
                        style={{ display: 'block', fontWeight: 700 }}
                      >
                        {t("banners.form.imagePath")}
                      </label>
                      <input
                        id={`img_${b.id}`}
                        name="imagePath"
                        defaultValue={b.imagePath}
                        required
                        style={{ width: '100%' }}
                      />
                    </div>
                    <div>
                      <label
                        htmlFor={`title_${b.id}`}
                        style={{ display: 'block', fontWeight: 700 }}
                      >
                        {t("banners.form.title")}
                      </label>
                      <input
                        id={`title_${b.id}`}
                        name="title"
                        defaultValue={b.title ?? ''}
                        style={{ width: '100%' }}
                      />
                    </div>
                    <div style={{ gridColumn: '1 / -1' }}>
                      <label
                        htmlFor={`desc_${b.id}`}
                        style={{ display: 'block', fontWeight: 700 }}
                      >
                        {t("banners.form.description")}
                      </label>
                      <textarea
                        id={`desc_${b.id}`}
                        name="description"
                        rows={2}
                        defaultValue={b.description ?? ''}
                        style={{ width: '100%' }}
                      />
                    </div>
                    <div>
                      <label
                        htmlFor={`sort_${b.id}`}
                        style={{ display: 'block', fontWeight: 700 }}
                      >
                        {t("banners.form.sortOrder")}
                      </label>
                      <input
                        id={`sort_${b.id}`}
                        name="sortOrder"
                        type="number"
                        defaultValue={b.sortOrder}
                        style={{ width: '100%' }}
                      />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                      <label
                        style={{ display: 'inline-flex', gap: '0.4rem', alignItems: 'center' }}
                      >
                        <input
                          type="checkbox"
                          name="isActive"
                          value="1"
                          defaultChecked={b.isActive}
                        />{' '}
                        {t("banners.form.active")}
                      </label>
                    </div>
                  </div>
                  <div style={{ marginTop: '0.6rem' }}>
                    <button type="submit" className="btn btn-primary">
                      {t("banners.save")}
                    </button>
                  </div>
                </form>

                <form action={deleteRadioBanner} style={{ marginTop: '0.5rem' }}>
                  <input type="hidden" name="id" value={String(b.id)} />
                  <button type="submit" className="btn btn-danger">
                    {t("banners.delete")}
                  </button>
                </form>
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}