'use client'

import { useEffect, useState } from 'react'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
import { PremiumTable, Badge, PlatformBadge, StatCard, PageContainer } from '@/components/PremiumTable'
import {
  Clock,
  ExternalLink,
  Search,
  Flame,
  Timer,
  Gavel,
  ChevronUp,
  ChevronDown,
  ChevronsUpDown,
  DollarSign,
  RefreshCw,
  Target,
  X,
  TrendingUp,
  Loader2,
} 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
  }
}

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' },
]

export default function AuctionsPage() {
  const { isAuthenticated, subscription } = 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(() => {
    loadData()
  }, [])

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

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

  // Dynamic subtitle
  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 (
    <CommandCenterLayout
      title="Auctions"
      subtitle={getSubtitle()}
      actions={
        <button
          onClick={handleRefresh}
          disabled={refreshing}
          className="flex items-center gap-2 px-4 py-2 text-sm text-foreground-muted hover:text-foreground 
                     hover:bg-foreground/5 rounded-lg transition-all disabled:opacity-50"
        >
          <RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
          <span className="hidden sm:inline">Refresh</span>
        </button>
      }
    >
      <PageContainer>
        {/* Stats */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <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={opportunities.length} icon={Target} />
        </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">
          {[
            { 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 },
            { id: 'opportunities' as const, label: 'Opportunities', icon: Target, count: opportunities.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",
                activeTab === tab.id ? "bg-background/20" : "bg-foreground/10"
              )}>{tab.count}</span>
            </button>
          ))}
        </div>

        {/* Filters */}
        <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-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>

        {/* Table */}
        <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">{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",
                  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", getTimeColor(a.time_remaining))}>
                  {a.time_remaining}
                </span>
              ),
            },
            ...(activeTab === 'opportunities' ? [{
              key: 'score',
              header: 'Score',
              align: 'center' as const,
              render: (a: Auction) => {
                const oppData = getOpportunityData(a.domain)
                if (!oppData) return null
                return (
                  <span className="inline-flex items-center justify-center w-9 h-9 bg-accent/10 text-accent font-bold rounded-lg">
                    {oppData.opportunity_score}
                  </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>
              ),
            },
          ]}
        />
      </PageContainer>
    </CommandCenterLayout>
  )
}