// Extras: PIN-lock, sletteårsag-modal, kassesystem (POS), kunde-cancel/ombook side

// ---------- PIN-lock ----------
// Defaults to "123456" — shown in the prompt UI
const ADMIN_PIN = '123456';

const PinLockModal = ({ open, title, subtitle, onClose, onSuccess }) => {
  const [pin, setPin] = React.useState('');
  const [shake, setShake] = React.useState(false);
  const inputs = React.useRef([]);

  React.useEffect(() => {
    if (open) {
      setPin('');
      setShake(false);
      setTimeout(() => inputs.current[0]?.focus(), 100);
    }
  }, [open]);

  if (!open) return null;

  const setDigit = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const next = pin.split('');
    next[i] = v;
    const joined = next.join('').padEnd(0, '');
    setPin(joined.slice(0, 6));
    if (v && i < 5) inputs.current[i + 1]?.focus();
    if (joined.length === 6) {
      setTimeout(() => trySubmit(joined), 80);
    }
  };

  const onKey = (i, e) => {
    if (e.key === 'Backspace' && !pin[i] && i > 0) {
      inputs.current[i - 1]?.focus();
    }
  };

  const trySubmit = (val) => {
    const candidate = val ?? pin;
    if (candidate === ADMIN_PIN) {
      onSuccess();
    } else {
      setShake(true);
      setTimeout(() => { setPin(''); setShake(false); inputs.current[0]?.focus(); }, 400);
    }
  };

  return (
    <Backdrop onClose={onClose} width={380}>
      <div style={{ padding: '28px 28px 16px', textAlign: 'center' }}>
        <div style={{
          width: 56, height: 56, margin: '0 auto 14px',
          borderRadius: '50%', background: '#F4F2EA',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#3F4A3A',
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <rect x="4" y="11" width="16" height="9" rx="2" />
            <path d="M8 11V7a4 4 0 0 1 8 0v4" />
          </svg>
        </div>
        <div style={{ fontSize: 18, fontWeight: 600, color: '#1a1a1a' }}>{title || 'PIN-kode kræves'}</div>
        <div style={{ fontSize: 13, color: '#777', marginTop: 4, lineHeight: 1.5, padding: '0 8px' }}>
          {subtitle || 'Indtast 6-cifret administrator-PIN for at fortsætte.'}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'center', gap: 8, margin: '24px 0 6px',
          animation: shake ? 'shake 320ms' : 'none',
        }}>
          {Array.from({ length: 6 }).map((_, i) => (
            <input
              key={i}
              ref={el => inputs.current[i] = el}
              type="password"
              inputMode="numeric"
              maxLength={1}
              value={pin[i] || ''}
              onChange={e => setDigit(i, e.target.value)}
              onKeyDown={e => onKey(i, e)}
              style={{
                width: 40, height: 48, textAlign: 'center',
                fontSize: 20, fontWeight: 600,
                border: `1.5px solid ${shake ? '#C25555' : (pin[i] ? '#3F4A3A' : '#DDD9CE')}`,
                borderRadius: 8, background: '#FBFAF6',
                outline: 'none', fontFamily: 'inherit',
                transition: 'border-color 120ms',
              }}
            />
          ))}
        </div>
        {shake && <div style={{ fontSize: 12, color: '#A03838', fontWeight: 500, marginTop: 6 }}>Forkert PIN — prøv igen</div>}
        <div style={{ fontSize: 11, color: '#aaa', marginTop: 14 }}>Demo-PIN: <code>123456</code></div>
      </div>
      <div style={{ padding: '14px 28px', borderTop: '1px solid #EFEDE5', display: 'flex', justifyContent: 'flex-end', gap: 10, background: '#FBFAF6' }}>
        <SecondaryBtn onClick={onClose}>Annullér</SecondaryBtn>
      </div>
    </Backdrop>
  );
};

// ---------- Cancel reason modal ----------
const CANCEL_REASONS = [
  { id: 'sick',          label: 'Kunden er syg',                   icon: '🤒' },
  { id: 'phone',         label: 'Aflyst af kunden — telefonisk',   icon: '📞' },
  { id: 'sms',           label: 'Aflyst af kunden — SMS',          icon: '💬' },
  { id: 'instagram',     label: 'Aflyst via Instagram/DM',         icon: '📷' },
  { id: 'noshow',        label: 'Udeblev (no-show)',               icon: '👻' },
  { id: 'reschedule',    label: 'Ombooket til anden tid',          icon: '🔄' },
  { id: 'staff_sick',    label: 'Frisør syg',                      icon: '🏥' },
  { id: 'duplicate',     label: 'Dobbeltbooking — ryddet op',      icon: '⚠️' },
  { id: 'other',         label: 'Anden årsag',                     icon: '✏️' },
];

