nav {
display: flex;
align-items: center;
gap: 2rem;
}

nav ul {
display: flex;
list-style: none;
gap: 2rem;
}

nav a {
text-decoration: none;
color: var(--text-dark);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: var(--transition);
}

nav a:hover {
color: var(--accent);
}

.nav-user-info {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.85rem;
color: var(--text-muted);
border-left: 1px solid var(--border);
padding-left: 1.5rem;
}

.nav-logout-btn {
background: none;
border: none;
color: var(--error);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: var(--transition);
}

.nav-logout-btn:hover {
color: #c0392b;
text-decoration: underline;
}

/* Buttons */
.btn {
display: inline-block;
background-color: var(--primary);
color: white;
border: 1px solid var(--primary);
padding: 0.75rem 2rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
border-radius: 0;
text-align: center;
}

.btn:hover {
background-color: transparent;
color: var(--primary);
}

.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.btn:disabled:hover {
background-color: var(--primary);
color: white;
}

.btn-accent {
background-color: var(--accent);
border-color: var(--accent);
}

.btn-accent:hover:not(:disabled) {
.slots-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}

.slot-btn {
background-color: white;
border: 1px solid var(--border);
color: var(--text-dark);
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
font-family: var(--font-stack);
cursor: pointer;
transition: var(--transition);
}

.slot-btn:hover {
border-color: var(--accent);
color: var(--accent);
}

.slot-btn.selected {
background-color: var(--accent);
border-color: var(--accent);
color: white;
}

.slots-message {
font-size: 0.9rem;
color: var(--text-muted);
padding: 0.5rem 0;
}

/* Status & Alert Boxes */
.alert {
padding: 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
display: none;
}

.alert-success {
background-color: #e8f8f0;
color: var(--success);
border: 1px solid #d4efdf;
}

.alert-error {
background-color: #fdedec;
color: var(--error);
border: 1px solid #fadbd8;
}

/* Customer My Pages Section */
#my-pages {
background-color: var(--bg-muted);
border-top: 1px solid var(--border);
}

.my-pages-wrapper {
max-width: 800px;
margin: 0 auto;
background: white;
border: 1px solid var(--border);
padding: 2.5rem;
}

.tabs-nav {
display: flex;
gap: 1.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
}

.tab-btn {
background: none;
border: none;
padding: 0.75rem 0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: var(--transition);
}

.tab-btn:hover {
color: var(--text-dark);
}

.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 500;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.auth-form-container {
max-width: 400px;
}

/* Admin Area */
#admin {
background-color: var(--bg-dark);
border-top: 2px solid var(--primary);
padding: 4rem 0;
/* Data Tables (Shared for Admin & Customer) */
.table-responsive {
width: 100%;
overflow-x: auto;
background: white;
border: 1px solid var(--border);
}

.data-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.9rem;
}

.data-table th, .data-table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}

.data-table th {
background-color: #fafbfc;
font-weight: 500;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--text-muted);
}

.data-table tbody tr:hover {
background-color: #fafbfc;
}

.data-table tr.today-row {
background-color: #fffdf0 !important;
border-left: 4px solid var(--accent);
}

/* Status Badges */
.badge {
display: inline-block;
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 2px;
}

