import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { asStringArray } from "@/lib/json-array";
import { BackLink } from "@/components/back-link";
import { Button } from "@/components/ui";
import { AdminImageField } from "@/components/admin-image-field";
import {
  AdminField,
  AdminFieldset,
  AdminFormPanel,
  AdminHint,
  AdminSwitch,
  AdminTextarea,
} from "@/components/admin-form";
import { updateHarvestAction, toggleHarvestPublishedAction } from "../../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminHarvestEditPage(props: PageProps<"/admin/ernten/[id]">) {
  const t = getDictionary(await getLocale());
  const th = t.adminHarvestEditPage;
  const { id } = await props.params;
  const rawHarvest = await prisma.harvest.findUnique({ where: { id } });
  if (!rawHarvest) notFound();
  const harvest = { ...rawHarvest, images: asStringArray(rawHarvest.images) };

  const harvestDateValue = harvest.harvestDate.toISOString().slice(0, 10);

  return (
    <div className="max-w-2xl">
      <BackLink href="/admin/ernten" label={th.backToHarvests} />
      <h1 className="text-2xl text-heading mb-8">{th.title}</h1>

      {harvest.isPublished ? null : (
        <div className="mb-6 flex flex-col justify-between gap-3 border border-honey/40 bg-honey/5 px-4 py-3 sm:flex-row sm:items-center">
          <p className="text-sm text-honey-dark">{th.draftNotice}</p>
          <form action={toggleHarvestPublishedAction}>
            <input type="hidden" name="id" value={harvest.id} />
            <input type="hidden" name="isPublished" value="on" />
            <Button type="submit" className="whitespace-nowrap px-5 py-2.5">
              {th.publishNow}
            </Button>
          </form>
        </div>
      )}

      <AdminFormPanel action={updateHarvestAction} actions={<Button type="submit">{th.save}</Button>}>
        <input type="hidden" name="id" value={harvest.id} />
        <AdminFieldset legend={th.sectionDetails}>
          <div className="grid grid-cols-2 items-end gap-4">
            <AdminField name="type" label={th.typeLabel} defaultValue={harvest.type} required />
            <AdminField name="year" label={th.yearLabel} type="number" defaultValue={String(harvest.year)} required />
          </div>
          <div className="grid items-end gap-4 sm:grid-cols-2">
            <AdminField
              name="harvestDate"
              label={th.harvestDateLabel}
              type="date"
              defaultValue={harvestDateValue}
              required
            />
            <AdminField name="location" label={th.locationLabel} defaultValue={harvest.location} />
          </div>
          <AdminTextarea
            name="description"
            label={th.descriptionLabel}
            defaultValue={harvest.description}
            rows={4}
            required
          />
        </AdminFieldset>

        {/* Siehe Kommentar im Chargen-Formular: zwei benannte Slots statt
            einer Liste, damit sich das zweite Bild auch ohne erstes setzen
            laesst. Slot 1 erscheint zusaetzlich auf /ernten und der
            Ernten-Detailseite. */}
        <AdminFieldset legend={th.imagesLabel}>
          <AdminImageField name="images" label={th.image1Label} initialValue={harvest.images[0] ?? ""} />
          <AdminImageField name="images" label={th.image2Label} initialValue={harvest.images[1] ?? ""} />
        </AdminFieldset>

        <AdminFieldset legend={th.sectionVisibility} last>
          <AdminSwitch name="isPublished" label={th.isPublishedLabel} defaultChecked={harvest.isPublished} />
          <AdminHint>{th.isPublishedHint}</AdminHint>
        </AdminFieldset>
      </AdminFormPanel>
    </div>
  );
}