const CancelReasonModal = ({ booking, onClose, onConfirm }) => {
  const [reasonId, setReasonId] = React.useState(null);
  const [otherText, setOtherText] = React.useState('');
  const [notify, setNotify] = React.useState(true);

  React.useEffect(() => {
    if (booking) { setReasonId(null); setOtherText(''); setNotify(true); }
  }, [booking]);

  if (!booking) return null;
  const customer = CUSTOMERS.find(c => c.id === booking.customerId);
  const reason = CANCEL_REASONS.find(r => r.id === reasonId);
  const canSubmit = reasonId && (reasonId !== 'other' || otherText.trim());

  return (
    <Backdrop onClose={onClose} width={520}>
      <div style={{ padding: '24px 28px', borderBottom: '1px solid #EFEDE5' }}>
        <div style={{ fontSize: 11, color: '#A03838', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Slet booking</div>
        <div style={{ fontSize: 20, fontWeight: 600, color: '#1a1a1a', marginTop: 4 }}>{customer?.name}</div>
        <div style={{ fontSize: 13, color: '#777', marginTop: 4 }}>
          {fmtTime(booking.start)} · {getBookingTitle(booking)} · {getBookingDuration(booking)} min
        </div>
      </div>

      <div style={{ padding: '20px 28px' }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#4a4a44', marginBottom: 10, letterSpacing: '0.01em' }}>
          Vælg årsag <span style={{ color: '#C25555' }}>*</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6, marginBottom: 14 }}>
          {CANCEL_REASONS.map(r => {
            const active = reasonId === r.id;
            return (
              <button key={r.id} onClick={() => setReasonId(r.id)} style={{
                background: active ? '#F4F7F0' : '#fff',
                border: `1.5px solid ${active ? '#7B8A6B' : '#E5E2D5'}`,
                borderRadius: 8, padding: '10px 12px',
                cursor: 'pointer', textAlign: 'left',
                display: 'flex', alignItems: 'center', gap: 10,
                fontFamily: 'inherit', fontSize: 13,
                color: active ? '#3F4A3A' : '#1a1a1a',
                fontWeight: active ? 600 : 500,
                transition: 'all 120ms',
              }}>
                <span style={{ fontSize: 18 }}>{r.icon}</span>
                <span>{r.label}</span>
              </button>
            );
          })}
        </div>

        {reasonId === 'other' && (
          <Field label="Beskriv årsag" required>
            <TextInput
              value={otherText}
              onChange={e => setOtherText(e.target.value)}
              placeholder="Skriv hvad der skete…"
              autoFocus
            />
          </Field>
        )}

        <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: '#4a4a44', cursor: 'pointer', padding: '12px 14px', background: '#FBFAF6', borderRadius: 8, border: '1px solid #EFEDE5' }}>
          <input type="checkbox" checked={notify} onChange={e => setNotify(e.target.checked)} />
          <span>
            <strong>Send afbuds-besked til kunden</strong>
            <div style={{ fontSize: 11, color: '#888', marginTop: 2 }}>SMS + email til {customer?.phone}</div>
          </span>
        </label>
      </div>

      <div style={{ padding: '16px 28px', borderTop: '1px solid #EFEDE5', display: 'flex', justifyContent: 'space-between', background: '#FBFAF6' }}>
        <SecondaryBtn onClick={onClose}>Annullér</SecondaryBtn>
        <button
          onClick={() => onConfirm({ reasonId, reasonLabel: reasonId === 'other' ? otherText.trim() : reason.label, notify })}
          disabled={!canSubmit}
          style={{
            background: canSubmit ? '#A03838' : '#C5C0B0',
            color: '#fff', border: 'none', borderRadius: 8,
            padding: '10px 18px', fontSize: 14, fontWeight: 600,
            cursor: canSubmit ? 'pointer' : 'not-allowed',
            fontFamily: 'inherit',
          }}>
          Slet booking
        </button>
      </div>
    </Backdrop>
  );
};

