import { useState } from "react"

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { NewsletterStats } from "@/components/newsletter/NewsletterStats"
import { RecommendationTable } from "@/components/newsletter/RecommendationTable"
import { CampaignHistoryDialog } from "@/components/newsletter/CampaignHistoryDialog"

const CATEGORIES = [
  { value: "all", label: "All Recommendations" },
  { value: "new", label: "New Products" },
  { value: "preorder", label: "Pre-Orders" },
  { value: "bestsellers", label: "Bestsellers" },
  { value: "back_in_stock", label: "Back in Stock" },
  { value: "clearance", label: "Clearance" },
  { value: "daily_deals", label: "Daily Deals" },
  { value: "never_featured", label: "Never Featured" },
  { value: "no_interest", label: "No Interest" },
]

export function Newsletter() {
  const [category, setCategory] = useState("all")

  return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Newsletter Recommendations</h2>
        <CampaignHistoryDialog />
      </div>

      <NewsletterStats />

      <Tabs value={category} onValueChange={setCategory}>
        <TabsList>
          {CATEGORIES.map((c) => (
            <TabsTrigger key={c.value} value={c.value}>
              {c.label}
            </TabsTrigger>
          ))}
        </TabsList>

        {CATEGORIES.map((c) => (
          <TabsContent key={c.value} value={c.value}>
            <RecommendationTable category={c.value} />
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}

export default Newsletter
