import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { TopNav } from "@/components/navigation/top-nav";
import { readStaffDraft } from "@/lib/booking-draft/cookie";
import { getActingStaff } from "@/lib/staff/get-acting-staff";
import { BarberDateTimePicker } from "@/features/booking/components/barber-date-time-picker";
import { saveStaffBarberTimeStepAction } from "@/features/staff/actions/staff-booking";

export const metadata: Metadata = { title: "Barber & Time" };
export const dynamic = "force-dynamic";

export default async function StaffBookBarberTimePage() {
  const staff = await getActingStaff();
  if (!staff) redirect("/home");

  const draft = await readStaffDraft(staff.businessId);
  if (draft.serviceIds.length === 0) redirect("/staff/book/services");

  async function handleContinue(selection: { staffId?: string; date: string; startAt: string }) {
    "use server";
    return saveStaffBarberTimeStepAction(selection);
  }

  return (
    <div className="pb-6">
      <TopNav title="Barber & Time" onBack sticky className="bg-stone" />
      <BarberDateTimePicker
        businessId={staff.businessId}
        businessTimezone={staff.business.timezone}
        serviceIds={draft.serviceIds}
        initialStaffId={draft.staffId}
        initialDate={draft.date}
        onContinue={handleContinue}
      />
    </div>
  );
}