"use client"

import { Inbox } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { TransactionalEmailsTable } from "@/components/emails/components/transactional-emails-table"
import { useTransactionalEmails } from "@/components/emails/hooks/use-transactional-emails"
import { ErrorBanner } from "@/components/shared/error-banner"
import type { TransactionalEmail } from "@/components/emails/types"

type TransactionalEmailsPageProps = {
  initialData?: TransactionalEmail[]
  initialTotalCount?: number
  initialErrorMessage?: string | null
}

export function TransactionalEmailsPage({
  initialData = [],
  initialTotalCount = 0,
  initialErrorMessage = null,
}: TransactionalEmailsPageProps) {
  const {
    data,
    totalCount,
    isLoading,
    isRefreshing,
    refresh,
    removeLocal,
    updateLocal,
  } = useTransactionalEmails({
    initialData,
    initialTotalCount,
    initialErrorMessage,
  })

  return (
    <ListPageCard
      icon={Inbox}
      title="Transactional emails"
      description="Browse sent and unsent transactional emails with resend, view, and delete actions."
      breadcrumb={[
        { label: "Transactional emails", href: "/dashboard/emails" },
        { label: "View all" },
      ]}
    >
      <ErrorBanner message={initialErrorMessage} className="mb-4" />
      <TransactionalEmailsTable
        data={data}
        totalCount={totalCount}
        isLoading={isLoading}
        isRefreshing={isRefreshing}
        onRefresh={() => void refresh()}
        onDelete={removeLocal}
        onResend={(id, patch) => updateLocal(id, patch)}
      />
    </ListPageCard>
  )
}