"use client"

import dynamic from "next/dynamic"

import { AppShell } from "@/components/app-shell"
import { SiteHeader } from "@/components/site-header"

const TicketQueueSummaryCards = dynamic(
  () =>
    import("@/components/tickets/ticket-queue-summary").then((module) => ({
      default: module.TicketQueueSummaryCards,
    })),
  { ssr: false }
)

const TicketsView = dynamic(
  () =>
    import("@/components/tickets/tickets-view").then((module) => ({
      default: module.TicketsView,
    })),
  { ssr: false }
)

const NewTicketDialog = dynamic(
  () =>
    import("@/components/tickets/new-ticket-dialog").then((module) => ({
      default: module.NewTicketDialog,
    })),
  { ssr: false }
)

export function TicketsPageClient() {
  return (
    <AppShell
      header={
        <SiteHeader
          title="Tickets"
          lead="Visão consolidada de filas e SLAs"
          secondaryAction={<SiteHeader.SecondaryButton>Exportar CSV</SiteHeader.SecondaryButton>}
          primaryAction={<NewTicketDialog />}
        />
      }
    >
      <div className="flex flex-col gap-6">
        <div className="px-4 lg:px-6">
          <TicketQueueSummaryCards />
        </div>
        <TicketsView />
      </div>
    </AppShell>
  )
}