import { AppShell } from "@/components/app-shell"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { translator } from "@/lib/i18n"
import { knownYears, listHolidays } from "@/lib/services/holidays"
import { requireAtLeast } from "@/lib/services/session"
import { ImportForm } from "./import-form"
import { YearCalendar } from "./year-calendar"
import { YearSelect } from "./year-select"

/**
 * The days the factory is shut, and the file that says so.
 *
 * The third input to every date `lib/calendar.ts` computes. While this is empty
 * every fixed-day duty lands on the day it was asked for, holiday or not, which
 * is what the empty state says rather than leaving a blank card.
 *
 * The days are listed newest year first because the year somebody is looking
 * for is almost always the one just loaded or the one running.
 */
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  const user = await requireAtLeast("admin")
  const params = await searchParams
  const years = await knownYears()

  const asked = typeof params.year === "string" ? Number(params.year) : NaN
  const year = years.some((y) => y.year === asked) ? asked : years[0]?.year
  const days = year ? await listHolidays(year) : []
  const t = translator(user.language)

  return (
    <AppShell title="holidays.title" user={user}>
      <div className="flex flex-col gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-center">
              {t("holidays.import")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ImportForm />
          </CardContent>
        </Card>

        {years.length === 0 ? (
          <Card>
            <CardContent>
              <p className="max-w-prose text-foreground/80">
                {t("holidays.empty")}
              </p>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardHeader>
              {/*
                The year is a control and not a heading. Every year ever loaded
                stays, because a report about last year has to say which days
                the factory was shut when that work was due.
              */}
              {/*
                The title centred over the year it labels, and the year picker
                beside it. The count of days that used to sit here said nothing
                anybody needed: the calendar below shows them.
              */}
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="w-40" aria-hidden />
                <CardTitle className="text-center">
                  {t("holidays.title")}
                </CardTitle>
                <YearSelect years={years} current={year!} />
              </div>
            </CardHeader>
            <CardContent>
              <YearCalendar year={year!} holidays={days} />
            </CardContent>
          </Card>
        )}
      </div>
    </AppShell>
  )
}