import { describeRepo, listRecordsRaw, getRecordRaw, fetchLexicon, resolveHandle, getServiceInfo } from '../lib/api.js'

function extractRkey(uri: string): string {
  const parts = uri.split('/')
  return parts[parts.length - 1]
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  })
}

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

async function renderCollections(did: string, handle: string): Promise<string> {
  const collections = await describeRepo(did)

  if (collections.length === 0) {
    return '<p class="no-data">No collections found</p>'
  }

  const items = collections.map(col => {
    const service = getServiceInfo(col)
    const favicon = service ? `<img src="${service.favicon}" class="collection-favicon" alt="" onerror="this.style.display='none'">` : ''
    const serviceName = service ? `<span class="collection-service">${service.name}</span>` : ''

    return `
      <li class="collection-item">
        <a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(col)}" class="collection-link">
          ${favicon}
          <span class="collection-nsid">${col}</span>
          ${serviceName}
        </a>
      </li>
    `
  }).join('')

  return `
    <div class="collections">
      <h3>Collections</h3>
      <ul class="collection-list">${items}</ul>
    </div>
  `
}

async function renderRecordList(did: string, handle: string, collection: string): Promise<string> {
  const records = await listRecordsRaw(did, collection)

  if (records.length === 0) {
    return '<p class="no-data">No records found</p>'
  }

  const items = records.map(rec => {
    const rkey = extractRkey(rec.uri)
    const preview = rec.value.title || rec.value.text?.slice(0, 50) || rkey
    return `
      <li class="record-item">
        <a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}&rkey=${rkey}" class="record-link">
          <span class="record-rkey">${rkey}</span>
          <span class="record-preview">${preview}</span>
        </a>
      </li>
    `
  }).join('')

  return `
    <div class="records">
      <h3>${collection}</h3>
      <p class="record-count">${records.length} records</p>
      <ul class="record-list">${items}</ul>
    </div>
  `
}

async function renderRecordDetail(did: string, handle: string, collection: string, rkey: string): Promise<string> {
  const record = await getRecordRaw(did, collection, rkey)

  if (!record) {
    return '<p class="error">Record not found</p>'
  }

  const lexicon = await fetchLexicon(collection)
  const schemaStatus = lexicon ? 'verified' : 'none'
  const schemaLabel = lexicon ? '✓ Schema' : '○ No schema'
  const json = JSON.stringify(record, null, 2)

  return `
    <div class="record-detail">
      <div class="record-header">
        <h3>${collection}</h3>
        <p class="record-uri">${record.uri}</p>
        <p class="record-cid">CID: ${record.cid}</p>
        <span class="schema-status schema-${schemaStatus}">${schemaLabel}</span>
      </div>
      <div class="json-view">
        <pre><code>${escapeHtml(json)}</code></pre>
      </div>
    </div>
  `
}

export async function mountAtBrowser(
  container: HTMLElement,
  handle: string,
  collection: string | null,
  rkey: string | null
): Promise<void> {
  container.innerHTML = '<p class="loading">Loading...</p>'

  try {
    const did = handle.startsWith('did:') ? handle : await resolveHandle(handle)

    let content: string
    let nav = ''

    if (collection && rkey) {
      nav = `<a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}" class="back-link">← Back</a>`
      content = await renderRecordDetail(did, handle, collection, rkey)
    } else if (collection) {
      nav = `<a href="?mode=browser&handle=${handle}" class="back-link">← Collections</a>`
      content = await renderRecordList(did, handle, collection)
    } else {
      content = await renderCollections(did, handle)
    }

    container.innerHTML = nav + content
  } catch (err) {
    container.innerHTML = `<p class="error">Failed to load: ${err}</p>`
  }
}