{% extends "base.html" %}
{% block title %}Setup — BackupWatch{% endblock %}
{% block content %}
<div class="setup">
  <img class="logo" src="/static/logo-color.svg" alt="BackupWatch">
  <p class="sub">First-run setup</p>

  <ol class="steps">
    {% for n, label in [(1,"Administrator"),(2,"Mailbox"),(3,"Import date"),(4,"Users"),(5,"Notifications")] %}
      <li class="{{ 'done' if n < step else ('active' if n == step else '') }}"><span class="n">{{ n }}</span>{{ label }}</li>
    {% endfor %}
  </ol>

  {% if error %}<div class="banner error">{{ error }}</div>{% endif %}
  {% if info %}<div class="banner ok">{{ info }}</div>{% endif %}
  {% if test_result %}<div class="banner {{ 'error' if 'FAILED' in test_result else 'ok' }}">{{ test_result }}</div>{% endif %}

  <div class="panel">
  {% if step == 1 %}
    <h2 style="margin-top:0">Create the administrator</h2>
    <p class="note">This is the account you'll use to manage BackupWatch.</p>
    <form method="post" action="/setup/admin" class="stack">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Email <input type="email" name="email" required></label>
      <label>Password (min 8 characters) <input type="password" name="password" required></label>
      <label>Confirm password <input type="password" name="confirm" required></label>
      <button type="submit">Create &amp; continue →</button>
    </form>

  {% elif step == 2 %}
    <h2 style="margin-top:0">Connect your mailbox</h2>
    <p class="note">Where your backup-notification emails arrive. Pick a provider — or skip and
      set it up later under Settings → Mailbox.</p>
    <form method="post" action="/setup/m365" class="stack">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      {% set prov_ui = 'graph' if values.mail_provider != 'imap' else ('google' if values.imap_auth == 'google' else 'imap') %}
      <label>Provider
        <select name="mail_provider" id="su-provider">
          <option value="graph" {{ "selected" if prov_ui == 'graph' }}>Microsoft 365</option>
          <option value="google" {{ "selected" if prov_ui == 'google' }}>Google Apps (Gmail / Workspace)</option>
          <option value="imap" {{ "selected" if prov_ui == 'imap' }}>IMAP</option>
        </select></label>

      <div data-su="graph">
        <p class="note">Reads the mailbox via Microsoft Graph using an Azure app registration with
          the <span class="mono">Mail.ReadWrite</span> application permission (admin-consented) —
          that registration gives you the Tenant ID, Client ID and secret below. Setup:
          <a href="https://learn.microsoft.com/entra/identity-platform/quickstart-register-app" target="_blank" rel="noopener">Register an app in Microsoft Entra ↗</a>
          · <a href="https://entra.microsoft.com" target="_blank" rel="noopener">Entra admin center ↗</a>.
          Full guide: <span class="mono">Documentation/M365-SETUP.md</span>.</p>
        <label>Tenant ID <input name="graph_tenant_id" value="{{ values.graph_tenant_id }}"></label>
        <label>Client ID <input name="graph_client_id" value="{{ values.graph_client_id }}"></label>
        <label>Client secret <input type="password" name="graph_client_secret"
          placeholder="{{ '•••• stored' if secret_set.graph_client_secret else '' }}"></label>
        <label>Mailbox <input name="mailbox" value="{{ values.mailbox }}" placeholder="backups@yourmsp.com"></label>
      </div>

      <div data-su="google">
        <p class="note">Gmail or Google Workspace, using a Google
          <a href="https://support.google.com/accounts/answer/185833" target="_blank" rel="noopener">App Password ↗</a>
          (needs 2-step verification, with IMAP enabled). Server details are set automatically.
          Prefer <strong>Sign in with Google</strong> (OAuth)? Connect it after setup under
          Settings → Mailbox.</p>
        <label>Mailbox address <input name="g_username" value="{{ values.imap_username }}" placeholder="backups@yourmsp.com"></label>
        <label>App password <input type="password" name="g_password"
          placeholder="{{ '•••• stored' if secret_set.imap_password else '' }}"></label>
      </div>

      <div data-su="imap">
        <p class="note">Any mail server that speaks IMAP. Secrets are encrypted at rest and never
          shown back.</p>
        <label>Server (host) <input name="imap_host" value="{{ values.imap_host }}" placeholder="imap.example.com"></label>
        <label>Port <input type="number" name="imap_port" value="{{ values.imap_port }}" min="1"></label>
        <label>Security
          <select name="imap_security">
            <option value="ssl" {{ "selected" if values.imap_security != "starttls" }}>SSL/TLS (993)</option>
            <option value="starttls" {{ "selected" if values.imap_security == "starttls" }}>STARTTLS (143)</option>
          </select></label>
        <label>Username (mailbox address) <input name="imap_username" value="{{ values.imap_username }}" placeholder="backups@yourmsp.com"></label>
        <label>Password <input type="password" name="imap_password"
          placeholder="{{ '•••• stored' if secret_set.imap_password else '' }}"></label>
      </div>

      <div class="actions">
        <button type="submit" name="action" value="test" class="btn-secondary">Test connection</button>
        <button type="submit" name="action" value="next">Save &amp; continue →</button>
        <button type="submit" name="action" value="skip" class="link">Skip for now</button>
      </div>
    </form>
    <script>
    (function(){
      var sel = document.getElementById("su-provider");
      function sync(){
        document.querySelectorAll("[data-su]").forEach(function(el){
          el.style.display = (el.getAttribute("data-su") === sel.value) ? "" : "none";
        });
      }
      sel.addEventListener("change", sync);
      sync();
    })();
    </script>

  {% elif step == 3 %}
    <h2 style="margin-top:0">Import emails from</h2>
    <p class="note">Only import backup emails received on or after this date. Leave blank to import
      everything. Tip: set a recent date so old history doesn't flood the Review queue.</p>
    <form method="post" action="/setup/import" class="stack">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Earliest date <input type="date" name="import_from" value="{{ values.import_from }}"></label>
      <div class="actions">
        <button type="submit" name="action" value="next">Save &amp; continue →</button>
      </div>
    </form>

  {% elif step == 4 %}
    <h2 style="margin-top:0">Additional users <span class="note">(optional)</span></h2>
    <p class="note">Add team members now, or skip and do it later under Users.</p>
    {% if users %}
    <table>
      <thead><tr><th>Email</th><th>Role</th></tr></thead>
      <tbody>{% for u in users %}<tr><td>{{ u.email }}</td><td>{{ u.role }}</td></tr>{% endfor %}</tbody>
    </table>
    {% endif %}
    <form method="post" action="/setup/users" class="stack">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Email <input type="email" name="email"></label>
      <label>Password (min 8 characters) <input type="password" name="password"></label>
      <label>Role
        <select name="role">
          <option value="readonly">readonly — dashboard only</option>
          <option value="tech">tech — clients, jobs, review</option>
          <option value="admin">admin — full access</option>
        </select></label>
      <div class="actions">
        <button type="submit" name="action" value="add" class="btn-secondary">Add user</button>
        <button type="submit" name="action" value="continue">Continue →</button>
      </div>
    </form>

  {% elif step == 5 %}
    <h2 style="margin-top:0">Failure &amp; missed-backup alerts</h2>
    <p class="note">Where alerts and the daily digest go, and the SMTP server used to send them.</p>
    <form method="post" action="/setup/notify" class="stack">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <label>Send notifications using <select name="notify_via"><option value="smtp" {{ 'selected' if values.notify_via != 'mailbox' }}>Separate SMTP server</option><option value="mailbox" {{ 'selected' if values.notify_via == 'mailbox' }}>Connected Microsoft 365 / Google mailbox</option></select></label>
      <p class="note">SMTP fields below are needed only for separate SMTP delivery. Send a test to your intended recipients in Settings before activation.</p>
      <label>Alert recipients (comma or newline separated)
        <textarea name="alert_recipients" rows="2">{{ values.alert_recipients }}</textarea></label>
      <label>SMTP host <input name="smtp_host" value="{{ values.smtp_host }}"></label>
      <label>SMTP port <input type="number" name="smtp_port" value="{{ values.smtp_port }}"></label>
      <label>SMTP user <input name="smtp_user" value="{{ values.smtp_user }}"></label>
      <label>SMTP password <input type="password" name="smtp_password"
        placeholder="{{ '•••• stored' if secret_set.smtp_password else '' }}"></label>
      <label>From address <input name="smtp_from" value="{{ values.smtp_from }}"></label>
      <label class="inline"><input type="checkbox" name="smtp_starttls" {{ "checked" if values.smtp_starttls == "true" }}> STARTTLS</label>
      <label>Daily digest time (HH:MM) <input name="digest_time" value="{{ values.digest_time }}"></label>
      <div class="actions">
        <button type="submit" name="action" value="finish">Save &amp; open onboarding →</button>
      </div>
      <p class="note">Saving finishes installation and opens <strong>Onboarding</strong>, where you
        bring in clients and jobs and activate monitoring. Mailbox, routing, schedule and
        notification checks stay available there and in Settings — sending a test email only
        proves your SMTP server accepted it, so confirm it arrived before treating the destination
        as verified.</p>
    </form>
  {% endif %}
  </div>

  {% if step > 1 %}
  <form method="post" action="/setup/back">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button type="submit" class="link">← Back</button></form>
  {% endif %}
</div>
{% endblock %}