import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import firstLine from '@utils/firstLine';
import { getProfile } from '@utils/profileUtils';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

import '@components/EveLink';

@customElement('arx-nostr-large-profile')
export class LargeProfile extends LitElement {
  @property() profile!: NDKUserProfile;
  @property() npub = '';

  @state()
  private displayName = '';

  @state()
  private profileUrl = '';

  @state()
  private about = '';

  static override styles = [
    css`
      :host {
        display: block;
      }

      arx-eve-link {
        color: var(--color-base-content);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: var(--radius-selector);
        transition: all 0.2s ease;
      }

      arx-eve-link:hover {
        background-color: oklch(from var(--color-base-300) l c h / 0.5);
      }

      arx-eve-link:focus-visible {
        outline: var(--border) solid var(--color-accent);
        outline-offset: 2px;
      }

      h3 {
        margin: 0 0 0.35rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-base-content);
      }

      .bio {
        white-space: pre-line;
        font-size: 0.9rem;
        color: var(--color-secondary);
        margin: 0;
        line-height: 1.4;
        max-width: 24rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      arx-nostr-avatar {
        flex-shrink: 0;
        transition: transform 0.2s ease;
      }

      arx-eve-link:hover arx-nostr-avatar {
        transform: scale(1.05);
      }
    `,
  ];

  override firstUpdated() {
    const { displayName, profileUrl } = getProfile({
      profile: this.profile,
      npub: this.npub,
    });
    this.displayName = displayName;
    this.profileUrl = profileUrl;
    this.about = firstLine(this.profile.about);
  }

  override render() {
    return html`
      <arx-eve-link href=${this.profileUrl}>
        <arx-nostr-avatar
          .profile=${this.profile}
          size="large"
        ></arx-nostr-avatar>
        <div>
          <h3>${this.displayName}</h3>
          <div class="bio">${this.about}</div>
        </div>
      </arx-eve-link>
    `;
  }
}
