@extends('layouts.app')

@section('title', 'Delete Account — SmartCubz')
@section('description', 'Delete your SmartCubz account by verifying your email with a one-time passcode.')

@push('head')
<style>
  .delete-account-page { background: linear-gradient(180deg, #fff 0%, #f7f4fb 48%, #fff 100%); }
  .delete-account-wrap { padding: 74px 0 96px; }
  .delete-account-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .7fr); gap: 42px; align-items: start; }
  .delete-copy { padding-top: 12px; }
  .delete-copy h1 { font-size: 44px; font-weight: 800; letter-spacing: 0; max-width: 620px; }
  .delete-copy .lead { max-width: 610px; color: #4a4459; }
  .delete-points { margin-top: 32px; border-top: 1px solid var(--line); max-width: 620px; }
  .delete-point { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .delete-point-num { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--brand-ink); border: 1px solid #e5d8ee; box-shadow: var(--shadow-sm); }
  .delete-point-num svg { width: 18px; height: 18px; }
  .delete-point b { display: block; color: var(--ink); line-height: 1.35; margin-bottom: 4px; font-family: 'Roboto Slab', serif; }
  .delete-point div span { display: block; color: var(--body); font-size: 14px; line-height: 1.55; }

  /* ---- Panel shell ---- */
  .delete-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; }
  .delete-panel h2 { font-size: 23px; letter-spacing: 0; margin-bottom: 6px; }
  .delete-panel-sub { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

  /* ---- Stepper ---- */
  .delete-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 26px; }
  .delete-step { display: flex; align-items: center; gap: 8px; flex: 1; }
  .delete-step-circle {
    width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; font-family: 'Roboto Slab', serif; color: var(--muted);
    background: #f7f4fb; border: 1.5px solid var(--line); transition: all .25s var(--ease);
  }
  .delete-step-label { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .delete-step-line { flex: 1; height: 2px; background: var(--line); margin: 0 2px; border-radius: 2px; transition: background .25s var(--ease); }
  .delete-step.is-active .delete-step-circle,
  .delete-step.is-done .delete-step-circle { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
  .delete-step.is-active .delete-step-label,
  .delete-step.is-done .delete-step-label { color: var(--ink); }
  .delete-step.is-done .delete-step-line { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

  /* ---- Alerts ---- */
  .delete-alert[hidden] { display: none; }
  .delete-alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; line-height: 1.45; }
  .delete-alert svg { width: 19px; height: 19px; min-width: 19px; margin-top: 1px; }
  .delete-alert b { display: block; margin-bottom: 3px; font-family: 'Roboto Slab', serif; }
  .delete-alert.error { background: #fdf1f1; border: 1px solid #f4c1c8; color: #93202c; }
  .delete-alert.success { background: #eefaf3; border: 1px solid #a7dfc7; color: #155d43; }
  .delete-alert.info { background: #f6f1fc; border: 1px solid #e2d3f2; color: var(--brand-ink); }

  /* ---- Form ---- */
  .delete-form { display: grid; gap: 20px; }
  .delete-field { display: grid; gap: 7px; }
  .delete-field label, .delete-check span { color: var(--ink); font-weight: 700; font-size: 14px; }
  .delete-field input {
    width: 100%; border: 1.5px solid #ddd4e8; border-radius: 10px; padding: 13px 14px;
    color: var(--ink); font: inherit; background: #fff; transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .delete-field input:disabled { background: #f7f4fb; color: var(--muted); cursor: not-allowed; }
  .delete-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(156, 31, 184, .13); }
  .delete-field input.is-valid { border-color: #7fc9a1; }
  .delete-error { color: #a52834; font-size: 13px; line-height: 1.4; }

  .delete-inline-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .delete-otp-hint { font-size: 12.5px; color: var(--muted); font-weight: 600; }
  .delete-otp-button {
    display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #ddd4e8; border-radius: 999px;
    padding: 9px 16px; background: #fff; color: var(--brand-ink); font: inherit; font-size: 13px; font-weight: 800;
    cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .18s var(--ease);
    white-space: nowrap;
  }
  .delete-otp-button svg { width: 15px; height: 15px; }
  .delete-otp-button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: #fdf8ff; transform: translateY(-1px); }
  .delete-otp-button:disabled { cursor: not-allowed; opacity: .5; }

  .delete-check {
    display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 15px;
    border: 1px solid #f0d9de; border-radius: 12px; background: #fff8f8;
  }
  .delete-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #b42318; }
  .delete-check small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 3px; }

  .delete-submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 0; border-radius: 999px; padding: 14px 18px; background: linear-gradient(135deg, #c62f24, #9f1f16);
    color: #fff; font: inherit; font-weight: 800; font-family: 'Roboto Slab', serif; cursor: pointer;
    box-shadow: 0 14px 26px -14px rgba(180, 35, 24, .85); transition: transform .18s var(--ease), box-shadow .2s;
  }
  .delete-submit svg { width: 17px; height: 17px; }
  .delete-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(180, 35, 24, .9); }
  .delete-submit:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }

  .delete-help { margin: 2px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
  .delete-help a { color: var(--brand); font-weight: 700; }
  .delete-success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

  .spin { animation: delete-spin .8s linear infinite; }
  @keyframes delete-spin { to { transform: rotate(360deg); } }

  @media (max-width: 980px) {
    .delete-account-grid { grid-template-columns: 1fr; gap: 30px; }
    .delete-copy h1 { font-size: 38px; }
  }
  @media (max-width: 680px) {
    .delete-account-wrap { padding: 52px 0 72px; }
    .delete-copy h1 { font-size: 32px; }
    .delete-panel { padding: 22px; }
    .delete-point { grid-template-columns: 1fr; gap: 10px; }
    .delete-step-label { display: none; }
  }
</style>
@endpush

@section('content')
@php
  $deleteErrors = $errors ?? new \Illuminate\Support\ViewErrorBag;
  $deleteSuccess = session('account_delete_success');
  $supportWhatsapp = config('smartcubz.contact_whatsapp');
  $supportWhatsappUrl = $supportWhatsapp
      ? 'https://wa.me/'.$supportWhatsapp.'?text='.rawurlencode('Hi SmartCubz! I need help with account deletion.')
      : null;
@endphp
<main class="delete-account-page">
  <section class="delete-account-wrap">
    <div class="wrap delete-account-grid">
      <div class="delete-copy">
        <span class="eyebrow">Account deletion</span>
        <h1>Delete your SmartCubz account</h1>
        <p class="lead">Verify your email with a one-time passcode to permanently delete your SmartCubz account — no password needed, so this works even if you signed in with Google.</p>

        <div class="delete-points" aria-label="Deletion steps">
          <div class="delete-point">
            <span class="delete-point-num">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 8l10 6 10-6"/></svg>
            </span>
            <div>
              <b>Verify your email</b>
              <span>We confirm a SmartCubz account exists for the email you enter.</span>
            </div>
          </div>
          <div class="delete-point">
            <span class="delete-point-num">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
            </span>
            <div>
              <b>Enter the OTP we email you</b>
              <span>A 6-digit passcode is sent to your inbox and expires after 5 minutes.</span>
            </div>
          </div>
          <div class="delete-point">
            <span class="delete-point-num">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            </span>
            <div>
              <b>Account is permanently deleted</b>
              <span>Access, active sessions and reset tokens for this account are removed immediately.</span>
            </div>
          </div>
        </div>
      </div>

      <aside class="delete-panel" data-delete-account-panel>
        <div data-delete-account-success @unless($deleteSuccess) hidden @endunless>
          <div class="delete-alert success" role="status">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg>
            <div>
              <b>Account deleted</b>
              <span data-delete-account-success-message>{{ $deleteSuccess }}</span>
            </div>
          </div>
          <h2>Deletion complete</h2>
          <p class="delete-panel-sub">These credentials can no longer be used to sign in to SmartCubz.</p>
          <div class="delete-success-actions">
            <a class="btn btn-primary" href="{{ route('home') }}">Go to homepage</a>
            @if($supportWhatsappUrl)
              <a class="btn btn-soft" href="{{ $supportWhatsappUrl }}" target="_blank" rel="noopener">Contact support</a>
            @endif
          </div>
        </div>

        <div data-delete-account-entry @if($deleteSuccess) hidden @endif>
          <h2>Confirm account deletion</h2>
          <p class="delete-panel-sub">This action is permanent and cannot be undone.</p>

          <div class="delete-stepper" aria-hidden="true" data-delete-account-stepper>
            <div class="delete-step is-active" data-delete-step="1">
              <span class="delete-step-circle">1</span>
              <span class="delete-step-label">Email</span>
            </div>
            <span class="delete-step-line"></span>
            <div class="delete-step" data-delete-step="2">
              <span class="delete-step-circle">2</span>
              <span class="delete-step-label">OTP</span>
            </div>
            <span class="delete-step-line"></span>
            <div class="delete-step" data-delete-step="3">
              <span class="delete-step-circle">3</span>
              <span class="delete-step-label">Delete</span>
            </div>
          </div>

          <div class="delete-alert error" role="alert" data-delete-account-alert @unless($deleteErrors->any()) hidden @endunless>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v5M12 16h.01"/></svg>
            <div>
              <b>We couldn't process that</b>
              <span data-delete-account-alert-message>{{ $deleteErrors->first() }}</span>
            </div>
          </div>

          <div class="delete-alert info" role="status" data-delete-account-status hidden>
            <svg data-delete-account-status-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span data-delete-account-status-message></span>
          </div>

          <form
            class="delete-form"
            method="POST"
            action="{{ route('api.check-user') }}"
            data-delete-account-form
            data-check-email-url="{{ route('api.account-deletion.check-email') }}"
            data-send-otp-url="{{ route('api.account-deletion.send-otp') }}"
            novalidate
          >
            @csrf

            <div class="delete-field">
              <label for="email">Email address</label>
              <input id="email" type="email" name="email" value="{{ old('email') }}" autocomplete="username" placeholder="you@example.com" data-delete-account-email required>
              <span class="delete-error" data-delete-account-error="email" @unless($deleteErrors->has('email')) hidden @endunless>{{ $deleteErrors->first('email') }}</span>
            </div>

            <div class="delete-field">
              <div class="delete-inline-actions">
                <label for="otp">Email OTP</label>
                <button class="delete-otp-button" type="button" data-delete-account-send-otp disabled>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
                  <span data-delete-account-send-otp-label>Send OTP</span>
                </button>
              </div>
              <input id="otp" type="text" name="otp" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" placeholder="6-digit code" data-delete-account-otp disabled required>
              <span class="delete-otp-hint" data-delete-account-otp-hint hidden>Code expires 5 minutes after it's sent.</span>
              <span class="delete-error" data-delete-account-error="otp" hidden></span>
            </div>

            <label class="delete-check" for="confirm_delete">
              <input id="confirm_delete" type="checkbox" name="confirm_delete" value="1" @checked(old('confirm_delete')) required>
              <span>
                I understand this will permanently delete my SmartCubz account.
                <small>Account access, active sessions and reset tokens for this user will be removed and cannot be recovered.</small>
              </span>
            </label>
            <span class="delete-error" data-delete-account-error="confirm_delete" @unless($deleteErrors->has('confirm_delete')) hidden @endunless>{{ $deleteErrors->first('confirm_delete') }}</span>

            <button class="delete-submit" type="submit" data-delete-account-submit disabled>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
              <span data-delete-account-submit-label>Delete my account</span>
            </button>
            @if($supportWhatsappUrl)
              <p class="delete-help">Need help instead? <a href="{{ $supportWhatsappUrl }}" target="_blank" rel="noopener">Contact support</a>.</p>
            @endif
          </form>
        </div>
      </aside>
    </div>
  </section>
</main>
@endsection

@push('scripts')
<script>
  (() => {
    const form = document.querySelector('[data-delete-account-form]');
    if (!form || !window.fetch) return;

    const entry = document.querySelector('[data-delete-account-entry]');
    const success = document.querySelector('[data-delete-account-success]');
    const successMessage = document.querySelector('[data-delete-account-success-message]');
    const alertBox = form.parentElement.querySelector('[data-delete-account-alert]');
    const alertMessage = form.parentElement.querySelector('[data-delete-account-alert-message]');
    const status = form.parentElement.querySelector('[data-delete-account-status]');
    const statusMessage = form.parentElement.querySelector('[data-delete-account-status-message]');
    const steps = Array.from(form.parentElement.querySelectorAll('[data-delete-step]'));
    const email = form.querySelector('[data-delete-account-email]');
    const otp = form.querySelector('[data-delete-account-otp]');
    const otpHint = form.querySelector('[data-delete-account-otp-hint]');
    const sendOtp = form.querySelector('[data-delete-account-send-otp]');
    const sendOtpLabel = form.querySelector('[data-delete-account-send-otp-label]');
    const submit = form.querySelector('[data-delete-account-submit]');
    const submitLabel = form.querySelector('[data-delete-account-submit-label]');
    const checkEmailUrl = form.dataset.checkEmailUrl;
    const sendOtpUrl = form.dataset.sendOtpUrl;
    const defaultSendOtpLabel = sendOtpLabel ? sendOtpLabel.textContent : 'Send OTP';
    const defaultSubmitLabel = submitLabel ? submitLabel.textContent : 'Delete my account';

    let verifiedEmail = '';
    let verifyTimer = null;
    let verifyRequestId = 0;

    const fieldErrors = Array.from(form.querySelectorAll('[data-delete-account-error]'))
      .reduce((items, item) => {
        items[item.dataset.deleteAccountError] = item;
        return items;
      }, {});

    const setActiveStep = (stepNumber) => {
      steps.forEach((step) => {
        const number = Number(step.dataset.deleteStep);
        step.classList.toggle('is-done', number < stepNumber);
        step.classList.toggle('is-active', number === stepNumber);
      });
    };

    const setAlert = (message) => {
      if (!alertBox || !alertMessage) return;
      alertMessage.textContent = message || 'Account could not be deleted. Please check your details and try again.';
      alertBox.hidden = false;
    };

    const setStatus = (message) => {
      if (!status || !statusMessage) return;
      statusMessage.textContent = message || '';
      status.hidden = !message;
    };

    const clearErrors = () => {
      if (alertBox) alertBox.hidden = true;
      setStatus('');
      Object.values(fieldErrors).forEach((item) => {
        item.textContent = '';
        item.hidden = true;
      });
    };

    const showErrors = (payload) => {
      const errors = payload && payload.errors ? payload.errors : {};
      const firstMessage = payload && payload.message
        ? payload.message
        : Object.values(errors).flat()[0];

      Object.entries(errors).forEach(([field, messages]) => {
        if (!fieldErrors[field]) return;
        fieldErrors[field].textContent = Array.isArray(messages) ? messages[0] : messages;
        fieldErrors[field].hidden = false;
      });

      setAlert(firstMessage);
    };

    const postJson = async (url, data) => {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify(data),
      });

      const payload = await response.json().catch(() => ({}));

      if (!response.ok) {
        showErrors(payload);
        return { ok: false, payload };
      }

      return { ok: true, payload };
    };

    const resetOtpState = () => {
      verifiedEmail = '';
      setActiveStep(1);
      if (sendOtp) {
        sendOtp.disabled = true;
        if (sendOtpLabel) sendOtpLabel.textContent = defaultSendOtpLabel;
      }
      if (otp) {
        otp.value = '';
        otp.disabled = true;
      }
      if (otpHint) otpHint.hidden = true;
      if (submit) submit.disabled = true;
    };

    const verifyEmail = async () => {
      if (!email || !checkEmailUrl || !email.value || !email.checkValidity()) {
        email && email.classList.remove('is-valid');
        resetOtpState();
        return;
      }

      const normalizedEmail = email.value.trim().toLowerCase();

      if (normalizedEmail === verifiedEmail && sendOtp && !sendOtp.disabled) {
        return;
      }

      resetOtpState();
      clearErrors();
      setStatus('Checking your email…');

      const requestId = ++verifyRequestId;

      try {
        const { ok, payload } = await postJson(checkEmailUrl, { email: normalizedEmail });

        if (requestId !== verifyRequestId) return;
        if (!ok || email.value.trim().toLowerCase() !== normalizedEmail) {
          email.classList.remove('is-valid');
          return;
        }

        verifiedEmail = normalizedEmail;
        email.classList.add('is-valid');
        if (sendOtp) sendOtp.disabled = false;
        setActiveStep(2);
        setStatus(payload.message || 'Email verified. You can now request an OTP.');
      } catch (error) {
        if (requestId !== verifyRequestId) return;
        setAlert('We could not reach the server. Please check your connection and try again.');
      }
    };

    if (email) {
      email.addEventListener('input', () => {
        window.clearTimeout(verifyTimer);
        email.classList.remove('is-valid');
        resetOtpState();
        clearErrors();

        verifyTimer = window.setTimeout(verifyEmail, 650);
      });

      email.addEventListener('blur', () => {
        window.clearTimeout(verifyTimer);
        verifyEmail();
      });
    }

    if (sendOtp) {
      sendOtp.addEventListener('click', async () => {
        clearErrors();

        if (!email || !email.reportValidity()) return;

        const normalizedEmail = email.value.trim().toLowerCase();

        if (normalizedEmail !== verifiedEmail) {
          await verifyEmail();
        }

        if (normalizedEmail !== verifiedEmail) return;

        sendOtp.disabled = true;
        if (sendOtpLabel) sendOtpLabel.textContent = 'Sending…';

        try {
          const { ok, payload } = await postJson(sendOtpUrl, { email: normalizedEmail });

          if (!ok) {
            sendOtp.disabled = false;
            if (sendOtpLabel) sendOtpLabel.textContent = defaultSendOtpLabel;
            return;
          }

          if (otp) {
            otp.disabled = false;
            otp.value = '';
            otp.focus();
          }
          if (otpHint) otpHint.hidden = false;
          if (submit) submit.disabled = false;
          if (sendOtpLabel) sendOtpLabel.textContent = 'Resend OTP';
          sendOtp.disabled = false;
          setActiveStep(3);
          setStatus(payload.message || 'A 6-digit code has been emailed to you.');
        } catch (error) {
          sendOtp.disabled = false;
          if (sendOtpLabel) sendOtpLabel.textContent = defaultSendOtpLabel;
          setAlert('We could not reach the server. Please check your connection and try again.');
        }
      });
    }

    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      clearErrors();

      if (!form.reportValidity()) return;

      if (submit) {
        submit.disabled = true;
        if (submitLabel) submitLabel.textContent = 'Deleting…';
      }

      try {
        const { ok, payload } = await postJson(form.action, {
          email: email ? email.value.trim().toLowerCase() : '',
          otp: otp ? otp.value.trim() : '',
        });

        if (!ok) return;

        form.reset();
        resetOtpState();

        if (successMessage) successMessage.textContent = payload.message || 'Your SmartCubz account has been deleted.';
        if (entry) entry.hidden = true;
        if (success) success.hidden = false;
      } catch (error) {
        setAlert('We could not reach the server. Please check your connection and try again.');
      } finally {
        if (submit) {
          submit.disabled = !otp || otp.disabled;
        }
        if (submitLabel) submitLabel.textContent = defaultSubmitLabel;
      }
    });
  })();
</script>
@endpush