.badge-pending { background-color: #fef9e7; color: #f39c12; }
.badge-confirmed { background-color: #e8f8f0; color: #27ae60; }
.badge-cancelled { background-color: #f4f6f8; color: #95a5a6; } /* Cancelled is grey */

.row-actions {
display: flex;
gap: 0.25rem;
}

/* Footer */
footer {
background-color: var(--primary);
color: rgba(255, 255, 255, 0.7);
padding: 4rem 0 2rem 0;
font-size: 0.9rem;
border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}

.footer-col h4 {
color: white;
font-size: 1rem;
margin-bottom: 1.25rem;
}

.footer-col p {
nav ul { display: none; } /* Simplified mobile handling */
.nav-user-info { display: none !important; } /* Hide user info in header on small mobile to save space */
.booking-wrapper, .admin-login-wrapper, .my-pages-wrapper { padding: 1.5rem; }
.dashboard-controls { flex-direction: column; align-items: flex-start; }
.admin-actions { width: 100%; justify-content: space-between; }
}
</style>
</head>
<body>

<header>
<div class="container nav-container">
<a href="#" class="logo">SALON <span>NORDIC</span></a>
<nav>
<ul>
<li><a href="#services">Tjänster</a></li>
<li><a href="#about">Om oss</a></li>
<li><a href="#booking">Boka Tid</a></li>
<li><a href="#my-pages">Mina Sidor</a></li>
</ul>
<div class="nav-user-info" id="nav-user-panel" style="display: none;">
<span id="nav-user-email"></span>
<button class="nav-logout-btn" id="nav-logout-btn">Logga ut</button>
</div>
label>
<div class="form-group">
<label for="b-date">Datum *</label>
<input type="date" id="b-date" class="form-control" required>
</div>

<div class="form-group">
<label>Tid *</label>
<div id="slots-container" class="slots-grid">
<div class="slots-message">Välj ett datum ovan för att se lediga tider.</div>
</div>
<input type="hidden" id="b-time-hidden" required>
</div>

<div class="form-group">
<label for="b-notes">Meddelande / önskemål</label>
<textarea id="b-notes" class="form-control" rows="3" maxlength="500" placeholder="Eventuella detaljer eller information (max 500 tecken)"></textarea>
</div>

<div class="form-checkbox">
<input type="checkbox" id="b-gdpr" required>
<label for="b-gdpr">
Jag godkänner att Salon Nordic behandlar mina personuppgifter (namn, e-post, telefon) för att hantera min bokning. Uppgifterna sparas i 2 år och delas inte med tredje part. Läs vår integritetspolicy.
</label>
</div>

<button type="submit" id="btn-submit-booking" class="btn btn-accent" style="width: 100%;" disabled>Bekräfta Bokningsförfrågan</button>
</form>
</div>
</div>
</section>

<section id="my-pages">
<div class="container">
<h2>Mina Sidor</h2>
<div class="my-pages-wrapper">

<div class="tabs-nav" id="customer-tabs-nav">
<button class="tab-btn active" data-target="tab-login" id="btn-tab-login">Logga in</button>
<button class="tab-btn" data-target="tab-register" id="btn-tab-register">Skapa konto</button>
<button class="tab-btn" data-target="tab-bookings" id="btn-tab-bookings" style="display: none;">Mina bokningar</button>
</div>

<div id="tab-login" class="tab-content active">
<div class="auth-form-container">
<div id="c-login-error" class="alert alert-error"></div>
<form id="customer-login-form">
<div class="form-group">
<label for="c-login-email">E-postadress</label>
<input type="email" id="c-login-email" class="form-control" required>
</div>
<div class="form-group">
<label for="c-login-password">Lösenord</label>
<input type="password" id="c-login-password" class="form-control" required>
</div>
<button type="submit" class="btn btn-accent">Logga in</button>
</form>
</div>
</div>

<div id="tab-register" class="tab-content">
<div class="auth-form-container" style="max-width: 500px;">
<div id="c-reg-error" class="alert alert-error"></div>
<div id="c-reg-success" class="alert alert-success"></div>
<form id="customer-register-form">
<div class="form-group">
<label for="c-reg-email">E-postadress *</label>
<input type="email" id="c-reg-email" class="form-control" required>
</div>
<div class="form-group">
<label for="c-reg-password">Lösenord * (minst 8 tecken)</label>
<input type="password" id="c-reg-password" class="form-control" required minlength="8">
</div>
<div class="form-checkbox">
<input type="checkbox" id="c-reg-gdpr" required>
<label for="c-reg-gdpr">
Jag godkänner att mina uppgifter sparas för att hantera mina bokningar hos Salon Nordic.
</label>
</div>
<button type="submit" class="btn btn-accent">Skapa konto</button>
</form>
</div>
</div>

<div id="tab-bookings" class="tab-content">
<div id="c-dashboard-error" class="alert alert-error"></div>
<div class="table-responsive">
<table class="data-table" id="customer-bookings-table">
<thead>
<tr>
<th>Tjänst</th>
<th>Datum</th>
<th>Tid</th>
<th>Status</th>
</tr>
</thead>
<tbody id="customer-bookings-tbody">
</tbody>
</table>
</div>
</div>

</div>
Administrationspanel</h2>
label>
label>
button>
Väntande</button>
Bekräftade</button>
Avbokade</button>
</div>
<div class="admin-actions">
<button id="btn-admin-refresh" class="btn btn-outline btn-sm">Uppdatera</button>
<button id="btn-admin-logout" class="btn btn-outline btn-sm" style="color: var(--error); border-color: rgba(231,76,60,0.2);">Logga ut</button>
</div>
</div>

<div id="admin-dashboard-error" class="alert alert-error"></div>

<div class="table-responsive">
<table class="data-table" id="bookings-table-el">
<thead>
<tr>
<th>Namn</th>
<th>Tjänst</th>
<th>Datum</th>
<th>Tid</th>
<th>Telefon</th>
<th>Meddelande</th>
<th>Status</th>
<th>Åtgärder</th>
</tr>
</thead>
<tbody id="admin-bookings-tbody">
</tbody>
</table>
</div>
</div>

</div>
</section>
</main>

<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>Salon Nordic</h4>
<p>Din lokala oas för modern, skandinavisk hårvård.</p>
</div>
<div class="footer-col">
<h4>Kontakt & Adress</h4>
<p>Nordstadstorget 4, 411 05 Göteborg</p>
<p>Telefon: 031-123 45 67</p>
<p>E-post: info@salonnordic.se</p>
</div>
<div class="footer-col">
<h4>Snabblänkar</h4>
<p><a href="#services">Tjänster & Priser</a></p>
<p><a href="#booking">Boka tid online</a></p>
<p><a href="#my-pages">Mina Sidor</a></p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Salon Nordic. Alla rättigheter reserverade. <a href="#">Integritetspolicy</a></p>
<button class="admin-trigger" id="admin-panel-link">Admin</button>
</div>
</div>
</footer>

<script>
// GLOBAL CONFIGURATION
const WORKER_URL = "https://cloudflare-saas-base.hampus-kraft9.workers.dev";

// APPLICATION STATE LIFECYCLE
const state = {
adminRefreshTimeoutId: null,
customerRefreshTimeoutId: null,
adminCurrentFilter: 'all',
adminBookings: []
};

// RUN SETUP ON DOM CONTENT LOADED
document.addEventListener('DOMContentLoaded', () => {
initDateConstraints();
initEventHandlers();

// Rehydrate sessions if tokens exist in sessionStorage
if (sessionStorage.getItem('access_token')) {
fetchAdminProfile();
}
if (sessionStorage.getItem('customer_token')) {
fetchCustomerProfile();
}
});

// --- 1. CORE API FETCH WRAPPER ---
async function apiFetch(endpoint, options = {}, tokenOverride = null) {
options.credentials = 'include';
options.headers = options.headers || {};
options.headers['Content-Type'] = 'application/json';

if (tokenOverride) {
options.headers['Authorization'] = `Bearer ${tokenOverride}`;
}

return await fetch(`${WORKER_URL}${endpoint}`, options);
}


// --- 2. TIME SLOTS LOGIC (NEW FEATURE 1) ---
function initDateConstraints() {
const dateInput = document.getElementById('b-date');
if (!dateInput) return;

const today = new Date();
const maxDate = new Date();
maxDate.setDate(today.getDate() + 60);

const formatDateStr = (d) => {
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2, '0');
const dd = String(d.getDate()).padStart(2, '0');
return `${yyyy}-${mm}-${dd}`;
};

dateInput.min = formatDateStr(today);
dateInput.max = formatDateStr(maxDate);

// Fetch slots on date change
dateInput.addEventListener('change', fetchTimeSlots);
}

async function fetchTimeSlots(e) {
const dateStr = e.target.value;
const slotsContainer = document.getElementById('slots-container');
const timeInputHidden = document.getElementById('b-time-hidden');
const submitBtn = document.getElementById('btn-submit-booking');

// Reset current selection
timeInputHidden.value = '';
submitBtn.disabled = true;

if (!dateStr) {
slotsContainer.innerHTML = '<div class="slots-message">Välj ett datum ovan för att se lediga tider.</div>';
return;
}

slotsContainer.innerHTML = '<div class="slots-message">Laddar tider...</div>';

try {
const res = await apiFetch(`/api/bookings/slots?date=${dateStr}`, { method: 'GET' });
if (res.ok) {
const data = await res.json();
renderTimeSlots(data.available || []);
} else {
slotsContainer.innerHTML = '<div class="slots-message" style="color:var(--error);">Kunde inte ladda tider.</div>';
}
} catch (err) {
slotsContainer.innerHTML = '<div class="slots-message" style="color:var(--error);">Ett nätverksfel uppstod.</div>';
}
}

function renderTimeSlots(availableTimes) {
const slotsContainer = document.getElementById('slots-container');
const timeInputHidden = document.getElementById('b-time-hidden');
const submitBtn = document.getElementById('btn-submit-booking');

if (availableTimes.length === 0) {
slotsContainer.innerHTML = '<div class="slots-message">Inga lediga tider denna dag.</div>';
return;
}

slotsContainer.innerHTML = '';
availableTimes.forEach(time => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'slot-btn';
btn.textContent = time;

btn.addEventListener('click', () => {
// Deselect others
document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
// Select current
btn.classList.add('selected');
timeInputHidden.value = time;
submitBtn.disabled = false;
});

slotsContainer.appendChild(btn);
});
}


// --- 3. EVENT HANDLERS ---
function initEventHandlers() {
// Public Booking Submission
document.getElementById('appointment-form').addEventListener('submit', handleClientBookingSubmission);

// Customer Tabs Switcher
document.querySelectorAll('#customer-tabs-nav .tab-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const targetId = e.target.getAttribute('data-target');
switchCustomerTab(targetId);
});
});

