/**
 * Mrbarber — Booking wizard (Amelia Elite REST integration)
 * ---------------------------------------------------------
 * Browser-compiled via Babel Standalone — no build step.
 */

const { useState, useEffect, useMemo, useCallback } = React;

/* ================================================================== *
 *  i18n — reads window.MrbI18n.t (the 'booking' dict section)        *
 * ================================================================== */

const _i18n = (window.MrbI18n && window.MrbI18n.t) || {};

function t(key, vars) {
  const parts = key.split('.');
  let node = _i18n;
  for (const p of parts) {
    if (node && typeof node === 'object' && p in node) node = node[p];
    else return key;
  }
  if (typeof node !== 'string') return node;
  if (vars) return node.replace(/\{(\w+)\}/g, (_, k) => vars[k] != null ? String(vars[k]) : '{' + k + '}');
  return node;
}

// Day names (Mon-first, index 0=Mon … 6=Sun) and month names from dictionary.
const DOW    = Array.isArray(_i18n.day_short)   ? _i18n.day_short   : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
const MONTHS = Array.isArray(_i18n.month_names) ? _i18n.month_names : ['January','February','March','April','May','June','July','August','September','October','November','December'];

// Convert JS getDay() (0=Sun) to Monday-first DOW index.
function dowName(jsDay) { return DOW[(jsDay + 6) % 7]; }

/* ================================================================== *
 *  Amelia API client — talks to the WP proxy, which adds the API key. *
 * ================================================================== */

const cfg = window.MrbBooking || {};

async function ameliaCall(method, endpoint, body = null) {
  const url = new URL(cfg.proxyUrl);
  url.searchParams.set('action', 'mrb_amelia');
  url.searchParams.set('nonce', cfg.nonce);
  url.searchParams.set('endpoint', endpoint);

  const opts = { method, credentials: 'same-origin' };
  if (body) {
    opts.headers = { 'Content-Type': 'application/json' };
    opts.body = JSON.stringify(body);
  }

  const res = await fetch(url.toString(), opts);
  const text = await res.text();
  let json;
  try { json = JSON.parse(text); } catch { json = { raw: text }; }

  if (!res.ok) {
    const msg = json?.data?.message || json?.message || `HTTP ${res.status}`;
    throw new Error(msg);
  }
  return json;
}

const Amelia = {
  getLocations:  ()  => ameliaCall('GET', '/locations'),
  getServices:   ()  => ameliaCall('GET', '/services'),
  getProviders: (locationId) =>
    ameliaCall('GET', `/users/providers?location=${locationId}`),
  getProviderDetail: (id) =>
    ameliaCall('GET', `/users/providers/${id}`),
  getSlots: ({ serviceId, providerId, locationId, from, to, durationSeconds, persons = 1 }) => {
    const params = new URLSearchParams({
      serviceId: String(serviceId),
      persons: String(persons),
      startDateTime: from,
      endDateTime: to,
      extras: '[]',
    });
    if (durationSeconds) params.set('serviceDuration', String(durationSeconds));
    if (providerId)       params.append('providerIds[0]', String(providerId));
    if (locationId)       params.set('locationId', String(locationId));
    return ameliaCall('GET', `/slots?${params.toString()}`);
  },
  createBooking: (payload) => ameliaCall('POST', '/bookings', payload),
};

/* ================================================================== *
 *  Response normalizers                                               *
 * ================================================================== */

function normalizeLocations(raw) {
  const list = raw?.data?.locations || [];
  return list
    .filter(l => l.status === 'visible')
    .map(l => ({
      id: l.id,
      name: l.name,
      address: l.address || '',
      phone: l.phone || '',
      area: l.description || '',
      tag: l.pin ? 'Flagship' : 'Atelier',
      chairs: l.customCapacity || null,
      picture: l.pictureFullPath || null,
    }));
}

function normalizeServices(raw) {
  const list = raw?.data?.services || [];
  return list
    .filter(s => s.status === 'visible' && s.show !== false)
    .map(s => ({
      id: s.id,
      name: s.name,
      desc: s.description || '',
      price: Number(s.price) || 0,
      duration: Math.round((s.duration || 0) / 60),
      unit: cfg.currency || 'MKD',
      categoryId: s.categoryId,
    }));
}

function normalizeProviderObject(u) {
  if (!u) return null;
  const locIds = new Set();
  if (u.locationId) locIds.add(u.locationId);
  (u.weekDayList || []).forEach(day => {
    (day.periodList || []).forEach(period => {
      if (period.locationId) locIds.add(period.locationId);
      (period.periodLocationList || []).forEach(pl => {
        if (pl.locationId) locIds.add(pl.locationId);
      });
    });
  });
  const svcIds = new Set();
  (u.serviceList || []).forEach(s => svcIds.add(s.id ?? s));
  (u.weekDayList || []).forEach(day => {
    (day.periodList || []).forEach(period => {
      (period.periodServiceList || []).forEach(ps => {
        if (ps.serviceId) svcIds.add(ps.serviceId);
      });
    });
  });
  return {
    id: u.id,
    name: [u.firstName, u.lastName].filter(Boolean).join(' '),
    firstName: u.firstName || '',
    role: u.note || 'Barber',
    tenure: '',
    locationIds: Array.from(locIds),
    locationId: u.locationId || null,
    serviceIds: Array.from(svcIds),
    picture: u.pictureFullPath || null,
  };
}

function normalizeProviderDetail(raw) {
  const user = raw?.data?.user;
  return normalizeProviderObject(user);
}

function providerWorksAt(p, locationId) {
  if (!locationId) return true;
  if (p.locationIds && p.locationIds.length > 0) return p.locationIds.includes(locationId);
  if (p.locationId) return p.locationId === locationId;
  return true;
}


function selectedServiceIds(state) {
  return Array.isArray(state.services) ? state.services : [];
}

function isExclusiveService(service) {
  return String(service?.desc || '').trim() === '1';
}

function getSelectedServices(catalog, state) {
  const ids = selectedServiceIds(state);
  return catalog.services.filter(s => ids.includes(s.id));
}

function getPrimaryService(catalog, state) {
  const ids = selectedServiceIds(state);
  return catalog.services.find(s => s.id === ids[0]) || null;
}

function getSelectedDurationMinutes(services) {
  return services.reduce((sum, s) => sum + (Number(s.duration) || 0), 0);
}

function getSelectedTotalPrice(services) {
  return services.reduce((sum, s) => sum + (Number(s.price) || 0), 0);
}


