<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title"><%= title %></h2>
      <div class="text-secondary mt-1">Mobile app reads these on startup via <code>GET /api/v1/app-config</code></div>
    </div>
  </div>
</div>

<div class="card mb-4">
  <div class="card-body">
    <% if (success) { %><div class="alert alert-success"><%= success %></div><% } %>
    <% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>

    <form action="/admin/app-settings" method="post" enctype="multipart/form-data">
      <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item"><a class="nav-link active" href="#tab-brand" role="tab">Brand & Theme</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-version" role="tab">Version & Updates</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-location" role="tab">Location</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-features" role="tab">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-support" role="tab">Support & Legal</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-locale" role="tab">Locale & Ads</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-notifications" role="tab">Notifications</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-empty" role="tab">Empty States</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab-performance" role="tab">Performance</a></li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane fade active show" id="tab-brand">
          <div class="row">
            <div class="col-md-6">
              <h4 class="mb-3">Identity</h4>
              <div class="mb-3">
                <label class="form-label">App Name</label>
                <input type="text" name="appName" class="form-control" value="<%= config.appName || 'Qeem' %>" required>
                <div class="form-hint">Shown on splash screen, login, and About. Returned as <code>appName</code> in app config.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Subtitle / Tagline</label>
                <input type="text" name="subtitle" class="form-control" value="<%= config.subtitle || 'What\'s Around You' %>">
                <div class="form-hint">Short line under the logo on home and onboarding screens.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Default Language</label>
                <input type="text" name="language" class="form-control" value="<%= config.language || 'en' %>" maxlength="10">
                <div class="form-hint">Fallback locale when the device language is not supported (ISO code, e.g. <code>en</code>).</div>
              </div>
              <h4 class="mb-3 mt-4">Theme Colors</h4>
              <div class="row g-2">
                <div class="col-6">
                  <label class="form-label">Primary</label>
                  <input type="color" name="primaryColor" class="form-control form-control-color w-100" value="<%= config.primaryColor || '#9126C1' %>">
                  <div class="form-hint">Main buttons, links, and accents in the mobile app.</div>
                </div>
                <div class="col-6">
                  <label class="form-label">Accent</label>
                  <input type="color" name="accentColor" class="form-control form-control-color w-100" value="<%= config.accentColor || '#8A28BD' %>">
                  <div class="form-hint">Secondary highlights, chips, and tab indicators.</div>
                </div>
                <div class="col-6">
                  <label class="form-label">Dark</label>
                  <input type="color" name="darkColor" class="form-control form-control-color w-100" value="<%= config.darkColor || '#2D2453' %>">
                  <div class="form-hint">Headings and primary text color on light backgrounds.</div>
                </div>
                <div class="col-6">
                  <label class="form-label">Gradient Start</label>
                  <input type="color" name="gradientStart" class="form-control form-control-color w-100" value="<%= config.gradientStart || '#8A28BD' %>">
                  <div class="form-hint">Top color for header and hero gradients.</div>
                </div>
                <div class="col-6">
                  <label class="form-label">Gradient End</label>
                  <input type="color" name="gradientEnd" class="form-control form-control-color w-100" value="<%= config.gradientEnd || '#402468' %>">
                  <div class="form-hint">Bottom color for header and hero gradients.</div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Assets</h4>
              <div class="mb-3">
                <label class="form-label">Launcher Icon</label>
                <input type="file" name="launcherIcon" class="form-control" accept="image/png,image/jpeg,image/webp">
                <div class="form-hint">Home-screen icon on iOS/Android. Recommended square PNG, at least 512×512.</div>
                <% if (config.launcherIconUrl) { %><img src="<%= config.launcherIconUrl %>" class="mt-2" style="max-width:80px;border-radius:16px;" alt="Launcher icon preview"><% } %>
              </div>
              <div class="mb-3">
                <label class="form-label">Splash Screen Image</label>
                <input type="file" name="splashImage" class="form-control" accept="image/png,image/jpeg,image/webp">
                <div class="form-hint">Full-screen image while the app loads on cold start.</div>
                <% if (config.splashImageUrl) { %><img src="<%= config.splashImageUrl %>" class="mt-2" style="max-width:120px;border-radius:8px;" alt="Splash preview"><% } %>
              </div>
              <div class="mb-3">
                <label class="form-label">Horizontal Logo</label>
                <input type="file" name="logoImage" class="form-control" accept="image/png,image/jpeg,image/webp">
                <div class="form-hint">Logo in app toolbar, login, and share cards. Transparent PNG works best.</div>
                <% if (config.logoUrl) { %><img src="<%= config.logoUrl %>" class="mt-2" style="max-height:48px;" alt="Logo preview"><% } %>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-version">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">Current App Version</label>
                <input type="text" name="appVersion" class="form-control" value="<%= config.appVersion || '1.0.0' %>">
                <div class="form-hint">Latest release shown in Settings and update dialogs (semver, e.g. <code>1.2.0</code>).</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Minimum Supported Version</label>
                <input type="text" name="minAppVersion" class="form-control" value="<%= config.minAppVersion || '1.0.0' %>">
                <div class="form-hint">Oldest app version still allowed. Used with Force update to block outdated clients.</div>
              </div>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="forceUpdate" class="form-check-input" <%= config.forceUpdate ? 'checked' : '' %>>
                  <span class="form-check-label">Force update (block app below min version)</span>
                </label>
                <div class="form-hint">When enabled, users on versions below Minimum Supported Version see the update screen and cannot continue.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Update Message</label>
                <textarea name="updateMessage" class="form-control" rows="2"><%= config.updateMessage || '' %></textarea>
                <div class="form-hint">Body text on the mandatory or optional update prompt.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">iOS App Store URL</label>
                <input type="url" name="iosStoreUrl" class="form-control" value="<%= config.iosStoreUrl || '' %>" placeholder="https://apps.apple.com/...">
                <div class="form-hint">Opens when the user taps Update on iPhone/iPad.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Google Play URL</label>
                <input type="url" name="androidStoreUrl" class="form-control" value="<%= config.androidStoreUrl || '' %>" placeholder="https://play.google.com/...">
                <div class="form-hint">Opens when the user taps Update on Android.</div>
              </div>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="maintenanceMode" class="form-check-input" <%= config.maintenanceMode ? 'checked' : '' %>>
                  <span class="form-check-label">Maintenance mode</span>
                </label>
                <div class="form-hint">Blocks the entire app and shows the maintenance message instead of normal content.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Maintenance Message</label>
                <textarea name="maintenanceMessage" class="form-control" rows="2"><%= config.maintenanceMessage || '' %></textarea>
                <div class="form-hint">Displayed full-screen while maintenance mode is on.</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-location">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="showLocationGate" class="form-check-input" <%= config.showLocationGate !== false ? 'checked' : '' %>>
                  <span class="form-check-label">Show location gate on first launch</span>
                </label>
                <div class="form-hint">Prompts for GPS permission before the home feed on first open.</div>
              </div>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="allowSkipLocation" class="form-check-input" <%= config.allowSkipLocation !== false ? 'checked' : '' %>>
                  <span class="form-check-label">Allow skip location (browse without GPS)</span>
                </label>
                <div class="form-hint">Shows a Skip button on the location gate; feed falls back to Default City.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Default City</label>
                <input type="text" name="defaultCity" class="form-control" value="<%= config.defaultCity || 'Dubai' %>">
                <div class="form-hint">City name used for deals and listings when location is skipped or unavailable.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">Location Gate Message</label>
                <textarea name="locationGateMessage" class="form-control" rows="3"><%= config.locationGateMessage || '' %></textarea>
                <div class="form-hint">Explanation shown on the permission screen before requesting GPS access.</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-features">
          <p class="text-secondary">Toggle app modules remotely without a new release.</p>
          <div class="row">
            <% var featureLabels = { grocery: 'Grocery', jobs: 'Jobs', classifieds: 'Classifieds', coupons: 'Coupons', services: 'Services', foodDining: 'Food & Dining', pricing: 'Pricing / Subscriptions', search: 'Global Search', favorites: 'Favorites', branches: 'Brand & Branch Pages' }; %>
            <% var featureHints = { grocery: 'Grocery deals tab and home grocery section.', jobs: 'Jobs listing and job detail screens.', classifieds: 'Buy/sell classifieds module.', coupons: 'Coupons list and redemption flow.', services: 'Service providers directory.', foodDining: 'Restaurants and dining offers.', pricing: 'Subscription/pricing plans screen.', search: 'Global search bar and results.', favorites: 'Save deals and items to favorites.', branches: 'Brand pages with branch picker (e.g. Lulu branches).' }; %>
            <% featureKeys.forEach(function(key) { %>
            <div class="col-md-4 mb-3">
              <label class="form-check">
                <input type="checkbox" name="feature_<%= key %>" class="form-check-input" <%= config.features && config.features[key] !== false ? 'checked' : '' %>>
                <span class="form-check-label"><%= featureLabels[key] || key %></span>
              </label>
              <div class="form-hint"><%= featureHints[key] || 'Controls visibility of this module in the mobile app.' %></div>
            </div>
            <% }); %>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-support">
          <div class="row">
            <div class="col-md-6">
              <h4 class="mb-3">Support</h4>
              <div class="mb-3">
                <label class="form-label">Support Email</label>
                <input type="email" name="supportEmail" class="form-control" value="<%= config.supportEmail || '' %>">
                <div class="form-hint">Linked from Help &amp; Support and contact screens; opens the mail client.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Support Phone</label>
                <input type="text" name="supportPhone" class="form-control" value="<%= config.supportPhone || '' %>">
                <div class="form-hint">Tap-to-call number in the app support section.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">WhatsApp</label>
                <input type="text" name="supportWhatsapp" class="form-control" value="<%= config.supportWhatsapp || '' %>">
                <div class="form-hint">WhatsApp number (with country code) for chat support button.</div>
              </div>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Legal Links</h4>
              <div class="mb-3">
                <label class="form-label">Terms URL</label>
                <input type="text" name="termsUrl" class="form-control" value="<%= config.termsUrl || '/api/v1/content/terms' %>">
                <div class="form-hint">WebView or in-app browser URL for Terms of Service.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Privacy URL</label>
                <input type="text" name="privacyUrl" class="form-control" value="<%= config.privacyUrl || '/api/v1/content/privacy' %>">
                <div class="form-hint">Privacy policy page linked from Settings and signup.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">About URL</label>
                <input type="text" name="aboutUrl" class="form-control" value="<%= config.aboutUrl || '/api/v1/content/about' %>">
                <div class="form-hint">About Qeem page in Settings.</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-locale">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">Default Currency</label>
                <input type="text" name="defaultCurrency" class="form-control" value="<%= config.defaultCurrency || 'AED' %>" maxlength="10">
                <div class="form-hint">Currency code for prices (classifieds, deals, pricing plans), e.g. <code>AED</code>.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">Supported Languages</label>
                <input type="text" name="supportedLanguages" class="form-control" value="<%= (config.supportedLanguages || ['en']).join(', ') %>" placeholder="en, ar">
                <div class="form-hint">Comma-separated ISO codes. Controls language picker options in Settings.</div>
              </div>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="rtlEnabled" class="form-check-input" <%= config.rtlEnabled ? 'checked' : '' %>>
                  <span class="form-check-label">Enable RTL layout (Arabic)</span>
                </label>
                <div class="form-hint">Mirrors layout direction when Arabic (or other RTL locale) is selected.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="showAds" class="form-check-input" <%= config.showAds !== false ? 'checked' : '' %>>
                  <span class="form-check-label">Show promotional ads in app</span>
                </label>
                <div class="form-hint">Master switch for in-feed promotional banners and ad slots.</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-notifications">
          <p class="text-secondary">Push notification defaults for when the mobile app adds FCM/APNs.</p>
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="pushNotificationsEnabled" class="form-check-input" <%= config.pushNotificationsEnabled ? 'checked' : '' %>>
                  <span class="form-check-label">Push notifications enabled</span>
                </label>
                <div class="form-hint">Global on/off for push. When off, no push tokens receive alerts regardless of channel settings.</div>
              </div>
              <h4 class="mb-3">Notification channels</h4>
              <% var notifyLabels = { offers: 'New offers', dealsExpiring: 'Deals expiring soon', nearbyDeals: 'Nearby deals' }; %>
              <% var notifyHints = { offers: 'Alert when new deals are published in the user\'s area.', dealsExpiring: 'Reminder before a saved or viewed deal expires.', nearbyDeals: 'Geofenced alerts for deals close to the user.' }; %>
              <% (notificationChannelKeys || []).forEach(function(key) { %>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="notify_<%= key %>" class="form-check-input" <%= config.notificationChannels && config.notificationChannels[key] !== false ? 'checked' : '' %>>
                  <span class="form-check-label"><%= notifyLabels[key] || key %></span>
                </label>
                <div class="form-hint"><%= notifyHints[key] || 'User can opt in/out of this notification category in app Settings.' %></div>
              </div>
              <% }); %>
            </div>
            <div class="col-md-6">
              <h4 class="mb-3">Quiet hours</h4>
              <div class="mb-3">
                <label class="form-label">Start (24h)</label>
                <input type="time" name="quietHoursStart" class="form-control" value="<%= config.quietHoursStart || '22:00' %>">
                <div class="form-hint">Local time when non-urgent pushes stop for the day.</div>
              </div>
              <div class="mb-3">
                <label class="form-label">End (24h)</label>
                <input type="time" name="quietHoursEnd" class="form-control" value="<%= config.quietHoursEnd || '08:00' %>">
                <div class="form-hint">Local time when pushes may resume (handles overnight ranges).</div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-empty">
          <p class="text-secondary">Messages shown when a screen has no data.</p>
          <div class="row">
            <% var emptyLabels = { home: 'Home', offers: 'Offers', grocery: 'Grocery', coupons: 'Coupons', jobs: 'Jobs', search: 'Search', favorites: 'Favorites', services: 'Services', pricing: 'Pricing' }; %>
            <% var emptyHints = { home: 'Home feed when no nearby offers exist.', offers: 'Offers list filtered to zero results.', grocery: 'Grocery deals tab with no items.', coupons: 'Coupons screen with no active coupons.', jobs: 'Jobs list with no postings.', search: 'Search results page with no matches.', favorites: 'Favorites tab when the user saved nothing.', services: 'Services directory with no providers.', pricing: 'Pricing screen when no plans are available.' }; %>
            <% (emptyStateKeys || []).forEach(function(key) { %>
            <div class="col-md-6 mb-3">
              <label class="form-label"><%= emptyLabels[key] || key %></label>
              <input type="text" name="empty_<%= key %>" class="form-control" value="<%= config.emptyStateMessages && config.emptyStateMessages[key] ? config.emptyStateMessages[key] : '' %>" placeholder="Default empty message">
              <div class="form-hint"><%= emptyHints[key] || 'Empty-state copy for this screen in the mobile app.' %></div>
            </div>
            <% }); %>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-performance">
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label">App config cache TTL (seconds)</label>
                <input type="number" name="configCacheTtl" class="form-control" min="60" step="60" value="<%= config.configCacheTtl != null ? config.configCacheTtl : 3600 %>">
                <div class="form-hint">How long the mobile app caches <code>/api/v1/app-config</code> locally before refreshing.</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="analyticsEnabled" class="form-check-input" <%= config.analyticsEnabled !== false ? 'checked' : '' %>>
                  <span class="form-check-label">Analytics enabled</span>
                </label>
                <div class="form-hint">Allows session and screen-view events to be sent to your analytics provider.</div>
              </div>
              <div class="mb-3">
                <label class="form-check">
                  <input type="checkbox" name="crashReportingEnabled" class="form-check-input" <%= config.crashReportingEnabled !== false ? 'checked' : '' %>>
                  <span class="form-check-label">Crash reporting enabled</span>
                </label>
                <div class="form-hint">Sends crash stack traces to your crash reporting service (e.g. Firebase Crashlytics).</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-4 pt-3 border-top">
        <button type="submit" class="btn btn-primary">Save Settings</button>
      </div>
    </form>
  </div>
</div>