// Customer Auth Forms
document.getElementById('customer-register-form').addEventListener('submit', handleCustomerRegister);
document.getElementById('customer-login-form').addEventListener('submit', handleCustomerLogin);

// Header Logout
document.getElementById('nav-logout-btn').addEventListener('click', handleCustomerLogout);

// Admin Toggle
document.getElementById('admin-panel-link').addEventListener('click', (e) => {
e.preventDefault();
const adminSec = document.getElementById('admin');
if (adminSec.style.display === 'none') {
adminSec.style.display = 'block';
adminSec.scrollIntoView({ behavior: 'smooth' });
if (sessionStorage.getItem('access_token')) {
switchToAdminDashboard();
} else {
switchToAdminLogin();
}
} else {
adminSec.style.display = 'none';
}
});

// Admin Forms & Controls
document.getElementById('admin-login-form').addEventListener('submit', handleAdminLoginProcess);
document.getElementById('btn-admin-refresh').addEventListener('click', loadAdminBookingsDataset);
document.getElementById('btn-admin-logout').addEventListener('click', handleAdminLogout);

// Admin Filters
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
state.adminCurrentFilter = e.target.getAttribute('data-filter');
renderAdminBookingsTable();
});
});
}


// --- 4. BOOKING SUBMISSION ---
async function handleClientBookingSubmission(e) {
e.preventDefault();

const successBanner = document.getElementById('booking-success');
const errorBanner = document.getElementById('booking-error');
successBanner.style.display = 'none';
errorBanner.style.display = 'none';

const payload = {
name: document.getElementById('b-name').value.trim(),
email: document.getElementById('b-email').value.trim(),
service: document.getElementById('b-service').value,
date: document.getElementById('b-date').value,
time: document.getElementById('b-time-hidden').value,
gdprConsent: !!document.getElementById('b-gdpr').checked
};

const phone = document.getElementById('b-phone').value.trim();
const notes = document.getElementById('b-notes').value.trim();
if (phone) payload.phone = phone;
if (notes) payload.notes = notes;

if (!payload.time) {
displayAlert(errorBanner, "Vänligen välj en ledig tid.");
return;
}

try {
const res = await apiFetch('/api/bookings', {
method: 'POST',
body: JSON.stringify(payload)
});
const data = await res.json();

if (res.status === 201) {
successBanner.innerHTML = `
<strong>Bokning bekräftad!</strong><br>
Tack ${escapeHtml(data.name || payload.name)}, vi har tagit emot din bokning.<br>
<strong>Tjänst:</strong> ${escapeHtml(data.service)}<br>
<strong>Datum:</strong> ${escapeHtml(data.date)} kl ${escapeHtml(data.time)}
`;
successBanner.style.display = 'block';
document.getElementById('appointment-form').reset();

// Reset time slots UI
document.getElementById('b-time-hidden').value = '';
document.getElementById('btn-submit-booking').disabled = true;
document.getElementById('slots-container').innerHTML = '<div class="slots-message">Välj ett datum ovan för att se lediga tider.</div>';

if (sessionStorage.getItem('access_token')) loadAdminBookingsDataset();
if (sessionStorage.getItem('customer_token')) loadCustomerBookings();

successBanner.scrollIntoView({ behavior: 'smooth' });
} else {
let errMsg = data.error || "Ett fel uppstod.";
if (data.details && Array.isArray(data.details)) errMsg += ` (${data.details.join(', ')})`;
displayAlert(errorBanner, errMsg);
}
} catch (err) {
displayAlert(errorBanner, "Det gick inte att ansluta till servern.");
}
}


