{% extends "base.html" %}
{% block title %}Licence — Neto{% endblock %}

{% block content %}
<div class="page-title">Licence</div>

{% if error %}
  <div class="alert" style="background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px">
    {{ error }}
  </div>
{% endif %}

{% if lic.state == 'active' %}
<!-- ── Active licence ── -->
<div style="max-width:600px">
  <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:12px;padding:24px 28px;margin-bottom:24px;display:flex;align-items:center;gap:20px">
    <div style="font-size:40px">✅</div>
    <div>
      <div style="font-weight:700;font-size:16px;color:#15803d">Licence active</div>
      <div style="font-size:14px;color:#166534;margin-top:2px">
        {{ lic.plan }} plan
        {% if lic.expires_at %}— expires {{ lic.expires_at | int | datetimeformat }}{% else %}— never expires{% endif %}
      </div>
      {% if lic.email %}<div style="font-size:13px;color:#166534;margin-top:2px">{{ lic.email }}</div>{% endif %}
    </div>
  </div>

  <div class="card" style="margin-bottom:16px">
    <h3>Manage subscription</h3>
    <p style="font-size:14px;color:var(--muted);margin-top:8px;margin-bottom:16px;line-height:1.6">
      To upgrade, cancel, or update your payment details, visit the customer portal. You can upgrade from monthly to annual and receive a prorated credit.
    </p>
    <a href="https://neto.network/account.html" target="_blank"
       style="display:inline-block;background:var(--accent);color:#fff;padding:9px 20px;border-radius:7px;font-size:14px;font-weight:500;text-decoration:none">
      Open customer portal ↗
    </a>
  </div>

  <div class="card">
    <h3>Device & key info</h3>
    <div style="font-size:13px;color:var(--muted);margin-top:10px;line-height:2.2">
      <div>Device ID: <code style="color:var(--text);font-size:12px">{{ device_id }}</code></div>
      {% if lic_row %}
      <div>Key: <code style="color:var(--text);font-size:12px">{{ lic_row.key[:8] }}••••••••••••••••••••••••{{ lic_row.key[-4:] }}</code></div>
      <div>Last check-in: {% if lic_row.last_checkin %}{{ lic_row.last_checkin | int | datetimeformat }}{% else %}Never{% endif %}</div>
      {% endif %}
    </div>
    <div style="margin-top:16px;display:flex;gap:10px;flex-wrap:wrap">
      <form method="post">
        <input type="hidden" name="action" value="checkin">
        <button type="submit" style="background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px">
          🔄 Check in now
        </button>
      </form>
      <form method="post" onsubmit="return confirm('This will release your licence from this device. Continue?')">
        <input type="hidden" name="action" value="deactivate">
        <button type="submit" style="background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px">
          Release licence from this device
        </button>
      </form>
    </div>
  </div>
</div>

{% elif lic.state == 'grace' %}
<!-- ── Grace period ── -->
<div style="max-width:600px">
  <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:24px 28px;margin-bottom:24px">
    <div style="font-weight:700;font-size:16px;color:#92400e;margin-bottom:6px">⚠️ Licence validation failed</div>
    <div style="font-size:14px;color:#78350f;line-height:1.6">
      Neto couldn't reach the licence server. You have <strong>{{ lic.grace_days_left | int }} days</strong> before access is restricted.
      Check your internet connection or click "Check in now" below.
    </div>
  </div>
  <form method="post">
    <input type="hidden" name="action" value="checkin">
    <button type="submit" style="background:var(--accent);color:#fff;border:none;padding:10px 22px;border-radius:7px;cursor:pointer;font-size:14px;font-weight:500">
      🔄 Retry check-in
    </button>
  </form>
</div>

