'use client'

import { useEffect, useState } from 'react'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import {
  Clock,
  TrendingUp,
  ExternalLink,
  Search,
  Flame,
  Timer,
  Users,
  ArrowUpRight,
  Lock,
  Gavel,
  ChevronUp,
  ChevronDown,
  ChevronsUpDown,
  DollarSign,
  RefreshCw,
  Target,
  Info,
  X,
} from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

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
}

interface Opportunity {
  auction: Auction
  analysis: {
    opportunity_score: number
    urgency?: string
    competition?: string
    price_range?: string
    recommendation: string
    reasoning?: string
    // Legacy fields
    estimated_value?: number
    current_bid?: number
    value_ratio?: number
    potential_profit?: number
  }
}

type TabType = 'all' | 'ending' | 'hot' | 'opportunities'
type SortField = 'ending' | 'bid_asc' | 'bid_desc' | 'bids'

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

const TAB_DESCRIPTIONS: Record<TabType, { title: string; description: string }> = {
  all: {
    title: 'All Auctions',
    description: 'All active auctions from all platforms, sorted by ending time by default.',
  },
  ending: {
    title: 'Ending Soon',
    description: 'Auctions ending within the next 24 hours. Best for last-minute sniping opportunities.',
  },
  hot: {
    title: 'Hot Auctions',
    description: 'Auctions with the most bidding activity (20+ bids). High competition but proven demand.',
  },
  opportunities: {
    title: 'Smart Opportunities',
    description: 'Our algorithm scores auctions based on: Time urgency (ending soon = higher score), Competition (fewer bids = higher score), and Price point (lower entry = higher score). Only auctions with a combined score ≥ 3 are shown.',
  },
}

function SortIcon({ field, currentField, direction }: { field: SortField, currentField: SortField, direction: 'asc' | 'desc' }) {
  if (field !== currentField) {
    return <ChevronsUpDown className="w-4 h-4 text-foreground-subtle" />
  }
  return direction === 'asc' 
    ? <ChevronUp className="w-4 h-4 text-accent" />
    : <ChevronDown className="w-4 h-4 text-accent" />
}

function getPlatformBadgeClass(platform: string) {
  switch (platform) {
    case 'GoDaddy': return 'text-blue-400 bg-blue-400/10'
    case 'Sedo': return 'text-orange-400 bg-orange-400/10'
    case 'NameJet': return 'text-purple-400 bg-purple-400/10'
    case 'DropCatch': return 'text-teal-400 bg-teal-400/10'
    default: return 'text-foreground-muted bg-foreground/5'
  }
}

