/**
 * Account Modal - Lit Component
 *
 * Framework-agnostic account management modal showing connected wallet details.
 * Uses lukso-modal from @lukso/web-components for consistent UI.
 */

import { safeCustomElement } from '@lukso/core/utils'
import { html } from 'lit'
import { property } from 'lit/decorators.js'
import { CoreLitElement } from './styles'

// Import lukso web components
import '@lukso/web-components/dist/components/lukso-modal'
import '@lukso/web-components/dist/components/lukso-button'

@safeCustomElement('account-modal')
export class AccountModal extends CoreLitElement {
  // Public properties
  @property({ type: Boolean, reflect: true }) open = false
  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'
  @property({ type: String }) address = ''
  @property({ type: Number }) chainId?: number
  @property({ type: String }) connectorName = ''

  private close() {
    this.open = false
    this.dispatchEvent(new CustomEvent('close'))
  }

  private handleDisconnect() {
    this.dispatchEvent(new CustomEvent('disconnect'))
    this.close()
  }

  private getChainName(): string {
    switch (this.chainId) {
      case 42:
        return 'LUKSO Mainnet'
      case 4201:
        return 'LUKSO Testnet'
      default:
        return this.chainId ? `Chain ${this.chainId}` : 'Unknown Network'
    }
  }

  render() {
    return html`
      <lukso-modal
        ?is-open=${this.open}
        size="small"
        @on-backdrop-click=${this.close}
      >
        <div class="p-6">
          <!-- Header with close button -->
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-semibold">Connected Account</h2>
            <button
              @click=${this.close}
              class="text-neutral-50 hover:text-neutral-20 transition-colors"
              aria-label="Close"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
          </div>

          <!-- Connection Status -->
          <div class="flex items-center gap-2 mb-5">
            <div
              class="w-2 h-2 rounded-full"
              style="background: #10b981;"
            ></div>
            <span class="text-sm font-semibold" style="color: #10b981;">
              Connected
            </span>
          </div>

          <!-- Address -->
          <div
            class="mb-4 p-3 rounded-lg bg-neutral-98 border border-neutral-90"
          >
            <div
              class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
            >
              Address
            </div>
            <div
              class="text-xs font-mono text-neutral-20 break-all leading-relaxed"
            >
              ${this.address}
            </div>
          </div>

          <!-- Network & Connector Info -->
          <div class="grid grid-cols-2 gap-3 mb-5">
            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
              <div
                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
              >
                Network
              </div>
              <div class="text-sm font-semibold text-neutral-20">
                ${this.getChainName()}
              </div>
            </div>

            <div class="p-3 rounded-lg bg-neutral-98 border border-neutral-90">
              <div
                class="text-xs font-semibold text-neutral-50 mb-1.5 uppercase"
              >
                Connector
              </div>
              <div class="text-sm font-semibold text-neutral-20">
                ${this.connectorName || 'Unknown'}
              </div>
            </div>
          </div>

          <!-- Disconnect Button -->
          <lukso-button
            variant="danger"
            is-full-width
            @click=${this.handleDisconnect}
          >
            Disconnect
          </lukso-button>
        </div>
      </lukso-modal>
    `
  }
}