// --- 5. CUSTOMER ACCOUNTS LOGIC (NEW FEATURE 2) ---
function switchCustomerTab(targetId) {
document.querySelectorAll('#customer-tabs-nav .tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('#my-pages .tab-content').forEach(c => c.classList.remove('active'));

const btn = document.querySelector(`.tab-btn[data-target="${targetId}"]`);
const content = document.getElementById(targetId);

if (btn && content) {
btn.classList.add('active');
content.classList.add('active');
}
}

async function handleCustomerRegister(e) {
e.preventDefault();
const errBanner = document.getElementById('c-reg-error');
const succBanner = document.getElementById('c-reg-success');
errBanner.style.display = 'none';
succBanner.style.display = 'none';

const payload = {
email: document.getElementById('c-reg-email').value.trim(),
password: document.getElementById('c-reg-password').value,
gdprConsent: !!document.getElementById('c-reg-gdpr').checked
};

try {
const res = await apiFetch('/api/auth/register/customer', {
method: 'POST',
body: JSON.stringify(payload)
});
const data = await res.json();

if (res.status === 201) {
displayAlert(succBanner, "Konto skapat! Du kan nu logga in via inloggningsfliken.");
document.getElementById('customer-register-form').reset();
} else {
displayAlert(errBanner, data.error || "Ett fel uppstod vid registreringen.");
}
} catch (err) {
displayAlert(errBanner, "Nätverksfel vid registrering.");
}
}

async function handleCustomerLogin(e) {
e.preventDefault();
const errBanner = document.getElementById('c-login-error');
errBanner.style.display = 'none';

const email = document.getElementById('c-login-email').value.trim();
const password = document.getElementById('c-login-password').value;

try {
const res = await apiFetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password })
});
const data = await res.json();