export default function AuctionsPage() {
  const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
  
  const [allAuctions, setAllAuctions] = useState<Auction[]>([])
  const [endingSoon, setEndingSoon] = useState<Auction[]>([])
  const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
  const [opportunities, setOpportunities] = useState<Opportunity[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [activeTab, setActiveTab] = useState<TabType>('all')
  const [sortBy, setSortBy] = useState<SortField>('ending')
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
  
  // Filters
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedPlatform, setSelectedPlatform] = useState('All')
  const [maxBid, setMaxBid] = useState<string>('')

  useEffect(() => {
    checkAuth()
    loadData()
  }, [checkAuth])

  useEffect(() => {
    if (isAuthenticated && opportunities.length === 0) {
      loadOpportunities()
    }
  }, [isAuthenticated])

  const loadOpportunities = async () => {
    try {
      const oppData = await api.getAuctionOpportunities()
      setOpportunities(oppData.opportunities || [])
    } catch (e) {
      console.error('Failed to load opportunities:', e)
    }
  }

  const loadData = async () => {
    setLoading(true)
    try {
      const [auctionsData, hotData, endingData] = await Promise.all([
        api.getAuctions(),
        api.getHotAuctions(50),
        api.getEndingSoonAuctions(24, 50),
      ])
      
      setAllAuctions(auctionsData.auctions || [])
      setHotAuctions(hotData || [])
      setEndingSoon(endingData || [])
      
      if (isAuthenticated) {
        await loadOpportunities()
      }
    } catch (error) {
      console.error('Failed to load auction data:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleRefresh = async () => {
    setRefreshing(true)
    await loadData()
    setRefreshing(false)
  }

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

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

  const getOpportunityData = (domain: string) => {
    if (activeTab !== 'opportunities') return null
    return opportunities.find(o => o.auction.domain === domain)?.analysis
  }

  const filteredAuctions = getCurrentAuctions().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 sortedAuctions = activeTab === 'opportunities' 
    ? filteredAuctions 
    : [...filteredAuctions].sort((a, b) => {
        const mult = sortDirection === 'asc' ? 1 : -1
        switch (sortBy) {
          case 'ending':
            return mult * (new Date(a.end_time).getTime() - new Date(b.end_time).getTime())
          case 'bid_asc':
          case 'bid_desc':
            return mult * (a.current_bid - b.current_bid)
          case 'bids':
            return mult * (b.num_bids - a.num_bids)
          default:
            return 0
        }
      })

  const getTimeColor = (timeRemaining: string) => {
    if (timeRemaining.includes('m') && !timeRemaining.includes('h') && !timeRemaining.includes('d')) {
      return 'text-danger'
    }
    if (timeRemaining.includes('h') && parseInt(timeRemaining) < 2) {
      return 'text-warning'
    }
    return 'text-foreground-muted'
  }

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

  if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="w-5 h-5 border-2 border-accent border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background relative overflow-hidden">
      {/* Background Effects - matching landing page */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
        <div 
          className="absolute inset-0 opacity-[0.015]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
            backgroundSize: '64px 64px',
          }}
        />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 flex-1">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <div className="text-center mb-16 sm:mb-20 animate-fade-in">
            <span className="text-sm font-semibold text-accent uppercase tracking-wider">Auction Aggregator</span>
            <h1 className="mt-4 font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5rem] leading-[0.95] tracking-[-0.03em] text-foreground">
              Curated Opportunities
            </h1>
            <p className="mt-5 text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto">
              Real-time from GoDaddy, Sedo, NameJet & DropCatch. Find opportunities.
            </p>
          </div>

          {/* Login Banner for non-authenticated users */}
          {!isAuthenticated && (
            <div className="mb-8 p-5 bg-accent-muted border border-accent/20 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-4 animate-fade-in">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-accent/20 rounded-xl flex items-center justify-center">
                  <Target className="w-5 h-5 text-accent" />
                </div>
                <div>
                  <p className="text-body-sm font-medium text-foreground">Unlock Smart Opportunities</p>
                  <p className="text-ui-sm text-foreground-muted">
                    Sign in for algorithmic deal-finding and alerts.
                  </p>
                </div>
              </div>
              <Link
                href="/register"
                className="shrink-0 px-5 py-2.5 bg-accent text-background text-ui font-medium rounded-lg
                           hover:bg-accent-hover transition-all duration-300"
              >
                Hunt Free
              </Link>
            </div>
          )}

          {/* Tabs - flex-wrap to avoid horizontal scroll */}
          <div className="mb-6 animate-slide-up">
            <div className="flex flex-wrap items-center gap-2 mb-6">
              <button
                onClick={() => setActiveTab('all')}
                title="View all active auctions from all platforms"
                className={clsx(
                  "flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-lg transition-all",
                  activeTab === 'all'
                    ? "bg-foreground text-background"
                    : "bg-background-secondary/50 text-foreground-muted hover:text-foreground hover:bg-background-secondary"
                )}
              >
                <Gavel className="w-4 h-4" />
                All
                <span className={clsx(
                  "text-ui-xs px-1.5 py-0.5 rounded",
                  activeTab === 'all' ? "bg-background/20" : "bg-foreground/10"
                )}>{allAuctions.length}</span>
              </button>
              <button
                onClick={() => setActiveTab('ending')}
                title="Auctions ending in the next 24 hours - best for sniping"
                className={clsx(
                  "flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-lg transition-all",
                  activeTab === 'ending'
                    ? "bg-warning text-background"
                    : "bg-background-secondary/50 text-foreground-muted hover:text-foreground hover:bg-background-secondary"
                )}
              >
                <Timer className="w-4 h-4" />
                Ending Soon
                <span className={clsx(
                  "text-ui-xs px-1.5 py-0.5 rounded",
                  activeTab === 'ending' ? "bg-background/20" : "bg-foreground/10"
                )}>{endingSoon.length}</span>
              </button>
              <button
                onClick={() => setActiveTab('hot')}
                title="Auctions with 20+ bids - high demand, proven interest"
                className={clsx(
                  "flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-lg transition-all",
                  activeTab === 'hot'
                    ? "bg-accent text-background"
                    : "bg-background-secondary/50 text-foreground-muted hover:text-foreground hover:bg-background-secondary"
                )}
              >
                <Flame className="w-4 h-4" />
                Hot
                <span className={clsx(
                  "text-ui-xs px-1.5 py-0.5 rounded",
                  activeTab === 'hot' ? "bg-background/20" : "bg-foreground/10"
                )}>{hotAuctions.length}</span>
              </button>
              <button
                onClick={() => setActiveTab('opportunities')}
                title="Smart algorithm: Time urgency × Competition × Price = Score"
                className={clsx(
                  "flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-lg transition-all",
                  activeTab === 'opportunities'
                    ? "bg-accent text-background"
                    : "bg-background-secondary/50 text-foreground-muted hover:text-foreground hover:bg-background-secondary"
                )}
              >
                <Target className="w-4 h-4" />
                Opportunities
                {!isAuthenticated && <Lock className="w-3 h-3 ml-1" />}
                {isAuthenticated && (
                  <span className={clsx(
                    "text-ui-xs px-1.5 py-0.5 rounded",
                    activeTab === 'opportunities' ? "bg-background/20" : "bg-foreground/10"
                  )}>{opportunities.length}</span>
                )}
              </button>
              
              <button
                onClick={handleRefresh}
                disabled={refreshing}
                title="Refresh auction data from all platforms"
                className="ml-auto flex items-center gap-2 px-4 py-2.5 text-ui-sm text-foreground-muted hover:text-foreground hover:bg-background-secondary/50 rounded-lg transition-all disabled:opacity-50"
              >
                <RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
                Refresh
              </button>
            </div>
          </div>

          {/* Search & Filters */}
          <div className="mb-6 animate-slide-up">
            <div className="flex flex-wrap gap-3">
              <div className="relative flex-1 min-w-[200px] max-w-md">
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
                <input
                  type="text"
                  placeholder="Search domains..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-12 pr-10 py-3 bg-background-secondary/50 border border-border rounded-xl
                             text-body text-foreground placeholder:text-foreground-subtle
                             focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent
                             transition-all duration-300"
                />
                {searchQuery && (
                  <button
                    onClick={() => setSearchQuery('')}
                    className="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-subtle hover:text-foreground transition-colors"
                  >
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>
              <select
                value={selectedPlatform}
                onChange={(e) => setSelectedPlatform(e.target.value)}
                title="Filter by auction platform"
                className="px-4 py-3 bg-background-secondary/50 border border-border rounded-xl
                           text-body text-foreground focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent cursor-pointer transition-all"
              >
                {PLATFORMS.map(p => (
                  <option key={p.id} value={p.id}>{p.name}</option>
                ))}
              </select>
              <div className="relative">
                <DollarSign className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
                <input
                  type="number"
                  placeholder="Max bid"
                  title="Filter auctions under this bid amount"
                  value={maxBid}
                  onChange={(e) => setMaxBid(e.target.value)}
                  className="w-32 pl-11 pr-4 py-3 bg-background-secondary/50 border border-border rounded-xl
                             text-body text-foreground placeholder:text-foreground-subtle
                             focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
                />
              </div>
            </div>
          </div>

          {/* Content */}
          {loading ? (
            <div className="flex items-center justify-center py-20">
              <div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
            </div>
          ) : activeTab === 'opportunities' && !isAuthenticated ? (
            <div className="text-center py-20 border border-dashed border-border rounded-2xl bg-background-secondary/20">
              <div className="w-14 h-14 bg-accent/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
                <Target className="w-7 h-7 text-accent" />
              </div>
              <h3 className="text-body-lg font-medium text-foreground mb-2">Unlock Smart Opportunities</h3>
              <p className="text-body-sm text-foreground-muted max-w-md mx-auto mb-6">
                Our algorithm analyzes ending times, bid activity, and price points to find the best opportunities.
              </p>
              <Link
                href="/register"
                className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background text-ui font-medium rounded-xl
                           hover:bg-accent-hover transition-all shadow-lg shadow-accent/20"
              >
                Get Started Free
                <ArrowUpRight className="w-4 h-4" />
              </Link>
            </div>
          ) : (
            /* Table - using proper <table> like TLD Prices */
            <div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="bg-background-secondary border-b border-border">
                      <th className="text-left px-4 sm:px-6 py-4">
                        <button
                          onClick={() => handleSort('ending')}
                          title="Sort by ending time"
                          className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
                        >
                          Domain
                          <SortIcon field="ending" currentField={sortBy} direction={sortDirection} />
                        </button>
                      </th>
                      <th className="text-left px-4 sm:px-6 py-4 hidden lg:table-cell">
                        <span className="text-ui-sm text-foreground-subtle font-medium">Platform</span>
                      </th>
                      <th className="text-right px-4 sm:px-6 py-4">
                        <button
                          onClick={() => handleSort('bid_asc')}
                          title="Current highest bid in USD"
                          className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
                        >
                          Bid
                          <SortIcon field="bid_asc" currentField={sortBy} direction={sortDirection} />
                        </button>
                      </th>
                      <th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell">
                        <button
                          onClick={() => handleSort('bids')}
                          title="Number of bids placed"
                          className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
                        >
                          Bids
                          <SortIcon field="bids" currentField={sortBy} direction={sortDirection} />
                        </button>
                      </th>
                      <th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell">
                        <span className="text-ui-sm text-foreground-subtle font-medium" title="Time remaining">Time Left</span>
                      </th>
                      {activeTab === 'opportunities' && (
                        <th className="text-center px-4 sm:px-6 py-4">
                          <span className="text-ui-sm text-foreground-subtle font-medium" title="Opportunity score">Score</span>
                        </th>
                      )}
                      <th className="px-4 sm:px-6 py-4"></th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {sortedAuctions.length === 0 ? (
                      <tr>
                        <td colSpan={activeTab === 'opportunities' ? 7 : 6} className="px-6 py-12 text-center text-foreground-muted">
                          {activeTab === 'opportunities' 
                            ? 'No opportunities right now — check back later!' 
                            : searchQuery 
                              ? `No auctions found matching "${searchQuery}"` 
                              : 'No auctions found'}
                        </td>
                      </tr>
                    ) : (
                      sortedAuctions.map((auction, idx) => {
                        const oppData = getOpportunityData(auction.domain)
                        return (
                          <tr
                            key={`${auction.domain}-${idx}`}
                            className="hover:bg-background-secondary/50 transition-colors group"
                          >
                            {/* Domain */}
                            <td className="px-4 sm:px-6 py-4">
                              <div className="flex flex-col gap-1">
                                <a 
                                  href={auction.affiliate_url}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  title={`Go to ${auction.platform} to bid on ${auction.domain}`}
                                  className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors"
                                >
                                  {auction.domain}
                                </a>
                                <div className="flex items-center gap-2 text-body-xs text-foreground-subtle lg:hidden">
                                  <span className={clsx("text-ui-xs px-1.5 py-0.5 rounded", getPlatformBadgeClass(auction.platform))}>
                                    {auction.platform}
                                  </span>
                                  {auction.age_years && (
                                    <span title={`Domain age: ${auction.age_years} years`}>{auction.age_years}y</span>
                                  )}
                                </div>
                              </div>
                            </td>
                            
                            {/* Platform */}
                            <td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
                              <div className="flex flex-col gap-1">
                                <span 
                                  className={clsx("text-ui-sm px-2 py-0.5 rounded-full w-fit", getPlatformBadgeClass(auction.platform))}
                                  title={`${auction.platform} - Click Bid to go to auction`}
                                >
                                  {auction.platform}
                                </span>
                                {auction.age_years && (
                                  <span className="text-body-xs text-foreground-subtle" title={`Domain age: ${auction.age_years} years`}>
                                    <Clock className="w-3 h-3 inline mr-1" />
                                    {auction.age_years}y
                                  </span>
                                )}
                              </div>
                            </td>
                            
                            {/* Current Bid */}
                            <td className="px-4 sm:px-6 py-4 text-right">
                              <span 
                                className="text-body-sm font-medium text-foreground"
                                title={`Current highest bid: ${formatCurrency(auction.current_bid)}`}
                              >
                                {formatCurrency(auction.current_bid)}
                              </span>
                              {auction.buy_now_price && (
                                <p className="text-ui-xs text-accent" title={`Buy Now for ${formatCurrency(auction.buy_now_price)}`}>
                                  Buy: {formatCurrency(auction.buy_now_price)}
                                </p>
                              )}
                            </td>
                            
                            {/* Bids */}
                            <td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
                              <span 
                                className={clsx(
                                  "text-body-sm font-medium inline-flex items-center gap-1",
                                  auction.num_bids >= 20 ? "text-accent" : 
                                  auction.num_bids >= 10 ? "text-warning" : 
                                  "text-foreground-muted"
                                )}
                                title={`${auction.num_bids} bids - ${auction.num_bids >= 20 ? 'High competition!' : auction.num_bids >= 10 ? 'Moderate interest' : 'Low competition'}`}
                              >
                                {auction.num_bids}
                                {auction.num_bids >= 20 && <Flame className="w-3 h-3" />}
                              </span>
                            </td>
                            
                            {/* Time Left */}
                            <td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell">
                              <span 
                                className={clsx("text-body-sm font-medium", getTimeColor(auction.time_remaining))}
                                title={`Auction ends: ${new Date(auction.end_time).toLocaleString()}`}
                              >
                                {auction.time_remaining}
                              </span>
                            </td>
                            
                            {/* Score (opportunities only) */}
                            {activeTab === 'opportunities' && oppData && (
                              <td className="px-4 sm:px-6 py-4 text-center">
                                <span 
                                  className="inline-flex items-center justify-center w-9 h-9 bg-accent/10 text-accent font-bold rounded-lg text-body-sm"
                                  title={`Score: ${oppData.opportunity_score}${oppData.reasoning ? ' - ' + oppData.reasoning : ''}`}
                                >
                                  {oppData.opportunity_score}
                                </span>
                              </td>
                            )}
                            
                            {/* Action */}
                            <td className="px-4 sm:px-6 py-4 text-right">
                              <a
                                href={auction.affiliate_url}
                                target="_blank"
                                rel="noopener noreferrer"
                                title={`Open ${auction.platform} to place your bid`}
                                className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-ui-sm font-medium rounded-lg
                                           hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
                              >
                                Bid
                                <ExternalLink className="w-3.5 h-3.5" />
                              </a>
                            </td>
                          </tr>
                        )
                      })
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Info Footer */}
          <div className="mt-10 p-5 bg-background-secondary/30 border border-border rounded-xl animate-slide-up">
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center shrink-0">
                <Info className="w-5 h-5 text-foreground-muted" />
              </div>
              <div>
                <h4 className="text-body font-medium text-foreground mb-1.5">
                  {TAB_DESCRIPTIONS[activeTab].title}
                </h4>
                <p className="text-body-sm text-foreground-subtle leading-relaxed mb-3">
                  {TAB_DESCRIPTIONS[activeTab].description}
                </p>
                <p className="text-body-sm text-foreground-subtle leading-relaxed">
                  <span className="text-foreground-muted font-medium">Sources:</span> GoDaddy, Sedo, NameJet, DropCatch, ExpiredDomains. 
                  Click "Bid" to go to the auction — we don't handle transactions.
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}