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

import '@components/EveLink';
import '@components/General/Card';

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

  @state()
  private displayName = '';

  @state()
  private profileUrl = '';

  @state()
  private website = '';

  @state()
  private about = '';

  @state()
  private firstLineOfAbout = '';

  static override styles = [
    css`
      a {
        color: var(--color-accent);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.2s ease;
      }

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

      p {
        margin: 0.25rem 0;
        color: var(--color-secondary);
        font-size: 0.9rem;
      }

      .bio {
        white-space: pre-line;
        font-size: 0.9rem;
        color: var(--color-base-content);
        margin: 0.75rem 0 0.5rem;
        padding-top: 0.75rem;
        border-top: var(--border) solid var(--color-base-300);
        line-height: 1.5;
      }

      .website-link {
        display: block;
        margin-top: 0.75rem;
        font-size: 0.9rem;
        color: var(--color-accent);
        position: relative;
        width: fit-content;
        padding: 0.25rem 0;
      }

      .website-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: var(--border);
        background-color: var(--color-accent);
        transition: width 0.25s ease;
      }

      .website-link:hover {
        color: oklch(from var(--color-accent) l calc(c * 1.1) h);
      }

      .website-link:hover::after {
        width: 100%;
      }

      router-link {
        display: flex;
        align-items: center;
        border-radius: calc(var(--radius-selector) / 2);
        padding: 0.25rem;
        transition: all 0.2s ease;
      }

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

      router-link:focus-visible {
        outline: var(--border) solid var(--color-accent);
        outline-offset: 2px;
      }
    `,
  ];

  override firstUpdated() {
    const { displayName, profileUrl } = getProfile(this);
    this.displayName = displayName;
    this.profileUrl = profileUrl;
    this.website = this.profile.website || '';
    const lines = (this.profile.about || '').split('\n');
    let firstLine = lines[0].trim();

    let remainingContent = lines
      .slice(1)
      .join('\n')
      .trim()
      .split(/-+\n/, 2)
      .filter((section) => section.trim() !== '')
      .join('\n')
      .trim();

    if (firstLine.length > 20) {
      remainingContent = `${firstLine}\n${remainingContent}`;
      firstLine = '';
    }

    this.about = remainingContent;
    this.firstLineOfAbout = firstLine;
  }

  override render() {
    return html`
      <arx-card>
        <arx-eve-link href=${this.profileUrl}>
          <arx-nostr-avatar
            .profile=${this.profile}
            size="large"
          ></arx-nostr-avatar>
          <div>
            <h3>${this.displayName}</h3>
            ${when(this.firstLineOfAbout, () => html`<p>${this.firstLineOfAbout}</p>`)}
          </div>
        </arx-eve-link>

        ${when(this.about, () => html`<div class="bio">${this.about}</div>`)}
        ${when(
          this.website,
          () => html`<a
            href=${this.website}
            target="_blank"
            rel="noreferrer noopener"
            class="website-link"
          >
            ${this.website}
          </a>`,
        )}
      </arx-card>
    `;
  }
}
