import { auth } from '@/lib/auth';
import { prisma } from '@/lib/db';
import { selectActiveMessage } from '@/lib/screen/viewmodel';

import MessageManager, { type MessageRow } from './MessageManager';

export const metadata = { title: 'Messages — ITA ITO' };

export default async function MessagesPage() {
  const [session, rows] = await Promise.all([
    auth(),
    prisma.message.findMany({ orderBy: [{ isActive: 'desc' }, { priority: 'desc' }, { createdAt: 'desc' }] }),
  ]);

  const now = new Date();

  // Which message the screen is actually showing, decided by the same function
  // the renderer uses — so the badge cannot drift from the panel.
  const live = selectActiveMessage(
    rows.map((row) => ({
      textFr: row.textFr,
      textEn: row.textEn,
      startsAt: row.startsAt,
      endsAt: row.endsAt,
      priority: row.priority,
      isActive: row.isActive,
    })),
    now,
  );

  const messages: MessageRow[] = rows.map((row) => ({
    id: row.id,
    textFr: row.textFr,
    textEn: row.textEn,
    translationStatus: row.translationStatus,
    startsAt: row.startsAt ? row.startsAt.toISOString().slice(0, 16).replace('T', ' ') : null,
    endsAt: row.endsAt ? row.endsAt.toISOString().slice(0, 16).replace('T', ' ') : null,
    priority: row.priority,
    isActive: row.isActive,
    isLive: live?.textFr === row.textFr && row.isActive,
  }));

  return (
    <main className="mx-auto max-w-3xl px-4 py-10">
      <h1 className="text-2xl">Messages</h1>
      <p className="mt-2 max-w-prose text-[var(--ink-muted)]">
        Le bandeau bas de l’écran. Saisi en français, traduit automatiquement en anglais. Un message
        libre prend la place du bandeau automatique « horaires exceptionnels ».
      </p>

      <MessageManager canEdit={session?.user?.role === 'admin'} messages={messages} />
    </main>
  );
}