import { Link } from '@/i18n/navigation'
import Container from '@/components/frontend/Container'
import OfferHeader from '@/components/frontend/offers/OfferHeader'
import OfferCard from '@/components/frontend/offers/OfferCard'
import CategoryOffers from '@/components/frontend/offers/CategoryOffers'
import { getCurrencySettings } from '@/lib/db/queries/getCurrencySettings'
import { formatCurrency } from '@/lib/utils/currency'
import type { CurrencyLike } from '@/lib/utils/currency'

function buildOffers(currency: CurrencyLike) {
  const money = (amount: number) => formatCurrency(amount, currency)
  return [
  {
    id: 1,
    title: 'Buy 1 Get 1 Free',
    description: 'On all fresh vegetables. Limited time offer!',
    discount: 'BOGO',
    validUntil: 'May 31, 2026',
    image: '🥬',
    link: '/category/vegetables',
    type: 'category' as const,
  },
  {
    id: 2,
    title: '20% Off on Meat',
    description: `On orders above ${money(1500)}. Use code MEAT20`,
    discount: '20% OFF',
    code: 'MEAT20',
    validUntil: 'May 25, 2026',
    image: '🍗',
    link: '/category/meat',
    type: 'coupon' as const,
  },
  {
    id: 3,
    title: 'Free Delivery',
    description: `On all orders above ${money(1000)}`,
    discount: 'FREE',
    validUntil: 'Ongoing',
    image: '🚚',
    link: '/',
    type: 'product' as const,
  },
  {
    id: 4,
    title: 'New User Offer',
    description: `Get ${money(100)} off on first order`,
    discount: `${money(100)} OFF`,
    code: 'NEW100',
    validUntil: 'June 30, 2026',
    image: '🎁',
    link: '/',
    type: 'coupon' as const,
  },
  ]
}

export const metadata = {
  title: 'Offers & Deals - DesiCart.pk',
  description: 'Best offers, discounts and deals on fresh groceries. Save money on your daily shopping.',
}

export default async function OffersPage() {
  const currency = await getCurrencySettings()
  const offers = buildOffers(currency)
  return (
    <>
      <OfferHeader
        title="Exclusive Offers"
        subtitle="Great savings on your favorite products"
        description="Don't miss out on these amazing deals! Limited time offers available."
        icon="gift"
        badgeText="Limited Time"
      />
      
      <Container className="py-8">
        {/* Category Offers */}
        <div className="mb-12">
          <h2 className="text-xl font-bold text-dark mb-4">Shop by Category & Save</h2>
          <CategoryOffers />
        </div>

        {/* All Offers */}
        <div>
          <h2 className="text-xl font-bold text-dark mb-4">All Active Offers</h2>
          <div className="space-y-4">
            {offers.map((offer) => (
              <OfferCard key={offer.id} {...offer} />
            ))}
          </div>
        </div>

        {/* Referral Banner */}
        <div className="mt-8 bg-gradient-primary rounded-xl p-6 text-white text-center">
          <h3 className="text-xl font-bold mb-2">Invite Friends & Earn Rewards!</h3>
          <p className="text-white/90 mb-4">Get commission on every order your referrals make</p>
          <Link
            href="/referral"
            className="inline-block bg-white text-primary px-6 py-2 rounded-lg font-semibold hover:shadow-md transition"
          >
            Learn More →
          </Link>
        </div>
      </Container>
    </>
  )
}