// app/admin/[entity]/page.tsx

import { Header } from "@/components/header"
import { Main } from "@/components/main"
import { ProfileDropdown } from "@/components/profile-dropdown"
import { ThemeSwitch } from "@/components/theme-switch"
import { TableConfig } from "@/config/table"
import { getFieldsByEntity } from "@/services/myfields"
import { EntityForm } from "../../form/entity-form"

export default async function AdminCreatePage({
  params,
}: {
  params: Promise<{ entity: string }>
}) {
  const { entity } = await params

  // Validate the entity to prevent SQL injection or 404s
  const validEntities = ["hotels", "cabs", "foods", "others"]
  if (!validEntities.includes(entity)) {
    return <div>Entity not found</div>
  }

  const staticFields = TableConfig[entity as keyof typeof TableConfig].fields;
  const myfields = await getFieldsByEntity(entity)

  const mergedFields = [...staticFields, ...myfields]

  return (
    <>
      {/* ===== Top Heading ===== */}
      <Header>
        <h2 className="text-lg font-semibold">
          {entity.charAt(0).toUpperCase() + entity.slice(1)}
        </h2>

        <div className="ms-auto flex items-center space-x-4">
          <ThemeSwitch />
          <ProfileDropdown />
        </div>
      </Header>

      {/* ===== Main ===== */}
      <Main className="flex flex-1 flex-col gap-4 sm:gap-6">
        <div className="flex flex-wrap items-end justify-between gap-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">
              Create {entity.charAt(0).toUpperCase() + entity.slice(1)}
            </h2>
            <p className="text-muted-foreground">
              Here&apos;s a fields of your <strong>{entity} </strong>with their
              details and actions you can perform on them.
            </p>
          </div>
        </div>
        <EntityForm entity={entity} fields={mergedFields} />
      </Main>
    </>
  )
}