import { Button } from "@cms/ui/button"

type MenuOption = {
  id: string
  name: string
  location: string
}

type PageOption = {
  id: string
  title: string
  slug: string
}

type CreateNavigationItemFormProps = {
  action: (formData: FormData) => void | Promise<void>
  menus: MenuOption[]
  pages: PageOption[]
}

export function CreateNavigationItemForm({ action, menus, pages }: CreateNavigationItemFormProps) {
  return (
    <form action={action} className="mt-4 space-y-3">
      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Menu</span>
        <select
          name="menuId"
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        >
          {menus.map((menu) => (
            <option key={menu.id} value={menu.id}>
              {menu.name} ({menu.location})
            </option>
          ))}
        </select>
      </label>
      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Label</span>
        <input
          name="label"
          required
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>
      <div className="grid gap-3 md:grid-cols-2">
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">Custom href</span>
          <input
            name="href"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">Linked page</span>
          <select
            name="pageId"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          >
            <option value="">(none)</option>
            {pages.map((page) => (
              <option key={page.id} value={page.id}>
                {page.title} (/{page.slug})
              </option>
            ))}
          </select>
        </label>
      </div>
      <div className="grid gap-3 md:grid-cols-2">
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">Parent item id</span>
          <input
            name="parentId"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">Sort order</span>
          <input
            name="sortOrder"
            defaultValue="0"
            type="number"
            min={0}
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
      </div>
      <label className="inline-flex items-center gap-2 text-sm text-neutral-700">
        <input name="isVisible" type="checkbox" value="true" defaultChecked className="size-4" />
        Visible
      </label>
      <Button type="submit">Create item</Button>
    </form>
  )
}