import React, { useState, useEffect } from 'react';
import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';

// ─── Availability fetch helper ───────────────────────────────────────────────
// Returns ISO startTime strings for the given service/date, or an error message.
// Validates HTTP status and that the body is actually an array — the API
// responds with `{error: "..."}` on 4xx, and we must not treat that as slots.
const AVAILABILITY_ERROR_MESSAGE = 'Failed to load time slots';

/**
 * Re-mint an SSO-bridge portal session from the active Better Auth session.
 * Defense-in-depth for GRO-2234: if a portal call returns 401 mid-flow (the
 * impersonation session lapsed during a slow wizard), the customer's Better
 * Auth cookie is still valid, so we can transparently obtain a fresh portal
 * session id and retry once. Returns the new session id, or null if no Better
 * Auth session is available (e.g. staff/dev impersonation paths).
 */
async function remintPortalSession(): Promise<string | null> {
  try {
    const res = await fetch('/api/portal/session-from-auth', {
      method: 'POST',
      credentials: 'include',
    });
    if (!res.ok) return null;
    const data = (await res.json().catch(() => ({}))) as { sessionId?: string };
    return data.sessionId ?? null;
  } catch {
    return null;
  }
}

async function fetchAvailability(
  params: { serviceId: string; date: string },
  sessionId: string | null,
): Promise<{ times: string[]; error: string | null }> {
  const url = `/api/book/availability?${new URLSearchParams(params).toString()}`;
  const headers: Record<string, string> = {};
  if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId;
  try {
    const res = await fetch(url, { headers });
    if (!res.ok) {
      const body = (await res.json().catch(() => ({}))) as { error?: string };
      return { times: [], error: body.error ?? `${AVAILABILITY_ERROR_MESSAGE} (HTTP ${res.status})` };
    }
    const data: unknown = await res.json();
    if (!Array.isArray(data)) {
      return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
    }
    return { times: data as string[], error: null };
  } catch {
    return { times: [], error: AVAILABILITY_ERROR_MESSAGE };
  }
}

export interface Appointment {
  id: string;
  petId: string;
  serviceId: string;
  groomerId: string | null;
  // Absolute ISO instants as returned by `/api/portal/appointments`. `date`/`time`
  // below are the locally-formatted display strings derived from `startTime`.
  startTime?: string;
  endTime?: string;
  date: string;
  time: string;
  status: 'scheduled' | 'confirmed' | 'pending' | 'waitlisted' | 'completed' | 'cancelled' | 'no-show';
  petName?: string;
  serviceName?: string;
  groomerName?: string;
  duration?: number;
  price?: number;
  notes?: string;
  customerNotes?: string;
  addOns?: string[];
  confirmationStatus?: 'confirmed' | 'pending' | 'cancelled';
}

interface Pet {
  id: string;
  name: string;
  breed: string;
  weight?: number;
  photo?: string;
  imageUrl?: string;
}

interface Service {
  id: string;
  name: string;
  description?: string;
  duration?: number;
  price?: number;
  priceRange?: string;
  isAddOn?: boolean;
}

interface AppointmentsSectionProps {
  sessionId: string | null;
  readOnly: boolean;
}

interface RescheduleFlowProps {
  appointment: Appointment;
  onClose: () => void;
  sessionId: string | null;
}

const MAX_CUSTOMER_NOTES = 500;

export function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });
}

export function parseTimeTo24Hour(time: string | null | undefined): string {
  const parts = (time ?? '').split(' ');
  const hoursMinutes = parts[0] ?? '';
  const period = parts[1] ?? '';
  const [hoursStr, minutesStr] = hoursMinutes.split(':');
  // `|| '0'` (not `?? '0'`) so empty strings from blank/undefined input
  // fall back to 0 rather than parsing to NaN.
  const hours = parseInt(hoursStr || '0', 10);
  const minutes = parseInt(minutesStr || '0', 10);
  let hours24 = hours;
  if (period === 'PM' && hours !== 12) hours24 += 12;
  if (period === 'AM' && hours === 12) hours24 = 0;
  return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
}

// A booking slot is the canonical UTC ISO instant returned by
// `/api/book/availability` (e.g. "2026-06-09T10:00:00.000Z" is the 10:00 UTC
// business slot — see api `src/lib/slots.ts`, which builds them with
// `setUTCHours`). Display label and submit payload both derive from the slot via
// these helpers so they never desync. Always format/extract in UTC: slots are
// generated as UTC business hours, so a browser-local conversion would mislabel
// the slot and diverge from the stored Postgres `time` column.
export function formatSlotLabel(slot: string): string {
  const d = new Date(slot);
  // Non-ISO input (e.g. an already-formatted "10:00 AM" label) — show as-is.
  if (Number.isNaN(d.getTime())) return slot;
  return new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
    timeZone: 'UTC',
  }).format(d);
}

// Extracts the UTC `HH:MM:SS` time component the api stores in the Postgres
// `time` column. The api inserts this verbatim, so a full ISO datetime here is
// an `invalid input syntax for type time` 500 (GRO-2211).
export function slotToTime(slot: string): string {
  if (/^\d{2}:\d{2}:\d{2}$/.test(slot)) return slot; // already HH:MM:SS
  const d = new Date(slot);
  if (!Number.isNaN(d.getTime())) {
    const hh = String(d.getUTCHours()).padStart(2, '0');
    const mm = String(d.getUTCMinutes()).padStart(2, '0');
    const ss = String(d.getUTCSeconds()).padStart(2, '0');
    return `${hh}:${mm}:${ss}`;
  }
  // "10:00 AM"-style label fallback.
  return parseTimeTo24Hour(slot);
}

