<?php
// reset-password.php — Step 3 of the password-reset flow.
//
// Only reachable after verify-otp.php sets $_SESSION['reset_email_verified'].
// The user chooses a new password; the form POSTs to reset-password-handler.php.

session_start();

// Logged in → no need to reset.
if (isset($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'customer') {
    header('Location: dashboard.php');
    exit;
}

// Guard: must have completed OTP verification.
if (empty($_SESSION['reset_email']) || empty($_SESSION['reset_email_verified'])) {
    header('Location: forgot-password.php');
    exit;
}

$resetError = $_SESSION['reset_error'] ?? '';
unset($_SESSION['reset_error']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>New Password — Dabil</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --primary:      #2563EB;
    --primary-dark: #1D4ED8;
    --primary-bg:   #EFF6FF;
    --text:         #0F172A;
    --text-muted:   #64748B;
    --text-light:   #94A3B8;
    --bg:           #F4F6FB;
    --card-border:  #E2E8F0;
    --field-bg:     #FFFFFF;
    --radius:       16px;
    --radius-field: 14px;
  }

  html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    overflow-x: hidden;
    color: var(--text);
  }

  .page {
    display: flex; flex-direction: column;
    min-height: 100%; max-width: 430px;
    margin: 0 auto; background: var(--bg);
  }

  /* ── Top bar ── */
  .topbar {
    display: flex; align-items: center; gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 16px;
    background: #fff; border-bottom: 1px solid var(--card-border);
  }
  .back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--primary); text-decoration: none; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; transition: background .15s;
  }
  .back-btn:active { background: var(--primary-bg); }
  .topbar h1 { font-size: 1.05rem; font-weight: 700; color: var(--text); }

  /* ── Content ── */
  .content {
    flex: 1; display: flex; flex-direction: column;
    padding: 32px 20px;
  }

  /* ── Icon pill ── */
  .icon-pill {
    width: 64px; height: 64px; border-radius: 20px;
    background: var(--primary-bg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; color: var(--primary);
  }

  /* ── Headline ── */
  .headline { margin-bottom: 28px; }
  .headline h2 {
    font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.2; color: var(--primary); margin-bottom: 8px;
  }
  .headline p { font-size: .9rem; color: var(--text-muted); line-height: 1.6; }

  /* ── Fields ── */
  .field { margin-bottom: 18px; }
  .field label {
    display: block;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-light); margin-bottom: 10px;
  }
  .field-input {
    position: relative; display: flex; align-items: center;
  }
  .field-input input {
    width: 100%;
    border: 1px solid var(--card-border);
    background: var(--field-bg);
    border-radius: var(--radius-field);
    padding: 16px 48px 16px 18px;
    font-size: .95rem; font-family: inherit;
    color: var(--text); outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: 0 1px 4px rgba(15,23,42,.03);
    letter-spacing: 2px;
  }
  .field-input input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  }
  .field-input input::placeholder { color: var(--text-light); letter-spacing: normal; }

  /* Eye toggle */
  .eye-toggle {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    color: var(--text-light); background: none; border: none;
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .eye-toggle:active { color: var(--primary); }

  /* Strength bar */
  .strength-bar {
    height: 4px; border-radius: 2px;
    background: var(--card-border);
    margin-top: 8px; overflow: hidden;
  }
  .strength-fill {
    height: 100%; width: 0%;
    border-radius: 2px;
    transition: width .3s, background .3s;
  }
  .strength-label {
    font-size: .75rem; color: var(--text-light);
    margin-top: 4px; min-height: 16px;
  }

  /* ── Error ── */
  .form-error {
    background: #FEF2F2; border: 1px solid #FECACA;
    color: #B91C1C; font-size: .85rem;
    border-radius: 12px; padding: 12px 14px;
    margin-bottom: 18px; text-align: center;
  }

  /* ── Submit ── */
  .btn-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 17px;
    background: var(--primary); color: #fff;
    font-size: 1rem; font-weight: 700;
    border: none; border-radius: 999px; cursor: pointer;
    box-shadow: 0 4px 20px rgba(37,99,235,.32);
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
    margin-top: 8px;
  }
  .btn-submit:active { background: var(--primary-dark); transform: scale(.98); }

  /* ── Animations ── */
  .anim-up { animation: slideUp .5s cubic-bezier(.22,1,.36,1) both; }
  .anim-up.d1 { animation-delay: .05s; }
  .anim-up.d2 { animation-delay: .12s; }
  .anim-up.d3 { animation-delay: .19s; }
  .anim-up.d4 { animation-delay: .26s; }
  .anim-up.d5 { animation-delay: .33s; }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, .anim-up { animation: none !important; }
  }
