import type { Metadata } from 'next'
import Link from 'next/link'
import { Inbox } from 'lucide-react'
import { Erfassung } from '@/app/(app)/erfassen/erfassung'
import { zaehlstaende } from '@/server/abfragen/aufgaben'
import { verlangeAnmeldung } from '@/server/berechtigung'

export const metadata: Metadata = { title: 'Erfassen' }

export default async function ErfassenSeite() {
  await verlangeAnmeldung('/erfassen')

  // Dieselbe Zaehlung wie in der Kopfleiste. Eine eigene Abfrage zaehlte
  // Ideen mit und widersprach dem Zaehler eine Zeile darueber.
  const { inbox } = await zaehlstaende()

  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Erfassen</h1>
        <p className="text-gedaempft-vordergrund text-sm">
          Alles landet in der Inbox und wird später einsortiert. Ohne Netz wird es
          gemerkt.
        </p>
      </div>

      <Erfassung />

      <Link
        href="/inbox"
        className="text-gedaempft-vordergrund hover:text-vordergrund flex items-center gap-2 text-sm"
      >
        <Inbox className="size-4" aria-hidden />
        {inbox === 0
          ? 'Inbox ist leer'
          : inbox === 1
            ? 'Eine Aufgabe in der Inbox'
            : `${inbox} Aufgaben in der Inbox`}
      </Link>
    </div>
  )
}