if (res.ok && data.role === 'customer') {
sessionStorage.setItem('customer_token', data.accessToken);
document.getElementById('customer-login-form').reset();
scheduleCustomerRefresh(data.expiresIn);
setCustomerLoggedInState(email);
} else if (res.ok) {
// Got a token but it's not a customer role
displayAlert(errBanner, "Detta konto saknar kundbehörighet.");
} else {
displayAlert(errBanner, data.error || "Felaktig e-post eller lösenord.");
}
} catch (err) {
displayAlert(errBanner, "Tekniskt fel vid inloggning.");
}
}

async function fetchCustomerProfile() {
const token = sessionStorage.getItem('customer_token');
if (!token) return;

try {
const res = await apiFetch('/api/auth/me', { method: 'GET' }, token);
if (res.ok) {
const data = await res.json();
if (data.role === 'customer') {
setCustomerLoggedInState(data.email);
} else {
handleCustomerLogout();
}
} else if (res.status === 401) {
handleCustomerLogout();
}
} catch (e) {
// Ignore network errors on init
}
}

function setCustomerLoggedInState(email) {
document.getElementById('nav-user-panel').style.display = 'flex';
document.getElementById('nav-user-email').innerText = email;

document.getElementById('btn-tab-login').style.display = 'none';
document.getElementById('btn-tab-register').style.display = 'none';
document.getElementById('btn-tab-bookings').style.display = 'inline-block';

switchCustomerTab('tab-bookings');
loadCustomerBookings();
}

