'use client'

import { useState } from 'react'
import Header from '@/components/Header'
import { RefreshCw, Loader2, Search, ExternalLink, Star, ShoppingCart } from 'lucide-react'
import { useSettings } from '@/lib/context/SettingsContext'

interface ShopProduct {
  id: string
  title: string
  url: string
  thumbnail: string
  price: number
  originalPrice: number
  discount: number
  soldCount: number
  rating: number
  reviewCount: number
  sellerName: string
}

const demoProducts: ShopProduct[] = [
  {
    id: '1',
    title: 'Son Môi Tint 3 in 1 - Đa Năng',
    url: 'https://shop.tiktok.com/product/123',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 89000,
    originalPrice: 150000,
    discount: 41,
    soldCount: 52000,
    rating: 4.5,
    reviewCount: 2300,
    sellerName: 'BeautyShopVN',
  },
  {
    id: '2',
    title: 'Kính Râm Phong Cách Hàn Quốc',
    url: 'https://shop.tiktok.com/product/456',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 159000,
    originalPrice: 299000,
    discount: 47,
    soldCount: 125000,
    rating: 4.8,
    reviewCount: 5100,
    sellerName: 'StyleKorea',
  },
  {
    id: '3',
    title: 'Túi Xách Nữ Canvas Thời Trang',
    url: 'https://shop.tiktok.com/product/789',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 249000,
    originalPrice: 450000,
    discount: 45,
    soldCount: 38000,
    rating: 4.2,
    reviewCount: 890,
    sellerName: 'FashionVN',
  },
  {
    id: '4',
    title: 'Bông Tẩy Trang 3 Lớp Khổ Lớn',
    url: 'https://shop.tiktok.com/product/101',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 35000,
    originalPrice: 59000,
    discount: 41,
    soldCount: 250000,
    rating: 4.9,
    reviewCount: 15000,
    sellerName: 'DailyBeauty',
  },
  {
    id: '5',
    title: 'Bảng Màu Mắt 12 ô - Hot Trend',
    url: 'https://shop.tiktok.com/product/112',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 199000,
    originalPrice: 350000,
    discount: 43,
    soldCount: 45000,
    rating: 4.6,
    reviewCount: 2800,
    sellerName: 'MakeupPro',
  },
  {
    id: '6',
    title: 'Kem Dưỡng Ẩm Cấp Nước Hàn Quốc',
    url: 'https://shop.tiktok.com/product/131',
    thumbnail: 'https://cdn3.dienthoaivui.com.vn/img/2024/10/25/8/1727146407-4f5b50f60bc2d1d19f2b4c5a6f8e9d1a-thumbnails.jpg',
    price: 289000,
    originalPrice: 450000,
    discount: 36,
    soldCount: 180000,
    rating: 4.7,
    reviewCount: 9200,
    sellerName: 'SkinCareVN',
  },
]

function formatPrice(vnd: number): string {
  return new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(vnd)
}

function formatSold(count: number): string {
  if (count >= 1000) return (count / 1000).toFixed(1) + 'K'
  return count.toString()
}

export default function ShopPage() {
  const { settings, isMounted } = useSettings()
  const [products, setProducts] = useState<ShopProduct[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  const [error, setError] = useState<string | null>(null)

  if (!isMounted) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-white">Loading...</div>
      </div>
    )
  }

  const handleFetchShop = async () => {
    if (!settings.tiktokCookies) {
      setError('Please configure TikTok cookies in Settings to fetch shop products')
      return
    }

    setIsLoading(true)
    setError(null)

    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      setProducts(demoProducts)
    } catch (e: any) {
      setError(e.message || 'Failed to fetch shop products')
    } finally {
      setIsLoading(false)
    }
  }

  const filteredProducts = searchQuery
    ? products.filter(p => 
        p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        p.sellerName.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : products

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="pt-20 pb-8 px-4">
        <div className="max-w-6xl mx-auto space-y-6">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-white mb-2">TikTok Shop - Vietnam</h2>
            <p className="text-slate-400">Browse trending products with best sales</p>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search products..."
                className="w-full bg-surface border border-slate-600 rounded-lg pl-10 pr-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:border-primary"
              />
            </div>

            <button
              onClick={handleFetchShop}
              disabled={isLoading}
              className="flex items-center gap-2 px-6 py-2.5 bg-primary hover:bg-primary-dark disabled:bg-slate-600 rounded-lg text-white font-medium"
            >
              {isLoading ? <Loader2 className="animate-spin" size={18} /> : <RefreshCw size={18} />}
              {isLoading ? 'Loading...' : 'Refresh'}
            </button>
          </div>

          {error && (
            <div className="bg-red-500/10 border border-red-500 rounded-lg p-4 text-red-400">
              {error}
            </div>
          )}

          {filteredProducts.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredProducts.map((product) => (
                <div
                  key={product.id}
                  className="bg-surface rounded-xl overflow-hidden border border-slate-700 hover:border-primary transition-colors"
                >
                  <div className="relative aspect-square bg-slate-800">
                    <img
                      src={product.thumbnail}
                      alt={product.title}
                      className="w-full h-full object-cover"
                    />
                    {product.discount > 0 && (
                      <div className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
                        -{product.discount}%
                      </div>
                    )}
                  </div>

                  <div className="p-4 space-y-3">
                    <h3 className="text-white font-medium line-clamp-2">{product.title}</h3>

                    <div className="flex items-baseline gap-2">
                      <span className="text-lg font-bold text-red-400">
                        {formatPrice(product.price)}
                      </span>
                      <span className="text-sm text-slate-500 line-through">
                        {formatPrice(product.originalPrice)}
                      </span>
                    </div>

                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-1">
                        <Star className="text-yellow-400" size={14} />
                        <span className="text-white text-sm">{product.rating}</span>
                        <span className="text-slate-500 text-sm">({product.reviewCount})</span>
                      </div>
                      <span className="text-green-400 text-sm font-medium">
                        {formatSold(product.soldCount)} sold
                      </span>
                    </div>

                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">{product.sellerName}</span>
                      <a
                        href={product.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-1 text-primary hover:text-primary-dark"
                      >
                        View <ExternalLink size={14} />
                      </a>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12 text-slate-400">
              <ShoppingCart className="mx-auto mb-4" size={48} />
              <p>No products loaded. Click "Refresh" to fetch trending products.</p>
            </div>
          )}
        </div>
      </main>
    </div>
  )
}