import Link from "next/link";
import type { Metadata } from "next";
import {
  getHeroContent,
  getHomepageItems,
} from "@/app/lib/content";
import {
  createHomepageItem,
  deleteHomepageItem,
  updateHeroSettings,
  updateHomepageItem,
} 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: "Hero settings" };

export default async function HeroSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ edit?: string }>;
}) {
  const params = await searchParams;
  const [hero, slides] = await Promise.all([
    getHeroContent(),
    getHomepageItems("hero_slide"),
  ]);
  const editing = slides.find((slide) => slide.id === params.edit);
  const createAction = createHomepageItem.bind(null, "hero_slide");
  const updateAction = editing
    ? updateHomepageItem.bind(null, editing.id, "hero_slide")
    : null;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Hero section"
        description="Edit hero copy, CTA, and carousel slides."
        action={
          <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
            ← Back
          </Link>
        }
      />

      <SettingsSaveForm action={updateHeroSettings}>
        <TextInput label="Heading" name="hero_heading" defaultValue={hero.heading} />
        <TextInput
          label="Description"
          name="hero_description"
          defaultValue={hero.description}
          rows={3}
        />
        <TextInput label="CTA text" name="hero_cta_text" defaultValue={hero.ctaText} />
        <TextInput label="CTA link" name="hero_cta_href" defaultValue={hero.ctaHref} />
      </SettingsSaveForm>

      <section className="space-y-4">
        <div className="flex items-center justify-between gap-3">
          <h2 className="text-base font-semibold">Carousel slides</h2>
          {editing ? (
            <Link href="/admin/homepage/hero" className="text-sm font-semibold text-[#1f3fb8]">
              Add new instead
            </Link>
          ) : null}
        </div>

        <HomepageItemForm
          key={editing?.id ?? "new-slide"}
          action={updateAction ?? createAction}
          submitLabel={editing ? "Save slide" : "Add slide"}
          initial={editing ?? undefined}
        />

        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {slides.map((slide) => {
              const deleteAction = deleteHomepageItem.bind(
                null,
                slide.id,
                "hero_slide",
              );
              return (
                <li
                  key={slide.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={slide.imageUrl || "/vido_galary/futureleaders.jpg"}
                      alt={slide.altText || slide.label}
                      className="h-14 w-20 rounded-lg object-cover"
                    />
                    <div>
                      <p className="font-medium">{slide.label || slide.altText}</p>
                      <p className="text-xs text-[#7a88ad]">Order {slide.sortOrder}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-xs text-[#7a88ad]">
                      {slide.published ? "Visible" : "Hidden"}
                    </span>
                    <Link
                      href={`/admin/homepage/hero?edit=${slide.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>
  );
}
