import type { Metadata } from 'next'
import { Lightbulb } 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: 'Ideen' }

export default async function IdeenSeite() {
  await verlangeAnmeldung('/ideen')

  const [ideen, bereiche, projekte] = await Promise.all([
    aufgabenLaden({ typ: 'IDEE', nurOffen: 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">
          <Lightbulb className="size-6" aria-hidden />
          Ideen
        </h1>
        <p className="text-gedaempft-vordergrund mt-1 text-sm">
          Was irgendwann einmal lohnen könnte. Ideen haben bewusst keinen Termin und
          drängen sich nicht in die Aufgabenliste — bis du eine übernimmst.
        </p>
      </header>

      <Card>
        <CardKopf>
          <CardTitel className="text-base">Idee notieren</CardTitel>
          <CardBeschreibung>
            Festhalten, bevor sie weg ist. Bewerten kannst du später.
          </CardBeschreibung>
        </CardKopf>
        <CardInhalt>
          <Schnellerfassung typ="IDEE" />
        </CardInhalt>
      </Card>

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

        <AufgabenListe
          aufgaben={ideen}
          bereiche={bereiche}
          projekte={projekte}
          mitUebernehmen
          leerText="Noch keine Idee notiert."
        />
      </section>
    </div>
  )
}