import Link from "next/link";
import {
  getCmsPages,
  getAdminFaqs,
  getAdminAnnouncements,
  getAdminBanners,
  getAdminHomepageSections,
} from "@/lib/api/admin";
import { FaqManager } from "@/components/admin/faq-manager";
import { AnnouncementManager } from "@/components/admin/announcement-manager";
import { BannerManager } from "@/components/admin/banner-manager";
import { HomepageSectionManager } from "@/components/admin/homepage-section-manager";
import { ActionButton } from "@/components/admin/action-button";
import { formatDate } from "@/lib/format";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function AdminCmsPage() {
  const [pagesRes, faqsRes, announcementsRes, bannersRes, homepageSectionsRes] = await Promise.all([
    getCmsPages(),
    getAdminFaqs(),
    getAdminAnnouncements(),
    getAdminBanners(),
    getAdminHomepageSections(),
  ]);

  return (
    <div className="flex flex-col gap-10">
      <div>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold">Pages</h2>
          <Link
            href="/admin/cms/pages/new"
            className="rounded-full bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
          >
            + Add Page
          </Link>
        </div>
        <div className={cn("scroll-fade-x mt-3 overflow-x-auto", cardClasses())}>
          <table className="w-full text-left text-sm">
            <thead className="bg-kolabora-neutral-dark/5 text-xs uppercase text-kolabora-neutral-dark/70">
              <tr>
                <th className="px-4 py-2">Title</th>
                <th className="px-4 py-2">Slug</th>
                <th className="px-4 py-2">Status</th>
                <th className="px-4 py-2">Updated</th>
                <th className="px-4 py-2">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-kolabora-neutral-dark/10">
              {pagesRes.data.length === 0 && (
                <tr>
                  <td colSpan={5} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                    No pages yet.
                  </td>
                </tr>
              )}
              {pagesRes.data.map((page) => (
                <tr key={page.id}>
                  <td className="px-4 py-2 font-medium">{page.title}</td>
                  <td className="px-4 py-2 font-mono text-xs">/{page.slug}</td>
                  <td className="px-4 py-2">
                    <span
                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                        page.status === "published"
                          ? "bg-green-100 text-green-700"
                          : "bg-kolabora-neutral-dark/10"
                      }`}
                    >
                      {page.status === "published" ? "Published" : "Draft"}
                    </span>
                  </td>
                  <td className="px-4 py-2">{formatDate(page.updated_at)}</td>
                  <td className="px-4 py-2">
                    <div className="flex items-center gap-2">
                      <Link
                        href={`/admin/cms/pages/${page.id}/edit`}
                        className="rounded-full border border-kolabora-neutral-dark/20 px-3 py-1.5 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
                      >
                        Edit
                      </Link>
                      <ActionButton
                        endpoint={`/api/admin/cms/pages/${page.id}`}
                        method="DELETE"
                        label="Delete"
                        variant="danger"
                        confirmMessage="Delete this page? It can be restored from the Trash menu."
                      />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div>
        <h2 className="text-lg font-semibold">FAQ</h2>
        <div className="mt-3">
          <FaqManager faqs={faqsRes.data} />
        </div>
      </div>

      <div>
        <h2 className="text-lg font-semibold">Announcements</h2>
        <div className="mt-3">
          <AnnouncementManager announcements={announcementsRes.data} />
        </div>
      </div>

      <div>
        <h2 className="text-lg font-semibold">Banner</h2>
        <div className="mt-3">
          <BannerManager banners={bannersRes.data} />
        </div>
      </div>

      <div>
        <h2 className="text-lg font-semibold">Homepage Sections</h2>
        <div className="mt-3">
          <HomepageSectionManager sections={homepageSectionsRes.data} />
        </div>
      </div>
    </div>
  );
}