import type { Metadata } from "next";
import { Star } from "lucide-react";
import Link from "next/link";
import { auth } from "@/auth";
import { AppointmentCard } from "@/components/ui/appointment-card";
import { BarberCard } from "@/components/ui/barber-card";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ServiceCard } from "@/components/ui/service-card";
import { Weekday } from "@/generated/prisma/enums";
import type { Prisma } from "@/generated/prisma/client";
import { computeOpeningStatus } from "@/lib/business/opening-status";
import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
import { prisma } from "@/lib/db/prisma";
import { getAvailableServices } from "@/services/scheduling/availability.service";
import { getLoyaltySummary, type LoyaltySummary } from "@/services/loyalty/loyalty.service";
import { getBusinessReviews } from "@/services/reviews/reviews.service";
import type { AppointmentStatus } from "@/types/domain";

export const metadata: Metadata = { title: "Home" };
export const dynamic = "force-dynamic";

const WEEKDAY_ORDER: Weekday[] = [
  Weekday.MONDAY,
  Weekday.TUESDAY,
  Weekday.WEDNESDAY,
  Weekday.THURSDAY,
  Weekday.FRIDAY,
  Weekday.SATURDAY,
  Weekday.SUNDAY,
];
const WEEKDAY_LABEL: Record<Weekday, string> = {
  MONDAY: "Monday",
  TUESDAY: "Tuesday",
  WEDNESDAY: "Wednesday",
  THURSDAY: "Thursday",
  FRIDAY: "Friday",
  SATURDAY: "Saturday",
  SUNDAY: "Sunday",
};

const STATUS_MAP: Record<string, AppointmentStatus> = {
  PENDING: "pending_approval",
  CONFIRMED: "confirmed",
  CHECKED_IN: "arrived",
  IN_PROGRESS: "in_progress",
};

