'use client'

import Link from 'next/link'
import { useEffect, useMemo, useState } from 'react'
import { useRouter } from 'next/router'
import { Card, Address } from '@/libs/frontend-ui-primitives'
import { transactionsApi, Transaction } from '@/services/api/transactions'

function normalizeAddress(value: string) {
  const trimmed = value.trim()
  return /^0x[a-fA-F0-9]{40}$/.test(trimmed) ? trimmed : ''
}

export default function AddressesPage() {
  const router = useRouter()
  const chainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '138')
  const [query, setQuery] = useState('')
  const [recentTransactions, setRecentTransactions] = useState<Transaction[]>([])
  const [watchlist, setWatchlist] = useState<string[]>([])

  useEffect(() => {
    let active = true
    transactionsApi.listSafe(chainId, 1, 20).then(({ ok, data }) => {
      if (active && ok) {
        setRecentTransactions(data)
      }
    }).catch(() => {
      if (active) {
        setRecentTransactions([])
      }
    })
    return () => {
      active = false
    }
  }, [chainId])

  useEffect(() => {
    try {
      const raw = window.localStorage.getItem('explorerWatchlist')
      const entries = raw ? JSON.parse(raw) : []
      setWatchlist(Array.isArray(entries) ? entries.filter((entry): entry is string => typeof entry === 'string') : [])
    } catch {
      setWatchlist([])
    }
  }, [])

  const activeAddresses = useMemo(() => {
    const seen = new Set<string>()
    const addresses: string[] = []

    for (const tx of recentTransactions) {
      for (const candidate of [tx.from_address, tx.to_address]) {
        if (!candidate) continue
        const normalized = candidate.toLowerCase()
        if (seen.has(normalized)) continue
        seen.add(normalized)
        addresses.push(candidate)
        if (addresses.length >= 12) return addresses
      }
    }

    return addresses
  }, [recentTransactions])

  const handleOpenAddress = (event: React.FormEvent) => {
    event.preventDefault()
    const normalized = normalizeAddress(query)
    if (!normalized) return
    router.push(`/addresses/${normalized}`)
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Addresses</h1>

      <Card className="mb-6" title="Open An Address">
        <form onSubmit={handleOpenAddress} className="flex flex-col gap-3 md:flex-row">
          <input
            type="text"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="0x..."
            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
          />
          <button
            type="submit"
            disabled={!normalizeAddress(query)}
            className="rounded-lg bg-primary-600 px-6 py-2 text-white hover:bg-primary-700 disabled:opacity-50"
          >
            Open address
          </button>
        </form>
        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
          Open any Chain 138 address directly, or jump into your saved watchlist below.
        </p>
      </Card>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card title="Saved Watchlist">
          {watchlist.length === 0 ? (
            <p className="text-sm text-gray-600 dark:text-gray-400">
              No saved addresses yet. Address detail pages let you add entries to the shared explorer watchlist.
            </p>
          ) : (
            <div className="space-y-3">
              {watchlist.map((entry) => (
                <Link key={entry} href={`/addresses/${entry}`} className="block text-primary-600 hover:underline">
                  <Address address={entry} />
                </Link>
              ))}
              <div className="pt-2">
                <Link href="/watchlist" className="text-sm text-primary-600 hover:underline">
                  Open the full watchlist →
                </Link>
              </div>
            </div>
          )}
        </Card>

        <Card title="Recently Active Addresses">
          {activeAddresses.length === 0 ? (
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Recent address activity is unavailable right now. You can still open an address directly above.
            </p>
          ) : (
            <div className="space-y-3">
              {activeAddresses.map((entry) => (
                <Link key={entry} href={`/addresses/${entry}`} className="block text-primary-600 hover:underline">
                  <Address address={entry} />
                </Link>
              ))}
            </div>
          )}
        </Card>
      </div>
    </div>
  )
}
