import type { Metadata } from 'next'
import { Inbox } from 'lucide-react'
import { AufgabenListe } from '@/components/aufgaben/aufgaben-liste'
import { Schnellerfassung } from '@/components/aufgaben/schnellerfassung'
import {
  Card,
  CardBeschreibung,
  CardInhalt,
  CardKopf,
  CardTitel,
} from '@/components/ui/card'
import {
  aufgabenLaden,
  bereicheLaden,
  projekteZurAuswahlLaden,
} from '@/server/abfragen/aufgaben'
import { verlangeAnmeldung } from '@/server/berechtigung'

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

export default async function InboxSeite() {
  await verlangeAnmeldung('/inbox')

  const [aufgaben, bereiche, projekte] = await Promise.all([
    aufgabenLaden({ nurInbox: true, nurOffen: true, ohneIdeen: true }),
    bereicheLaden(),
    projekteZurAuswahlLaden(),
  ])

  return (
    <div className="flex flex-col gap-6">
      <header>
        <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
          <Inbox className="size-6" aria-hidden />
          Inbox
        </h1>
        <p className="text-gedaempft-vordergrund mt-1 text-sm">
          Alles, was noch keinem Bereich zugeordnet ist. Erst erfassen, später
          einsortieren — Nachdenken beim Aufschreiben kostet nur Zeit.
        </p>
      </header>

      <Card>
        <CardKopf>
          <CardTitel className="text-base">Schnell erfassen</CardTitel>
          <CardBeschreibung>
            Ein Titel genügt. Bereich, Termin und Aufwand kommen beim Einsortieren.
          </CardBeschreibung>
        </CardKopf>
        <CardInhalt>
          <Schnellerfassung />
        </CardInhalt>
      </Card>

      <section className="flex flex-col gap-3">
        <h2 className="text-lg font-medium">
          Noch einzusortieren
          {aufgaben.length > 0 && (
            <span className="text-gedaempft-vordergrund ml-2 text-sm font-normal">
              {aufgaben.length}
            </span>
          )}
        </h2>

        <AufgabenListe
          aufgaben={aufgaben}
          bereiche={bereiche}
          projekte={projekte}
          mitEinsortieren
          leerText="Die Inbox ist leer. Alles einsortiert."
        />
      </section>
    </div>
  )
}