"use client"

import { SubscriptionManagement } from "@/components/billingsdk/subscription-management"
import { type CurrentPlan, plans } from "@/lib/billingsdk-config"

export default function Page() {
  const currentPlan: CurrentPlan = {
    plan: plans[1],
    type: "monthly",
    price: "$20",
    nextBillingDate: "January 15, 2025",
    paymentMethod: "Visa ending in 4242",
    status: "active"
  }

  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <SubscriptionManagement
        className="max-w-2xl w-full"
        currentPlan={currentPlan}
        updatePlan={{
          currentPlan: currentPlan.plan,
          plans: plans,
          onPlanChange: (planId) => console.log("Plan changed to:", planId),
          triggerText: "Update Plan"
        }}
        cancelSubscription={{
          title: "Cancel Subscription",
          description: "Are you sure you want to cancel your subscription?",
          leftPanelImageUrl: "https://images.unsplash.com/photo-1557683316-973673baf926?w=400&q=80",
          plan: currentPlan.plan,
          warningTitle: "You will lose access to Pro features",
          warningText: "If you cancel your subscription, you will be downgraded to the Starter plan at the end of your billing period.",
          onCancel: async (planId) => {
            console.log("Cancelling subscription:", planId)
            return new Promise((resolve) => setTimeout(resolve, 1000))
          },
          onKeepSubscription: async (planId) => console.log("Keeping subscription:", planId)
        }}
      />
    </div>
  )
}

"use client"

import { InvoiceHistory, type InvoiceItem } from "@/components/billingsdk/invoice-history"

const demoInvoices: InvoiceItem[] = [
  {
    id: "INV-001",
    date: "Dec 1, 2024",
    amount: "$20.00",
    status: "paid",
    description: "Pro Plan - Monthly Subscription",
    invoiceUrl: "#"
  },
  {
    id: "INV-002",
    date: "Nov 1, 2024",
    amount: "$20.00",
    status: "paid",
    description: "Pro Plan - Monthly Subscription",
    invoiceUrl: "#"
  },
  {
    id: "INV-003",
    date: "Oct 1, 2024",
    amount: "$20.00",
    status: "paid",
    description: "Pro Plan - Monthly Subscription",
    invoiceUrl: "#"
  },
  {
    id: "INV-004",
    date: "Sep 1, 2024",
    amount: "$15.00",
    status: "refunded",
    description: "Starter Plan - Partial Refund",
    invoiceUrl: "#"
  },
  {
    id: "INV-005",
    date: "Aug 1, 2024",
    amount: "$10.00",
    status: "void",
    description: "Starter Plan - Cancelled",
    invoiceUrl: "#"
  }
]

export default function Page() {
  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <InvoiceHistory
        className="max-w-4xl w-full"
        title="Invoice History"
        description="Your past invoices and payment receipts."
        invoices={demoInvoices}
        onDownload={(invoiceId) => console.log("Downloading invoice:", invoiceId)}
      />
    </div>
  )
}

"use client"

import { UsageTable, type UsageItem } from "@/components/billingsdk/usage-table"

const demoUsageHistory: UsageItem[] = [
  {
    model: "Claude 3.5 Sonnet",
    inputWithCache: 125000,
    inputWithoutCache: 45000,
    cacheRead: 80000,
    output: 32000,
    totalTokens: 282000,
    apiCost: 4.23,
    costToYou: 3.38
  },
  {
    model: "Claude 3 Opus",
    inputWithCache: 50000,
    inputWithoutCache: 25000,
    cacheRead: 25000,
    output: 15000,
    totalTokens: 115000,
    apiCost: 8.62,
    costToYou: 6.90
  },
  {
    model: "Claude 3 Haiku",
    inputWithCache: 500000,
    inputWithoutCache: 150000,
    cacheRead: 350000,
    output: 100000,
    totalTokens: 1100000,
    apiCost: 0.55,
    costToYou: 0.44
  },
  {
    model: "GPT-4 Turbo",
    inputWithCache: 75000,
    inputWithoutCache: 30000,
    cacheRead: 45000,
    output: 20000,
    totalTokens: 170000,
    apiCost: 2.55,
    costToYou: 2.04
  }
]

export default function Page() {
  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <UsageTable
        className="max-w-5xl w-full"
        title="Usage Summary"
        description="Token usage breakdown by model for the current billing period."
        usageHistory={demoUsageHistory}
        showTotal={true}
      />
    </div>
  )
}