{% elif lic.state == 'revoked' %}
<!-- ── Revoked licence ── -->
<div style="max-width:600px">
  <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:24px 28px;margin-bottom:24px">
    <div style="font-weight:700;font-size:16px;color:#991b1b;margin-bottom:6px">⛔ Licence access revoked</div>
    <div style="font-size:14px;color:#7f1d1d;line-height:1.6">
      This device's licence is no longer valid. If you believe this is a mistake, please
      <a href="https://neto.network/contact.html" target="_blank" style="color:#991b1b;font-weight:600">contact support</a>.
      Otherwise, you can purchase a new licence below.
    </div>
  </div>

  <!-- Activate existing key -->
  <div class="card" style="margin-bottom:20px">
    <h3>Already have a key?</h3>
    <p style="font-size:13px;color:var(--muted);margin-top:6px;margin-bottom:16px">
      Enter your licence key to restore access immediately.
    </p>
    <form method="post" style="display:flex;gap:10px;flex-wrap:wrap">
      <input type="hidden" name="action" value="activate">
      <input type="text" name="licence_key" placeholder="XXXX-XXXX-XXXX-XXXX"
             style="flex:1;min-width:220px;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:7px;font-size:14px;font-family:monospace">
      <button type="submit"
              style="background:#15803d;color:#fff;border:none;padding:9px 20px;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap">
        Activate
      </button>
    </form>
  </div>

  <!-- Purchase new licence -->
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:16px">
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center">
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Monthly</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)">
        {% if prices and prices.monthly %}${{ prices.monthly.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">per month</div>
      <a href="/api/checkout/monthly" target="_blank"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">Buy now ↗</a>
    </div>
    <div style="background:var(--bg2);border:2px solid var(--accent);border-radius:12px;padding:20px;text-align:center;position:relative">
      <div style="position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap">BEST VALUE</div>
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Annual</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)">
        {% if prices and prices.annual %}${{ prices.annual.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">per year</div>
      <a href="/api/checkout/annual" target="_blank"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">Buy now ↗</a>
    </div>
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center">
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Lifetime</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)">
        {% if prices and prices.lifetime %}${{ prices.lifetime.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">one-time</div>
      <a href="/api/checkout/lifetime" target="_blank"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">Buy now ↗</a>
    </div>
  </div>
</div>

{% else %}
<!-- ── No licence / trial ── -->
<div style="max-width:600px">

  {% if trial %}
  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
    <div>
      <div style="font-weight:600;font-size:14px">Free plan</div>
      <div style="font-size:13px;color:var(--muted);margin-top:2px">
        Free — no expiry
      </div>
    </div>
    <div style="font-size:13px;color:var(--muted)">Device ID: <code style="font-size:11px">{{ device_id[:16] }}…</code></div>
  </div>
  {% endif %}

  <!-- Plans -->
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:28px">

    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center">
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Monthly</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)" id="price-monthly">
        {% if prices and prices.monthly %}${{ prices.monthly.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">per month</div>
      <a href="/api/checkout/monthly" target="_blank" onclick="startPolling()"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">
        Buy now ↗
      </a>
    </div>

    <div style="background:var(--bg2);border:2px solid var(--accent);border-radius:12px;padding:20px;text-align:center;position:relative">
      <div style="position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap">BEST VALUE</div>
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Annual</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)" id="price-annual">
        {% if prices and prices.annual %}${{ prices.annual.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">
        per year
        {% if prices and prices.monthly and prices.annual %}
          {% set monthly_annual = prices.monthly.price | float * 12 %}
          {% set annual = prices.annual.price | float %}
          {% if monthly_annual > 0 %}
            <span style="color:var(--green)">save {{ ((1 - annual / monthly_annual) * 100) | int }}%</span>
          {% endif %}
        {% endif %}
      </div>
      <a href="/api/checkout/annual" target="_blank" onclick="startPolling()"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">
        Buy now ↗
      </a>
    </div>

    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center">
      <div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Lifetime</div>
      <div style="font-size:28px;font-weight:700;color:var(--text)" id="price-lifetime">
        {% if prices and prices.lifetime %}${{ prices.lifetime.price }}{% else %}—{% endif %}
      </div>
      <div style="font-size:12px;color:var(--muted);margin-bottom:16px">one-time</div>
      <a href="/api/checkout/lifetime" target="_blank" onclick="startPolling()"
         style="display:block;background:var(--accent);color:#fff;padding:8px 0;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none">
        Buy now ↗
      </a>
    </div>
  </div>

  <div style="font-size:12px;color:var(--muted);text-align:right;margin-top:-20px;margin-bottom:20px">
    Prices in AUD incl. tax &nbsp;·&nbsp;
    <a href="#" onclick="refreshPrices(event)" style="color:var(--accent);font-size:12px">Refresh prices</a>
  </div>

  <script>
  async function refreshPrices(e) {
    if (e) e.preventDefault();
    const r = await fetch('/api/prices?refresh=1');
    const p = await r.json();
    if (p.monthly)  document.getElementById('price-monthly').textContent  = '$' + p.monthly.price;
    if (p.annual)   document.getElementById('price-annual').textContent   = '$' + p.annual.price;
    if (p.lifetime) document.getElementById('price-lifetime').textContent = '$' + p.lifetime.price;
  }

  // Poll for licence activation after user clicks Buy
  let pollTimer = null;
  let pollBanner = null;

  function startPolling() {
    if (pollTimer) return; // already polling

    // Show a banner so user knows we're watching
    pollBanner = document.createElement('div');
    pollBanner.id = 'poll-banner';
    pollBanner.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0f1f3d;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:999;box-shadow:0 4px 16px rgba(0,0,0,.3)';
    pollBanner.innerHTML = '⏳ Waiting for payment confirmation…';
    document.body.appendChild(pollBanner);

    let attempts = 0;
    pollTimer = setInterval(async () => {
      attempts++;
      if (attempts > 60) { // stop after 5 minutes
        clearInterval(pollTimer);
        pollBanner.innerHTML = '⌛ Timed out — enter your key manually below if you completed payment.';
        setTimeout(() => pollBanner.remove(), 5000);
        return;
      }
      try {
        const r = await fetch('/api/licence/poll');
        const d = await r.json();
        if (d.found) {
          clearInterval(pollTimer);
          pollBanner.style.background = '#059669';
          pollBanner.innerHTML = '✓ Payment confirmed! Activating your licence…';
          setTimeout(() => location.reload(), 1500);
        }
      } catch(e) {}
    }, 5000); // poll every 5 seconds
  }
  </script>

  <!-- Activate key -->
  <div class="card">
    <h3>Already have a key?</h3>
    <p style="font-size:13px;color:var(--muted);margin-top:6px;margin-bottom:16px">
      After purchasing, you'll receive a licence key by email. Enter it below to activate Neto on this device.
    </p>
    <form method="post" style="display:flex;gap:10px;flex-wrap:wrap">
      <input type="hidden" name="action" value="activate">
      <input type="text" name="licence_key" placeholder="XXXX-XXXX-XXXX-XXXX"
             style="flex:1;min-width:220px;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:7px;font-size:14px;font-family:monospace">
      <button type="submit"
              style="background:#15803d;color:#fff;border:none;padding:9px 20px;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap">
        Activate
      </button>
    </form>
  </div>
</div>
{% endif %}

{% endblock %}