import Link from "next/link";
import type { Metadata } from "next";
import {
  getHomepageItems,
  getPartnersSectionContent,
} from "@/app/lib/content";
import {
  createHomepageItem,
  deleteHomepageItem,
  updateHomepageItem,
  updatePartnersSectionSettings,
} from "@/app/actions/homepage";
import { PageHeader } from "@/app/admin/_components/ui";
import {
  SettingsSaveForm,
  TextInput,
} from "@/app/admin/_components/HomepageForms";
import HomepageItemForm from "@/app/admin/_components/HomepageItemForm";

export const metadata: Metadata = { title: "Partners settings" };

export default async function PartnersSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ edit?: string }>;
}) {
  const params = await searchParams;
  const [section, partners] = await Promise.all([
    getPartnersSectionContent(),
    getHomepageItems("partner"),
  ]);
  const editing = partners.find((item) => item.id === params.edit);
  const createAction = createHomepageItem.bind(null, "partner");
  const updateAction = editing
    ? updateHomepageItem.bind(null, editing.id, "partner")
    : null;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Partners section"
        description="Edit the partners label and logo cards."
        action={
          <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
            ← Back
          </Link>
        }
      />

      <SettingsSaveForm action={updatePartnersSectionSettings}>
        <TextInput
          label="Section label"
          name="partners_label"
          defaultValue={section.label}
        />
      </SettingsSaveForm>

      <section className="space-y-4">
        <h2 className="text-base font-semibold">Partner logos</h2>
        <HomepageItemForm
          key={editing?.id ?? "new-partner"}
          action={updateAction ?? createAction}
          submitLabel={editing ? "Save partner" : "Add partner"}
          initial={editing ?? undefined}
        />
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {partners.map((partner) => {
              const deleteAction = deleteHomepageItem.bind(
                null,
                partner.id,
                "partner",
              );
              return (
                <li
                  key={partner.id}
                  className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="flex items-center gap-3">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={partner.imageUrl}
                      alt={partner.altText || partner.label}
                      className="h-12 w-20 rounded-lg object-contain bg-white"
                    />
                    <div>
                      <p className="font-medium">{partner.label}</p>
                      <p className="text-xs text-[#7a88ad]">
                        Order {partner.sortOrder} ·{" "}
                        {partner.published ? "Visible" : "Hidden"}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <Link
                      href={`/admin/homepage/partners?edit=${partner.id}`}
                      className="text-sm font-semibold text-[#1f3fb8]"
                    >
                      Edit
                    </Link>
                    <form action={deleteAction}>
                      <button type="submit" className="text-sm font-semibold text-red-600">
                        Delete
                      </button>
                    </form>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </section>
    </div>
  );
}
