/**
 * UrbanFlow — templates.js
 * Stores large HTML string templates extracted from shared.js and auth.js
 */

const TEMPLATES = {
    authOverlay: `
        <div class="auth-card">
            <div class="auth-card-header">
                <h2 class="auth-title">Sign In</h2>
                <p class="auth-subtitle">Authenticate with your Google account to continue</p>
            </div>
            <div id="auth-google-btn" class="auth-google-btn"></div>
            <p class="auth-error hidden"></p>
            <p class="auth-footer">Your data is handled per our <button onclick="openAppModal('privacyModal')" class="auth-link">Privacy Policy</button></p>
        </div>
    `,
    
    authGoogleBtn: `
        <button class="gsi-custom-btn" onclick="_triggerGoogleSignInPopup()">
            <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
                <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
                <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
                <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z"/>
            </svg>
            <span>Continue with Google</span>
        </button>
    `,

    logoutModal: `
        <div class="auth-card" style="max-width:340px">
            <h2 class="auth-title" style="margin-bottom:8px">Sign Out</h2>
            <p class="auth-subtitle" style="margin-bottom:24px">Are you sure you want to sign out of UrbanFlow?</p>
            <div style="display:flex;gap:12px">
                <button onclick="hideLogoutConfirm()" class="auth-cancel-btn" style="flex:1;text-align:center;padding:12px 0">Cancel</button>
                <button onclick="executeLogout()" style="flex:1;padding:12px 0;background:rgba(220,38,38,0.15);color:#ef4444;border:1px solid rgba(220,38,38,0.4);border-radius:10px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background 0.2s" onmouseover="this.style.background='rgba(220,38,38,0.3)'" onmouseout="this.style.background='rgba(220,38,38,0.15)'">Yes</button>
            </div>
        </div>
    `,

    consentModal: `
        <div class="auth-card" style="max-width:400px">
            <div style="text-align:center;margin-bottom:20px">
                <i class="fa-solid fa-shield-halved" style="font-size:28px;color:var(--cocoa-l);margin-bottom:12px;display:block"></i>
                <h2 class="auth-title" style="margin-bottom:6px">Before you continue</h2>
                <p class="auth-subtitle" style="margin-bottom:0">Please review and accept our policies to use UrbanFlow.</p>
            </div>
            <label id="consent-label" style="display:flex;align-items:flex-start;gap:12px;padding:16px;background:#111;border:1px solid #222;border-radius:12px;cursor:pointer;margin-bottom:20px;transition:border-color 0.2s">
                <input type="checkbox" id="consent-checkbox" onchange="onConsentCheckboxChange()" style="margin-top:3px;accent-color:var(--cocoa-l);width:18px;height:18px;flex-shrink:0;cursor:pointer">
                <span style="font-size:12px;color:#a89f97;line-height:1.6">
                    I have read and agree to the
                    <button onclick="event.preventDefault();openAppModal('privacyModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Privacy Policy</button>
                    and
                    <button onclick="event.preventDefault();openAppModal('termsModal')" style="color:var(--cocoa-l);background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;text-decoration:underline;padding:0">Terms & Conditions</button>.
                </span>
            </label>
            <button id="consent-accept-btn" onclick="acceptConsent()" disabled
                style="width:100%;padding:14px 0;background:#1a1a1a;color:#555;border:1px solid #222;border-radius:12px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;cursor:not-allowed;transition:all 0.3s">
                Agree & Continue
            </button>
        </div>
    `
};

function getPrivacyModalTemplate(p) {
    return `
    <div id="appModal-privacyModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('privacyModal')">
        <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;">
            <button class="modal-close-btn" onclick="closeAppModal('privacyModal')">&times;</button>
            <h2 class="modal-title">${p.title}</h2>
            <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${p.subtitle}</p>
            <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;">
                ${p.content}
            </div>
        </div>
    </div>`;
}

function getTermsModalTemplate(t) {
    return `
    <div id="appModal-termsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('termsModal')">
        <div class="modal-card" style="max-width: 600px; max-height: 85vh; overflow-y: auto;">
            <button class="modal-close-btn" onclick="closeAppModal('termsModal')">&times;</button>
            <h2 class="modal-title">${t.title}</h2>
            <p class="modal-subtitle mb-6" style="margin-bottom: 24px;">${t.subtitle}</p>
            <div class="legal-document text-xs text-slate-300 space-y-4" style="line-height: 1.6; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 16px; text-align: left;">
                ${t.content}
            </div>
        </div>
    </div>`;
}

function getShortcutsModalTemplate(rows) {
    return `
    <div id="appModal-shortcutsModal" class="modal-overlay" onclick="if(event.target===this)closeAppModal('shortcutsModal')">
        <div class="modal-card modal-card-sm">
            <button class="modal-close-btn" onclick="closeAppModal('shortcutsModal')">&times;</button>
            <h2 class="modal-title" style="font-size:1rem">
                <i class="fa-solid fa-keyboard text-accent" style="margin-right:6px"></i>Keyboard Shortcuts
            </h2>
            <p class="text-muted" style="font-size:10px;margin-bottom:16px">Navigate faster with these shortcuts</p>
            <div style="display:flex;flex-direction:column;gap:8px">${rows}</div>
            <p style="color:#333;font-size:9px;margin-top:14px;text-align:center">Press <strong style="color:#555">Esc</strong> to close</p>
        </div>
    </div>`;
};

function getOnboardFormTemplate(user) {
    return `
        <div class="auth-card-header">
            <img src="${user.picture}" alt="" class="auth-avatar" referrerpolicy="no-referrer">
            <h2 class="auth-title">Welcome</h2>
            <p class="auth-subtitle">Choose a display name for your account</p>
        </div>
        <div class="auth-onboard-form">
            <label class="auth-label">Display Name</label>
            <input id="auth-username-input" type="text" class="auth-input" maxlength="30"
                   placeholder="e.g. Aarav" value="${user.name.split(' ')[0] || ''}" autocomplete="off">
            <p id="auth-onboard-error" class="auth-error hidden"></p>
            <button id="auth-onboard-submit" class="auth-submit-btn" onclick="_submitOnboarding()">
                Continue
            </button>
        </div>
    `;
}