'use client'

import { useEffect, useState, useMemo } from 'react'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { PlatformBadge } from '@/components/PremiumTable'
import {
  Clock,
  ExternalLink,
  Search,
  Flame,
  Timer,
  Gavel,
  DollarSign,
  X,
  Lock,
  TrendingUp,
  ChevronUp,
  ChevronDown,
  ChevronsUpDown,
  Sparkles,
  Diamond,
  ShieldCheck,
  Zap,
  Filter,
  Check,
  Shield,
  ArrowUpRight,
  ArrowRight
} from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

interface MarketItem {
  id: string
  domain: string
  tld: string
  price: number
  currency: string
  price_type: 'bid' | 'fixed' | 'negotiable'
  status: 'auction' | 'instant'
  source: string
  is_pounce: boolean
  verified: boolean
  time_remaining?: string
  end_time?: string
  num_bids?: number
  slug?: string
  seller_verified: boolean
  url: string
  is_external: boolean
  pounce_score: number
}

interface Auction {
  domain: string
  platform: string
  platform_url: string
  current_bid: number
  currency: string
  num_bids: number
  end_time: string
  time_remaining: string
  buy_now_price: number | null
  reserve_met: boolean | null
  traffic: number | null
  age_years: number | null
  tld: string
  affiliate_url: string
}

type TabType = 'all' | 'ending' | 'hot'
type SortField = 'domain' | 'ending' | 'bid' | 'bids'
type SortDirection = 'asc' | 'desc'

const PLATFORMS = [
  { id: 'All', name: 'All Sources' },
  { id: 'GoDaddy', name: 'GoDaddy' },
  { id: 'Sedo', name: 'Sedo' },
  { id: 'NameJet', name: 'NameJet' },
  { id: 'DropCatch', name: 'DropCatch' },
]

// Premium TLDs that look professional
const PREMIUM_TLDS = ['com', 'io', 'ai', 'co', 'de', 'ch', 'net', 'org', 'app', 'dev', 'xyz']

// Vanity Filter: Only show "beautiful" domains to non-authenticated users
function isVanityDomain(auction: Auction): boolean {
  const domain = auction.domain
  const parts = domain.split('.')
  if (parts.length < 2) return false
  
  const name = parts[0]
  const tld = parts.slice(1).join('.').toLowerCase()
  
  // Check TLD is premium
  if (!PREMIUM_TLDS.includes(tld)) return false
  
  // Check length (max 12 characters for the name)
  if (name.length > 12) return false
  
  // No hyphens
  if (name.includes('-')) return false
  
  // No numbers (unless domain is 4 chars or less - short domains are valuable)
  if (name.length > 4 && /\d/.test(name)) return false
  
  return true
}

// Generate a mock "Deal Score" for display purposes
function getDealScore(auction: Auction): number | null {
  let score = 50
  
  const name = auction.domain.split('.')[0]
  if (name.length <= 4) score += 20
  else if (name.length <= 6) score += 10
  
  if (['com', 'io', 'ai'].includes(auction.tld)) score += 15
  
  if (auction.age_years && auction.age_years > 5) score += 10
  
  if (auction.num_bids >= 20) score += 15
  else if (auction.num_bids >= 10) score += 10
  
  return Math.min(score, 100)
}

function SortIcon({ field, currentField, direction }: { field: SortField, currentField: SortField, direction: SortDirection }) {
  if (field !== currentField) {
    return <ChevronsUpDown className="w-3 h-3 text-white/20" />
  }
  return direction === 'asc' 
    ? <ChevronUp className="w-3 h-3 text-accent" />
    : <ChevronDown className="w-3 h-3 text-accent" />
}

