'use client'

import { useEffect, useState } from 'react'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { PremiumTable, Badge, PlatformBadge, StatCard } from '@/components/PremiumTable'
import {
  Clock,
  ExternalLink,
  Search,
  Flame,
  Timer,
  Gavel,
  DollarSign,
  RefreshCw,
  Target,
  X,
  ArrowRight,
  Lock,
  Sparkles,
} 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
}

type TabType = 'all' | 'ending' | 'hot'
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' },
]

export default function AuctionsPage() {
  const { isAuthenticated, checkAuth } = useStore()
  
  const [allAuctions, setAllAuctions] = useState<Auction[]>([])
  const [endingSoon, setEndingSoon] = useState<Auction[]>([])
  const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
  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')
  
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedPlatform, setSelectedPlatform] = useState('All')
  const [maxBid, setMaxBid] = useState('')

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

  const loadAuctions = async () => {
    setLoading(true)
    try {
      const [all, ending, hot] = await Promise.all([
        api.getAuctions(undefined, undefined, undefined, undefined, undefined, false, 'ending', 100, 0),
        api.getEndingSoonAuctions(50),
        api.getHotAuctions(50),
      ])
      setAllAuctions(all.auctions || [])
      setEndingSoon(ending || [])
      setHotAuctions(hot || [])
    } catch (error) {
      console.error('Failed to load auctions:', error)
    } finally {
      setLoading(false)
    }
  }

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

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

  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 = [...filteredAuctions].sort((a, b) => {
    switch (sortBy) {
      case 'bid_asc':
        return sortDirection === 'asc' ? a.current_bid - b.current_bid : b.current_bid - a.current_bid
      case 'bid_desc':
        return sortDirection === 'asc' ? b.current_bid - a.current_bid : a.current_bid - b.current_bid
      case 'bids':
        return sortDirection === 'asc' ? a.num_bids - b.num_bids : b.num_bids - a.num_bids
      default:
        return 0
    }
  })

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

  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'
    if (timeRemaining.includes('h') && parseInt(timeRemaining) < 12) return 'text-amber-400'
    return 'text-foreground-muted'
  }

  const getSubtitle = () => {
    if (loading) return 'Loading live auctions...'
    const total = allAuctions.length
    if (total === 0) return 'No active auctions found'
    return `${total.toLocaleString()} live auctions across 4 platforms`
  }

  return (
    <div className="min-h-screen bg-background relative overflow-hidden">
      {/* Background Effects */}
      <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="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 animate-fade-in">
            <div>
              <span className="text-sm font-semibold text-accent uppercase tracking-wider">Live Market</span>
              <h1 className="mt-2 font-display text-3xl sm:text-4xl md:text-5xl tracking-tight text-foreground">
                Domain Auctions
              </h1>
              <p className="mt-2 text-foreground-muted">{getSubtitle()}</p>
            </div>
            <button
              onClick={handleRefresh}
              disabled={refreshing}
              className="flex items-center gap-2 px-4 py-2.5 text-sm text-foreground-muted hover:text-foreground 
                         bg-foreground/5 hover:bg-foreground/10 border border-border/50 rounded-xl 
                         transition-all disabled:opacity-50"
            >
              <RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
              Refresh
            </button>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8 animate-slide-up">
            <StatCard title="All Auctions" value={allAuctions.length} icon={Gavel} />
            <StatCard title="Ending Soon" value={endingSoon.length} icon={Timer} accent />
            <StatCard title="Hot Auctions" value={hotAuctions.length} subtitle="20+ bids" icon={Flame} />
            <StatCard 
              title="Opportunities" 
              value={isAuthenticated ? '—' : '—'} 
              subtitle="Login to unlock"
              icon={Target} 
            />
          </div>

          {/* CTA Banner for non-authenticated users */}
          {!isAuthenticated && (
            <div className="mb-8 p-5 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl animate-fade-in">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                    <Sparkles className="w-6 h-6 text-accent" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-foreground">Unlock Smart Opportunities</h3>
                    <p className="text-sm text-foreground-muted">Get AI-powered auction analysis and personalized recommendations</p>
                  </div>
                </div>
                <Link
                  href="/login"
                  className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-accent to-accent/80 
                             text-background rounded-xl font-medium hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all"
                >
                  Sign In <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          )}

          {/* Tabs */}
          <div className="flex flex-wrap items-center gap-2 p-1.5 bg-background-secondary/30 border border-border/30 rounded-2xl w-fit mb-6 animate-slide-up">
            {[
              { id: 'all' as const, label: 'All', icon: Gavel, count: allAuctions.length },
              { id: 'ending' as const, label: 'Ending Soon', icon: Timer, count: endingSoon.length, color: 'warning' },
              { id: 'hot' as const, label: 'Hot', icon: Flame, count: hotAuctions.length },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={clsx(
                  "flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-xl transition-all",
                  activeTab === tab.id
                    ? tab.color === 'warning' 
                      ? "bg-amber-500 text-background"
                      : "bg-gradient-to-r from-accent to-accent/80 text-background shadow-lg shadow-accent/20"
                    : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
                )}
              >
                <tab.icon className="w-4 h-4" />
                <span className="hidden sm:inline">{tab.label}</span>
                <span className={clsx(
                  "text-xs px-1.5 py-0.5 rounded tabular-nums",
                  activeTab === tab.id ? "bg-background/20" : "bg-foreground/10"
                )}>{tab.count}</span>
              </button>
            ))}
          </div>

          {/* Filters */}
          <div className="flex flex-wrap gap-3 mb-6 animate-slide-up">
            <div className="relative flex-1 min-w-[200px] max-w-md">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
              <input
                type="text"
                placeholder="Search domains..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-11 pr-10 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
                           text-sm text-foreground placeholder:text-foreground-subtle
                           focus:outline-none focus:border-accent/50 transition-all"
              />
              {searchQuery && (
                <button onClick={() => setSearchQuery('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground">
                  <X className="w-4 h-4" />
                </button>
              )}
            </div>
            <select
              value={selectedPlatform}
              onChange={(e) => setSelectedPlatform(e.target.value)}
              className="px-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
                         text-sm text-foreground cursor-pointer focus:outline-none focus:border-accent/50"
            >
              {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-4 h-4 text-foreground-subtle" />
              <input
                type="number"
                placeholder="Max bid"
                value={maxBid}
                onChange={(e) => setMaxBid(e.target.value)}
                className="w-32 pl-10 pr-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
                           text-sm text-foreground placeholder:text-foreground-subtle
                           focus:outline-none focus:border-accent/50"
              />
            </div>
          </div>

          {/* Auctions Table */}
          <div className="animate-slide-up">
            <PremiumTable
              data={sortedAuctions}
              keyExtractor={(a) => `${a.domain}-${a.platform}`}
              loading={loading}
              sortBy={sortBy}
              sortDirection={sortDirection}
              onSort={(key) => handleSort(key as SortField)}
              emptyIcon={<Gavel className="w-12 h-12 text-foreground-subtle" />}
              emptyTitle={searchQuery ? `No auctions matching "${searchQuery}"` : "No auctions found"}
              emptyDescription="Try adjusting your filters or check back later"
              columns={[
                {
                  key: 'domain',
                  header: 'Domain',
                  sortable: true,
                  render: (a) => (
                    <div>
                      <a 
                        href={a.affiliate_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="font-mono font-medium text-foreground hover:text-accent transition-colors"
                      >
                        {a.domain}
                      </a>
                      <div className="flex items-center gap-2 mt-1 lg:hidden">
                        <PlatformBadge platform={a.platform} />
                        {a.age_years && <span className="text-xs text-foreground-subtle">{a.age_years}y</span>}
                      </div>
                    </div>
                  ),
                },
                {
                  key: 'platform',
                  header: 'Platform',
                  hideOnMobile: true,
                  render: (a) => (
                    <div className="space-y-1">
                      <PlatformBadge platform={a.platform} />
                      {a.age_years && (
                        <span className="text-xs text-foreground-subtle flex items-center gap-1">
                          <Clock className="w-3 h-3" /> {a.age_years}y
                        </span>
                      )}
                    </div>
                  ),
                },
                {
                  key: 'bid_asc',
                  header: 'Bid',
                  sortable: true,
                  align: 'right',
                  render: (a) => (
                    <div>
                      <span className="font-medium text-foreground tabular-nums">{formatCurrency(a.current_bid)}</span>
                      {a.buy_now_price && (
                        <p className="text-xs text-accent">Buy: {formatCurrency(a.buy_now_price)}</p>
                      )}
                    </div>
                  ),
                },
                {
                  key: 'bids',
                  header: 'Bids',
                  sortable: true,
                  align: 'right',
                  hideOnMobile: true,
                  render: (a) => (
                    <span className={clsx(
                      "font-medium flex items-center justify-end gap-1 tabular-nums",
                      a.num_bids >= 20 ? "text-accent" : a.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted"
                    )}>
                      {a.num_bids}
                      {a.num_bids >= 20 && <Flame className="w-3 h-3" />}
                    </span>
                  ),
                },
                {
                  key: 'ending',
                  header: 'Time Left',
                  sortable: true,
                  align: 'right',
                  hideOnMobile: true,
                  render: (a) => (
                    <span className={clsx("font-medium tabular-nums", getTimeColor(a.time_remaining))}>
                      {a.time_remaining}
                    </span>
                  ),
                },
                {
                  key: 'action',
                  header: '',
                  align: 'right',
                  render: (a) => (
                    <a
                      href={a.affiliate_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-xs font-medium rounded-lg
                                 hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
                    >
                      Bid <ExternalLink className="w-3 h-3" />
                    </a>
                  ),
                },
              ]}
            />
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}