"use client"

import dynamic from "next/dynamic"

import { AppShell } from "@/components/app-shell"
import { SiteHeader } from "@/components/site-header"
import type { TicketFiltersState } from "@/components/tickets/tickets-filters"

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 }
)

type TicketsPageClientProps = {
  initialFilters?: Partial<TicketFiltersState>
}

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