/* ================================================================== *
 *  Validation helpers                                                 *
 * ================================================================== */

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function validateEmail(email) {
  const e = (email || '').trim();
  if (!e) return t('err_email_req');
  if (!EMAIL_RE.test(e)) return t('err_email_bad');
  return null;
}

function onlyDigits(s) { return (s || '').replace(/\D/g, ''); }

function formatMkPhone(input) {
  const d = onlyDigits(input).slice(0, 9);
  if (d.length <= 3) return d;
  if (d.length <= 6) return `${d.slice(0, 3)} ${d.slice(3)}`;
  return `${d.slice(0, 3)} ${d.slice(3, 6)} ${d.slice(6)}`;
}

function validateMkPhone(input) {
  const d = onlyDigits(input);
  if (d.length === 0) return t('err_phone_req');
  if (d.length !== 9) return t('err_phone_len', { n: d.length });
  if (d[0] !== '0')   return t('err_phone_start');
  return null;
}

function toE164Mk(input) {
  const d = onlyDigits(input);
  if (d.length !== 9) return input;
  return '+389' + d.slice(1);
}

function fromE164Mk(input) {
  if (!input) return '';
  const digits = onlyDigits(input);
  let national;
  if (input.trim().startsWith('+389') || digits.startsWith('389')) {
    national = '0' + digits.slice(3);
  } else if (digits.startsWith('0')) {
    national = digits;
  } else {
    return '';
  }
  return formatMkPhone(national);
}

/* ================================================================== *
 *  Top-level BookingPage                                              *
 * ================================================================== */

function BookingPage({ onNav }) {
  const [step, setStep] = useState(0);
  const [user, setUser] = useState(cfg.user || null);
  const [signInOpen, setSignInOpen] = useState(false);

  const prefillName = user
    ? (user.displayName || [user.firstName, user.lastName].filter(Boolean).join(' '))
    : '';

  const [state, setState] = useState({
  location: null, services: [], barber: null,   // was: service: null
  date: null, slot: null,
  name:  prefillName,
  email: user?.email || '',
  phone: fromE164Mk(user?.phone || ''),
});

  const handleLoginSuccess = (newUser, payload) => {
    setUser(newUser);
    if (payload.newNonce)  cfg.nonce     = payload.newNonce;
    if (payload.logoutUrl) cfg.logoutUrl = payload.logoutUrl;
    setState(s => ({
      ...s,
      name:  newUser.displayName || [newUser.firstName, newUser.lastName].filter(Boolean).join(' ') || s.name,
      email: newUser.email,
      phone: fromE164Mk(newUser.phone || '') || s.phone,
    }));
    setSignInOpen(false);
  };

  const [catalog, setCatalog] = useState({
    locations: [], services: [], providers: [],
    loading: true, error: null,
    providersStatus: 'idle',
    providersError: null,
  });

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const [locRes, svcRes] = await Promise.all([
          Amelia.getLocations(),
          Amelia.getServices(),
        ]);
        if (!alive) return;
        setCatalog(c => ({
          ...c,
          locations: normalizeLocations(locRes),
          services: normalizeServices(svcRes),
          loading: false,
        }));
      } catch (err) {
        if (alive) setCatalog(c => ({ ...c, loading: false, error: err.message }));
      }
    })();
    return () => { alive = false; };
  }, []);

  useEffect(() => {
    if (!state.location) return;
    let alive = true;
    setCatalog(c => ({ ...c, providersStatus: 'loading', providersError: null }));

    (async () => {
      try {
        const listRes = await Amelia.getProviders(state.location);
        const shallow = listRes?.data?.users || [];
        if (!alive) return;
        if (shallow.length === 0) {
          setCatalog(c => ({ ...c, providers: [], providersStatus: 'loaded' }));
          return;
        }
        const detailResponses = await Promise.all(
          shallow
            .filter(u => u.status !== 'hidden')
            .map(u =>
              Amelia.getProviderDetail(u.id).catch(err => {
                console.warn(`[Mrb] detail fetch failed for provider ${u.id}:`, err.message);
                return null;
              })
            )
        );
        if (!alive) return;
        const providers = detailResponses
          .map(r => (r ? normalizeProviderDetail(r) : null))
          .filter(Boolean);
        setCatalog(c => ({ ...c, providers, providersStatus: 'loaded' }));
      } catch (err) {
        console.error('[Mrb] providers fetch failed:', err);
        if (alive) setCatalog(c => ({
          ...c,
          providersStatus: 'error',
          providersError: err.message,
        }));
      }
    })();

    return () => { alive = false; };
  }, [state.location]);

  const selectedLocation = catalog.locations.find(l => l.id === state.location);
const selectedServices = catalog.services.filter(s => state.services.includes(s.id)); // was find/selectedService
const selectedBarber   = catalog.providers.find(b => b.id === state.barber);

  const step5Valid = user
    ? !!user.email
    : (state.name.trim() && !validateEmail(state.email) && !validateMkPhone(state.phone));

  const canAdvance = [
  !!state.location,
  !!state.barber,
  state.services.length > 0,   // was !!state.service
  !!state.date && !!state.slot,
  step5Valid,
  true,
][step];

  const steps = [
    t('steps.location'),
    t('steps.barber'),
    t('steps.service'),
    t('steps.schedule'),
    t('steps.details'),
    t('steps.confirm'),
  ];

  const next = () => setStep(s => Math.min(s + 1, steps.length - 1));
  const prev = () => setStep(s => Math.max(s - 1, 0));

  if (catalog.loading) return <LoadingState />;
  if (catalog.error && !catalog.locations.length) return <ErrorState message={catalog.error} />;

  return (
    <div className="booking-page">
      <div className="booking-main">
        <div className="eyebrow">{t('page_eyebrow')}</div>
        <h1 className="display h-1" style={{margin: '20px 0 12px'}}>
          <span className="roman" style={{fontStyle:'normal', fontWeight:300}}>{t('page_title_pre')}</span>{' '}
          <span className="italic">{t('page_title_post')}</span>
        </h1>
        <p className="body" style={{maxWidth: 560, marginBottom: 40}}>
          {t('page_body')}
        </p>

        <div className="steps-rail">
          {steps.map((label, i) => (
            <div key={i}
                 className={`step-pill ${i === step ? 'active' : i < step ? 'done' : ''}`}
                 onClick={() => i < step && setStep(i)}
                 style={{cursor: i < step ? 'pointer' : 'default'}}>
              <span className="dot">{i < step ? '✓' : i + 1}</span>
              <span>{label}</span>
            </div>
          ))}
        </div>

        {step === 0 && <StepLocation state={state} setState={setState} catalog={catalog} />}
        {step === 1 && <StepBarber   state={state} setState={setState} catalog={catalog} />}
        {step === 2 && <StepService  state={state} setState={setState} catalog={catalog} />}
        {step === 3 && <StepSchedule state={state} setState={setState} catalog={catalog} />}
        {step === 4 && <StepDetails  state={state} setState={setState} user={user} onSignIn={() => setSignInOpen(true)} />}
        {step === 5 && <StepConfirm  state={state} catalog={catalog} user={user} onNav={onNav} />}

        {step < 5 && (
          <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 60, paddingTop: 40, borderTop: '1px solid var(--line)'}}>
            <button className="btn btn-ghost" onClick={prev} disabled={step === 0}
                    style={{opacity: step === 0 ? 0.4 : 1}}>
              {t('back')}
            </button>
            <button className="btn btn-primary btn-lg" onClick={next} disabled={!canAdvance}
                    style={{opacity: canAdvance ? 1 : 0.4, pointerEvents: canAdvance ? 'auto' : 'none'}}>
              {step === 4 ? t('review') : t('continue')} <span className="arrow">→</span>
            </button>
          </div>
        )}
      </div>

      <BookingSummary state={state} location={selectedLocation} services={selectedServices}
                barber={selectedBarber} step={step} />

      <SignInModal open={signInOpen}
                   onClose={() => setSignInOpen(false)}
                   onSuccess={handleLoginSuccess} />
    </div>
  );
}