async function loadCustomerBookings() {
const token = sessionStorage.getItem('customer_token');
if (!token) return;
const errBanner = document.getElementById('c-dashboard-error');
errBanner.style.display = 'none';

try {
const res = await apiFetch('/api/bookings?limit=20', { method: 'GET' }, token);
if (res.ok) {
const data = await res.json();
renderCustomerBookings(data.bookings || []);
} else if (res.status === 401) {
handleCustomerLogout();
} else {
displayAlert(errBanner, "Kunde inte hämta dina bokningar.");
}
} catch (e) {
displayAlert(errBanner, "Nätverksfel vid hämtning av bokningar.");
}
}

function renderCustomerBookings(bookings) {
const tbody = document.getElementById('customer-bookings-tbody');
tbody.innerHTML = '';

if (bookings.length === 0) {
tbody.innerHTML = `<tr><td colspan="4" style="text-align:center; color: var(--text-muted); padding: 2rem;">Du har inga registrerade bokningar ännu.</td></tr>`;
return;
}

const statusLabels = {
'pending': 'Väntande',
'confirmed': 'Bekräftad',
'cancelled': 'Avbokad'
};

bookings.forEach(b => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><strong>${escapeHtml(b.service)}</strong></td>
<td>${escapeHtml(b.date)}</td>
<td>${escapeHtml(b.time)}</td>
<td><span class="badge badge-${b.status}">${escapeHtml(statusLabels[b.status] || b.status)}</span></td>
`;
tbody.appendChild(tr);
});
}

async function handleCustomerLogout() {
if (state.customerRefreshTimeoutId) clearTimeout(state.customerRefreshTimeoutId);
try { await apiFetch('/api/auth/logout', { method: 'POST' }); } catch (e) {}

sessionStorage.removeItem('customer_token');
document.getElementById('nav-user-panel').style.display = 'none';

document.getElementById('btn-tab-login').style.display = 'inline-block';
document.getElementById('btn-tab-register').style.display = 'inline-block';
document.getElementById('btn-tab-bookings').style.display = 'none';

switchCustomerTab('tab-login');
}

function scheduleCustomerRefresh(expiresInSeconds) {
if (state.customerRefreshTimeoutId) clearTimeout(state.customerRefreshTimeoutId);
const ms = expiresInSeconds * 0.8 * 1000;
state.customerRefreshTimeoutId = setTimeout(async () => {
try {
const res = await apiFetch('/api/auth/refresh', { method: 'POST' });
if (res.ok) {
const data = await res.json();
sessionStorage.setItem('customer_token', data.accessToken);
scheduleCustomerRefresh(data.expiresIn);
} else {
handleCustomerLogout();
}
} catch (e) {
handleCustomerLogout();
}
}, ms);
}


// --- 6. ADMIN PANEL LOGIC (EXISTING/UPDATED) ---
async function handleAdminLoginProcess(e) {
e.preventDefault();
const errBanner = document.getElementById('admin-login-error');
errBanner.style.display = 'none';

const email = document.getElementById('a-email').value.trim();
const password = document.getElementById('a-password').value;

try {
const res = await apiFetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password })
});
const data = await res.json();

if (res.ok && data.role !