export function isUpcoming(appt: Appointment): boolean {
  const now = new Date();
  // Prefer the absolute ISO `startTime` from the API; fall back to the
  // locally-formatted date/time pair for already-normalized/legacy shapes.
  const apptDate = appt.startTime
    ? new Date(appt.startTime)
    : new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
  return apptDate > now && appt.status !== 'cancelled' && appt.status !== 'completed';
}

// ─── API → UI shape normalization ────────────────────────────────────────────
// `/api/portal/appointments` returns ISO `startTime`/`endTime` plus nested
// pet/service/staff objects, NOT the flat `date`/`time`/`petName` shape the
// portal UI renders. Every field below is optional so the legacy flat shape
// (used by tests/fixtures) is tolerated unchanged.
export interface RawApiAppointment {
  id: string;
  startTime?: string | null;
  endTime?: string | null;
  status: Appointment['status'];
  confirmationStatus?: Appointment['confirmationStatus'];
  customerNotes?: string | null;
  notes?: string | null;
  pet?: { id?: string | null; name?: string | null; photo?: string | null } | null;
  service?: { id?: string | null; name?: string | null } | null;
  staff?: { id?: string | null; name?: string | null } | null;
  // Legacy / already-flat fields
  petId?: string;
  serviceId?: string;
  groomerId?: string | null;
  date?: string;
  time?: string;
  petName?: string;
  serviceName?: string;
  groomerName?: string;
  duration?: number;
  price?: number;
  addOns?: string[];
}

function toLocalDateString(d: Date): string {
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

function toLocalTimeString(d: Date): string {
  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
}

// Maps a raw API appointment into the flat `Appointment` shape the portal
// renders. Derives display `date`/`time` from the absolute `startTime` and
// `duration` from the start/end delta. Tolerates the legacy flat shape.
export function normalizeAppointment(raw: RawApiAppointment): Appointment {
  const start = raw.startTime ? new Date(raw.startTime) : null;
  const end = raw.endTime ? new Date(raw.endTime) : null;
  const derivedDuration =
    start && end ? Math.round((end.getTime() - start.getTime()) / 60000) : undefined;

  return {
    id: raw.id,
    petId: raw.pet?.id ?? raw.petId ?? '',
    serviceId: raw.service?.id ?? raw.serviceId ?? '',
    groomerId: raw.staff?.id ?? raw.groomerId ?? null,
    startTime: raw.startTime ?? undefined,
    endTime: raw.endTime ?? undefined,
    date: start ? toLocalDateString(start) : raw.date ?? '',
    time: start ? toLocalTimeString(start) : raw.time ?? '',
    status: raw.status,
    petName: raw.pet?.name ?? raw.petName,
    serviceName: raw.service?.name ?? raw.serviceName,
    groomerName: raw.staff?.name ?? raw.groomerName,
    duration: raw.duration ?? derivedDuration,
    price: raw.price,
    notes: raw.notes ?? undefined,
    customerNotes: raw.customerNotes ?? undefined,
    addOns: raw.addOns,
    confirmationStatus: raw.confirmationStatus,
  };
}

// Raw service shape from `GET /api/portal/services`, which projects the
// canonical DB columns (`basePriceCents`, `durationMinutes`). Also tolerates an
// already-normalized payload so either shape renders correctly.
interface RawApiService {
  id: string;
  name: string;
  description?: string | null;
  basePriceCents?: number | null;
  durationMinutes?: number | null;
  price?: number | null;
  duration?: number | null;
  priceRange?: string | null;
  isAddOn?: boolean | null;
}

// Normalizes a raw API service into the flat `Service` shape the cards render:
// price as dollars (from `basePriceCents`) and duration in minutes (from
// `durationMinutes`). Leaves fields undefined when genuinely absent so the card
// can hide them rather than print `$undefined` / empty `min`.
export function normalizeService(raw: RawApiService): Service {
  const price =
    raw.price ?? (typeof raw.basePriceCents === 'number' ? raw.basePriceCents / 100 : undefined);
  const duration = raw.duration ?? raw.durationMinutes ?? undefined;
  return {
    id: raw.id,
    name: raw.name,
    description: raw.description ?? undefined,
    duration: duration ?? undefined,
    price: price ?? undefined,
    priceRange: raw.priceRange ?? undefined,
    isAddOn: raw.isAddOn ?? undefined,
  };
}

// Renders a service price for display, preferring an explicit `priceRange`
// string, then a numeric dollar `price` (integers without trailing zeros, e.g.
// `$45`; fractional values to cents, e.g. `$45.50`). Returns null when neither
// is available so the caller can omit the price line entirely.
export function formatServicePrice(svc: Pick<Service, 'price' | 'priceRange'>): string | null {
  if (svc.priceRange) return svc.priceRange;
  if (typeof svc.price === 'number' && Number.isFinite(svc.price)) {
    return `$${Number.isInteger(svc.price) ? svc.price : svc.price.toFixed(2)}`;
  }
  return null;
}

const STATUS_COLORS: Record<string, string> = {
  confirmed: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-600',
  waitlisted: 'bg-blue-100 text-blue-600',
  completed: 'bg-stone-100 text-stone-600',
  cancelled: 'bg-red-100 text-red-600',
  'no-show': 'bg-yellow-100 text-yellow-700',
  scheduled: 'bg-blue-100 text-blue-600',
};

const STATUS_LABELS: Record<string, string> = {
  confirmed: 'Confirmed',
  pending: 'Pending',
  waitlisted: 'Waitlisted',
  completed: 'Completed',
  cancelled: 'Cancelled',
  'no-show': 'No-show',
  scheduled: 'Scheduled',
};

// The DB `appointment_status` enum stores `no_show` (underscore), but the badge
// palette is keyed on `no-show` (hyphen). Without normalization a no-show
// appointment renders as a raw gray `no_show` label instead of the styled
// "No-show" badge (GRO-2319 item 1). Map underscore status keys to the hyphen
// palette key so DB-sourced statuses resolve to their intended badge style.
export function normalizeStatusKey(status: string): string {
  return status.replace(/_/g, '-');
}

export function StatusBadge({ status }: { status: string }) {
  const key = normalizeStatusKey(status);
  const label = STATUS_LABELS[key] ?? status;
  const colorClass = STATUS_COLORS[key] ?? 'bg-stone-100 text-stone-600';
  return (
    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
      {label}
    </span>
  );
}

// Derives the badge state shown on an Upcoming/Past card from the appointment's
// raw status plus its confirmationStatus (GRO-2319 item 2, CMPO-approved):
//   - a synthetic waitlist entry (status `waitlisted`) always shows Waitlisted
//   - an upcoming appointment the groomer has not yet confirmed
//     (`confirmationStatus === 'pending'`) shows Pending — semantically honest
//     and reduces anxiety-driven follow-up messages
//   - otherwise the raw status drives the badge
export function deriveDisplayStatus(appt: Appointment): string {
  if (appt.status === 'waitlisted') return 'waitlisted';
  if (isUpcoming(appt) && appt.confirmationStatus === 'pending') return 'pending';
  return appt.status;
}

const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
  confirmed: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
  cancelled: 'bg-red-100 text-red-600',
};

