'use client'

import { useState, useEffect } from 'react'
import useSWR from 'swr'
import { Header } from '@/components/header'
import { CoinCard } from '@/components/coin-card'
import { Input } from '@/components/ui/input'
import { Coin } from '@/types'
import { 
  LgStar, 
  LgFolderInvoices, 
  LgBox, 
  LgIdea, 
  LgSearch, 
  LgClock, 
  LgComboChart, 
  LgCancel 
} from '@/components/icons'

const fetcher = (url: string) => fetch(url).then((res) => res.json())

type SortOption = 'newest' | 'marketCap' | 'volume' | 'price' | 'verified'

const iconMap = {
  newest: LgClock,
  marketCap: LgComboChart,
  volume: LgComboChart, // reusing combo chart
  price: LgFolderInvoices,
  verified: LgStar,
}

export default function Home() {
  
  const { data: coins, isLoading } = useSWR<Coin[]>('/api/coins', fetcher, {
    refreshInterval: 15000,
  })
  const { data: solPriceData } = useSWR('/api/sol-price', fetcher, {
    refreshInterval: 60000,
  })
  const { data: noticeData } = useSWR('/api/notice', fetcher, {
    refreshInterval: 30000,
  })
  const solPrice = solPriceData?.price || 0
  const notice = noticeData?.notice

  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState<SortOption>('price')
  const [discordBannerVisible, setDiscordBannerVisible] = useState(true)

  // i thought of this but then i realized i hat5e my users
  // useEffect(() => {
  //   try {
  //     const hidden = localStorage.getItem('hideDiscordBanner');
  //     if (hidden === '1') setDiscordBannerVisible(false);
  //   } catch (e) {
  //     // ignore (SSR safety)
  //   }
  // }, [])

  const filteredCoins = coins
    ?.filter((coin) =>
      coin.name.toLowerCase().includes(search.toLowerCase()) ||
      coin.ticker.toLowerCase().includes(search.toLowerCase())
    )
    .filter((coin) => sortBy === 'verified' ? coin.verified : true)
    .sort((a, b) => {
      // verified > boosted > regular
      if (a.verified && !b.verified) return -1;
      if (!a.verified && b.verified) return 1;
      
      // if both verified or both not verified, check boosted status
      if (a.boosted && !b.boosted) return -1;
      if (!a.boosted && b.boosted) return 1;
      
      switch (sortBy) {
        case 'marketCap':
          return b.marketCap - a.marketCap
        case 'volume':
          return b.volume24h - a.volume24h
        case 'price':
          return b.price - a.price
        case 'verified':
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        default:
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      }
    })

  const totalMarketCap = coins?.reduce((sum, coin) => sum + coin.marketCap, 0) || 0;
  const totalHolders = coins?.reduce((sum, coin) => sum + coin.holders, 0) || 0;

  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      {/* Announcement Banner */}
      {notice && (
        <div className="bg-red-600 text-white text-center py-3 px-4">
          <div className="mx-auto max-w-7xl">
            <p className="text-sm font-medium">
              <strong>Notice:</strong> {notice.message}
              {notice.reason && ` (Reason: ${notice.reason})`}
            </p>
          </div>
        </div>
      )}
      
      {discordBannerVisible && (
        <div className="mx-auto max-w-7xl px-4 py-4">
          <div className="flex items-center justify-between gap-4 rounded-xl bg-gradient-to-r from-[#374151] to-[#5865f2] text-white px-4 py-3 shadow-md">
            <div className="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="24" height="24" viewBox="0 0 16 16">
                <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
              </svg>
              <div>
                <p className="font-semibold">Join our Discord</p>
                <p className="text-xs text-white/90">Giveaways, events & notifications. Or... just connect with the community {`:)`}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <a href="/discord" className="inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-semibold text-[#5865f2] shadow-sm hover:opacity-95">
                Join Discord
              </a>
              <button
                aria-label="Dismiss discord banner"
                onClick={() => {
                  try { localStorage.setItem('hideDiscordBanner', '1') } catch (e) {}
                  setDiscordBannerVisible(false)
                }}
                className="text-white/80 hover:text-white"
              >
                ✕
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Hero Section */}
      <section className="relative overflow-hidden border-b border-border/50">
        <div className="relative mx-auto max-w-7xl px-4 py-20 text-center">
          <h1 className="mb-6 text-balance text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl">
            pummmp<span className="text-[#286eca]">.fun</span>
          </h1>
          
          <p className="mx-auto mb-10 max-w-2xl text-pretty text-muted-foreground">
            made w/ love by <a href='https://github.com/focat69' target='_blank' className='underline underline-offset-2 hover:text-[#286eca]'>focat</a> 💜<br />
          </p>

          <img src="/logo.svg" alt="Logo" className="pointer-events-none mx-auto mb-6 h-80 w-80 absolute top-10 left-1/2 -translate-x-1/2 opacity-10" />

          <div className="flex flex-wrap items-center justify-center gap-4">
            <div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
              <LgFolderInvoices className="h-6 w-6" />
              <div className="text-left">
                <p className="text-2xl font-bold">{coins?.length ?? 'N/A'}</p>
                <p className="text-xs text-muted-foreground">Active Coins</p>
              </div>
            </div>
            <div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
              <LgBox className="h-6 w-6" />
              <div className="text-left">
                <p className="text-2xl font-bold flex items-center gap-2">
                  {totalMarketCap ? (() => {
                    const value = totalMarketCap * solPrice
                    if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(2)}M+`
                    if (value >= 1_000) return `$${(value / 1_000).toFixed(2)}K+`
                    return `$${value.toLocaleString('en-US', { maximumFractionDigits: 2 })}`
                  })() : 'N/A'}
                </p>
                <p className="text-xs text-muted-foreground">Total Market Cap</p>
              </div>
            </div>
            <div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
              <LgIdea className="h-6 w-6" />
              <div className="text-left">
                <p className="text-2xl font-bold">{totalHolders ?? 'N/A'}</p>
                <p className="text-xs text-muted-foreground">Total Holders</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Coins Section */}
      <section className="mx-auto max-w-7xl px-4 py-12">
        {/* Filters */}
        <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div className="relative max-w-md flex-1">
            <LgSearch className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search coins..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="h-11 bg-card/50 pl-10"
            />
          </div>

          <div className="flex gap-2">
            {[
              { value: 'newest', label: 'Newest', iconKey: 'newest' },
              { value: 'verified', label: 'Verified', iconKey: 'verified' },
              { value: 'marketCap', label: 'Market Cap', iconKey: 'marketCap' },
              { value: 'volume', label: 'Volume', iconKey: 'volume' },
              { value: 'price', label: 'Price', iconKey: 'price' },
            ].map((option) => {
              const Icon = iconMap[option.iconKey as keyof typeof iconMap]
              return (
              <button
                key={option.value}
                onClick={() => setSortBy(option.value as SortOption)}
                className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ${
                  sortBy === option.value
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-card/50 text-muted-foreground hover:text-foreground'
                }`}
              >
                <Icon className="h-4 w-4" />
                <span className="hidden sm:inline">{option.label}</span>
              </button>
            )})}
          </div>
        </div>

        {/* Coins Grid */}
        {isLoading ? (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div
                key={i}
                className="h-64 animate-pulse rounded-2xl bg-card/50"
              />
            ))}
          </div>
        ) : filteredCoins && filteredCoins.length > 0 ? (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {filteredCoins.map((coin) => (
              <CoinCard key={coin._id} coin={coin} solPrice={solPrice} />
            ))}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-20 text-center">
            <LgCancel className="mb-4 h-16 w-16 opacity-50" />
            <h3 className="mb-2 text-lg font-medium">No coins found</h3>
            <p className="text-muted-foreground">
              {search ? 'Try a different search term' : 'Be the first to create a coin!'}
            </p>
          </div>
        )}
      </section>
    </div>
  )
}