// ---------- POS / Kassesystem ----------
const POSView = ({ bookings, customers, services, onCheckout }) => {
  const [activeBookingId, setActiveBookingId] = React.useState(null);
  const [cart, setCart] = React.useState([]); // [{id, type:'service'|'product', name, price, qty}]
  const [paid, setPaid] = React.useState(null); // {method, total}
  const [tip, setTip] = React.useState(0);

  const today = bookings; // demo: alle dagens
  const activeBooking = today.find(b => b.id === activeBookingId);
  const customer = activeBooking ? customers.find(c => c.id === activeBooking.customerId) : null;

  const PRODUCTS = [
    { id: 'p1', name: 'Shampoo (Davines)',     price: 195 },
    { id: 'p2', name: 'Conditioner (Davines)', price: 215 },
    { id: 'p3', name: 'Hårolie',               price: 245 },
    { id: 'p4', name: 'Stylingvoks',           price: 175 },
    { id: 'p5', name: 'Hårspray',              price: 145 },
    { id: 'p6', name: 'Tørshampoo',            price: 135 },
  ];

  const loadBooking = (b) => {
    setActiveBookingId(b.id);
    const items = (b.serviceIds || [b.serviceId]).map(id => {
      const svc = SERVICE_BY_ID[id];
      return { id: 'cs_' + id + '_' + Date.now() + Math.random(), type: 'service', name: svc.name, price: svc.price, qty: 1 };
    });
    setCart(items);
    setPaid(null);
    setTip(0);
  };

  const addItem = (item) => {
    setCart(prev => {
      const existing = prev.find(p => p.refId === item.id && p.type === item.type);
      if (existing) {
        return prev.map(p => p === existing ? { ...p, qty: p.qty + 1 } : p);
      }
      return [...prev, { id: 'ci_' + Date.now() + Math.random(), refId: item.id, type: item.type || 'product', name: item.name, price: item.price, qty: 1 }];
    });
  };
  const incQty = (id, d) => setCart(prev => prev.map(p => p.id === id ? { ...p, qty: Math.max(0, p.qty + d) } : p).filter(p => p.qty > 0));
  const removeItem = (id) => setCart(prev => prev.filter(p => p.id !== id));

  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const total = subtotal + tip;

  const checkout = (method) => {
    setPaid({ method, total });
    setTimeout(() => {
      setCart([]);
      setActiveBookingId(null);
      setPaid(null);
      setTip(0);
    }, 2200);
  };

  return (
    <div style={{ flex: 1, display: 'flex', height: '100%', overflow: 'hidden', background: '#FBFAF6' }}>
      {/* Left — booking picker + product grid */}
      <div style={{ flex: 1, padding: 24, overflow: 'auto' }}>
        <h1 style={{ fontFamily: 'Fraunces, serif', fontSize: 28, fontWeight: 500, margin: '0 0 6px 0' }}>Kasse</h1>
        <div style={{ fontSize: 13, color: '#888', marginBottom: 22 }}>Vælg en booking eller tilføj varer manuelt</div>

        <div style={{ marginBottom: 24 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>Dagens aftaler</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 10 }}>
            {today.slice(0, 12).map(b => {
              const c = customers.find(cu => cu.id === b.customerId);
              const primary = getBookingPrimary(b);
              const colors = SERVICE_COLORS.pastel[primary.color];
              const isActive = activeBookingId === b.id;
              return (
                <button key={b.id} onClick={() => loadBooking(b)} style={{
                  background: isActive ? colors.bg : '#fff',
                  border: `1.5px solid ${isActive ? colors.border : '#EFEDE5'}`,
                  borderRadius: 10, padding: 12, cursor: 'pointer',
                  textAlign: 'left', fontFamily: 'inherit',
                  transition: 'all 120ms',
                }}>
                  <div style={{ fontSize: 12, color: '#888', fontWeight: 500 }}>{fmtTime(b.start)}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#1a1a1a', marginTop: 2 }}>{c?.name}</div>
                  <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>{getBookingTitle(b)}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: colors.text, marginTop: 6 }}>{getBookingPrice(b)} kr</div>
                </button>
              );
            })}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>Tilføj produkt</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {PRODUCTS.map(p => (
              <button key={p.id} onClick={() => addItem({ ...p, type: 'product' })} style={{
                background: '#fff', border: '1px solid #EFEDE5', borderRadius: 10,
                padding: '14px 14px', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit', transition: 'all 120ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#7B8A6B'; e.currentTarget.style.background = '#F4F7F0'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = '#EFEDE5'; e.currentTarget.style.background = '#fff'; }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#1a1a1a' }}>{p.name}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#3F4A3A', marginTop: 4 }}>{p.price} kr</div>
              </button>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 24 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>Tilføj ydelse manuelt</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {services.map(s => {
              const c = SERVICE_COLORS.pastel[s.color];
              return (
                <button key={s.id} onClick={() => addItem({ id: s.id, name: s.name, price: s.price, type: 'service' })} style={{
                  background: c.bg, border: `1px solid ${c.border}`, borderRadius: 8,
                  padding: '8px 10px', cursor: 'pointer', textAlign: 'left',
                  fontFamily: 'inherit', color: c.text, fontSize: 12, fontWeight: 500,
                }}>
                  {s.name} <span style={{ opacity: 0.7 }}>· {s.price} kr</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* Right — receipt panel */}
      <div style={{ width: 400, background: '#fff', borderLeft: '1px solid #EFEDE5', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '20px 22px', borderBottom: '1px solid #EFEDE5' }}>
          <div style={{ fontSize: 11, color: '#888', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Kvittering</div>
          <div style={{ fontSize: 18, fontWeight: 600, color: '#1a1a1a', marginTop: 4 }}>
            {customer ? customer.name : 'Walk-in kunde'}
          </div>
          {activeBooking && (
            <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>{fmtTime(activeBooking.start)} · {getBookingTitle(activeBooking)}</div>
          )}
        </div>

        <div style={{ flex: 1, overflow: 'auto', padding: '14px 22px' }}>
          {cart.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '40px 0', color: '#aaa', fontSize: 13 }}>
              Ingen varer tilføjet endnu
            </div>
          ) : cart.map(item => (
            <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid #F4F2EA' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{item.name}</div>
                <div style={{ fontSize: 11, color: '#888', marginTop: 2 }}>{item.type === 'service' ? 'Ydelse' : 'Produkt'} · {item.price} kr</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <button onClick={() => incQty(item.id, -1)} style={qtyBtnStyle}>−</button>
                <span style={{ width: 22, textAlign: 'center', fontSize: 13, fontWeight: 600 }}>{item.qty}</span>
                <button onClick={() => incQty(item.id, 1)} style={qtyBtnStyle}>+</button>
              </div>
              <div style={{ width: 64, textAlign: 'right', fontSize: 13, fontWeight: 600 }}>{item.price * item.qty} kr</div>
              <button onClick={() => removeItem(item.id)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: '#bbb', padding: 2 }}>
                <IconX size={14} />
              </button>
            </div>
          ))}
        </div>

        <div style={{ padding: '14px 22px', borderTop: '1px solid #EFEDE5', background: '#FBFAF6' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: '#666', marginBottom: 6 }}>
            <span>Subtotal</span><span>{subtotal} kr</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: '#666', marginBottom: 6 }}>
            <span>Drikkepenge</span>
            <div style={{ display: 'flex', gap: 4 }}>
              {[0, 20, 50, 100].map(t => (
                <button key={t} onClick={() => setTip(t)} style={{
                  background: tip === t ? '#3F4A3A' : '#fff',
                  color: tip === t ? '#fff' : '#666',
                  border: '1px solid #DDD9CE', borderRadius: 5,
                  padding: '4px 8px', fontSize: 11, cursor: 'pointer',
                  fontFamily: 'inherit', fontWeight: 500,
                }}>{t === 0 ? 'Ingen' : `+${t}`}</button>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 18, fontWeight: 700, color: '#1a1a1a', marginTop: 10, paddingTop: 10, borderTop: '1px solid #EFEDE5' }}>
            <span>Total</span><span>{total} kr</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
            <button onClick={() => checkout('Kort')} disabled={cart.length === 0} style={posPayBtnStyle(true, cart.length > 0)}>
              💳 Kort
            </button>
            <button onClick={() => checkout('MobilePay')} disabled={cart.length === 0} style={posPayBtnStyle(false, cart.length > 0, '#5A78FF')}>
              📱 MobilePay
            </button>
            <button onClick={() => checkout('Kontant')} disabled={cart.length === 0} style={posPayBtnStyle(false, cart.length > 0)}>
              💵 Kontant
            </button>
            <button onClick={() => checkout('Faktura')} disabled={cart.length === 0} style={posPayBtnStyle(false, cart.length > 0)}>
              📄 Faktura
            </button>
          </div>
        </div>
      </div>

      {/* Paid overlay */}
      {paid && (
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(20,18,14,0.55)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100,
          animation: 'fadeIn 200ms',
        }}>
          <div style={{ background: '#fff', borderRadius: 16, padding: '36px 48px', textAlign: 'center', maxWidth: 360 }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#3F5A30', margin: '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconCheck size={32} stroke="#fff" />
            </div>
            <div style={{ fontSize: 22, fontWeight: 600, color: '#1a1a1a' }}>Betalt {paid.total} kr</div>
            <div style={{ fontSize: 13, color: '#888', marginTop: 6 }}>via {paid.method}</div>
            <div style={{ fontSize: 12, color: '#aaa', marginTop: 14 }}>Kvittering sendt til kunden</div>
          </div>
        </div>
      )}
    </div>
  );
};

const qtyBtnStyle = {
  width: 24, height: 24, borderRadius: 5,
  border: '1px solid #DDD9CE', background: '#fff',
  color: '#666', cursor: 'pointer', fontSize: 14,
  fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const posPayBtnStyle = (primary, enabled, accent) => ({
  background: enabled ? (primary ? '#3F4A3A' : (accent || '#fff')) : '#F4F2EA',
  color: enabled ? (primary || accent ? '#fff' : '#1a1a1a') : '#bbb',
  border: enabled ? `1px solid ${primary ? '#3F4A3A' : (accent || '#DDD9CE')}` : '1px solid #EFEDE5',
  borderRadius: 8, padding: '12px 10px', fontSize: 14, fontWeight: 600,
  cursor: enabled ? 'pointer' : 'not-allowed', fontFamily: 'inherit',
});

// ---------- Customer cancel/reschedule (24h window) ----------
// Opens as a full-screen overlay simulating the SMS link landing page
const CustomerLinkPage = ({ booking, onClose, onCancel, onReschedule }) => {
  if (!booking) return null;
  const customer = CUSTOMERS.find(c => c.id === booking.customerId);
  const staff = STAFF.find(s => s.id === booking.staffId);
  const totalDur = getBookingDuration(booking);
  const totalPrice = getBookingPrice(booking);
  const title = getBookingTitle(booking);

  // Simulate "now" — booking is at 6. juni 2024. Show countdown to 24h-before deadline.
  // For demo we treat the page as if opened ~36h before (so user has 12h left).
  const [hoursLeft, setHoursLeft] = React.useState(12);
  const within24h = hoursLeft > 0;

  const [tab, setTab] = React.useState('overview'); // overview | reschedule | cancel
  const [cancelReason, setCancelReason] = React.useState(null);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 4000,
      background: '#FBFAF6', overflow: 'auto',
      animation: 'fadeIn 200ms',
    }}>
      {/* Phone-like top chrome */}
      <div style={{
        background: '#1a1a1a', color: '#fff', padding: '10px 18px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12,
      }}>
        <span style={{ fontFamily: 'monospace' }}>klipperiet.dk/aflys/8a3f</span>
        <button onClick={onClose} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.3)', color: '#fff', borderRadius: 5, padding: '4px 10px', fontSize: 11, cursor: 'pointer', fontFamily: 'inherit' }}>
          Luk forhåndsvisning
        </button>
      </div>

      <div style={{ maxWidth: 480, margin: '0 auto', padding: '32px 22px 60px' }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 26, fontWeight: 500 }}>Salon Klipperiet</div>
          <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>Østerbro · København</div>
        </div>

        {/* Booking card */}
        <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #EFEDE5', overflow: 'hidden', marginBottom: 18 }}>
          <div style={{ padding: '18px 20px', background: '#F4F7F0', borderBottom: '1px solid #DCE6CC' }}>
            <div style={{ fontSize: 11, color: '#3F5A30', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Din aftale</div>
            <div style={{ fontSize: 20, fontWeight: 600, color: '#1a1a1a', marginTop: 4 }}>{customer.name}</div>
          </div>
          <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: '#888' }}>Service</span><span style={{ fontWeight: 500 }}>{title}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: '#888' }}>Frisør</span><span style={{ fontWeight: 500 }}>{staff.name}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: '#888' }}>Dato</span><span style={{ fontWeight: 500 }}>Torsdag 6. juni</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: '#888' }}>Tid</span><span style={{ fontWeight: 500 }}>{fmtTime(booking.start)}–{fmtTime(booking.start + totalDur)}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: '#888' }}>Pris</span><span style={{ fontWeight: 500 }}>{totalPrice} kr</span></div>
          </div>
        </div>

        {/* Window indicator */}
        <div style={{
          padding: '12px 16px', borderRadius: 10,
          background: within24h ? '#FEF7E8' : '#FBEEEE',
          border: `1px solid ${within24h ? '#F0DDA5' : '#E0BFBF'}`,
          fontSize: 13, lineHeight: 1.5, marginBottom: 18,
          display: 'flex', alignItems: 'flex-start', gap: 10,
        }}>
          <IconClock size={16} stroke={within24h ? '#8A6B1F' : '#A03838'} />
          <div>
            {within24h ? (
              <>
                <strong style={{ color: '#8A6B1F' }}>{hoursLeft} timer tilbage</strong>
                <div style={{ color: '#8A6B1F' }}>Du kan aflyse eller ombooke gratis indtil 24 timer før din aftale.</div>
              </>
            ) : (
              <>
                <strong style={{ color: '#A03838' }}>Vinduet er udløbet</strong>
                <div style={{ color: '#A03838' }}>Ring til salonen på 35 12 34 56 hvis du har behov for at ændre din aftale.</div>
              </>
            )}
          </div>
        </div>

        {/* Tabs / actions */}
        {tab === 'overview' && within24h && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button onClick={() => setTab('reschedule')} style={linkPageBtnStyle(false)}>
              🔄 Ombook til en anden tid
            </button>
            <button onClick={() => setTab('cancel')} style={linkPageBtnStyle(true)}>
              ✕ Aflys aftalen
            </button>
            <button onClick={onClose} style={{ ...linkPageBtnStyle(false), background: 'transparent', border: 'none', color: '#888', marginTop: 8 }}>
              Behold min tid
            </button>
          </div>
        )}

        {tab === 'reschedule' && (
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>Vælg ny tid</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 16 }}>
              {[
                { date: 'Fredag 7. juni', time: '10:00' },
                { date: 'Fredag 7. juni', time: '14:30' },
                { date: 'Lørdag 8. juni', time: '09:30' },
                { date: 'Lørdag 8. juni', time: '12:00' },
                { date: 'Mandag 10. juni', time: '11:00' },
                { date: 'Mandag 10. juni', time: '15:30' },
              ].map((s, i) => (
                <button key={i} onClick={() => onReschedule(s)} style={{
                  background: '#fff', border: '1px solid #DDD9CE', borderRadius: 8,
                  padding: '12px', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                }}>
                  <div style={{ fontSize: 12, color: '#888' }}>{s.date}</div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: '#1a1a1a', marginTop: 2 }}>{s.time}</div>
                </button>
              ))}
            </div>
            <button onClick={() => setTab('overview')} style={{ ...linkPageBtnStyle(false), background: 'transparent', border: 'none', color: '#888' }}>← Tilbage</button>
          </div>
        )}

        {tab === 'cancel' && (
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Aflys aftalen</div>
            <div style={{ fontSize: 13, color: '#666', marginBottom: 14 }}>Hvad er årsagen? (valgfrit)</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 18 }}>
              {['Jeg er syg', 'Andet er kommet i vejen', 'Vil booke en anden tid', 'Andet'].map(r => (
                <button key={r} onClick={() => setCancelReason(r)} style={{
                  background: cancelReason === r ? '#F4F7F0' : '#fff',
                  border: `1.5px solid ${cancelReason === r ? '#7B8A6B' : '#E5E2D5'}`,
                  borderRadius: 8, padding: '12px 14px',
                  textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                  fontSize: 13, fontWeight: cancelReason === r ? 600 : 500,
                }}>{r}</button>
              ))}
            </div>
            <button onClick={() => onCancel(cancelReason)} style={linkPageBtnStyle(true)}>Bekræft aflysning</button>
            <button onClick={() => setTab('overview')} style={{ ...linkPageBtnStyle(false), background: 'transparent', border: 'none', color: '#888', marginTop: 8 }}>← Tilbage</button>
          </div>
        )}

        <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid #EFEDE5', textAlign: 'center', fontSize: 12, color: '#999' }}>
          Spørgsmål? Ring 35 12 34 56 eller skriv til <span style={{ textDecoration: 'underline' }}>info@klipperiet.dk</span>
        </div>
      </div>
    </div>
  );
};

const linkPageBtnStyle = (danger) => ({
  background: danger ? '#A03838' : '#3F4A3A',
  color: '#fff', border: 'none', borderRadius: 10,
  padding: '14px 18px', fontSize: 15, fontWeight: 600,
  cursor: 'pointer', fontFamily: 'inherit', width: '100%',
  textAlign: 'center',
});

Object.assign(window, {
  PinLockModal, CancelReasonModal, POSView, CustomerLinkPage,
  ADMIN_PIN, CANCEL_REASONS,
});