{% extends "base.html" %}
{% block title %}Settings{% endblock %}
{% block scripts %}
<script>
document.getElementById('holiday_country').addEventListener('change', async e => {
  const sel = document.getElementById('holiday_region');
  sel.innerHTML = '<option value="">Whole country</option>';
  if (!e.target.value) return;
  const res = await fetch('{{ url_for("holiday_regions") }}?country=' + e.target.value);
  (await res.json()).regions.forEach(([code, name]) => sel.appendChild(new Option(name, code)));
});
// App branding: copy logo, colours and font from a website (reuses the Brands importer).
document.getElementById('p_import_btn')?.addEventListener('click', async () => {
  const btn = document.getElementById('p_import_btn'), out = document.getElementById('p_import_result');
  const url = document.getElementById('p_import_url').value.trim(); if (!url) return;
  btn.disabled = true; btn.textContent = 'Looking…'; out.hidden = false; out.className = 'import-result'; out.textContent = 'Reading ' + url + '…';
  try {
    const res = await fetch('{{ url_for("brand_from_website") }}', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({url})});
    const d = await res.json(); if (!res.ok) throw new Error(d.error || 'That did not work.');
    document.getElementById('p_dark').value = d.primary_color; document.getElementById('p_accent').value = d.accent_color;
    if (d.name && !document.getElementById('p_maker').value) document.getElementById('p_maker').value = d.name;
    document.getElementById('p_url').value = 'https://' + d.website;
    const f = document.getElementById('p_font'); if (d.font) { if (![...f.options].some(o => o.value === d.font)) f.appendChild(new Option(d.font, d.font)); f.value = d.font; }
    if (d.logo_file) { document.getElementById('p_logo_import').value = d.logo_file; const pv = document.getElementById('p_logo_preview');
      pv.querySelector('img').src = d.logo_src; pv.style.background = d.logo_tone === 'dark' ? '#ffffff' : d.primary_color; }
    out.className = 'import-result ok'; out.innerHTML = '<b>Found</b> the logo, colours and font. Check them, then press <b>Save app branding</b>.';
  } catch (e) { out.className = 'import-result err'; out.textContent = e.message; }
  finally { btn.disabled = false; btn.textContent = 'Copy'; }
});
// Choosing an AI fills in its usual model and shows where to get a key.
const prov = document.getElementById('ai_provider');
prov.addEventListener('change', () => {
  const o = prov.selectedOptions[0], get = document.getElementById('ai_get');
  document.getElementById('ai_model').value = o.dataset.model;
  document.getElementById('ai_key').placeholder = o.dataset.hint;
  document.getElementById('ai_base_wrap').hidden = prov.value !== 'other';
  get.hidden = !o.dataset.get; get.href = o.dataset.get || '#';
});
</script>
{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Settings</h1><p class="muted">Your company, branding, business hours and connections.</p></div></div>
<div class="tabs" style="position:sticky;top:8px;z-index:6">
  <a href="#company">Company</a><a href="#time">Time &amp; holidays</a><a href="#connections">Connections</a>
  <a href="#safety">Safety</a><a href="#questions">Questions</a><a href="#alerts">Alerts</a><a href="#backups">Backups</a><a href="#app-branding">App branding</a>
</div>
<form method="post">
<div class="grid grid-2">
  <div class="card" id="company">
    <h2>Company</h2>
    <div class="field"><label>Company name</label><input type="text" name="company_name" value="{{ company.name }}" required></div>
    <div class="field"><label>Website</label><input type="text" name="website" value="{{ company.website or '' }}"></div>
    <div class="field"><label>Default tone for library emails</label>
      <p class="hint">Each automation can choose its own; this is used when it doesn't.</p>
      <select name="tone">{% for t, label in [('friendly', 'Friendly'), ('formal', 'Formal'), ('direct', 'Direct')] %}<option value="{{ t }}" {{ 'selected' if (company.tone or 'friendly') == t }}>{{ label }}</option>{% endfor %}</select></div>
    <div class="field"><label>How should AI-written emails sound?</label>
      <p class="hint">Only used if you connect an AI. Describe your company's tone.</p>
      <textarea name="voice" rows="4">{{ (company.voice or '')|trim }}</textarea></div>
  </div>
  <div class="card">
    <h2>Branding</h2>
    <p class="muted">Logos, colours, fonts and footers, including separate brands for each company in your group, are on the <a href="{{ url_for('brands') }}">Brands</a> page. Each person's style and signature is under People → Email look.</p>
  </div>
</div>

<div class="grid grid-2">
  <div class="card" id="time">
    <h2>Time &amp; Business Hours</h2>
    <div class="field"><label>Time zone</label>
      <select name="timezone">{% for tz in timezones %}<option value="{{ tz }}" {{ 'selected' if tz == config.timezone.key }}>{{ tz.replace('_', ' ') }}</option>{% endfor %}</select></div>
    <div class="field"><label>Business days</label>
      <div class="days">{% for d in day_names %}<label><input type="checkbox" name="bh_days" value="{{ d }}" {{ 'checked' if d in bh_days }}><span>{{ day_labels[loop.index0][:3] }}</span></label>{% endfor %}</div></div>
    <div class="row">
      <div class="field"><label>Opens</label><input type="time" name="bh_start" value="{{ bh_start }}"></div>
      <div class="field"><label>Closes</label><input type="time" name="bh_end" value="{{ bh_end }}"></div>
    </div>
  </div>
  <div class="card" id="connections">
    <h2>Connections</h2>
    <div class="field"><label>AI (optional)</label>
      <p class="hint">Everything works without AI, using the email library. If your company has an AI account, connect it to have the AI write emails, answer questions and set up automations from a sentence. Use any AI that gives you an API key.</p>
      {% if api_key_env %}<p><span class="pill on">Connected</span> <span class="muted small">{{ ai.label }}, via server setting</span></p>
      {% elif api_key_saved %}<p><span class="pill on">Connected</span> <span class="muted small">{{ ai.label }}</span></p>
      {% else %}<p><span class="pill">Not connected</span> <span class="muted small">Emails come from the email library.</span></p>{% endif %}
      <div class="row">
        <div class="field"><label class="small">Which AI</label>
          <select name="ai_provider" id="ai_provider">{% for k, p in providers.items() %}<option value="{{ k }}" {{ 'selected' if ai.provider == k }} data-model="{{ p.model }}" data-hint="{{ p.key_hint or 'Paste your API key' }}" data-get="{{ p.get_key or '' }}">{{ p.label }}</option>{% endfor %}</select></div>
        <div class="field"><label class="small">Model</label>
          <input type="text" name="ai_model" id="ai_model" value="{{ ai.model }}" placeholder="The provider's model name"></div>
      </div>
      <div class="field" id="ai_base_wrap" {{ 'hidden' if ai.provider != 'other' }}><label class="small">Web address (base URL)</label>
        <input type="text" name="ai_base_url" value="{{ ai.base_url if ai.provider == 'other' else '' }}" placeholder="e.g. https://your-company.openai.azure.com/openai/v1"></div>
      <input type="password" name="api_key" id="ai_key" placeholder="{{ 'Paste a new key to replace it' if api_key_saved else (providers[ai.provider].key_hint or 'Paste your API key') }}" autocomplete="off">
      <p class="hint" style="margin-top:6px"><a id="ai_get" href="{{ providers[ai.provider].get_key or '#' }}" target="_blank" rel="noopener" {{ 'hidden' if not providers[ai.provider].get_key }}>Where do I get a key?</a></p>
      {% if api_key_saved %}<label class="check"><input type="checkbox" name="remove_api_key"> <span>Remove the saved key (switch AI off)</span></label>{% endif %}
      {% if api_key_saved or api_key_env %}<button class="btn small" form="test-ai-form">{{ icon('check', 14) }} Test the Connection</button>{% endif %}
    </div>
    <div class="field" id="microsoft"><label>Microsoft 365 (one-time setup)</label>
      <p class="hint">Only needed if someone uses Microsoft 365 / Outlook email. Paste the IDs from your Microsoft app registration,
        and add <code>{{ ms_redirect }}</code> to it under Authentication → Add a platform → Mobile and desktop applications.</p>
      <input type="text" name="ms_client_id" value="{{ ms_client_id }}" placeholder="Application (client) ID" style="margin-bottom:8px">
      <input type="text" name="ms_tenant" value="{{ ms_tenant }}" placeholder="Directory (tenant) ID">
    </div>
    <div class="field" id="xero"><label>Xero (one-time setup)</label>
      <p class="hint">Lets anyone connect Xero on the Data page with a normal Xero sign-in. Create an app at developer.xero.com
        (type “Mobile or desktop app”, which needs no secret), add this redirect address: <code>{{ xero_redirect }}</code>, and paste its client ID.</p>
      <input type="text" name="xero_client_id" value="{{ xero_client_id }}" placeholder="Xero client ID"></div>
    <div class="field"><label>Email accounts</label><p class="muted small">Connect each person's email on the <a href="{{ url_for('people') }}">People</a> page.</p></div>
    <div class="field"><label>Data</label>
      <ul class="list small">{% for k, label in sources.items() %}<li><div class="body">{{ label }}</div></li>{% endfor %}</ul></div>
  </div>
</div>
<div class="card" id="safety">
  <h2>Safety</h2>
  <label class="check"><input type="checkbox" name="test_mode" {{ 'checked' if safety.test_mode }}>
    <span>Test mode<small>Every email goes to the address below instead of the real recipients, marked [TEST]. Use it while setting things up. Automatic replies won't happen in test mode.</small></span></label>
  <div class="field" style="max-width:420px;margin-left:27px"><input type="text" name="test_to" value="{{ safety.test_to or '' }}" placeholder="your.test@inbox.com"></div>
  <label class="check"><input type="checkbox" name="paused" {{ 'checked' if safety.paused }}>
    <span>Pause all sending<small>Nothing goes out until you turn this off. Replies are still read.</small></span></label>
  <label class="check"><input type="checkbox" name="colleague_replies" {{ 'checked' if safety.get('colleague_replies', true) }}>
    <span>Reply to colleagues' automations<small>When a colleague on their own computer sends you an automated email that expects a reply, your copy replies from your email, the way they set it up. Only emails from people on your People page count.</small></span></label>
  <label class="check"><input type="checkbox" name="skip_holidays" {{ 'checked' if safety.get('skip_holidays', true) }}>
    <span>No emails on public holidays<small>Anything due on a holiday waits for the next working day.</small></span></label>
  <div class="row" style="margin-left:27px">
    <div class="field"><label>Country</label>
      <select name="holiday_country" id="holiday_country"><option value="">No public holidays</option>
        {% for code, name in countries %}<option value="{{ code }}" {{ 'selected' if safety.country == code }}>{{ name }}</option>{% endfor %}</select></div>
    <div class="field"><label>State / region <span class="muted" style="font-weight:400">(optional)</span></label>
      <select name="holiday_region" id="holiday_region"><option value="">Whole country</option>
        {% for code, name in regions %}<option value="{{ code }}" {{ 'selected' if safety.region == code }}>{{ name }}</option>{% endfor %}</select></div>
  </div>
  {% if upcoming_holidays %}
  <div class="field" style="margin-left:27px"><label>Upcoming public holidays</label>
    <p class="hint">Untick any day your business works.</p>
    <div class="holiday-list">{% for d in upcoming_holidays %}
      <label class="check small" style="margin:0 0 4px"><input type="hidden" name="holiday_shown" value="{{ d.date }}">
        <input type="checkbox" name="holiday_observed" value="{{ d.date }}" {{ 'checked' if d.observed }}> <span>{{ d.label }} · {{ d.name }}</span></label>
    {% endfor %}</div></div>
  {% elif safety.country %}<p class="muted small" style="margin-left:27px">Save to see the upcoming holidays.</p>{% endif %}
  <div class="field" style="margin-left:27px"><label>Your own days off</label>
    <p class="hint">Company shutdowns or local days, one per line, date first: <code>2026-12-24 Office closed</code></p>
    <textarea name="holidays" rows="3">{% for x in safety.holidays or [] %}{{ x.date }} {{ x.name }}
{% endfor %}</textarea></div>
</div>
<div class="card" id="questions">
  <h2>Questions by Email</h2>
  <label class="check"><input type="checkbox" name="questions_on" {{ 'checked' if questions.enabled }}>
    <span>Answer questions emailed in<small>Anyone in People or the Address book can email this inbox with a subject starting “Ask:”, e.g. <i>Ask: which projects are over 60 days?</i>, and get an answer from the data. Other emails are never touched.</small></span></label>
  <div class="field" style="max-width:420px;margin-left:27px"><select name="questions_mailbox"><option value="">Choose the inbox</option>
    {% for k, r in config.roles.items() %}<option value="{{ k }}" {{ 'selected' if questions.mailbox == k }}>{{ r.name }} ({{ r.email }})</option>{% endfor %}</select></div>
</div>
<div class="card" id="alerts">
  <h2>Alerts</h2>
  <p class="muted">{{ product.name }} emails you when something needs you. Alerts are sent from one of your connected accounts.</p>
  <div class="row">
    <div class="field"><label>Send alerts to</label><input type="text" name="alerts_to" value="{{ alerts_cfg.to or '' }}" placeholder="you@company.com, colleague@company.com"></div>
    <div class="field"><label>Send them from</label><select name="alerts_from"><option value="">Choose a connected account</option>
      {% for k, r in config.roles.items() %}<option value="{{ k }}" {{ 'selected' if alerts_cfg.from_role == k }}>{{ r.name }} ({{ r.email }})</option>{% endfor %}</select></div>
  </div>
  <div class="field"><label>Email me when</label>
    {% for k, label in alert_kinds.items() %}<label class="check"><input type="checkbox" name="alert_kinds" value="{{ k }}" {{ 'checked' if k in enabled_kinds }}><span>{{ label }}</span></label>{% endfor %}</div>
  <div class="field"><label>This app's web address</label>
    <p class="hint">Needed for one-click approve buttons in emails. For an online copy it's the address you sign in at, e.g. https://salescomms-acme.onrender.com. Approve links only work from other devices when {{ product.name }} is online.</p>
    <input type="text" name="base_url" value="{{ alerts_cfg.base_url or '' }}" placeholder="https://…"></div>
  <button class="btn" form="test-alert-form">Send a Test Alert</button> <span class="muted small">Save first if you changed anything.</span>
</div>
<button class="btn primary big">Save Settings</button>
</form>
<form id="test-alert-form" method="post" action="{{ url_for('test_alert') }}"></form>


<form method="post" action="{{ url_for('product_settings') }}" enctype="multipart/form-data" class="card" id="app-branding" style="margin-top:30px">
  <h2>App Branding (White Label)</h2>
  <p class="muted">How this app presents itself: its name, logo, colours and font on every screen, the sign-in page and alert emails. Change these to run it under your own name. This is separate from <a href="{{ url_for('brands') }}">Brands</a>, which style the emails your people send.</p>
  <div class="import-box">
    <div><b>{{ icon('sparkle', 15) }} Copy from a website</b><p class="hint" style="margin:2px 0 10px">Fills in the logo, colours and font. Check them, then save.</p></div>
    <div class="import-row"><input type="text" id="p_import_url" placeholder="yourcompany.com" autocomplete="off"><button type="button" class="btn" id="p_import_btn">Copy</button></div>
    <div id="p_import_result" class="import-result" hidden></div>
  </div>
  <input type="hidden" name="logo_import" id="p_logo_import">
  <div class="row">
    <div class="field"><label>App name</label><input type="text" name="name" id="p_name" value="{{ product.name }}" required></div>
    <div class="field"><label>Made by</label><input type="text" name="maker" id="p_maker" value="{{ product.maker or '' }}" placeholder="Your company"></div>
    <div class="field"><label>Website</label><input type="text" name="maker_url" id="p_url" value="{{ product.maker_url or '' }}" placeholder="https://"></div>
  </div>
  <div class="row">
    <div class="field"><label>Logo</label>
      <div class="product-bar" id="p_logo_preview" style="width:max-content;min-width:180px;margin:0 0 8px"><img src="{{ product_logo }}" alt=""></div>
      <p class="hint">Shown on a panel in the dark colour, so a light or colourful logo works best. PNG or JPG.</p>
      <input type="file" name="logo" accept=".png,.jpg,.jpeg"></div>
    <div class="field"><label>Browser tab icon</label>
      <div style="margin:0 0 8px"><img src="{{ product_mark }}" alt="" style="width:32px;height:32px;object-fit:contain;background:var(--pdark);border-radius:8px;padding:4px"></div>
      <p class="hint">A small square version of the logo.</p>
      <input type="file" name="mark" accept=".png,.jpg,.jpeg"></div>
  </div>
  <div class="row">
    <div class="field"><label>Dark colour</label><input type="color" name="dark" id="p_dark" value="{{ product.dark }}"><p class="hint">Behind the logo.</p></div>
    <div class="field"><label>Accent colour</label><input type="color" name="accent" id="p_accent" value="{{ product.accent }}"><p class="hint">Buttons and highlights.</p></div>
    <div class="field"><label>Font</label><select name="font" id="p_font">{% for f in ['Poppins', 'Inter', 'Manrope', 'DM Sans', 'Montserrat', 'Lato', 'Open Sans', 'Roboto', 'Nunito Sans', 'Work Sans', 'Arial', 'Helvetica', 'Georgia'] %}<option value="{{ f }}" {{ 'selected' if product.font == f }}>{{ f }}</option>{% endfor %}
      {% if product.font not in ['Poppins', 'Inter', 'Manrope', 'DM Sans', 'Montserrat', 'Lato', 'Open Sans', 'Roboto', 'Nunito Sans', 'Work Sans', 'Arial', 'Helvetica', 'Georgia'] %}<option selected>{{ product.font }}</option>{% endif %}</select></div>
  </div>
  <label class="check"><input type="checkbox" name="show_made_by" {{ 'checked' if product.show_made_by }}><span>Show “made by {{ product.maker or '…' }}”<small>On the sign-in page and at the bottom of the menu</small></span></label>
  <div class="actions"><button class="btn primary">Save App Branding</button>
    <button class="btn" name="reset" value="1" data-confirm="Go back to the original app branding?">Reset to Original</button></div>
</form>
<div class="card" id="backups" style="margin-top:30px">
  <h2>Backups &amp; Updates</h2>
  <p class="muted">A backup is made automatically every day (the last 14 are kept). Download one now and then and keep it somewhere safe, such as a USB stick or cloud storage.</p>
  {% if restore_pending %}<div class="banner">A restore is waiting. Close {{ product.name }} and start it again to finish.</div>{% endif %}
  {% if update_pending %}<div class="banner">An update is waiting. Close {{ product.name }} and start it again to finish.</div>{% endif %}
  <div class="actions"><form method="post" action="{{ url_for('backup_now') }}" class="inline"><button class="btn primary">Back Up Now</button></form>
    <span class="muted small">Version {{ version }}</span></div>
  {% if backups %}<ul class="list small" style="margin-top:10px">{% for b in backups[:8] %}
    <li><div class="body">{{ b.made.strftime('%a %d %b %Y, %H:%M') }} <span class="muted">· {{ b.kind }} · {{ b.size_mb }} MB</span></div>
      <a class="btn small" href="{{ url_for('backup_download', name=b.name) }}">Download</a></li>{% endfor %}</ul>{% endif %}
  <div class="grid grid-2" style="margin-top:14px">
    <form method="post" action="{{ url_for('restore') }}" enctype="multipart/form-data" class="sub" data-confirm="Restore this backup? Everything will go back to how it was then (a backup of now is made first).">
      <b>Restore a backup</b><p class="hint">Takes effect when {{ product.name }} next starts.</p>
      <div class="actions"><input type="file" name="file" accept=".zip" required><button class="btn">Restore</button></div></form>
    <form method="post" action="{{ url_for('update') }}" enctype="multipart/form-data" class="sub">
      <b>Install an update</b><p class="hint">Upload a new {{ product.name }}.zip. Settings and data are kept; takes effect on the next start. (Online copies update automatically when redeployed.)</p>
      <div class="actions"><input type="file" name="file" accept=".zip" required><button class="btn">Install Update</button></div></form>
  </div>
</div>

<div class="card">
  <h2>Setup Packs</h2>
  <h3>For One Person's Own Computer</h3>
  <p class="muted">A blank slate for someone who runs {{ product.name }} on their own computer: just them and their company's branding. No colleagues, automations, address book or data come with it, so they add only the people and automations they work with.</p>
  <form method="get" action="{{ url_for('pack_export') }}" class="actions">
    <select name="person" required>{% for k, r in config.roles.items() %}<option value="{{ k }}">{{ r.name }} ({{ r.email }})</option>{% endfor %}</select>
    <button class="btn">Download Personal Setup Pack</button></form>
  <h3 style="margin-top:20px">Whole Setup</h3>
  <p class="muted">Save this whole setup (brands, people, automations, templates, price list, address book) as one file, and load it into another copy of {{ product.name }} to set up a new company quickly. Passwords, emails sent and data aren't included.</p>
  <form method="get" action="{{ url_for('pack_export') }}" class="actions">
    <label class="check" style="margin:0"><input type="checkbox" name="people" value="1" checked> <span>Include people's email addresses</span></label>
    <label class="check" style="margin:0"><input type="checkbox" name="contacts" value="1" checked> <span>Include the address book</span></label>
    <button class="btn">Download Setup Pack</button></form>
  <form method="post" action="{{ url_for('pack_import') }}" enctype="multipart/form-data" class="actions" style="margin-top:12px" data-confirm="Load this setup pack? It replaces your current settings, people and automations (a backup is made first).">
    <input type="file" name="file" accept=".zip" required><button class="btn">Load a Setup Pack</button></form>
</div>

<div class="card">
  <h2>Help &amp; Support</h2>
  <p class="muted">If something isn't working, download diagnostics and send the file to your {{ product.name }} support contact. It contains settings and recent problems only: no emails, data or passwords.</p>
  <a class="btn" href="{{ url_for('diagnostics_download') }}">Download Diagnostics</a>
</div>

<div class="card" style="margin-top:30px">
  <h2>Start Fresh</h2>
  <p class="muted">Clears all sent emails, scheduled emails and activity. Your settings, people and automations are kept.</p>
  <form method="post" action="{{ url_for('reset_history') }}" data-confirm="Clear all emails and history? This can’t be undone."><button class="btn danger">Clear Emails &amp; History</button></form>
</div>
<form id="test-ai-form" method="post" action="{{ url_for('test_ai') }}"></form>
{% endblock %}