import Link from "next/link";
import { AdminPageHeader, MetricCard } from "@/components/admin/admin-ui";
import { getAdminOverview } from "@/lib/admin-data";
import { formatAdminDate } from "@/lib/admin-format";

type OverviewPageProps = {
  searchParams: Promise<{ range?: string }>;
};

export default async function AdminOverviewPage({ searchParams }: OverviewPageProps) {
  const parameters = await searchParams;
  const range = ["1", "7", "30"].includes(parameters.range || "")
    ? parameters.range || "7"
    : "7";
  const overview = await getAdminOverview(range);

  return (
    <div className="flex h-full min-h-[42rem] flex-col space-y-6">
      <AdminPageHeader
        eyebrow="Operations Portal"
        title="What needs your attention today."
        description="A centralized administrative view of activity across RooSports venues, requests, and community sessions."
        action={
          <form className="hidden items-center gap-2 sm:flex">
            <label htmlFor="overview-range" className="text-xs font-semibold text-slate-500">
              Window:
            </label>
            <select
              id="overview-range"
              name="range"
              defaultValue={range}
              className="h-10 rounded-xl border border-slate-200/90 bg-white px-3.5 text-xs font-semibold text-slate-700 outline-none transition focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
            >
              <option value="1">Today</option>
              <option value="7">Next 7 days</option>
              <option value="30">Next 30 days</option>
            </select>
            <button
              type="submit"
              className="h-10 rounded-xl bg-[#1D4ED8] px-4 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af] hover:-translate-y-0.5 active:translate-y-0"
            >
              Update
            </button>
          </form>
        }
      />

      {/* METRIC CARDS */}
      <section className="grid shrink-0 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <MetricCard
          label="Active members"
          value={overview.metrics.activeMembers}
          note="active accounts only"
          icon="group"
          tone="blue"
        />
        <MetricCard
          label="Upcoming events"
          value={overview.metrics.upcomingEvents}
          note={`${range}-day window`}
          icon="event_upcoming"
          tone="orange"
        />
        <MetricCard
          label="Bookings"
          value={overview.metrics.confirmedRegistrations}
          note="created in period, now confirmed"
          icon="confirmation_number"
          tone="green"
        />
        <MetricCard
          label="Coach reviews"
          value={overview.metrics.pendingCoaches}
          note="pending WWCC review"
          icon="verified_user"
          tone="sand"
        />
      </section>

      {/* LOWER SPLIT: NEXT SESSIONS & ATTENTION */}
      <section className="grid min-h-0 flex-1 gap-6 xl:grid-cols-[1.5fr_0.9fr]">
        {/* Next Sessions Schedule Card */}
        <article className="flex min-h-[22rem] flex-col overflow-hidden rounded-3xl border border-slate-200/80 bg-white shadow-xs">
          <div className="flex shrink-0 items-center justify-between border-b border-slate-100 px-6 py-4">
            <div>
              <div className="inline-flex items-center space-x-1.5 text-[10px] font-extrabold uppercase tracking-wider text-slate-400">
                <span className="material-symbols-outlined text-[14px]">calendar_today</span>
                <span>Schedule Matrix</span>
              </div>
              <h2 className="mt-0.5 text-base font-extrabold text-[#0D1B2A] tracking-tight">Next sessions</h2>
            </div>
            <Link
              href="/admin/events?schedule=upcoming"
              className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] hover:text-[#1e40af] transition"
            >
              <span>View all events</span>
              <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
            </Link>
          </div>

          {overview.upcomingEvents.length > 0 ? (
            <div className="min-h-0 flex-1 overflow-auto divide-y divide-slate-100 px-4 py-2">
              {overview.upcomingEvents.map((event) => {
                const fill = event.capacity ? Math.round((event.registrations / event.capacity) * 100) : 0;
                return (
                  <Link
                    key={event.id}
                    href={`/admin/events?search=${encodeURIComponent(event.title)}`}
                    className="grid grid-cols-[minmax(0,1.25fr)_minmax(8rem,0.8fr)_5.5rem] items-center gap-4 rounded-2xl p-3 transition hover:bg-slate-50/80"
                  >
                    <div className="min-w-0">
                      <p className="truncate text-sm font-extrabold text-[#0D1B2A]">{event.title}</p>
                      <p className="mt-0.5 truncate text-xs text-slate-500">
                        {event.sport} · {event.ageGroup} · {event.venue}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs font-semibold text-slate-700">{formatAdminDate(event.startsAt, true)}</p>
                      <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-100">
                        <div
                          className={`h-full rounded-full transition-all ${fill >= 80 ? "bg-[#F97316]" : "bg-[#1D4ED8]"}`}
                          style={{ width: `${Math.min(fill, 100)}%` }}
                        />
                      </div>
                    </div>
                    <p className="text-right text-xs font-bold text-slate-600">
                      {event.registrations}/{event.capacity}
                    </p>
                  </Link>
                );
              })}
            </div>
          ) : (
            <div className="grid flex-1 place-items-center px-6 py-12 text-center">
              <div>
                <span className="material-symbols-outlined text-3xl text-slate-300">event_available</span>
                <h3 className="mt-3 text-sm font-extrabold text-[#0D1B2A]">No upcoming sessions yet</h3>
                <p className="mt-1 text-xs text-slate-500">Scheduled events will appear here automatically.</p>
              </div>
            </div>
          )}
        </article>

        {/* Needs Attention Card */}
        <article className="flex min-h-[22rem] flex-col rounded-3xl border border-slate-200/80 bg-white p-6 shadow-xs">
          <div className="flex items-center justify-between border-b border-slate-100 pb-3.5">
            <div>
              <p className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400">Action Queue</p>
              <h2 className="mt-0.5 text-base font-extrabold text-[#0D1B2A] tracking-tight">Resolve before game day</h2>
            </div>
            <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold text-emerald-700 border border-emerald-200/80">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> Live
            </span>
          </div>

          {overview.attention.length > 0 ? (
            <div className="mt-4 space-y-2.5 overflow-auto">
              {overview.attention.map((item) => (
                <Link
                  key={item.id}
                  href={item.href}
                  className="group flex items-start gap-3 rounded-2xl border border-slate-200/70 bg-slate-50/60 p-3.5 transition hover:-translate-y-0.5 hover:border-blue-500 hover:bg-white hover:shadow-xs"
                >
                  <span
                    className={`grid h-9 w-9 shrink-0 place-items-center rounded-xl ${
                      item.tone === "red"
                        ? "bg-rose-50 text-rose-600"
                        : item.tone === "blue"
                          ? "bg-blue-50 text-[#1D4ED8]"
                          : "bg-orange-50 text-[#F97316]"
                    }`}
                  >
                    <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block text-xs font-extrabold text-[#0D1B2A]">{item.title}</span>
                    <span className="mt-0.5 block text-[11px] leading-4 text-slate-500">{item.detail}</span>
                  </span>
                  <span className="material-symbols-outlined mt-1 text-[18px] text-slate-400 transition group-hover:translate-x-1 group-hover:text-blue-600">
                    arrow_forward
                  </span>
                </Link>
              ))}
            </div>
          ) : (
            <div className="grid flex-1 place-items-center py-8 text-center">
              <div>
                <span className="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-emerald-50 text-emerald-600">
                  <span className="material-symbols-outlined text-[24px]">task_alt</span>
                </span>
                <h3 className="mt-3 text-sm font-extrabold text-[#0D1B2A]">Everything is under control</h3>
                <p className="mx-auto mt-1 max-w-[15rem] text-xs leading-5 text-slate-500">
                  New event requests, WWCC reviews, and capacity alerts will appear here.
                </p>
              </div>
            </div>
          )}

          <div className="mt-auto border-t border-slate-100 pt-3 text-[10px] font-semibold text-slate-400 flex items-center justify-between">
            <span>Counts refresh when page loads</span>
            <span className="text-slate-500">RooSports Operations</span>
          </div>
        </article>
      </section>
    </div>
  );
}