<?php
require __DIR__ . '/_boot.php';

$token = trim((string)($_GET['token'] ?? ''));
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reset password | Pyrk</title>
  <link rel="manifest" href="/steps/public/manifest.webmanifest">
  <meta name="theme-color" content="#087f5b">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="Pyrk">
  <link rel="apple-touch-icon" href="/steps/public/assets/icons/apple-touch-icon.png">
  <link rel="stylesheet" href="/steps/public/assets/css/pwa_app_shell.css?v=1">
  <link rel="stylesheet" href="/steps/public/assets/css/native_app_mobile_polish.css?v=3">
  <script defer src="/steps/public/assets/js/pwa_install.js?v=1"></script>
  <script defer src="/steps/public/assets/js/native_app_mobile_polish.js?v=3"></script>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/member_password_reset_pro.css?v=1">
  <link rel="stylesheet" href="assets/css/social_login_pro.css?v=3">
</head>
<body class="auth-page password-reset-page">
  <div class="reset-auth-shell">
    <section class="reset-hero-card" aria-hidden="true">
      <div class="brand-badge">PYRK</div>
      <h1>Secure member access</h1>
      <p>Reset your password using the secure link sent to your email. The link expires automatically for your protection.</p>
    </section>

    <section class="reset-panel">
      <div class="reset-panel-top">
        <span class="reset-kicker">Member password reset</span>
        <h1>Create a new password</h1>
        <p>Use at least 8 characters. After saving, you can log in with your new password.</p>
      </div>

      <?php if ($token === ''): ?>
        <div class="reset-state-card is-error">
          <strong>Reset link missing</strong>
          <span>Please request a fresh password reset email from the login page.</span>
        </div>
        <a class="btn" href="login-dev.php">Back to login</a>
      <?php else: ?>
        <form id="memberResetPasswordForm" class="reset-form">
          <input type="hidden" name="token" value="<?= htmlspecialchars($token, ENT_QUOTES, 'UTF-8') ?>">
          <label>
            <span>New password</span>
            <span class="password-field-wrap reset-password-field-wrap">
              <input id="resetPasswordInput" name="password" type="password" placeholder="Minimum 8 characters" autocomplete="new-password" minlength="8" required>
              <button class="password-toggle-btn enterprise-password-toggle" type="button" data-toggle-password="resetPasswordInput" aria-label="Show password" aria-pressed="false" title="Show password"><span class="password-toggle-icon" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 5.5c-5 0-8.6 4.2-9.8 6.1a.75.75 0 0 0 0 .8c1.2 1.9 4.8 6.1 9.8 6.1s8.6-4.2 9.8-6.1a.75.75 0 0 0 0-.8c-1.2-1.9-4.8-6.1-9.8-6.1Zm0 10.5a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.6a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z"/></svg></span><span class="password-toggle-label">Show</span></button>
            </span>
          </label>
          <label>
            <span>Confirm password</span>
            <span class="password-field-wrap reset-password-field-wrap">
              <input id="resetPasswordConfirmInput" name="password_confirm" type="password" placeholder="Repeat new password" autocomplete="new-password" minlength="8" required>
              <button class="password-toggle-btn enterprise-password-toggle" type="button" data-toggle-password="resetPasswordConfirmInput" aria-label="Show password" aria-pressed="false" title="Show password"><span class="password-toggle-icon" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M12 5.5c-5 0-8.6 4.2-9.8 6.1a.75.75 0 0 0 0 .8c1.2 1.9 4.8 6.1 9.8 6.1s8.6-4.2 9.8-6.1a.75.75 0 0 0 0-.8c-1.2-1.9-4.8-6.1-9.8-6.1Zm0 10.5a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.6a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z"/></svg></span><span class="password-toggle-label">Show</span></button>
            </span>
          </label>
          <button class="btn" type="submit">Reset password</button>
        </form>
        <p id="memberResetPasswordMsg" class="notice"></p>
        <div class="reset-help-card">
          <strong>Security note</strong>
          <span>If you did not request this password reset, ignore the email. Your password will not change.</span>
        </div>
      <?php endif; ?>
    </section>
  </div>

<script>
window.PYRK_API_BASE='../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>';
</script>
<script src="assets/js/api.js"></script>
<script>
function setEnterprisePasswordToggleState(btn, isVisible) {
  const label = btn.querySelector('.password-toggle-label');
  if (label) {
    label.textContent = isVisible ? 'Hide' : 'Show';
  } else {
    btn.textContent = isVisible ? 'Hide' : 'Show';
  }
  btn.setAttribute('aria-label', isVisible ? 'Hide password' : 'Show password');
  btn.setAttribute('title', isVisible ? 'Hide password' : 'Show password');
  btn.setAttribute('aria-pressed', isVisible ? 'true' : 'false');
}

document.querySelectorAll('[data-toggle-password]').forEach(btn => {
  const input = document.getElementById(btn.getAttribute('data-toggle-password') || '');
  if (input) setEnterprisePasswordToggleState(btn, input.type !== 'password');

  btn.addEventListener('click', () => {
    const input = document.getElementById(btn.getAttribute('data-toggle-password') || '');
    if (!input) return;
    const isVisible = input.type === 'password';
    input.type = isVisible ? 'text' : 'password';
    setEnterprisePasswordToggleState(btn, isVisible);
    input.focus({preventScroll: true});
  });
});

const resetForm = document.getElementById('memberResetPasswordForm');
if (resetForm) {
  resetForm.addEventListener('submit', async event => {
    event.preventDefault();
    const msg = document.getElementById('memberResetPasswordMsg');
    const btn = resetForm.querySelector('button[type="submit"]');
    const data = Object.fromEntries(new FormData(resetForm));

    if (data.password !== data.password_confirm) {
      msg.textContent = 'Passwords do not match.';
      msg.className = 'notice bad';
      return;
    }

    if (String(data.password || '').length < 8) {
      msg.textContent = 'Password must be at least 8 characters.';
      msg.className = 'notice bad';
      return;
    }

    if (btn) btn.disabled = true;
    msg.textContent = 'Saving your new password...';
    msg.className = 'notice';

    const res = await Pyrk.post('auth.php', {action: 'reset_password', ...data});
    msg.textContent = res.message || (res.ok ? 'Password changed successfully.' : 'Could not reset password.');
    msg.className = 'notice ' + (res.ok ? 'ok' : 'bad');

    if (res.ok) {
      resetForm.innerHTML = '<div class="reset-state-card is-success"><strong>Password changed</strong><span>' + Pyrk.esc(res.message || 'You can log in now.') + '</span></div><a class="btn" href="login-dev.php">Go to login</a>';
    } else if (btn) {
      btn.disabled = false;
    }
  });
}
</script>
</body>
</html>
