import Link from "next/link";
import { getDashboardSummary } from "@/lib/api/dashboard";
import { getCurrentUser } from "@/lib/api/auth";
import { EventCard } from "@/components/events/event-card";
import { ResendVerificationBanner } from "@/components/dashboard/resend-verification-banner";
import { TICKET_STATUS_LABEL } from "@/lib/labels";
import type { TicketStatus } from "@/types/order";
import { cardClasses } from "@/components/ui/styles";

export default async function DashboardPage() {
  const [{ data: summary }, user] = await Promise.all([getDashboardSummary(), getCurrentUser()]);

  return (
    <div className="flex flex-col gap-8">
      {user && !user.email_verified_at && <ResendVerificationBanner />}

      <section className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        <div className={cardClasses("p-4")}>
          <p className="text-sm text-kolabora-neutral-dark/70">Total Orders</p>
          <p className="mt-1 text-2xl font-semibold">{summary.orders_count}</p>
        </div>
        {Object.entries(summary.tickets_by_status).map(([status, count]) => (
          <div key={status} className={cardClasses("p-4")}>
            <p className="text-sm text-kolabora-neutral-dark/70">
              {TICKET_STATUS_LABEL[status as TicketStatus] ?? status}
            </p>
            <p className="mt-1 text-2xl font-semibold">{count}</p>
          </div>
        ))}
      </section>

      <section>
        <div className="mb-3 flex items-center justify-between">
          <h2 className="text-lg font-semibold">Upcoming Events</h2>
          <Link href="/dashboard/tickets" className="text-sm font-medium text-kolabora-primary">
            View all tickets
          </Link>
        </div>

        {summary.upcoming_events.length === 0 ? (
          <p className="text-sm text-kolabora-neutral-dark/70">
            No tickets yet for upcoming events.
          </p>
        ) : (
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            {summary.upcoming_events.map((event) => (
              <EventCard key={event.id} event={event} />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}