export default function MarketPage() {
  const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
  
  const [allAuctions, setAllAuctions] = useState<Auction[]>([])
  const [endingSoon, setEndingSoon] = useState<Auction[]>([])
  const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
  const [pounceItems, setPounceItems] = useState<MarketItem[]>([])
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState<TabType>('all')
  const [sortField, setSortField] = useState<SortField>('ending')
  const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
  
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedPlatform, setSelectedPlatform] = useState('All')
  const [maxBid, setMaxBid] = useState('')
  
  useEffect(() => {
    checkAuth()
    loadAuctions()
  }, [checkAuth])

  const loadAuctions = async () => {
    setLoading(true)
    try {
      const [allFeed, endingFeed, hotFeed, pounceFeed] = await Promise.all([
        api.getMarketFeed({ source: 'all', limit: 100, sortBy: 'time' }),
        api.getMarketFeed({ source: 'external', endingWithin: 24, limit: 50, sortBy: 'time' }),
        api.getMarketFeed({ source: 'external', limit: 50, sortBy: 'score' }),
        api.getMarketFeed({ source: 'pounce', limit: 10 }),
      ])
      
      const convertToAuction = (item: MarketItem): Auction => ({
        domain: item.domain,
        platform: item.source,
        platform_url: item.url,
        current_bid: item.price,
        currency: item.currency,
        num_bids: item.num_bids || 0,
        end_time: item.end_time || '',
        time_remaining: item.time_remaining || '',
        buy_now_price: item.price_type === 'fixed' ? item.price : null,
        reserve_met: null,
        traffic: null,
        age_years: null,
        tld: item.tld,
        affiliate_url: item.url,
      })
      
      const externalOnly = (items: MarketItem[]) => items.filter(i => !i.is_pounce).map(convertToAuction)
      
      setAllAuctions(externalOnly(allFeed.items || []))
      setEndingSoon(externalOnly(endingFeed.items || []))
      setHotAuctions(externalOnly(hotFeed.items || []))
      setPounceItems(pounceFeed.items || [])
    } catch (error) {
      console.error('Failed to load auctions:', error)
    } finally {
      setLoading(false)
    }
  }

  const getCurrentAuctions = (): Auction[] => {
    switch (activeTab) {
      case 'ending': return endingSoon
      case 'hot': return hotAuctions
      default: return allAuctions
    }
  }

  // Apply Vanity Filter for non-authenticated users
  const displayAuctions = useMemo(() => {
    const current = getCurrentAuctions()
    if (isAuthenticated) {
      return current
    }
    return current.filter(isVanityDomain)
  }, [activeTab, allAuctions, endingSoon, hotAuctions, isAuthenticated])

  const filteredAuctions = displayAuctions.filter(auction => {
    if (searchQuery && !auction.domain.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false
    }
    if (selectedPlatform !== 'All' && auction.platform !== selectedPlatform) {
      return false
    }
    if (maxBid && auction.current_bid > parseFloat(maxBid)) {
      return false
    }
    return true
  })

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
    } else {
      setSortField(field)
      setSortDirection('asc')
    }
  }

  const sortedAuctions = [...filteredAuctions].sort((a, b) => {
    const modifier = sortDirection === 'asc' ? 1 : -1
    switch (sortField) {
      case 'domain':
        return a.domain.localeCompare(b.domain) * modifier
      case 'bid':
        return (a.current_bid - b.current_bid) * modifier
      case 'bids':
        return (a.num_bids - b.num_bids) * modifier
      default:
        return 0
    }
  })

  const formatCurrency = (amount: number, currency = 'USD') => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
  }

  const getTimeColor = (timeRemaining: string) => {
    if (timeRemaining.includes('m') && !timeRemaining.includes('h')) return 'text-red-400 font-bold'
    if (timeRemaining.includes('h') && parseInt(timeRemaining) < 12) return 'text-amber-400 font-bold'
    return 'text-white/40'
  }

  const hotPreview = hotAuctions.slice(0, 4)

  if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#020202]">
        <div className="w-12 h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
      </div>
    )
  }
  
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Cinematic Background - Architectural & Fine */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div 
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
            backgroundSize: '160px 160px',
          }}
        />
        <div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.02] rounded-full blur-[200px]" />
      </div>

      <Header />

      <main className="relative pt-20 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6 flex-1">
        <div className="max-w-[1400px] mx-auto">
          {/* Hero Header - High Tech */}
          <div className="mb-12 sm:mb-16 animate-fade-in text-left">
            <div className="flex flex-col lg:flex-row justify-between items-end gap-8 border-b border-white/[0.08] pb-12">
              <div>
                <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block flex items-center gap-2">
                  <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
                  Live Liquidity Pool
                </span>
                <h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] leading-[0.9] tracking-[-0.03em] text-white">
                  Acquire Assets.
                </h1>
                <p className="mt-5 sm:mt-8 text-sm sm:text-lg lg:text-xl text-white/50 max-w-2xl font-light leading-relaxed">
                  Global liquidity pool. Verified assets only.
                  <span className="block mt-2 text-white/80">Aggregated from GoDaddy, Sedo, and Pounce Direct.</span>
                </p>
              </div>
              <div className="grid grid-cols-2 gap-12 text-right hidden lg:grid">
                <div>
                  <div className="text-3xl font-display text-white mb-1">{formatCurrency(allAuctions.length, 'USD').replace('$', '')}</div>
                  <div className="text-[10px] uppercase tracking-widest text-white/30 font-mono">Live Opportunities</div>
                </div>
                <div>
                  <div className="text-3xl font-display text-white mb-1">{pounceItems.length}</div>
                  <div className="text-[10px] uppercase tracking-widest text-accent font-mono">Direct Listings</div>
                </div>
              </div>
            </div>
          </div>

          {/* Login Banner for non-authenticated users */}
          {!isAuthenticated && (
            <div className="mb-12 p-1 border border-accent/20 bg-accent/5 max-w-3xl mx-auto animate-fade-in relative group">
              <div className="absolute -top-px -left-px w-2 h-2 border-t border-l border-accent opacity-50" />
              <div className="absolute -top-px -right-px w-2 h-2 border-t border-r border-accent opacity-50" />
              <div className="absolute -bottom-px -left-px w-2 h-2 border-b border-l border-accent opacity-50" />
              <div className="absolute -bottom-px -right-px w-2 h-2 border-b border-r border-accent opacity-50" />
              
              <div className="bg-[#050505] p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between gap-6">
                <div className="flex items-center gap-5">
                  <div className="w-12 h-12 bg-accent/10 border border-accent/20 flex items-center justify-center text-accent">
                    <Lock className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="text-lg font-bold text-white mb-1">Restricted Access</p>
                    <p className="text-sm font-mono text-white/50">
                      Sign in to unlock valuations, deal scores, and unfiltered data.
                    </p>
                  </div>
                </div>
                <Link
                  href="/register"
                  className="shrink-0 px-8 py-3 bg-accent text-black text-xs font-bold uppercase tracking-widest hover:bg-white transition-all"
                  style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
                >
                  Authorize
                </Link>
              </div>
            </div>
          )}

          {/* Pounce Direct Section - Featured */}
          {pounceItems.length > 0 && (
            <div className="mb-20 sm:mb-24 animate-slide-up">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 sm:mb-10">
                <div className="flex items-center gap-3">
                  <div className="flex items-center gap-2 px-3 py-1 bg-accent/10 border border-accent/20">
                    <Diamond className="w-4 h-4 text-accent" />
                    <span className="text-xs font-bold uppercase tracking-widest text-accent">Direct Listings</span>
                  </div>
                  <span className="text-[10px] font-mono text-white/30 hidden sm:inline-block">// 0% COMMISSION // INSTANT SETTLEMENT</span>
                </div>
                <Link href="/pricing" className="text-xs font-mono text-white/40 hover:text-white transition-colors flex items-center gap-2">
                  How to list my domains? <ArrowRight className="w-3 h-3" />
                </Link>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
                {pounceItems.map((item) => (
                  <Link
                    key={item.id}
                    href={item.url}
                    className="group relative border border-white/10 bg-[#050505] hover:border-accent/50 transition-all duration-500 flex flex-col h-full"
                  >
                    <div className="absolute top-0 right-0 w-10 h-10 bg-white/5 border-l border-b border-white/10 flex items-center justify-center group-hover:bg-accent group-hover:text-black transition-colors duration-300">
                        <ArrowUpRight className="w-4 h-4" />
                    </div>
                    
                    <div className="p-8 flex flex-col h-full">
                        <div className="flex items-center gap-2 mb-6">
                            <span className="w-1.5 h-1.5 bg-accent animate-pulse" />
                            <span className="text-[10px] font-bold uppercase tracking-widest text-white/40">Available Now</span>
                        </div>
                        
                        <h3 className="font-mono text-2xl sm:text-3xl text-white font-medium mb-3 truncate group-hover:text-accent transition-colors tracking-tight">
                            {item.domain}
                        </h3>
                        
                        <div className="flex items-center gap-3 mb-8">
                            {item.verified && (
                                <span className="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-accent bg-accent/5 px-2 py-1 border border-accent/10">
                                    <ShieldCheck className="w-3 h-3" /> Verified
                                </span>
                            )}
                            <span className="text-[10px] font-mono text-white/30 px-2 py-1 bg-white/5 border border-white/10">
                                {isAuthenticated ? `Score: ${item.pounce_score}/100` : 'Score: [LOCKED]'}
                            </span>
                        </div>
                        
                        <div className="mt-auto pt-6 border-t border-white/[0.05] flex items-end justify-between">
                            <div>
                                <span className="text-[10px] text-white/30 uppercase tracking-widest block mb-1 font-mono">Buy Price</span>
                                <span className="font-mono text-xl sm:text-2xl text-white">{formatCurrency(item.price, item.currency)}</span>
                            </div>
                            <div className="px-5 py-2.5 bg-white/5 border border-white/10 text-white text-[10px] font-bold uppercase tracking-widest group-hover:bg-accent group-hover:text-black group-hover:border-accent transition-all duration-300">
                                Acquire
                            </div>
                        </div>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          )}

          {/* Search & Filters - Tech Bar */}
          <div className="mb-10 animate-slide-up sticky top-20 z-30 backdrop-blur-xl bg-[#020202]/90 border-y border-white/[0.08] py-5 -mx-4 px-4 sm:mx-0 sm:px-0">
            <div className="flex flex-col lg:flex-row gap-5 justify-between items-center max-w-[1400px] mx-auto">
                {/* Search */}
                <div className="relative w-full lg:w-[480px] group">
                    <Search className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40 group-focus-within:text-accent transition-colors" />
                    <input
                        type="text"
                        placeholder="SEARCH_ASSETS..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full pl-14 pr-5 py-3.5 bg-[#0A0A0A] border border-white/10 text-white placeholder:text-white/20 font-mono text-base focus:outline-none focus:border-accent focus:bg-[#0F0F0F] transition-all rounded-none"
                    />
                </div>
                
                {/* Filters */}
                <div className="flex flex-wrap gap-4 w-full lg:w-auto items-center">
                    <div className="relative group">
                        <select
                            value={selectedPlatform}
                            onChange={(e) => setSelectedPlatform(e.target.value)}
                            className="appearance-none pl-5 pr-10 py-3.5 bg-[#0A0A0A] border border-white/10 text-white font-mono text-sm focus:outline-none focus:border-accent cursor-pointer min-w-[180px] hover:border-white/30 transition-colors rounded-none"
                        >
                            {PLATFORMS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                        </select>
                        <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none group-hover:text-white transition-colors" />
                    </div>
                    
                    <div className="flex border border-white/10 bg-[#0A0A0A]">
                        {[
                            { id: 'all' as const, label: 'ALL', icon: Gavel },
                            { id: 'ending' as const, label: 'ENDING', icon: Timer },
                            { id: 'hot' as const, label: 'HOT', icon: Flame },
                        ].map((tab) => (
                            <button
                                key={tab.id}
                                onClick={() => setActiveTab(tab.id)}
                                className={clsx(
                                    "px-6 py-3.5 flex items-center gap-3 text-xs font-bold uppercase tracking-widest transition-all border-r border-white/10 last:border-r-0 hover:bg-white/5",
                                    activeTab === tab.id
                                        ? "bg-white/10 text-white border-b-2 border-accent"
                                        : "text-white/40 hover:text-white border-b-2 border-transparent"
                                )}
                            >
                                <tab.icon className={clsx("w-4 h-4", activeTab === tab.id ? "text-accent" : "text-current")} />
                                {tab.label}
                            </button>
                        ))}
                    </div>
                </div>
            </div>
          </div>

          {/* Auctions Table - The Terminal */}
          <div className="border border-white/[0.08] bg-[#050505] animate-slide-up shadow-2xl">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-[#0A0A0A] border-b border-white/[0.08]">
                    <th className="text-left px-8 py-5">
                      <button
                        onClick={() => handleSort('domain')}
                        className="flex items-center gap-2 text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
                      >
                        Asset
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="domain" currentField={sortField} direction={sortDirection} /></span>
                      </button>
                    </th>
                    <th className="text-left px-8 py-5 hidden lg:table-cell">
                      <span className="text-xs uppercase tracking-widest text-white/40 font-bold">Source</span>
                    </th>
                    <th className="text-right px-8 py-5">
                      <button
                        onClick={() => handleSort('bid')}
                        className="flex items-center gap-2 ml-auto text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
                      >
                        Strike Price
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="bid" currentField={sortField} direction={sortDirection} /></span>
                      </button>
                    </th>
                    <th className="text-center px-8 py-5 hidden md:table-cell">
                      <span className="text-xs uppercase tracking-widest text-white/40 font-bold flex items-center justify-center gap-2">
                        Valuation
                        {!isAuthenticated && <Lock className="w-3 h-3" />}
                      </span>
                    </th>
                    <th className="text-right px-8 py-5 hidden md:table-cell">
                      <button
                        onClick={() => handleSort('ending')}
                        className="flex items-center gap-2 ml-auto text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
                      >
                        Window
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="ending" currentField={sortField} direction={sortDirection} /></span>
                      </button>
                    </th>
                    <th className="px-8 py-5"></th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/[0.03]">
                  {loading ? (
                    Array.from({ length: 10 }).map((_, idx) => (
                      <tr key={idx} className="animate-pulse">
                        <td className="px-8 py-5"><div className="h-5 w-48 bg-white/5 rounded-none" /></td>
                        <td className="px-8 py-5 hidden lg:table-cell"><div className="h-5 w-24 bg-white/5 rounded-none" /></td>
                        <td className="px-8 py-5"><div className="h-5 w-20 bg-white/5 rounded-none ml-auto" /></td>
                        <td className="px-8 py-5 hidden md:table-cell"><div className="h-5 w-24 bg-white/5 rounded-none mx-auto" /></td>
                        <td className="px-8 py-5 hidden md:table-cell"><div className="h-5 w-20 bg-white/5 rounded-none ml-auto" /></td>
                        <td className="px-8 py-5"><div className="h-8 w-8 bg-white/5 rounded-none ml-auto" /></td>
                      </tr>
                    ))
                  ) : sortedAuctions.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="px-8 py-20 text-center text-white/30 font-mono text-base">
                        {searchQuery ? `// NO_ASSETS_FOUND: "${searchQuery}"` : '// NO_DATA_AVAILABLE'}
                      </td>
                    </tr>
                  ) : (
                    sortedAuctions.map((auction) => (
                      <tr
                        key={`${auction.domain}-${auction.platform}`}
                        className="group hover:bg-[#0F0F0F] transition-all duration-200 border-l-2 border-transparent hover:border-accent"
                      >
                        <td className="px-8 py-6">
                          <div>
                            <a 
                              href={auction.affiliate_url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="font-mono text-lg font-medium text-white group-hover:text-accent transition-colors block tracking-tight"
                            >
                              {auction.domain}
                            </a>
                            <div className="flex items-center gap-2 mt-1.5 lg:hidden">
                              <span className="text-[10px] text-white/30 uppercase tracking-wide font-bold">{auction.platform}</span>
                            </div>
                          </div>
                        </td>
                        <td className="px-8 py-6 hidden lg:table-cell">
                          <div className="flex items-center gap-3">
                            <span className="text-xs font-mono text-white/40 group-hover:text-white/60 transition-colors">{auction.platform}</span>
                            {auction.platform === 'Pounce' && <Diamond className="w-3 h-3 text-accent animate-pulse" />}
                          </div>
                        </td>
                        <td className="px-8 py-6 text-right">
                          <div>
                            <span className="font-mono text-lg font-medium text-white group-hover:text-white transition-colors">
                              {formatCurrency(auction.current_bid)}
                            </span>
                            {auction.buy_now_price && (
                              <span className="block text-[10px] text-accent font-bold uppercase tracking-wide mt-1">Buy Now</span>
                            )}
                          </div>
                        </td>
                        {/* Valuation - blurred for non-authenticated */}
                        <td className="px-8 py-6 text-center hidden md:table-cell">
                          {isAuthenticated ? (
                            <span className="font-mono text-base text-white/60 group-hover:text-white/80 transition-colors">
                              ${(auction.current_bid * 1.5).toFixed(0)}
                            </span>
                          ) : (
                            <div className="flex justify-center">
                                <span className="font-mono text-base text-white/20 blur-[6px] select-none bg-white/5 px-3 py-0.5 group-hover:text-white/30 transition-colors">
                                    $X,XXX
                                </span>
                            </div>
                          )}
                        </td>
                        <td className="px-8 py-6 text-right hidden md:table-cell">
                          <span className={clsx("font-mono text-sm tracking-tight", getTimeColor(auction.time_remaining))}>
                            {auction.time_remaining}
                          </span>
                        </td>
                        <td className="px-8 py-6 text-right">
                          <a
                            href={auction.affiliate_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center w-10 h-10 border border-white/10 text-white/40 hover:text-black hover:bg-white hover:border-white transition-all duration-300 opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0"
                          >
                            <ArrowUpRight className="w-4 h-4" />
                          </a>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>

          {/* Stats */}
          {!loading && (
            <div className="mt-4 flex justify-between px-4 text-[10px] font-mono text-white/30 uppercase tracking-widest border-t border-white/[0.05] pt-4">
              <span>System Status: Online</span>
              <span>
                {searchQuery 
                  ? `Assets Found: ${sortedAuctions.length}`
                  : `Total Assets: ${allAuctions.length}`
                }
              </span>
            </div>
          )}

          {/* Bottom CTA */}
          {!isAuthenticated && (
            <div className="mt-20 p-px bg-gradient-to-r from-accent/20 via-white/5 to-accent/20">
                <div className="bg-[#080808] p-10 text-center relative overflow-hidden">
                    <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.05]" />
                    <div className="relative z-10">
                        <div className="inline-flex items-center justify-center w-12 h-12 border border-accent/20 bg-accent/5 text-accent mb-6">
                            <Filter className="w-6 h-6" />
                        </div>
                        <h3 className="text-2xl font-display text-white mb-4">Eliminate Noise.</h3>
                        <p className="text-white/50 mb-8 max-w-lg mx-auto text-lg font-light">
                            Our 'Trader' plan filters 99% of junk domains automatically. 
                            Stop digging through spam. Start acquiring assets.
                        </p>
                        <Link
                            href="/pricing"
                            className="inline-flex items-center gap-3 px-8 py-4 bg-accent text-black text-xs font-bold uppercase tracking-widest hover:bg-white transition-all"
                            style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
                        >
                            Upgrade Intel
                            <TrendingUp className="w-4 h-4" />
                        </Link>
                    </div>
                </div>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  )
}