import logo from '@assets/logo.png';
import pattern from '@assets/pattern.svg';
import type { NPub } from '@nostr/tools/nip19';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import '@components/General/Button';
import '@components/General/Card';
import '@components/General/Input';

@customElement('arx-ccn-invitation')
export class CCNInvitation extends LitElement {
  @property() invite = '';
  @property() ccnName = '';
  @property() ccnNpub?: NPub;

  static override styles = css`
    :host {
      display: block;
      perspective: 1500px;
      --rotateX: 0deg;
      --rotateY: 0deg;
    }

    arx-card {
      transform: rotateY(var(--rotateY)) rotateX(var(--rotateX));
      will-change: transform, visibility;
      transform-style: preserve-3d;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
    }

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-base-content);
      margin: 0 0 0.5rem;
      text-align: center;
    }

    h3 {
      font-size: 2rem;
      font-weight: 800;
      color: var(--color-accent);
      margin: 0 0 1.5rem;
      text-align: center;
      overflow-wrap: break-word;
    }

    arx-invitation-qr {
      align-self: center;
      margin: 1rem 0;
      padding: 1rem;
    }

    img {
      width: 400px;
      height: 400px;
      padding: 25px;
      object-fit: contain;
      background: #272933;
    }

    .pattern {
      position: relative;
      background-size: 100% 100%;
      width: 450px;
      height: 450px;
      top: -450px;
      filter: grayscale(100%);
      mix-blend-mode: plus-lighter;
      opacity: 0.8;
    }

    .logo-container {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 450px;
      height: 450px;
    }

    .button-row {
      margin-top: auto;
      text-align: center;
    }

    arx-button {
      --button-border-radius: 24px;
      --button-padding: 0.75rem 1.5rem;
      --button-font-weight: 600;
      --button-box-shadow: 0 4px 10px rgba(85, 112, 231, 0.3);
    }

    p {
      text-align: center;
      font-size: 1.25rem;
      font-weight: 600;
      background: var(--color-base-300);
      padding: 1rem;
      border: 3px solid var(--color-base-400);
      border-radius: 1rem;
      color: var(--color-base-content);
      margin: 1rem 0;
      text-align: center;
      overflow-wrap: break-word;
    }
  `;

  override render() {
    if (!this.ccnNpub || !this.invite) return html`<div>Loading...</div>`;
    return html`
      <arx-card @mousemove="${this._handleMouseMove}" @mouseleave="${this._handleMouseLeave}">
        <div>
          <h2>You've been invited to join a CCN</h2>
          <h3>${this.ccnName}</h3>
        </div>

        <div class="logo-container">
          <img src="${logo}" />
          <div class="pattern" style="background-image: url(${pattern});"></div>
        </div>

        <p>${this.invite}</p>
      </arx-card>
    `;
  }

  private _handleMouseMove(e: MouseEvent) {
    const card = e.currentTarget as HTMLElement;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const rotateY = ((x / rect.width) * 20 - 10).toFixed(2);
    const rotateX = (((y / rect.height) * 20 - 10) * -1).toFixed(2);

    this.style.setProperty('--rotateY', `${rotateY}deg`);
    this.style.setProperty('--rotateX', `${rotateX}deg`);
  }

  private _handleMouseLeave() {
    this.style.setProperty('--rotateY', '0deg');
    this.style.setProperty('--rotateX', '0deg');
  }
}
