export const dynamic = "force-dynamic"

import Link from "next/link"
import { getProdutos } from "@/lib/actions"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { appConfig } from "@/lib/config"

export const metadata = {
  title: "Produtos",
}

export default async function ComprarPage() {
  const produtos = await getProdutos()

  return (
    <div className="container mx-auto py-12 px-4 max-w-5xl">
      <div className="text-center mb-10">
        <h1 className="text-4xl font-bold mb-3">Produtos</h1>
        <p className="text-lg text-muted-foreground">
          Escolha o produto e conclua sua compra em poucos minutos.
        </p>
      </div>

      {produtos.length === 0 ? (
        <div className="text-center py-20 text-muted-foreground">
          Nenhum produto disponível no momento.
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {produtos.map((p) => (
            <Card key={p.id} className="flex flex-col hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-lg">{p.nome}</CardTitle>
                {p.descricao && (
                  <p className="text-sm text-muted-foreground">{p.descricao}</p>
                )}
              </CardHeader>
              <CardContent className="flex-1 space-y-1">
                <p className="text-3xl font-bold text-primary">
                  {(p.preco_centavos / 100).toLocaleString("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  })}
                </p>
                {p.validade && (
                  <p className="text-sm text-muted-foreground">Validade: {p.validade}</p>
                )}
              </CardContent>
              <CardFooter>
                <Button asChild className="w-full">
                  <Link href={`/produtos/${p.id}`}>Comprar agora</Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      )}

      {appConfig.supportWhatsapp && (
        <p className="text-center mt-12 text-sm text-muted-foreground">
          Dúvidas?{" "}
          <a
            href={`https://wa.me/${appConfig.supportWhatsapp}`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary underline"
          >
            Fale conosco no WhatsApp
          </a>
        </p>
      )}
    </div>
  )
}