</style>
</head>
<body>

<div class="page">

  <!-- Top bar -->
  <div class="topbar">
    <a href="reset-password-verify.php" class="back-btn" aria-label="Back">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="15 18 9 12 15 6"/>
      </svg>
    </a>
    <h1>New Password</h1>
  </div>

  <!-- Content -->
  <div class="content">

    <!-- Icon -->
    <div class="icon-pill anim-up d1">
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      </svg>
    </div>

    <!-- Headline -->
    <div class="headline anim-up d2">
      <h2>Create New Password</h2>
      <p>Your new password must be at least 8 characters long.</p>
    </div>

    <?php if ($resetError): ?>
      <div class="form-error anim-up d2"><?= htmlspecialchars($resetError, ENT_QUOTES, 'UTF-8') ?></div>
    <?php endif; ?>

    <form action="reset-password-handler.php" method="POST" autocomplete="off">

      <!-- New password -->
      <div class="field anim-up d3">
        <label for="password">New Password</label>
        <div class="field-input">
          <input type="password" id="password" name="password"
                 placeholder="••••••••" required
                 oninput="checkStrength(this.value)">
          <button type="button" class="eye-toggle"
                  aria-label="Show password"
                  onclick="toggleEye('password', 'eye1')">
            <svg id="eye1" width="20" height="20" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </button>
        </div>
        <div class="strength-bar"><div class="strength-fill" id="strengthFill"></div></div>
        <div class="strength-label" id="strengthLabel"></div>
      </div>

      <!-- Confirm password -->
      <div class="field anim-up d4">
        <label for="confirm">Confirm Password</label>
        <div class="field-input">
          <input type="password" id="confirm" name="confirm"
                 placeholder="••••••••" required>
          <button type="button" class="eye-toggle"
                  aria-label="Show password"
                  onclick="toggleEye('confirm', 'eye2')">
            <svg id="eye2" width="20" height="20" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
              <circle cx="12" cy="12" r="3"/>
            </svg>
          </button>
        </div>
      </div>

      <button type="submit" class="btn-submit anim-up d5">Set New Password</button>

    </form>

  </div><!-- /.content -->

</div><!-- /.page -->

<script>
  const EYE_OPEN   = '<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/>';
  const EYE_CLOSED = '<path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-7-11-7a18.4 18.4 0 014.06-5.06M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 7 11 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>';

  function toggleEye(inputId, iconId) {
    const inp  = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    if (inp.type === 'password') { inp.type = 'text';     icon.innerHTML = EYE_CLOSED; }
    else                         { inp.type = 'password'; icon.innerHTML = EYE_OPEN;   }
  }

  function checkStrength(pw) {
    const fill  = document.getElementById('strengthFill');
    const label = document.getElementById('strengthLabel');
    if (!pw) { fill.style.width = '0%'; label.textContent = ''; return; }

    let score = 0;
    if (pw.length >= 8)  score++;
    if (pw.length >= 12) score++;
    if (/[A-Z]/.test(pw)) score++;
    if (/[0-9]/.test(pw)) score++;
    if (/[^A-Za-z0-9]/.test(pw)) score++;

    const levels = [
      { pct: '20%', color: '#EF4444', text: 'Weak' },
      { pct: '40%', color: '#F97316', text: 'Fair' },
      { pct: '60%', color: '#EAB308', text: 'Good' },
      { pct: '80%', color: '#22C55E', text: 'Strong' },
      { pct: '100%',color: '#16A34A', text: 'Very strong' },
    ];
    const lvl = levels[Math.min(score - 1, 4)] || levels[0];
    fill.style.width      = lvl.pct;
    fill.style.background = lvl.color;
    label.textContent     = lvl.text;
    label.style.color     = lvl.color;
  }

  // Client-side match check before submit
  document.querySelector('form').addEventListener('submit', e => {
    const pw = document.getElementById('password').value;
    const cn = document.getElementById('confirm').value;
    if (pw.length < 8) {
      e.preventDefault();
      alert('Password must be at least 8 characters.');
      return;
    }
    if (pw !== cn) {
      e.preventDefault();
      alert('Passwords do not match.');
      document.getElementById('confirm').focus();
    }
  });
</script>

</body>
</html>
