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

export default async function FooterSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ edit?: string }>;
}) {
  const params = await searchParams;
  const [footer, programs] = await Promise.all([
    getFooterContent(),
    getHomepageItems("footer_program"),
  ]);
  const editing = programs.find((item) => item.id === params.edit);
  const createAction = createHomepageItem.bind(null, "footer_program");
  const updateAction = editing
    ? updateHomepageItem.bind(null, editing.id, "footer_program")
    : null;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Footer"
        description="Edit footer contact details and program list."
        action={
          <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
            ← Back
          </Link>
        }
      />

      <SettingsSaveForm action={updateFooterSettings}>
        <TextInput label="School name" name="footer_title" defaultValue={footer.title} />
        <TextInput
          label="Description"
          name="footer_description"
          defaultValue={footer.description}
          rows={3}
        />
        <TextInput
          label="Address / hours"
          name="footer_address"
          defaultValue={footer.address}
          rows={3}
        />
        <TextInput label="Phone" name="footer_phone" defaultValue={footer.phone} />
        <TextInput label="Email" name="footer_email" defaultValue={footer.email} />
        <TextInput
          label="Programs heading"
          name="footer_programs_heading"
          defaultValue={footer.programsHeading}
        />
        <TextInput
          label="Contact heading"
          name="footer_contact_heading"
          defaultValue={footer.contactHeading}
        />
      </SettingsSaveForm>

      <section className="space-y-4">
        <h2 className="text-base font-semibold">Footer program links</h2>
        <HomepageItemForm
          key={editing?.id ?? "new-footer-program"}
          action={updateAction ?? createAction}
          submitLabel={editing ? "Save item" : "Add item"}
          initial={editing ?? undefined}
          showImage={false}
        />
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {programs.map((item) => {
              const deleteAction = deleteHomepageItem.bind(
                null,
                item.id,
                "footer_program",
              );
              return (
                <li
                  key={item.id}
                  className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div>
                    <p className="font-medium">{item.label}</p>
                    <p className="text-xs text-[#7a88ad]">
                      Order {item.sortOrder} ·{" "}
                      {item.published ? "Visible" : "Hidden"}
                    </p>
                  </div>
                  <div className="flex items-center gap-3">
                    <Link
                      href={`/admin/homepage/footer?edit=${item.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>
  );
}