export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessionId, readOnly }) => {
  const [upcomingAppointments, setUpcomingAppointments] = useState<Appointment[]>([]);
  const [pastAppointments, setPastAppointments] = useState<Appointment[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showBooking, setShowBooking] = useState(false);
  const [showReschedule, setShowReschedule] = useState(false);
  const [rescheduleAppointment, setRescheduleAppointment] = useState<Appointment | null>(null);
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [tab, setTab] = useState<'upcoming' | 'past'>('upcoming');

  useEffect(() => {
    const fetchAppointments = async () => {
      if (!sessionId) {
        setUpcomingAppointments([]);
        setPastAppointments([]);
        setIsLoading(false);
        return;
      }

      try {
        const response = await fetch('/api/portal/appointments', {
          headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
        });

        if (response.ok) {
          const data = await response.json();
          const rawAppointments: RawApiAppointment[] = data.appointments || data || [];
          const fetchedAppointments: Appointment[] = rawAppointments.map(normalizeAppointment);

          const upcoming = fetchedAppointments.filter((appt) => isUpcoming(appt));
          const past = fetchedAppointments.filter((appt) => !isUpcoming(appt));

          setUpcomingAppointments(upcoming);
          setPastAppointments(past);
        } else {
          setError('Failed to load appointments.');
        }
      } catch {
        setError('Failed to load appointments. Please try again.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchAppointments();
  }, [sessionId]);

  const handleReschedule = (appointment: Appointment) => {
    setRescheduleAppointment(appointment);
    setShowReschedule(true);
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="animate-spin text-blue-600" size={24} />
        <span className="ml-3 text-gray-600">Loading appointments...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center py-12">
        <p className="text-red-600 mb-4">{error}</p>
        <button
          onClick={() => window.location.reload()}
          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
        >
          Retry
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          <button
            onClick={() => setTab('upcoming')}
            className={`px-4 py-2 rounded-lg text-sm font-medium ${
              tab === 'upcoming'
                ? 'bg-blue-100 text-blue-700'
                : 'text-stone-500 hover:bg-stone-50'
            }`}
          >
            Upcoming ({upcomingAppointments.length})
          </button>
          <button
            onClick={() => setTab('past')}
            className={`px-4 py-2 rounded-lg text-sm font-medium ${
              tab === 'past' ? 'bg-blue-100 text-blue-700' : 'text-stone-500 hover:bg-stone-50'
            }`}
          >
            Past ({pastAppointments.length})
          </button>
        </div>
        {!readOnly && (
          <button
            onClick={() => setShowBooking(true)}
            className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
          >
            <Plus size={16} />
            Book New
          </button>
        )}
      </div>

      {tab === 'upcoming' && (
        <div className="space-y-3">
          {upcomingAppointments.map((appt) => (
            <AppointmentCard
              key={appt.id}
              appointment={appt}
              expanded={expandedId === appt.id}
              onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
              readOnly={readOnly}
              sessionId={sessionId}
              onReschedule={handleReschedule}
            />
          ))}
          {upcomingAppointments.length === 0 && (
            <p className="text-center text-stone-400 py-8">No upcoming appointments</p>
          )}
        </div>
      )}

      {tab === 'past' && (
        <div className="space-y-3">
          {pastAppointments.map((appt) => (
            <AppointmentCard
              key={appt.id}
              appointment={appt}
              expanded={expandedId === appt.id}
              onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
              readOnly={readOnly}
              sessionId={sessionId}
              onReschedule={handleReschedule}
            />
          ))}
        </div>
      )}

      {showBooking && (
        <BookingFlow onClose={() => setShowBooking(false)} sessionId={sessionId} />
      )}
      {showReschedule && rescheduleAppointment && (
        <RescheduleFlow
          appointment={rescheduleAppointment}
          onClose={() => {
            setShowReschedule(false);
            setRescheduleAppointment(null);
          }}
          sessionId={sessionId}
        />
      )}
    </div>
  );
};

function AppointmentCard({
  appointment: appt,
  expanded,
  onToggle,
  readOnly,
  sessionId,
  onReschedule,
}: {
  appointment: Appointment;
  expanded: boolean;
  onToggle: () => void;
  readOnly: boolean;
  sessionId: string | null;
  onReschedule: (appt: Appointment) => void;
}) {
  // A waitlist-backed entry (GRO-2319 item 2, CMPO UX spec GRO-2328) is not a
  // confirmed appointment: it gets a muted, dashed-border card and a subtext
  // line so the customer can tell it apart from booked appointments, and the
  // appointment-only actions (confirm / notes / reschedule / cancel) are hidden.
  const isWaitlist = appt.status === 'waitlisted';
  return (
    <div
      className={
        isWaitlist
          ? 'bg-stone-50/60 rounded-xl border border-dashed border-stone-300 shadow-sm overflow-hidden'
          : 'bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden'
      }
    >
      <button
        onClick={onToggle}
        className={`w-full flex items-center gap-4 p-4 text-left ${
          isWaitlist ? 'hover:bg-stone-100/60' : 'hover:bg-stone-50'
        }`}
      >
        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg shrink-0">
          {appt.petName?.charAt(0) || 'P'}
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-medium text-stone-800 text-sm">
            {appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
          </p>
          <div className="flex items-center gap-3 text-xs text-stone-500 mt-0.5">
            <span className="flex items-center gap-1">
              <Calendar size={12} />
              {formatDate(appt.date)}
            </span>
            <span className="flex items-center gap-1">
              <Clock size={12} />
              {appt.time}
            </span>
            <span>with {appt.groomerName || 'First Available'}</span>
          </div>
          {isWaitlist && (
            <p className="text-xs text-stone-400 mt-1">
              You're on the waitlist — we'll let you know if a spot opens.
            </p>
          )}
        </div>
        <StatusBadge status={deriveDisplayStatus(appt)} />
        {expanded ? (
          <ChevronDown size={16} className="text-stone-400" />
        ) : (
          <ChevronRight size={16} className="text-stone-400" />
        )}
      </button>
      {expanded && (
        <div className="px-4 pb-4 pt-0 border-t border-stone-100">
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 py-3 text-sm">
            {appt.duration && (
              <div>
                <p className="text-xs text-stone-400">Duration</p>
                <p className="text-stone-700">{appt.duration} min</p>
              </div>
            )}
            {appt.price && (
              <div>
                <p className="text-xs text-stone-400">Estimated Price</p>
                <p className="text-stone-700">${appt.price}</p>
              </div>
            )}
            {appt.addOns && appt.addOns.length > 0 && (
              <div className="col-span-2">
                <p className="text-xs text-stone-400">Add-ons</p>
                <p className="text-stone-700">{appt.addOns.join(', ')}</p>
              </div>
            )}
          </div>
          {appt.notes && (
            <p className="text-sm text-stone-600 bg-stone-50 rounded-lg px-3 py-2 mb-3">
              {appt.notes}
            </p>
          )}
          {!isWaitlist && isUpcoming(appt) && !readOnly && (
            <CustomerNotesSection appointment={appt} sessionId={sessionId} />
          )}
          {!isWaitlist && isUpcoming(appt) && (
            <ConfirmationSection appointment={appt} sessionId={sessionId} />
          )}
          {!isWaitlist &&
            appt.status !== 'completed' &&
            appt.status !== 'cancelled' &&
            !readOnly && (
              <div className="flex gap-2 mt-3">
                <button
                  onClick={() => onReschedule(appt)}
                  className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50"
                >
                  Reschedule
                </button>
                <CancelAppointmentButton appointment={appt} sessionId={sessionId} />
              </div>
            )}
        </div>
      )}
    </div>
  );
}

export function ConfirmationSection({
  appointment: appt,
  sessionId,
}: {
  appointment: Appointment;
  sessionId: string | null;
}) {
  const [confirming, setConfirming] = useState(false);
  const [confirmError, setConfirmError] = useState<string | null>(null);
  const [confirmSuccess, setConfirmSuccess] = useState(false);
  const [localStatus, setLocalStatus] = useState(appt.confirmationStatus);

  async function handleConfirm() {
    if (!window.confirm('Confirm this appointment?')) return;
    setConfirming(true);
    setConfirmError(null);
    try {
      const headers: Record<string, string> = {};
      if (sessionId) {
        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
      }
      const res = await fetch(`/api/portal/appointments/${appt.id}/confirm`, {
        method: 'POST',
        headers,
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed to confirm' }));
        throw new Error(err.error || `HTTP ${res.status}`);
      }
      setLocalStatus('confirmed');
      setConfirmSuccess(true);
      setTimeout(() => setConfirmSuccess(false), 2000);
    } catch (e) {
      setConfirmError(e instanceof Error ? e.message : 'Failed to confirm');
    } finally {
      setConfirming(false);
    }
  }

  const currentStatus = localStatus ?? appt.confirmationStatus;
  const statusLabel =
    currentStatus === 'confirmed'
      ? 'Confirmed'
      : currentStatus === 'pending'
        ? 'Pending confirmation'
        : 'Cancelled';

  return (
    <div className="mt-3 p-3 bg-stone-50 rounded-lg">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span
            className={`px-2 py-0.5 rounded-full text-xs font-medium ${
              CONFIRMATION_STATUS_COLORS[currentStatus || 'pending'] || ''
            }`}
          >
            {statusLabel}
          </span>
        </div>
        {!confirmSuccess && currentStatus === 'pending' && (
          <button
            onClick={handleConfirm}
            disabled={confirming}
            className="flex items-center gap-1.5 text-xs px-3 py-1.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {confirming && <Loader2 size={12} className="animate-spin" />}
            {confirming ? 'Confirming...' : 'Confirm Appointment'}
          </button>
        )}
        {confirmSuccess && (
          <span className="text-xs text-green-600 font-medium">Confirmed!</span>
        )}
      </div>
      {confirmError && <p className="text-xs text-red-500 mt-1">{confirmError}</p>}
    </div>
  );
}

function CancelAppointmentButton({
  appointment: appt,
  sessionId,
}: {
  appointment: Appointment;
  sessionId: string | null;
}) {
  const [cancelling, setCancelling] = useState(false);
  const [cancelError, setCancelError] = useState<string | null>(null);

  async function handleCancel() {
    if (!window.confirm('Cancel this appointment? This cannot be undone.')) return;
    setCancelling(true);
    setCancelError(null);
    try {
      const headers: Record<string, string> = {};
      if (sessionId) {
        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
      }
      const res = await fetch(`/api/portal/appointments/${appt.id}/cancel`, {
        method: 'POST',
        headers,
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed to cancel' }));
        throw new Error(err.error || `HTTP ${res.status}`);
      }
      window.location.reload();
    } catch (e) {
      setCancelError(e instanceof Error ? e.message : 'Failed to cancel');
      setCancelling(false);
    }
  }

  return (
    <>
      <button
        onClick={handleCancel}
        disabled={cancelling}
        className="text-xs px-3 py-1.5 border border-red-200 rounded-lg text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {cancelling ? 'Cancelling...' : 'Cancel'}
      </button>
      {cancelError && <p className="text-xs text-red-500 mt-1">{cancelError}</p>}
    </>
  );
}

export function CustomerNotesSection({
  appointment: appt,
  sessionId,
}: {
  appointment: Appointment;
  sessionId: string | null;
}) {
  const [notes, setNotes] = useState(appt.customerNotes || '');
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const isDisabled = appt.status === 'completed' || appt.status === 'cancelled';

  async function handleSave() {
    setSaving(true);
    setError(null);
    setSaved(false);
    try {
      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
      if (sessionId) {
        headers['X-Impersonation-Session-Id'] = sessionId ?? '';
      }
      const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
        method: 'PATCH',
        headers,
        body: JSON.stringify({ customerNotes: notes }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed to save' }));
        throw new Error(err.error || `HTTP ${res.status}`);
      }
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="mt-3 p-3 bg-stone-50 rounded-lg">
      <div className="flex items-center justify-between mb-1.5">
        <label className="text-xs font-medium text-stone-600">Notes for your groomer</label>
        <span
          className={`text-xs ${
            notes.length > MAX_CUSTOMER_NOTES ? 'text-red-500' : 'text-stone-400'
          }`}
        >
          {notes.length}/{MAX_CUSTOMER_NOTES}
        </span>
      </div>
      <textarea
        value={notes}
        onChange={(e) => setNotes(e.target.value.slice(0, MAX_CUSTOMER_NOTES))}
        disabled={isDisabled}
        className="w-full text-sm border border-stone-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-stone-100 disabled:text-stone-400"
        rows={3}
        placeholder="Any special requests or notes for this appointment..."
      />
      {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
      {saved && <p className="text-xs text-green-600 mt-1">Saved!</p>}
      {!isDisabled && (
        <button
          onClick={handleSave}
          disabled={saving || notes === appt.customerNotes}
          className="mt-2 flex items-center gap-1.5 text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {saving && <Loader2 size={12} className="animate-spin" />}
          {saving ? 'Saving...' : 'Save Notes'}
        </button>
      )}
    </div>
  );
}

export function RescheduleFlow({
  appointment: appt,
  onClose,
  sessionId,
}: RescheduleFlowProps) {
  const [selectedDate, setSelectedDate] = useState('');
  const [selectedTime, setSelectedTime] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [slotsLoading, setSlotsLoading] = useState(false);
  const [slotsError, setSlotsError] = useState<string | null>(null);
  const [availableTimes, setAvailableTimes] = useState<string[]>([]);

  useEffect(() => {
    if (!selectedDate || !sessionId) {
      setAvailableTimes([]);
      setSlotsError(null);
      return;
    }
    if (!appt.serviceId) {
      setAvailableTimes([]);
      setSlotsError('Failed to load time slots');
      return;
    }
    let cancelled = false;
    setSlotsLoading(true);
    setSlotsError(null);
    fetchAvailability({ serviceId: appt.serviceId, date: selectedDate }, sessionId).then(
      ({ times, error }) => {
        if (cancelled) return;
        setAvailableTimes(times);
        setSlotsError(error);
        setSlotsLoading(false);
      },
    );
    return () => {
      cancelled = true;
    };
  }, [selectedDate, sessionId, appt.serviceId]);

  async function handleSubmit() {
    if (!selectedDate || !selectedTime) return;

    const [hoursMinutes = '', period = ''] = selectedTime.split(' ');
    const [hoursStr = '0', minutesStr = '0'] = hoursMinutes.split(':');
    let hours = parseInt(hoursStr, 10);
    const minutes = parseInt(minutesStr ?? '0', 10);
    if (period === 'PM' && hours !== 12) hours += 12;
    if (period === 'AM' && hours === 12) hours = 0;
    const isoTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
    const startTime = new Date(`${selectedDate}T${isoTime}`).toISOString();

    setSubmitting(true);
    setError(null);
    try {
      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
      if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId ?? '';
      const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
        method: 'POST',
        headers,
        body: JSON.stringify({ startTime }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed to reschedule' }));
        throw new Error(err.error || `HTTP ${res.status}`);
      }
      setSuccess(true);
      setTimeout(() => {
        window.location.reload();
      }, 1500);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to reschedule');
      setSubmitting(false);
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between p-5 border-b border-stone-200">
          <h2 className="font-semibold text-stone-800">Reschedule Appointment</h2>
          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">
            Close
          </button>
        </div>

        <div className="p-5">
          {success ? (
            <div className="text-center py-8">
              <div className="text-4xl mb-3">OK</div>
              <h3 className="text-lg font-semibold text-stone-800 mb-1">
                Appointment Rescheduled!
              </h3>
              <p className="text-sm text-stone-500">Redirecting...</p>
            </div>
          ) : (
            <>
              <div className="bg-stone-50 rounded-xl p-4 mb-4 text-sm">
                <p className="font-medium text-stone-800">
                  {appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
                </p>
                <p className="text-stone-500 mt-0.5">
                  {formatDate(appt.date)} at {appt.time} with{' '}
                  {appt.groomerName || 'First Available'}
                </p>
              </div>

              <h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
              <input
                type="date"
                aria-label="Select date"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                min={new Date().toISOString().split('T')[0]}
                className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
              />
              {selectedDate && (
                <div className="grid grid-cols-3 gap-2 mb-4">
                  {slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
                  {!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
                  {!slotsLoading && availableTimes.length === 0 && !slotsError && (
                    <p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
                  )}
                  {!slotsLoading && availableTimes.map((time) => (
                    <button
                      key={time}
                      onClick={() => setSelectedTime(time)}
                      className={`px-3 py-2 rounded-lg text-sm border ${
                        selectedTime === time
                          ? 'border-blue-500 bg-blue-50 font-medium'
                          : 'border-stone-200 hover:border-stone-300'
                      }`}
                    >
                      {time}
                    </button>
                  ))}
                </div>
              )}

              {error && <p className="text-xs text-red-500 mb-3">{error}</p>}

              <div className="flex gap-2">
                <button
                  onClick={onClose}
                  className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSubmit}
                  disabled={!selectedDate || !selectedTime || submitting}
                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {submitting ? 'Rescheduling...' : 'Confirm Reschedule'}
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

interface BookingFlowProps {
  onClose: () => void;
  sessionId: string | null;
}

export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
  const [step, setStep] = useState(1);
  const [pets, setPets] = useState<Pet[]>([]);
  const [services, setServices] = useState<Service[]>([]);
  const [selectedPet, setSelectedPet] = useState<Pet | null>(null);
  const [selectedServices, setSelectedServices] = useState<Service[]>([]);
  const [selectedAddOns, setSelectedAddOns] = useState<Service[]>([]);
  const [selectedGroomer] = useState<string>('first-available');
  const [selectedDate, setSelectedDate] = useState('');
  const [selectedTime, setSelectedTime] = useState('');
  const [notes, setNotes] = useState('');
  const [recurring, setRecurring] = useState('');
  const [confirmed, setConfirmed] = useState(false);
  useEffect(() => {
    if (confirmed) {
      fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "portal" });
    }
  }, [confirmed]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [slotsLoading, setSlotsLoading] = useState(false);
  const [slotsError, setSlotsError] = useState<string | null>(null);
  const [availableTimes, setAvailableTimes] = useState<string[]>([]);

  useEffect(() => {
    if (!selectedDate || !sessionId) {
      setAvailableTimes([]);
      setSlotsError(null);
      return;
    }
    const serviceId = selectedServices[0]?.id;
    if (!serviceId) {
      setAvailableTimes([]);
      setSlotsError('Failed to load time slots');
      return;
    }
    let cancelled = false;
    setSlotsLoading(true);
    setSlotsError(null);
    fetchAvailability({ serviceId, date: selectedDate }, sessionId).then(
      ({ times, error }) => {
        if (cancelled) return;
        setAvailableTimes(times);
        setSlotsError(error);
        setSlotsLoading(false);
      },
    );
    return () => {
      cancelled = true;
    };
  }, [selectedDate, sessionId, selectedServices]);

  useEffect(() => {
    const fetchData = async () => {
      if (!sessionId) {
        setLoading(false);
        return;
      }

      try {
        const [petsRes, servicesRes] = await Promise.all([
          fetch('/api/portal/pets', {
            headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
          }),
          fetch('/api/portal/services', {
            headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
          }),
        ]);

        if (petsRes.ok) {
          const petsData = await petsRes.json();
          setPets(petsData.pets || petsData || []);
        }

        if (servicesRes.ok) {
          const servicesData = await servicesRes.json();
          const rawServices: RawApiService[] = servicesData.services || servicesData || [];
          setServices(rawServices.map(normalizeService));
        }
      } catch {
        setError('Failed to load data. Please try again.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [sessionId]);

  const mainServices = services.filter((s) => !s.isAddOn);
  const addOnServices = services.filter((s) => s.isAddOn);

  async function handleConfirmBooking() {
    if (!sessionId || !selectedPet || selectedServices.length === 0) return;

    setSubmitting(true);
    setError(null);

    const payload = JSON.stringify({
      petId: selectedPet.id,
      serviceId: selectedServices[0]?.id,
      serviceIds: selectedServices.map((s) => s.id),
      addOnIds: selectedAddOns.map((s) => s.id),
      groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
      preferredDate: selectedDate,
      preferredTime: slotToTime(selectedTime),
      notes: notes || undefined,
      recurring: recurring || undefined,
    });
    const submitWaitlist = (id: string) =>
      fetch('/api/portal/waitlist', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Impersonation-Session-Id': id,
        },
        body: payload,
      });

    try {
      let response = await submitWaitlist(sessionId);

      // GRO-2234: a deliberately-paced wizard can outlive the portal session.
      // The customer's Better Auth session is still valid, so transparently
      // re-mint a fresh portal session and retry once before surfacing an error.
      if (response.status === 401) {
        const freshSessionId = await remintPortalSession();
        if (freshSessionId) {
          response = await submitWaitlist(freshSessionId);
        }
      }

      if (response.ok) {
        setConfirmed(true);
        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });
        setTimeout(() => {
          window.location.reload();
        }, 1500);
      } else {
        const data = await response.json();
        setError(data.message || 'Failed to book appointment. Please try again.');
        setSubmitting(false);
      }
    } catch {
      setError('Failed to book appointment. Please try again.');
      setSubmitting(false);
    }
  }

  if (loading) {
    return (
      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full p-8">
          <div className="flex items-center justify-center">
            <Loader2 className="animate-spin text-blue-600" size={24} />
            <span className="ml-3 text-gray-600">Loading...</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between p-5 border-b border-stone-200">
          <h2 className="font-semibold text-stone-800">Book Appointment</h2>
          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">
            Close
          </button>
        </div>

        <div className="flex items-center gap-1 px-5 pt-4">
          {[1, 2, 3, 4, 5].map((s) => (
            <div
              key={s}
              className={`flex-1 h-1.5 rounded-full ${s <= step ? 'bg-blue-600' : 'bg-stone-200'}`}
            />
          ))}
        </div>

        <div className="p-5">
          {confirmed ? (
            <div className="text-center py-8">
              <div className="text-4xl mb-3">OK</div>
              <h3 className="text-lg font-semibold text-stone-800 mb-1">
                Appointment Requested!
              </h3>
              <p className="text-sm text-stone-500 mb-4">
                {selectedPet?.name} on {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
              </p>
              <button
                onClick={onClose}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
              >
                Done
              </button>
            </div>
          ) : (
            <>
              {step === 1 && (
                <div>
                  <h3 className="font-medium text-stone-800 mb-3">Select Pet</h3>
                  <div className="space-y-2">
                    {pets.map((pet) => (
                      <button
                        key={pet.id}
                        onClick={() => {
                          setSelectedPet(pet);
                          setStep(2);
                          fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "portal" });
                        }}
                        className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
                          selectedPet?.id === pet.id
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-stone-200 hover:border-stone-300'
                        }`}
                      >
                        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg">
                          {pet.photo || pet.name.charAt(0)}
                        </div>
                        <div>
                          <p className="font-medium text-stone-800">{pet.name}</p>
                          <p className="text-xs text-stone-500">
                            {pet.breed}
                            {pet.weight ? ` · ${pet.weight} lbs` : ''}
                          </p>
                        </div>
                      </button>
                    ))}
                    {pets.length === 0 && (
                      <p className="text-center text-stone-400 py-4">
                        No pets found. Please add a pet first.
                      </p>
                    )}
                  </div>
                  <button
                    onClick={() => setStep(2)}
                    disabled={!selectedPet}
                    className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              )}

              {step === 2 && (
                <div>
                  <h3 className="font-medium text-stone-800 mb-3">Select Services</h3>
                  <div className="space-y-2 mb-4">
                    {mainServices.map((svc) => (
                      <button
                        key={svc.id}
                        onClick={() => {
                          setSelectedServices((prev) =>
                            prev.find((s) => s.id === svc.id)
                              ? prev.filter((s) => s.id !== svc.id)
                              : [...prev, svc]
                          );
                        }}
                        className={`w-full flex items-center justify-between p-3 rounded-xl border text-left ${
                          selectedServices.find((s) => s.id === svc.id)
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-stone-200 hover:border-stone-300'
                        }`}
                      >
                        <div>
                          <p className="font-medium text-stone-800 text-sm">{svc.name}</p>
                          {svc.description && (
                            <p className="text-xs text-stone-500">{svc.description}</p>
                          )}
                        </div>
                        <div className="text-right shrink-0 ml-3">
                          {formatServicePrice(svc) && (
                            <p className="text-sm font-medium text-stone-700">
                              {formatServicePrice(svc)}
                            </p>
                          )}
                          {typeof svc.duration === 'number' && (
                            <p className="text-xs text-stone-400">{svc.duration} min</p>
                          )}
                        </div>
                      </button>
                    ))}
                  </div>
                  {selectedServices.length > 0 && addOnServices.length > 0 && (
                    <>
                      <h4 className="font-medium text-stone-700 text-sm mb-2">
                        Add-ons (optional)
                      </h4>
                      <div className="space-y-2 mb-4">
                        {addOnServices.map((svc) => (
                          <button
                            key={svc.id}
                            onClick={() => {
                              setSelectedAddOns((prev) =>
                                prev.find((s) => s.id === svc.id)
                                  ? prev.filter((s) => s.id !== svc.id)
                                  : [...prev, svc]
                              );
                            }}
                            className={`w-full flex items-center justify-between p-2.5 rounded-lg border text-left text-sm ${
                              selectedAddOns.find((s) => s.id === svc.id)
                                ? 'border-blue-500 bg-blue-50'
                                : 'border-stone-200 hover:border-stone-300'
                            }`}
                          >
                            <div>
                              <p className="font-medium text-stone-800">{svc.name}</p>
                              {svc.description && (
                                <p className="text-xs text-stone-500">{svc.description}</p>
                              )}
                            </div>
                            {formatServicePrice(svc) && (
                              <span className="text-stone-600 shrink-0 ml-3">
                                {formatServicePrice(svc)}
                              </span>
                            )}
                          </button>
                        ))}
                      </div>
                    </>
                  )}
                  <div className="flex gap-2 mt-4">
                    <button
                      onClick={() => setStep(1)}
                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                    >
                      Back
                    </button>
                    <button
                      onClick={() => setStep(3)}
                      disabled={selectedServices.length === 0}
                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                    >
                      Next
                    </button>
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <h3 className="font-medium text-stone-800 mb-3">Select Groomer</h3>
                  <div className="space-y-2">
                    <button
                      onClick={() => setStep(4)}
                      className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left ${
                        selectedGroomer === 'first-available'
                          ? 'border-blue-500 bg-blue-50'
                          : 'border-stone-200 hover:border-stone-300'
                      }`}
                    >
                      <div className="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
                        First
                      </div>
                      <div>
                        <p className="font-medium text-stone-800">First Available</p>
                        <p className="text-xs text-stone-500">
                          We will match you with the best available groomer
                        </p>
                      </div>
                    </button>
                  </div>
                  <p className="text-xs text-stone-400 mt-3">
                    Note: Groomer listing not available. Showing "First Available" only.
                  </p>
                  <div className="flex gap-2 mt-4">
                    <button
                      onClick={() => setStep(2)}
                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                    >
                      Back
                    </button>
                    <button
                      onClick={() => {
                        setStep(4);
                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
                      }}
                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
                    >
                      Next
                    </button>
                  </div>
                </div>
              )}

              {step === 4 && (
                <div>
                  <h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
                  <input
                    type="date"
                    aria-label="Select date"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    min={new Date().toISOString().split('T')[0]}
                    className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
                  />
                  {selectedDate && (
                    <div className="grid grid-cols-3 gap-2 mb-4">
                      {slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
                      {!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
                      {!slotsLoading && availableTimes.length === 0 && !slotsError && (
                        <p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
                      )}
                      {!slotsLoading && availableTimes.map((time) => (
                        <button
                          key={time}
                          onClick={() => setSelectedTime(time)}
                          className={`px-3 py-2 rounded-lg text-sm border ${
                            selectedTime === time
                              ? 'border-blue-500 bg-blue-50 font-medium'
                              : 'border-stone-200 hover:border-stone-300'
                          }`}
                        >
                          {formatSlotLabel(time)}
                        </button>
                      ))}
                    </div>
                  )}
                  <div className="mb-4">
                    <label className="flex items-center gap-2 text-sm text-stone-700 mb-1">
                      Recurring (optional)
                    </label>
                    <select
                      value={recurring}
                      onChange={(e) => setRecurring(e.target.value)}
                      className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm"
                    >
                      <option value="">One-time</option>
                      <option value="4">Every 4 weeks</option>
                      <option value="6">Every 6 weeks</option>
                      <option value="8">Every 8 weeks</option>
                    </select>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setStep(3)}
                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                    >
                      Back
                    </button>
                    <button
                      onClick={() => {
                        setStep(5);
                        fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
                      }}
                      disabled={!selectedDate || !selectedTime}
                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
                    >
                      Next
                    </button>
                  </div>
                </div>
              )}

              {step === 5 && (
                <div>
                  <h3 className="font-medium text-stone-800 mb-3">Review & Confirm</h3>
                  <div className="bg-stone-50 rounded-xl p-4 space-y-2 text-sm mb-4">
                    <div className="flex justify-between">
                      <span className="text-stone-500">Pet</span>
                      <span className="font-medium">{selectedPet?.name}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-stone-500">Services</span>
                      <span className="font-medium">
                        {selectedServices.map((s) => s.name).join(', ')}
                      </span>
                    </div>
                    {selectedAddOns.length > 0 && (
                      <div className="flex justify-between">
                        <span className="text-stone-500">Add-ons</span>
                        <span className="font-medium">
                          {selectedAddOns.map((s) => s.name).join(', ')}
                        </span>
                      </div>
                    )}
                    <div className="flex justify-between">
                      <span className="text-stone-500">Groomer</span>
                      <span className="font-medium">First Available</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-stone-500">Date & Time</span>
                      <span className="font-medium">
                        {formatDate(selectedDate)} at {formatSlotLabel(selectedTime)}
                      </span>
                    </div>
                    {recurring && (
                      <div className="flex justify-between">
                        <span className="text-stone-500">Recurring</span>
                        <span className="font-medium">Every {recurring} weeks</span>
                      </div>
                    )}
                  </div>
                  <div className="mb-4">
                    <label className="block text-sm font-medium text-stone-700 mb-1">
                      Notes for groomer (optional)
                    </label>
                    <textarea
                      value={notes}
                      onChange={(e) => setNotes(e.target.value)}
                      className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
                      rows={2}
                      placeholder="Any special instructions..."
                    />
                  </div>
                  {error && (
                    <div className="bg-red-50 rounded-lg px-3 py-2 text-xs text-red-700 mb-4">
                      {error}
                    </div>
                  )}
                  <div className="flex gap-2">
                    <button
                      onClick={() => setStep(4)}
                      className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
                    >
                      Back
                    </button>
                    <button
                      onClick={handleConfirmBooking}
                      disabled={submitting}
                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
                    >
                      {submitting ? 'Booking...' : 'Confirm Booking'}
                    </button>
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}