"use client"

import Link from "next/link"
import { ChevronLeft, ExternalLink, Calendar, Target } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { BottomNav } from "@/components/bottom-nav"
import useSWR from "swr"
import { formatDistanceToNow } from "date-fns"
import { fr } from "date-fns/locale"

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

export default function PromotionsPage() {
  const { data } = useSWR("/api/promotions", fetcher)
  const promotions = data?.promotions || []

  return (
    <div className="min-h-screen bg-background pb-24">
      <div className="mx-auto max-w-2xl px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex items-center gap-4">
          <Link href="/settings" className="text-foreground hover:text-primary">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <div>
            <h1 className="text-xl font-bold text-foreground">Promotions</h1>
            <p className="text-sm text-muted-foreground">Découvrez nos offres et nouveautés</p>
          </div>
        </div>

        {/* Promotions List */}
        <div className="space-y-4">
          {promotions.length > 0 ? (
            promotions.map((promo: any) => (
              <div key={promo.id} className="rounded-xl border border-secondary/50 overflow-hidden bg-secondary/30">
                {promo.image_url && (
                  <img
                    src={promo.image_url || "/placeholder.svg"}
                    alt={promo.title}
                    className="w-full h-48 object-cover"
                  />
                )}
                <div className="p-4">
                  <div className="flex items-start justify-between mb-2">
                    <h3 className="font-bold text-foreground text-lg">{promo.title}</h3>
                    <Badge className="bg-purple-500 text-white border-0">{promo.target_type || "Tous"}</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground mb-4">{promo.description}</p>

                  <div className="flex items-center gap-4 text-xs text-muted-foreground mb-4">
                    {promo.start_date && (
                      <div className="flex items-center gap-1">
                        <Calendar className="w-3 h-3" />
                        <span>
                          {formatDistanceToNow(new Date(promo.start_date), {
                            addSuffix: true,
                            locale: fr,
                          })}
                        </span>
                      </div>
                    )}
                    <div className="flex items-center gap-1">
                      <Target className="w-3 h-3" />
                      <span>{promo.impressions || 0} vues</span>
                    </div>
                  </div>

                  {promo.action_url && (
                    <Link href={promo.action_url}>
                      <Button className="w-full bg-purple-600 hover:bg-purple-700">
                        En savoir plus
                        <ExternalLink className="w-4 h-4 ml-2" />
                      </Button>
                    </Link>
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className="text-center py-12">
              <Target className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="text-lg font-semibold text-foreground mb-2">Aucune promotion</h3>
              <p className="text-sm text-muted-foreground">Revenez plus tard pour découvrir nos offres</p>
            </div>
          )}
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