/* ================================================================== *
 *  Loading / error states                                             *
 * ================================================================== */

function LoadingState() {
  return (
    <div style={{padding: '120px 40px', textAlign: 'center'}}>
      <div className="eyebrow gold">{t('loading_eyebrow')}</div>
      <h2 className="display h-2" style={{margin: '20px 0'}}>
        {t('loading_title_pre')} <span className="italic gold">{t('loading_title_post')}</span>&hellip;
      </h2>
      <p className="body">{t('loading_body')}</p>
    </div>
  );
}

function ErrorState({ message }) {
  return (
    <div style={{padding: '120px 40px', textAlign: 'center', maxWidth: 600, margin: '0 auto'}}>
      <div className="eyebrow" style={{color: 'var(--danger)'}}>{t('error_eyebrow')}</div>
      <h2 className="display h-2" style={{margin: '20px 0'}}>
        {t('error_title_pre')} <span className="italic">{t('error_title_post')}</span>
      </h2>
      <p className="body">{message}</p>
      <p className="body" style={{marginTop: 20, fontSize: 13}}>
        {t('error_body')}
      </p>
    </div>
  );
}

/* ================================================================== *
 *  Inline sign-in modal                                               *
 * ================================================================== */

function SignInModal({ open, onClose, onSuccess }) {
  const [email, setEmail]       = useState('');
  const [password, setPassword] = useState('');
  const [remember, setRemember] = useState(true);
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState(null);

  useEffect(() => {
    if (!open) {
      setEmail(''); setPassword(''); setError(null); setLoading(false);
    }
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = async (e) => {
    e.preventDefault();
    if (loading) return;
    setLoading(true);
    setError(null);
    try {
      const body = new FormData();
      body.append('action', 'mrb_login');
      body.append('nonce', cfg.nonce);
      body.append('username', email.trim());
      body.append('password', password);
      if (remember) body.append('remember', '1');
      const res = await fetch(cfg.proxyUrl, {
        method: 'POST', body, credentials: 'same-origin',
      });
      const json = await res.json();
      if (!json || json.success !== true) {
        const msg = json?.data?.message || t('signin_err_generic');
        throw new Error(msg);
      }
      onSuccess(json.data.user, json.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div onClick={onClose}
         style={{position: 'fixed', inset: 0, background: 'rgba(11,11,12,0.82)',
                 backdropFilter: 'blur(8px)', zIndex: 1000, display: 'grid',
                 placeItems: 'center', padding: 20}}>
      <div onClick={(e) => e.stopPropagation()}
           style={{background: 'var(--ink-2)', border: '1px solid var(--gold)',
                   padding: 40, width: '100%', maxWidth: 440, boxShadow: 'var(--shadow-deep)'}}>
        <div className="eyebrow gold" style={{marginBottom: 8}}>{t('signin_eyebrow')}</div>
        <h3 className="display" style={{fontSize: 36, fontStyle: 'italic', margin: '0 0 8px', fontWeight: 400}}>
          {t('signin_title_pre')} <span className="gold">{t('signin_title_post')}</span>
        </h3>
        <p className="body" style={{fontSize: 13, marginBottom: 28}}>
          {t('signin_body')}
        </p>
        <form onSubmit={submit}>
          <div className="form-field" style={{marginBottom: 16}}>
            <label>{t('signin_email')}</label>
            <input type="text" value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   autoComplete="username" autoFocus
                   placeholder={t('ph_email')} />
          </div>
          <div className="form-field" style={{marginBottom: 16}}>
            <label>{t('signin_password')}</label>
            <input type="password" value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   autoComplete="current-password" placeholder="••••••••" />
          </div>
          <label style={{display: 'flex', alignItems: 'center', gap: 8,
                         cursor: 'pointer', marginBottom: 20}}>
            <input type="checkbox" checked={remember}
                   onChange={(e) => setRemember(e.target.checked)}
                   style={{margin: 0}} />
            <span className="micro" style={{color: 'var(--text-dim)', textTransform: 'none',
                                            letterSpacing: '0.02em', fontSize: 12}}>
              {t('signin_remember')}
            </span>
          </label>
          {error && (
            <div style={{border: '1px solid var(--danger)', padding: '10px 14px',
                         marginBottom: 20, color: 'var(--danger)', fontSize: 12,
                         fontFamily: 'var(--mono)', letterSpacing: '0.06em'}}>
              {error}
            </div>
          )}
          <div style={{display: 'flex', gap: 10, marginBottom: 20}}>
            <button type="button" onClick={onClose} className="btn btn-ghost"
                    style={{flex: 1}} disabled={loading}>
              {t('signin_cancel')}
            </button>
            <button type="submit" className="btn btn-primary"
                    style={{flex: 2, opacity: loading ? 0.6 : 1,
                            pointerEvents: loading ? 'none' : 'auto'}}
                    disabled={loading}>
              {loading ? t('signin_loading') : t('signin_submit')} <span className="arrow">→</span>
            </button>
          </div>
          <div style={{display: 'flex', justifyContent: 'space-between',
                       alignItems: 'center', paddingTop: 16, borderTop: '1px solid var(--line)'}}>
            <a href={cfg.lostPasswordUrl || '#'} className="micro"
               style={{color: 'var(--text-dim)', textDecoration: 'underline'}}>
              {t('signin_forgot')}
            </a>
            <span className="micro" style={{color: 'var(--text-mute)'}}>
              {t('signin_new')}
            </span>
          </div>
        </form>
      </div>
    </div>
  );
}

/* ================================================================== *
 *  STEP 0 — Location                                                  *
 * ================================================================== */

function StepLocation({ state, setState, catalog }) {
  return (
    <div>
      <div className="eyebrow">{t('steps_of', { n: 1 })}</div>
      <h2 className="display h-2" style={{margin: '12px 0 40px'}}>
        {t('step1_title_pre')} <span className="italic gold">{t('step1_title_post')}</span>
      </h2>
      <div className="bk-service-grid">
        {catalog.locations.map(l => (
          <div key={l.id}
               className={`bk-service ${state.location === l.id ? 'selected' : ''}`}
               onClick={() => setState(v => ({...v, location: l.id, barber: null, services: [], date: null, slot: null}))}
               style={{gridTemplateColumns: '1fr', gap: 0}}>
            <LocationThumb location={l} />
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <h4 style={{margin: 0}}>{l.name}</h4>
              <div className="duration" style={{margin: 0}}>{l.tag}</div>
            </div>
            <p style={{margin: '10px 0 0'}}>{l.address}</p>
            {l.phone && (
              <p style={{margin: '4px 0 0', color: 'var(--text-mute)', fontSize: 12}}>{l.phone}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function LocationThumb({ location }) {
  if (location.picture) {
    return (
      <div className="ph ph-img" style={{aspectRatio: '16/9', marginBottom: 20, position: 'relative'}}>
        <img src={location.picture} alt={location.name}
             style={{width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0}} />
        <div className="ph-img-overlay" />
        <div className="ph-corner">{location.tag}</div>
      </div>
    );
  }
  return (
    <div className={`ph ${location.tag === 'Flagship' ? 'ph-gold' : ''}`}
         style={{aspectRatio: '16/9', marginBottom: 20}}>
      <div className="ph-corner">{location.tag}</div>
      <div className="ph-label">{location.name} · Storefront</div>
    </div>
  );
}

/* ================================================================== *
 *  STEP 1 — Barber                                                    *
 * ================================================================== */

function StepBarber({ state, setState, catalog }) {
  const loc = catalog.locations.find(l => l.id === state.location);
  const locBarbers = catalog.providers.filter(b => providerWorksAt(b, state.location));
  const options = [
    //{ id: 'any', name: t('any_barber'), role: t('first_available'), tenure: '—' },
    ...locBarbers,
  ];

  const { providersStatus, providersError } = catalog;

  const countText = locBarbers.length === 1
    ? t('step2_sub_count', { n: locBarbers.length })
    : t('step2_sub_count_plural', { n: locBarbers.length });

  return (
    <div>
      <div className="eyebrow">{t('steps_of', { n: 2 })}</div>
      <h2 className="display h-2" style={{margin: '12px 0 16px'}}>
        {t('step2_title_pre')} <span className="italic gold">{t('step2_title_post')}</span>
      </h2>
      <p className="body" style={{marginBottom: 40, fontSize: 13}}>
        {/* {t('step2_sub', { location: loc?.name || '' })}
        {providersStatus === 'loaded' && ` · ${countText}`} */}
      </p>

      {providersStatus === 'loading' && <p className="body">{t('step2_loading')}</p>}

      {providersStatus === 'error' && (
        <div style={{border: '1px solid var(--danger)', padding: 24}}>
          <div className="eyebrow" style={{color: 'var(--danger)'}}>{t('step2_err_eyebrow')}</div>
          <p className="body" style={{marginTop: 12, fontSize: 13}}>{providersError}</p>
        </div>
      )}

      {providersStatus === 'loaded' && locBarbers.length === 0 && (
        <div style={{border: '1px solid var(--line-strong)', padding: 24}}>
          <div className="eyebrow">{t('step2_no_barbers_eyebrow')}</div>
          <p className="body" style={{marginTop: 12, fontSize: 13}}>
            {t('step2_no_barbers')}
          </p>
        </div>
      )}

      {providersStatus === 'loaded' && locBarbers.length > 0 && (
        <div className="bk-barber-grid">
          {options.map(b => (
            <div key={b.id}
                 className={`bk-barber ${state.barber === b.id ? 'selected' : ''}`}
                 onClick={() => setState(v => ({...v, barber: b.id, services: [], date: null, slot: null}))}>
              <BarberThumb barber={b} />
              <h4>{b.id === 'any' ? t('any_barber') : b.firstName || b.name.split(' ')[0]}</h4>
              <div className="role">{b.role}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function BarberThumb({ barber }) {
  if (barber.picture) {
    return (
      <div className="ph ph-img" style={{aspectRatio: 1, marginBottom: 14, position: 'relative'}}>
        <img src={barber.picture} alt={barber.name}
             style={{width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0}} />
        <div className="ph-img-overlay" />
      </div>
    );
  }
  return (
    <div className="ph" style={{aspectRatio: 1, marginBottom: 14}}>
      <div className="ph-label">{barber.id === 'any' ? '✦' : (barber.firstName || barber.name.split(' ')[0])}</div>
    </div>
  );
}

/* ================================================================== *
 *  STEP 2 — Service                                                   *
 * ================================================================== */

function StepService({ state, setState, catalog }) {
  const relevantBarbers = state.barber === 'any'
    ? catalog.providers.filter(p => providerWorksAt(p, state.location))
    : catalog.providers.filter(p => p.id === state.barber);

  const serviceIdsOffered = new Set(relevantBarbers.flatMap(p => p.serviceIds));
  const hasAnyAssignments = relevantBarbers.some(p => p.serviceIds.length > 0);
  const services = hasAnyAssignments
    ? catalog.services.filter(s => serviceIdsOffered.has(s.id))
    : catalog.services;

  const pickedBarber = catalog.providers.find(p => p.id === state.barber);
  const subtitle = state.barber === 'any'
    ? t('step3_sub_any')
    : pickedBarber
      ? t('step3_sub_one', { name: pickedBarber.firstName || pickedBarber.name })
      : null;

  // A description can list several group tokens separated by "|".
  // e.g. "2|2.1" -> the service belongs to groups "2" AND "2.1".
  // Blank description -> a single unique token so it never collides with anything.
  const groupsOf = (s) => {
    const raw = String(s.desc || '').trim();
    if (raw === '') return [`__svc_${s.id}`];
    return raw.split('|').map(x => x.trim()).filter(Boolean);
  };

  const selectedIds = state.services || [];

  // Every group token currently occupied by a selected service.
  const lockedGroups = new Set(
    services
      .filter(s => selectedIds.includes(s.id))
      .flatMap(groupsOf)
  );

  const toggle = (s) => setState(v => {
    const cur = v.services || [];
    const next = cur.includes(s.id)
      ? cur.filter(id => id !== s.id)   // deselect
      : [...cur, s.id];                 // select
    return { ...v, services: next, date: null, slot: null };
  });

  return (
    <div>
      <div className="eyebrow">{t('steps_of', { n: 3 })}</div>
      <h2 className="display h-2" style={{margin: '12px 0 16px'}}>
        {t('step3_title_pre')} <span className="italic gold">{t('step3_title_post')}</span>
      </h2>
      {subtitle && <p className="body" style={{marginBottom: 40, fontSize: 13}}>{subtitle}</p>}
      {services.length === 0 ? (
        <p className="body">{t('step3_no_services')}</p>
      ) : (
        <div className="bk-service-grid">
          {services.map(s => {
            const isSelected = selectedIds.includes(s.id);
            // Disabled if not selected and it shares ANY group with a selection.
            const disabled = !isSelected && groupsOf(s).some(g => lockedGroups.has(g));
            return (
              <div key={s.id}
                   className={`bk-service ${isSelected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}
                   onClick={() => { if (!disabled) toggle(s); }}
                   style={{ opacity: disabled ? 0.35 : 1, cursor: disabled ? 'not-allowed' : 'pointer' }}>
                <div>
                  <h4>{s.name}</h4>
                  <div className="duration">{t('duration_min', { n: s.duration })}</div>
                </div>
                <div className="price">
                  {s.price}
                  <span style={{fontSize: 11, color: 'var(--text-mute)', fontStyle:'normal', marginLeft: 4}}>
                    {s.unit}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ================================================================== *
 *  STEP 3 — Schedule                                                  *
 * ================================================================== */

function StepSchedule({ state, setState, catalog }) {
  const today = useMemo(() => {
    const t = new Date();
    t.setHours(0, 0, 0, 0);
    return t;
  }, []);

  const [viewMonth, setViewMonth] = useState({ y: today.getFullYear(), m: today.getMonth() });
  const [monthSlots, setMonthSlots] = useState({ data: null, loading: false, error: null });

  const selectedServices    = getSelectedServices(catalog, state);
  const primaryService      = getPrimaryService(catalog, state);
  const durationMinutes     = getSelectedDurationMinutes(selectedServices);
  const durationSeconds     = durationMinutes > 0 ? durationMinutes * 60 : undefined;
  const selectedServicesKey = selectedServiceIds(state).join(',');

  useEffect(() => {
    if (!primaryService) return;
    let alive = true;
    setMonthSlots({ data: null, loading: true, error: null });

    const first = new Date(viewMonth.y, viewMonth.m, 1);
    const last  = new Date(viewMonth.y, viewMonth.m + 1, 0);
    const from  = fmtDateTime(first, '00:00');
    const to    = fmtDateTime(last, '23:59');

    Amelia.getSlots({
      serviceId: primaryService.id,
      providerId: state.barber === 'any' ? null : state.barber,
      locationId: state.location,
      from, to,
      durationSeconds,
      persons: 1,
    })
      .then(res => { if (alive) setMonthSlots({ data: res, loading: false, error: null }); })
      .catch(err => { if (alive) setMonthSlots({ data: null, loading: false, error: err.message }); });

    return () => { alive = false; };
  }, [viewMonth.y, viewMonth.m, selectedServicesKey, state.barber, state.location, durationSeconds]);

  const firstDay = new Date(viewMonth.y, viewMonth.m, 1);
  const startDow = (firstDay.getDay() + 6) % 7;
  const daysInMonth = new Date(viewMonth.y, viewMonth.m + 1, 0).getDate();
  const prevMonthDays = new Date(viewMonth.y, viewMonth.m, 0).getDate();

  const cells = [];
  for (let i = startDow - 1; i >= 0; i--) cells.push({ d: prevMonthDays - i, other: true });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ d, other: false });
  while (cells.length % 7 !== 0) cells.push({ d: cells.length - daysInMonth - startDow + 1, other: true });

  const isSelected = (c) => !c.other && state.date &&
    state.date.y === viewMonth.y && state.date.m === viewMonth.m && state.date.d === c.d;
  const isToday = (c) => !c.other &&
    viewMonth.y === today.getFullYear() && viewMonth.m === today.getMonth() && c.d === today.getDate();
  const isPast = (c) => {
    if (c.other) return true;
    return new Date(viewMonth.y, viewMonth.m, c.d) < today;
  };

  const availableDays = useMemo(() => {
    const set = new Set();
    const slots = monthSlots.data?.data?.slots || {};
    Object.keys(slots).forEach(dateKey => {
      if (Object.keys(slots[dateKey]).length > 0) set.add(dateKey);
    });
    return set;
  }, [monthSlots.data]);

  const hasSlots = (c) => {
    if (c.other) return false;
    const key = `${viewMonth.y}-${String(viewMonth.m + 1).padStart(2, '0')}-${String(c.d).padStart(2, '0')}`;
    return availableDays.has(key);
  };

  const setDate = (c) => {
    if (isPast(c) || !hasSlots(c)) return;
    setState(v => ({...v, date: { y: viewMonth.y, m: viewMonth.m, d: c.d }, slot: null}));
  };

  const slotsForDay = useMemo(() => {
    if (!state.date || !monthSlots.data) return [];
    const key = `${state.date.y}-${String(state.date.m + 1).padStart(2, '0')}-${String(state.date.d).padStart(2, '0')}`;
    const bucket = monthSlots.data?.data?.slots?.[key] || {};
    return Object.keys(bucket).map(t => t.slice(0, 5)).sort();
  }, [state.date, monthSlots.data]);

  const slotDayLabel = state.date
    ? `${dowName(new Date(state.date.y, state.date.m, state.date.d).getDay())} · ${state.date.d} ${MONTHS[state.date.m].slice(0, 3)}`
    : t('select_date');

  return (
    <div>
      <div className="eyebrow">{t('steps_of', { n: 4 })}</div>
      <h2 className="display h-2" style={{margin: '12px 0 40px'}}>
        {t('step4_title_pre')} <span className="italic gold">{t('step4_title_post')}</span>
      </h2>

      <div className="cal-wrap">
        <div>
          <div className="cal-header">
            <h4>{MONTHS[viewMonth.m]} <span className="gold">{viewMonth.y}</span></h4>
            <div className="cal-nav">
              <button onClick={() => setViewMonth(v => v.m === 0 ? {y: v.y - 1, m: 11} : {y: v.y, m: v.m - 1})}>‹</button>
              <button onClick={() => setViewMonth(v => v.m === 11 ? {y: v.y + 1, m: 0} : {y: v.y, m: v.m + 1})}>›</button>
            </div>
          </div>

          <div className="cal-grid">
            {DOW.map(d => <div key={d} className="cal-dow">{d}</div>)}
            {cells.map((c, i) => {
              const disabled = isPast(c) || !hasSlots(c);
              return (
                <div key={i}
                     className={`cal-day ${c.other ? 'other' : ''} ${disabled ? 'disabled' : ''} ${isSelected(c) ? 'selected' : ''} ${isToday(c) ? 'today' : ''} ${hasSlots(c) ? 'has-slots' : ''}`}
                     onClick={() => setDate(c)}>
                  {c.d}
                </div>
              );
            })}
          </div>

          <div style={{display:'flex', gap: 24, marginTop: 24, paddingTop: 16, borderTop: '1px solid var(--line)'}}>
            <LegendDot color="var(--gold)" label={t('legend_selected')} />
            <LegendDot color="transparent" border="var(--line-strong)" label={t('legend_available')} />
            <LegendDot color="var(--text-mute)" label={t('legend_closed')} opacity={0.35} />
          </div>

          {monthSlots.loading && (
            <div className="micro" style={{marginTop: 16, textAlign: 'center'}}>{t('cal_loading')}</div>
          )}
          {monthSlots.error && (
            <div className="micro" style={{marginTop: 16, textAlign: 'center', color: 'var(--danger)'}}>
              {monthSlots.error}
            </div>
          )}
        </div>

        <div className="slots">
          <h5>{slotDayLabel}</h5>
          {state.date ? (
            slotsForDay.length > 0 ? (
              slotsForDay.map(s => (
                <button key={s}
                        className={`slot ${state.slot === s ? 'selected' : ''}`}
                        onClick={() => setState(v => ({...v, slot: s}))}>
                  {s}
                </button>
              ))
            ) : (
              <div style={{padding: '40px 0', color: 'var(--text-mute)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.14em', textTransform: 'uppercase'}}>
                {t('cal_no_avail')}
              </div>
            )
          ) : (
            <div style={{padding: '40px 0', color: 'var(--text-mute)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.14em', textTransform: 'uppercase'}}>
              {t('cal_no_date')}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function LegendDot({ color, border, label, opacity = 1 }) {
  return (
    <div style={{display: 'flex', alignItems: 'center', gap: 8, opacity}}>
      <div style={{width: 10, height: 10, background: color, border: border ? `1px solid ${border}` : 'none'}} />
      <span className="micro">{label}</span>
    </div>
  );
}

/* ================================================================== *
 *  STEP 4 — Details (user banner + form only for guests)              *
 * ================================================================== */

function UserStateBanner({ user, onSignIn }) {
  if (user) {
    const displayName = user.displayName
      || [user.firstName, user.lastName].filter(Boolean).join(' ')
      || user.email;
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '20px 24px',
        marginBottom: 24,
        border: '1px solid var(--gold)',
        background: 'color-mix(in oklab, var(--gold) 6%, transparent)',
        gap: 16,
      }}>
        <div>
          <div className="eyebrow gold" style={{marginBottom: 4}}>{t('welcome_back')}</div>
          <div style={{fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 24}}>
            {t('booking_as')} <span style={{color: 'var(--gold)'}}>{displayName}</span>
          </div>
          <div className="body" style={{fontSize: 12, marginTop: 4, color: 'var(--text-mute)'}}>
            {user.email}
            {user.phone && <span> · {fromE164Mk(user.phone) || user.phone}</span>}
          </div>
        </div>
        <a href={cfg.logoutUrl || '#'}
           className="btn btn-ghost"
           style={{textDecoration: 'none', flexShrink: 0}}>
          {t('sign_out')}
        </a>
      </div>
    );
  }

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '16px 20px',
      marginBottom: 24,
      border: '1px solid var(--line-strong)',
      gap: 16,
    }}>
      <div>
        <div className="eyebrow" style={{marginBottom: 4}}>{t('returning')}</div>
        <div className="body" style={{fontSize: 13}}>{t('returning_body')}</div>
      </div>
      <button type="button" onClick={onSignIn} className="btn">
        {t('sign_in')}
      </button>
    </div>
  );
}

function StepDetails({ state, setState, user, onSignIn }) {
  const [touched, setTouched] = useState({});

  const update = (k) => (e) => {
    let val = e.target.value;
    if (k === 'phone') val = formatMkPhone(val);
    setState(v => ({...v, [k]: val}));
  };
  const markTouched = (k) => () => setTouched(t => ({...t, [k]: true}));

  const emailError = touched.email ? validateEmail(state.email) : null;
  const phoneError = touched.phone ? validateMkPhone(state.phone) : null;

  const errorStyle = {
    color: 'var(--danger)',
    fontSize: 11,
    fontFamily: 'var(--mono)',
    letterSpacing: '0.06em',
    marginTop: 4,
    textTransform: 'uppercase',
  };

  return (
    <div>
      <div className="eyebrow">{t('steps_of', { n: 5 })}</div>
      <h2 className="display h-2" style={{margin: '12px 0 40px'}}>
        {t('step5_title_pre')} <span className="italic gold">{t('step5_title_post')}</span>
      </h2>

      <UserStateBanner user={user} onSignIn={onSignIn} />

      {!user && (
        <div className="form-grid">
          <div className="form-field">
            <label>{t('field_name')}</label>
            <input value={state.name} onChange={update('name')} placeholder={t('ph_name')} />
          </div>

          <div className="form-field">
            <label>{t('field_phone')}</label>
            <div style={{
              display: 'flex',
              alignItems: 'stretch',
              border: `1px solid ${phoneError ? 'var(--danger)' : 'var(--line)'}`,
              transition: 'border-color .2s',
            }}>
              <span style={{
                padding: '0 16px',
                background: 'var(--ink-2)',
                borderRight: '1px solid var(--line)',
                fontFamily: 'var(--mono)',
                fontSize: 13,
                color: 'var(--gold)',
                letterSpacing: '0.08em',
                display: 'flex',
                alignItems: 'center',
                userSelect: 'none',
                whiteSpace: 'nowrap',
              }}>
                +389
              </span>
              <input
                style={{
                  flex: 1,
                  background: 'transparent',
                  border: 'none',
                  padding: '14px 16px',
                  color: 'var(--text)',
                  fontSize: 14,
                  fontFamily: 'var(--mono)',
                  letterSpacing: '0.05em',
                  outline: 'none',
                  minWidth: 0,
                }}
                value={state.phone}
                onChange={update('phone')}
                onBlur={markTouched('phone')}
                placeholder={t('ph_phone')}
                inputMode="tel"
                autoComplete="tel-national"
                maxLength={11}
              />
            </div>
            {phoneError && <div style={errorStyle}>{phoneError}</div>}
          </div>

          <div className="form-field full">
            <label>{t('field_email')}</label>
            <input
              value={state.email}
              onChange={update('email')}
              onBlur={markTouched('email')}
              placeholder={t('ph_email')}
              type="email"
              autoComplete="email"
              style={emailError ? {borderColor: 'var(--danger)'} : undefined}
            />
            {emailError && <div style={errorStyle}>{emailError}</div>}
          </div>
        </div>
      )}
    </div>
  );
}

/* ================================================================== *
 *  STEP 5 — Confirm (posts the booking)                               *
 * ================================================================== */

function StepConfirm({ state, catalog, user, onNav }) {
  // Selection order matters for chaining, so map the ordered IDs -> service objects.
  const orderedServices = state.services
    .map(id => catalog.services.find(s => s.id === id))
    .filter(Boolean);

  const serviceNames    = orderedServices.map(s => s.name).join(', ');
  const durationMinutes = getSelectedDurationMinutes(orderedServices);

  const barber   = catalog.providers.find(b => b.id === state.barber);
  const location = catalog.locations.find(l => l.id === state.location);
  const d = state.date ? new Date(state.date.y, state.date.m, state.date.d) : null;
  const dateStr = d
    ? `${dowName(d.getDay())}, ${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`
    : '';

  const [status, setStatus] = useState('idle');
  const [error, setError]   = useState(null);
  const [ref, setRef]       = useState(null);

  useEffect(() => {
    if (status !== 'idle') return;

    if (orderedServices.length === 0) {
      setStatus('error');
      setError(t('step3_no_services'));
      return;
    }

    let providerId = state.barber;
    if (providerId === 'any') {
      const pick = catalog.providers.find(p =>
        providerWorksAt(p, state.location) &&
        state.services.every(id => p.serviceIds.length === 0 || p.serviceIds.includes(id))
      );
      providerId = pick?.id;
    }
    if (!providerId) {
      setStatus('error');
      setError(t('err_no_barber'));
      return;
    }

    const firstName = user
      ? (user.firstName || user.displayName || '')
      : (state.name.trim().split(/\s+/)[0] || state.name);
    const lastName = user
      ? (user.lastName || '')
      : (state.name.trim().split(/\s+/).slice(1).join(' ') || '');
    const email = user ? user.email : state.email.trim();
    const phoneRaw = user ? user.phone : state.phone;
    const phone = phoneRaw
      ? (phoneRaw.startsWith('+') ? phoneRaw : toE164Mk(phoneRaw))
      : '';

    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const pad = (n) => String(n).padStart(2, '0');
    const fmtStart = (dt) =>
      `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`;

    // Running start cursor, beginning at the chosen slot.
    const [sh, sm] = state.slot.split(':').map(Number);
    let cursor = new Date(state.date.y, state.date.m, state.date.d, sh, sm, 0, 0);

    const buildPayload = (svc, bookingStart, durationSeconds) => ({
      type: 'appointment',
      bookings: [{
        extras: [],
        customFields: {},
        deposit: true,
        locale: cfg.locale || 'en_US',
        utcOffset: null,
        persons: 1,
        customerId: null,
        customer: {
          id: null,
          firstName,
          lastName,
          email,
          phone,
          countryPhoneIso: 'mk',
          externalId: null,
        },
        duration: durationSeconds,
      }],
      payment: { gateway: 'onSite', currency: cfg.currency || 'USD', data: {} },
      bookingStart,
      notifyParticipants: 1,
      locationId: state.location,
      providerId,
      serviceId: svc.id,
      locale: cfg.locale || 'en_US',
      timeZone,
      couponCode: null,
      runInstantPostBookingActions: true,
    });

    setStatus('submitting');

    (async () => {
      const refs = [];
      try {
        for (const svc of orderedServices) {
          const durMin = svc.duration || 30;
          const durSec = Math.max(60, durMin * 60);
          const bookingStart = fmtStart(cursor);

          const res = await Amelia.createBooking(buildPayload(svc, bookingStart, durSec));
          const appointmentId = res?.data?.appointment?.id;
          const bookingId     = res?.data?.booking?.id
                             ?? res?.data?.appointment?.bookings?.[0]?.id;
          if (!appointmentId && !bookingId) {
            const serverMsg = res?.message || JSON.stringify(res).slice(0, 300);
            throw new Error(
              `Amelia accepted "${svc.name}" but returned no appointment ID. Server said: ${serverMsg}`
            );
          }
          refs.push(`MRB-${appointmentId || bookingId}`);

          // Advance the cursor by this service's duration for the next one.
          cursor = new Date(cursor.getTime() + durMin * 60000);
        }
        setRef(refs.join(', '));
        setStatus('success');
      } catch (err) {
        const partial = refs.length
          ? ` (${refs.length} of ${orderedServices.length} were already booked: ${refs.join(', ')})`
          : '';
        setError(err.message + partial);
        setStatus('error');
      }
    })();
  }, []);

  if (status === 'submitting') {
    return (
      <div className="confirm-card">
        <div className="eyebrow gold">{t('confirm_in_progress')}</div>
        <h2 className="display" style={{fontSize: 48, margin: '20px 0'}}>
          <span className="italic">{t('step6_submitting_title')}</span>{' '}
          {t('step6_submitting_post')}
        </h2>
        <p className="body">{t('step6_submitting_body')}</p>
      </div>
    );
  }

  if (status === 'error') {
    return (
      <div className="confirm-card" style={{borderColor: 'var(--danger)'}}>
        <div className="eyebrow" style={{color: 'var(--danger)'}}>{t('booking_failed_eyebrow')}</div>
        <h2 className="display" style={{fontSize: 48, margin: '20px 0'}}>
          {t('step6_fail_title')}
        </h2>
        <p className="body" style={{marginBottom: 20}}>{error}</p>
        <p className="body" style={{fontSize: 13}}>{t('step6_fail_body')}</p>
        <div style={{marginTop: 30}}>
          <button className="btn" onClick={() => onNav && onNav('home')}>{t('back_to_site')}</button>
        </div>
      </div>
    );
  }

  const displayEmail = user ? user.email : state.email;
  const barberLabel  = state.barber === 'any' ? t('any_barber') : barber?.name;

  return (
    <div className="confirm-card">
      <div className="seal">✓</div>
      <div className="eyebrow gold">{t('confirm_eyebrow')}</div>
      <h2 className="display" style={{fontSize: 56, margin: '16px 0 10px', lineHeight: 1}}>
        <span className="roman" style={{fontStyle:'normal', fontWeight: 300}}>{t('step6_title_pre')}</span>{' '}
        <span className="italic gold">{t('step6_title_post')}</span>
      </h2>
      <p className="body" style={{maxWidth: 420, margin: '0 auto'}}>
        {t('confirm_body', { email: displayEmail || t('confirm_email_fallback') })}
      </p>

      <div className="confirm-details">
        <div className="d-item">
          <div className="lbl">{t('confirm_labels.location')}</div>
          <div className="val">
            {location?.name}<br/>
            <span style={{fontSize: 12, color: 'var(--text-mute)', fontStyle: 'normal', fontFamily: 'var(--mono)', letterSpacing: '0.08em'}}>
              {location?.address}
            </span>
          </div>
        </div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.service')}</div><div className="val">{serviceNames}</div></div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.barber')}</div><div className="val">{barberLabel}</div></div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.duration')}</div><div className="val">{durationMinutes ? t('duration_min', { n: durationMinutes }) : ''}</div></div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.date')}</div><div className="val">{dateStr}</div></div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.time')}</div><div className="val">{state.slot}</div></div>
        <div className="d-item"><div className="lbl">{t('confirm_labels.reference')}</div>
          <div className="val" style={{fontFamily: 'var(--mono)', fontSize: 14, fontStyle: 'normal', letterSpacing: '0.1em'}}>{ref}</div>
        </div>
      </div>

      <div style={{display: 'flex', gap: 12, justifyContent: 'center'}}>
        <button className="btn" onClick={() => onNav && onNav('home')}>{t('back_to_site')}</button>
      </div>
    </div>
  );
}

/* ================================================================== *
 *  Summary aside                                                      *
 * ================================================================== */

function BookingSummary({ state, location, services, barber, step }) {
  const d = state.date ? new Date(state.date.y, state.date.m, state.date.d) : null;
  const dateStr    = d ? `${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}` : null;
  const barberName = state.barber === 'any' ? t('any_barber') : barber?.name;

  const totalDuration = services.reduce((sum, s) => sum + s.duration, 0);
  const totalPrice    = services.reduce((sum, s) => sum + s.price, 0);
  const unit          = services[0]?.unit;
  const serviceNames  = services.map(s => s.name).join(', ');

  return (
    <aside className="booking-aside">
      <div className="summary-sub">{t('summary_sub')}</div>
      <div className="summary-title">{t('summary_title')}</div>

      <div style={{flex: 'none'}}>
        <Row label={t('confirm_labels.location')} val={location?.name} />
        <Row label={t('confirm_labels.barber')}   val={barberName} />
        <Row label={t('confirm_labels.service')}  val={services.length ? serviceNames : null} />
        <Row label={t('confirm_labels.duration')} val={services.length ? t('duration_min', { n: totalDuration }) : null} />
        <Row label={t('confirm_labels.date')}     val={dateStr} />
        <Row label={t('confirm_labels.time')}     val={state.slot} />

        {services.length > 0 && (
          <div className="summary-total">
            <div className="lbl">{t('confirm_labels.total')} · {unit}</div>
            <div className="val">{totalPrice}</div>
          </div>
        )}
      </div>

      {/* summary-cta block stays exactly as it is */}
      <div className="summary-cta">
        <div className="micro" style={{textAlign:'center'}}>{t('steps_of', { n: Math.min(step + 1, 6) })}</div>
        <div style={{display: 'flex', gap: 6, marginTop: 8}}>
          {[0,1,2,3,4,5].map(i => (
            <div key={i} style={{flex: 1, height: 2, background: i <= step ? 'var(--gold)' : 'var(--line)'}} />
          ))}
        </div>
        <p className="body" style={{fontSize: 11, marginTop: 20, textAlign: 'center', color: 'var(--text-mute)'}}>
          {t('summary_secure')}
        </p>
      </div>
    </aside>
  );
}

function Row({ label, val }) {
  return (
    <div className="summary-row">
      <div className="lbl">{label}</div>
      <div className={`val ${!val ? 'empty' : ''}`}>{val || t('confirm_labels.not_set')}</div>
    </div>
  );
}

/* ================================================================== *
 *  Utilities                                                          *
 * ================================================================== */

function fmtDateTime(date, time) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d} ${time}`;
}

/* ================================================================== *
 *  Mount                                                              *
 * ================================================================== */

function mrbMount() {
  const el = document.getElementById('mrb-booking-root');
  if (!el) return;
  el.removeAttribute('data-loading');
  el.innerHTML = '';
  const root = ReactDOM.createRoot(el);
  root.render(React.createElement(BookingPage, {
    onNav: (where) => { if (where === 'home') window.location.href = '/'; },
  }));
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mrbMount);
} else {
  mrbMount();
}

Object.assign(window, { MrbBookingPage: BookingPage, MrbAmelia: Amelia });