export default async function CustomerHomePage() {
  const [business, session] = await Promise.all([getPrimaryBusiness(), auth()]);

  const [services, staff, reviews] = await Promise.all([
    getAvailableServices(prisma, { businessId: business.id }),
    prisma.staffProfile.findMany({
      where: { businessId: business.id, status: "ACTIVE", isBookableOnline: true },
      include: { user: { select: { name: true, image: true } } },
    }),
    getBusinessReviews(business.id),
  ]);

  const openingStatus = computeOpeningStatus(business.hours, business.timezone);
  const location = business.locations[0];
  const previewServices = services.slice(0, 4);

  type UpcomingAppointment = Prisma.AppointmentGetPayload<{
    include: { services: { include: { service: true } }; staff: { include: { user: true } } };
  }>;

  let customerProfile: Awaited<ReturnType<typeof prisma.customerProfile.findUnique>> = null;
  let upcomingAppointment: UpcomingAppointment | null = null;
  let loyalty: LoyaltySummary | null = null;
  let preferredBarberName: string | null = null;
  let lastCompletedAppointment: Awaited<ReturnType<typeof prisma.appointment.findFirst>> = null;

  if (session?.user?.id) {
    customerProfile = await prisma.customerProfile.findUnique({
      where: { userId: session.user.id },
    });

    if (customerProfile) {
      [upcomingAppointment, loyalty, lastCompletedAppointment] = await Promise.all([
        prisma.appointment.findFirst({
          where: {
            customerId: customerProfile.id,
            status: { in: ["PENDING", "CONFIRMED", "CHECKED_IN"] },
            startAt: { gte: new Date() },
          },
          orderBy: { startAt: "asc" },
          include: { services: { include: { service: true } }, staff: { include: { user: true } } },
        }),
        getLoyaltySummary(prisma, { customerId: customerProfile.id, businessId: business.id }),
        prisma.appointment.findFirst({
          where: { customerId: customerProfile.id, status: "COMPLETED" },
          orderBy: { startAt: "desc" },
        }),
      ]);

      if (customerProfile.preferredBarberId) {
        const preferred = await prisma.staffProfile.findUnique({
          where: { id: customerProfile.preferredBarberId },
          include: { user: { select: { name: true } } },
        });
        preferredBarberName = preferred?.user.name ?? null;
      }
    }
  }

  return (
    <div>
      {/* Hero */}
      <section className="bg-ink relative h-56 w-full overflow-hidden">
        {business.logoUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={business.logoUrl} alt="" className="h-full w-full object-cover opacity-80" />
        ) : null}
      </section>

      <main className="mx-auto max-w-2xl bg-white px-6 py-6">
        {session?.user && (
          <p className="text-muted mb-1 text-sm">
            Good to see you, {session.user.name?.split(" ")[0] ?? "there"}
          </p>
        )}
        <h1 className="mb-1 text-2xl font-bold tracking-tight">{business.name}</h1>
        {location && (
          <p className="text-muted mb-3 text-xs">
            {location.addressLine1}, {location.city} {location.postalCode}
          </p>
        )}
        <div className="mb-4 flex items-center gap-3 text-sm">
          <div className="text-accent-loyalty flex items-center gap-1">
            <Star className="h-4 w-4 fill-current" aria-hidden="true" />
            <span className="text-ink font-bold">{reviews.averageRating.toFixed(1)}</span>
          </div>
          <span className="text-muted">· {reviews.totalReviews.toLocaleString()} reviews</span>
          <span
            className={openingStatus.isOpen ? "text-accent-foreground font-bold" : "text-danger font-bold"}
          >
            {openingStatus.label}
          </span>
        </div>
        {business.description && (
          <p className="text-muted mb-6 text-sm leading-relaxed">{business.description}</p>
        )}

        {/* Upcoming appointment */}
        {upcomingAppointment && (
          <section className="mb-6">
            <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
              Your Next Visit
            </h2>
            <AppointmentCard
              status={STATUS_MAP[upcomingAppointment.status] ?? "confirmed"}
              serviceName={upcomingAppointment.services.map((s) => s.service.name).join(" + ")}
              person={{
                id: upcomingAppointment.staffId,
                name: upcomingAppointment.staff.user.name ?? "Barber",
              }}
              formattedDate={upcomingAppointment.startAt.toLocaleDateString("en-GB", {
                weekday: "short",
                day: "numeric",
                month: "short",
                timeZone: business.timezone,
              })}
              formattedTime={upcomingAppointment.startAt.toLocaleTimeString("en-GB", {
                hour: "2-digit",
                minute: "2-digit",
                timeZone: business.timezone,
              })}
              actions={
                <Link
                  href="/appointments"
                  className="text-ink text-xs font-bold tracking-widest uppercase underline"
                >
                  View details
                </Link>
              }
            />
          </section>
        )}

        {/* Loyalty summary */}
        {loyalty?.isEnabled && loyalty.accountId && (
          <Link
            href="/loyalty"
            className={
              loyalty.availableReward
                ? "rounded-jumbo border-accent-loyalty bg-accent-loyalty/10 mb-6 block border p-5 shadow-sm"
                : "rounded-jumbo border-line mb-6 block border bg-white p-5 shadow-sm"
            }
          >
            {loyalty.availableReward ? (
              <div className="flex items-center justify-between">
                <p className="text-sm font-bold">Reward available — {loyalty.availableReward.label}</p>
                <span className="text-accent-loyalty-foreground text-xs font-bold uppercase tracking-widest">View</span>
              </div>
            ) : (
              <>
                <div className="mb-3 flex items-center justify-between">
                  <p className="text-sm font-bold">Loyalty Progress</p>
                  <span className="text-muted text-xs">
                    {loyalty.currentStamps}/{loyalty.stampsRequired} stamps
                  </span>
                </div>
                <div className="bg-stone h-2 w-full overflow-hidden rounded-full">
                  <div
                    className="bg-accent-loyalty h-full rounded-full"
                    style={{
                      width: `${Math.min(100, (loyalty.currentStamps / loyalty.stampsRequired) * 100)}%`,
                    }}
                  />
                </div>
              </>
            )}
          </Link>
        )}

        {/* Preferred barber + book again */}
        {(preferredBarberName || lastCompletedAppointment) && (
          <div className="mb-6 grid grid-cols-2 gap-3">
            {preferredBarberName && (
              <Card className="p-4">
                <p className="text-muted text-[10px] font-bold tracking-widest uppercase">
                  Preferred Barber
                </p>
                <p className="mt-1 text-sm font-bold">{preferredBarberName}</p>
              </Card>
            )}
            {lastCompletedAppointment && (
              <Button asChild variant="secondary" className="h-full w-full">
                <Link href="/appointments">Book Again</Link>
              </Button>
            )}
          </div>
        )}

        {/* Booking CTA */}
        <Button asChild className="mb-8 w-full">
          <Link href="/book">Book an Appointment</Link>
        </Button>

        {/* Services */}
        <section className="mb-8">
          <div className="mb-3 flex items-center justify-between">
            <h2 className="text-muted text-xs font-bold tracking-widest uppercase">
              Popular Services
            </h2>
            <Link
              href="/book"
              className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
            >
              See all
            </Link>
          </div>
          <Card className="divide-line divide-y px-5">
            {previewServices.map((service) => (
              <ServiceCard
                key={service.id}
                service={{
                  id: service.id,
                  name: service.name,
                  durationMinutes: service.durationMinutes,
                  formattedPrice: `£${Number(service.price).toFixed(2)}`,
                }}
                action={
                  <Button asChild size="sm">
                    <Link href="/book">Book</Link>
                  </Button>
                }
              />
            ))}
          </Card>
        </section>

        {/* Barbers */}
        <section className="mb-8">
          <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
            Our Barbers
          </h2>
          <div className="flex gap-5 overflow-x-auto pb-1">
            {staff.map((s) => (
              <BarberCard
                key={s.id}
                staff={{
                  id: s.id,
                  name: s.user.name ?? "Barber",
                  avatarUrl: s.user.image ?? undefined,
                }}
                isPreferred={customerProfile?.preferredBarberId === s.id}
              />
            ))}
          </div>
        </section>

        {/* Reviews */}
        <section className="mb-8">
          <div className="mb-3 flex items-center justify-between">
            <h2 className="text-muted text-xs font-bold tracking-widest uppercase">Reviews</h2>
            {reviews.isDemoData && (
              <span className="text-muted text-[9px] font-bold tracking-widest uppercase">
                Demo data
              </span>
            )}
          </div>
          <div className="space-y-3">
            {reviews.reviews.map((review) => (
              <Card key={review.id} className="p-4">
                <div className="mb-1 flex items-center justify-between">
                  <p className="text-sm font-bold">{review.authorName}</p>
                  <span className="text-muted text-[10px]">{review.relativeDate}</span>
                </div>
                <div className="text-accent-loyalty mb-2 flex gap-0.5">
                  {Array.from({ length: review.rating }, (_, i) => (
                    <Star key={i} className="h-3 w-3 fill-current" aria-hidden="true" />
                  ))}
                </div>
                <p className="text-muted text-xs">{review.text}</p>
              </Card>
            ))}
          </div>
        </section>

        {/* Hours */}
        <section className="mb-4">
          <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
            Opening Hours
          </h2>
          <Card className="divide-line divide-y px-5">
            {WEEKDAY_ORDER.map((day) => {
              const dayHours = business.hours.find((h) => h.dayOfWeek === day);
              return (
                <div key={day} className="flex items-center justify-between py-3 text-sm">
                  <span className="text-muted">{WEEKDAY_LABEL[day]}</span>
                  <span className="font-medium">
                    {!dayHours ||
                    dayHours.isClosed ||
                    dayHours.opensAtMinutes === null ||
                    dayHours.closesAtMinutes === null
                      ? "Closed"
                      : `${String(Math.floor(dayHours.opensAtMinutes / 60)).padStart(2, "0")}:${String(dayHours.opensAtMinutes % 60).padStart(2, "0")} – ${String(Math.floor(dayHours.closesAtMinutes / 60)).padStart(2, "0")}:${String(dayHours.closesAtMinutes % 60).padStart(2, "0")}`}
                  </span>
                </div>
              );
            })}
          </Card>
        </section>

        {/* Contact */}
        <section>
          <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">Contact</h2>
          <div className="grid grid-cols-2 gap-3">
            {business.phone && (
              <a
                href={`tel:${business.phone}`}
                className="border-line rounded-xl border bg-white py-4 text-center text-sm font-bold"
              >
                Call
              </a>
            )}
            {business.email && (
              <a
                href={`mailto:${business.email}`}
                className="border-line rounded-xl border bg-white py-4 text-center text-sm font-bold"
              >
                Email
              </a>
            )}
          </div>
        </section>
      </main>
    </div>
  );
}