import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { formStyles } from '../../styles/form-styles';
import { post } from '../../api';
import { router } from '../../router';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
import '../../components/logo-component';

@customElement('verify-email-view')
export class VerifyEmailView extends LitElement {
  @state()
  private isLoading = true;

  @state()
  private error = '';

  static styles = [formStyles];

  async firstUpdated() {
    const params = new URLSearchParams(window.location.search);
    const token = params.get('token');

    if (!token) {
      this.error = 'No verification token found in the URL.';
      this.isLoading = false;
      return;
    }

    try {
      await post('/api/v1/auth/verify-email', { token });
      this.isLoading = false;
    } catch (error) {
      this.error = 'Invalid or expired verification token.';
      this.isLoading = false;
      console.error('Email verification failed', error);
    }
  }

  render() {
    if (this.isLoading) {
      return html`
        <div class="container">
          <div class="logo">
            <a href="/">
              <logo-component></logo-component>
            </a>
          </div>
          <div class="form-container">
            <h2>Verifying Email</h2>
            <sl-spinner style="font-size: 3rem;"></sl-spinner>
          </div>
        </div>
      `;
    }

    if (this.error) {
      return html`
        <div class="container">
          <div class="logo">
            <a href="/">
              <logo-component></logo-component>
            </a>
          </div>
          <div class="form-container">
            <h2>Email Verification Failed</h2>
            <sl-alert variant="danger" open>
              <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
              ${this.error}
            </sl-alert>
            <div class="form-links">
              <a href="/login">Back to Sign in</a>
            </div>
          </div>
        </div>
      `;
    }

    return html`
      <div class="container">
        <div class="logo">
          <a href="/">
            <logo-component></logo-component>
          </a>
        </div>
        <div class="form-container">
          <h2>Email Verified</h2>
          <sl-alert variant="success" open>
            <sl-icon slot="icon" name="check-circle"></sl-icon>
            Your email has been successfully verified. You can now log in.
          </sl-alert>
          <div class="form-links">
            <a href="/login">Proceed to Sign in</a>
          </div>
        </div>
      </div>
    `;
  }
}
