import Link from "next/link";
import type { Metadata } from "next";
import { getDashboardStats } from "@/app/lib/content";
import { PageHeader, StatCard, StatusBadge, EmptyState } from "@/app/admin/_components/ui";
import { formatDate } from "@/app/admin/_components/utils";

export const metadata: Metadata = {
  title: "Overview",
};

export default async function AdminOverviewPage() {
  const stats = await getDashboardStats();

  return (
    <div>
      <PageHeader
        title="Overview"
        description="Monitor new enquiries and keep website content up to date."
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <StatCard
          label="Contact messages"
          value={stats.contactTotal}
          hint={`${stats.contactNew} new`}
        />
        <StatCard
          label="Admission applications"
          value={stats.admissionTotal}
          hint={`${stats.admissionNew} new`}
        />
        <StatCard label="Programs" value={stats.programCount} />
        <StatCard label="Blog posts" value={stats.blogCount} />
      </div>

      <div className="mt-8 grid grid-cols-1 xl:grid-cols-2 gap-6">
        <section className="rounded-2xl border border-[#d9e2f7] bg-white p-5">
          <div className="flex items-center justify-between gap-3">
            <h2 className="text-base font-semibold">Recent contacts</h2>
            <Link
              href="/admin/contacts"
              className="text-sm font-semibold text-[#1f3fb8] hover:underline"
            >
              View all
            </Link>
          </div>
          <div className="mt-4 space-y-3">
            {stats.recentContacts.length === 0 ? (
              <EmptyState message="No contact messages yet." />
            ) : (
              stats.recentContacts.map((item) => (
                <Link
                  key={item.id}
                  href={`/admin/contacts/${item.id}`}
                  className="block rounded-xl border border-[#e9eefc] px-4 py-3 hover:bg-[#f8faff]"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <p className="font-medium">{item.name}</p>
                      <p className="text-sm text-[#5a688d]">{item.subject}</p>
                    </div>
                    <StatusBadge status={item.status} />
                  </div>
                  <p className="mt-2 text-xs text-[#7a88ad]">
                    {formatDate(item.createdAt)}
                  </p>
                </Link>
              ))
            )}
          </div>
        </section>

        <section className="rounded-2xl border border-[#d9e2f7] bg-white p-5">
          <div className="flex items-center justify-between gap-3">
            <h2 className="text-base font-semibold">Recent admissions</h2>
            <Link
              href="/admin/admissions"
              className="text-sm font-semibold text-[#1f3fb8] hover:underline"
            >
              View all
            </Link>
          </div>
          <div className="mt-4 space-y-3">
            {stats.recentAdmissions.length === 0 ? (
              <EmptyState message="No admission applications yet." />
            ) : (
              stats.recentAdmissions.map((item) => (
                <Link
                  key={item.id}
                  href={`/admin/admissions/${item.id}`}
                  className="block rounded-xl border border-[#e9eefc] px-4 py-3 hover:bg-[#f8faff]"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <p className="font-medium">
                        {item.studentFirstName} {item.studentLastName}
                      </p>
                      <p className="text-sm text-[#5a688d]">{item.program}</p>
                    </div>
                    <StatusBadge status={item.status} />
                  </div>
                  <p className="mt-2 text-xs text-[#7a88ad]">
                    {formatDate(item.createdAt)}
                  </p>
                </Link>
              ))
            )}
          </div>
        </section>
      </div>
    </div>
  );
}
