import { defineRouteConfig } from "@medusajs/admin-sdk"
import { Container, Heading, Button, Input, Label, Textarea } from "@medusajs/ui"
import { useState } from "react"
import { useMutation } from "@tanstack/react-query"
import { useNavigate } from "react-router-dom"
import { sdk } from "../../../../lib/sdk"
import { CmsLanguageDropdown } from "../../../../components/CmsLanguageDropdown"
function slugify(t: string): string {
  return t.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "")
}

export const config = defineRouteConfig({})

export default function NewPage() {
  const navigate = useNavigate()
  const [title, setTitle] = useState("")
  const [slug, setSlug] = useState("")
  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
  const [description, setDescription] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [successMessage, setSuccessMessage] = useState<string | null>(null)

  const create = useMutation({
    mutationFn: async () => {
      setError(null)
      if (!title?.trim()) {
        throw new Error("Title is required.")
      }
      const slugToUse = (slugManuallyEdited ? slug : slugify(title)).trim() || slugify(title)
      if (!slugToUse) throw new Error("Slug is required.")
      const r = await sdk.fetch("/admin/pages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          slug: slugToUse,
          title: title.trim(),
          description: description || null,
          status: "draft",
        }),
      })
      const text = await r.text()
      if (!r.ok) {
        let msg = text
        try { const j = JSON.parse(text); if (j.message) msg = j.message } catch { /* ignore */ }
        throw new Error(msg)
      }
      return JSON.parse(text) as { page: { id: string } }
    },
    onSuccess: (d) => {
      setSuccessMessage("Page created successfully.")
      setTimeout(() => navigate(`/page-builder/pages/edit?id=${encodeURIComponent(d.page.id)}`), 1500)
    },
    onError: (e: Error) => setError(e.message),
  })

  return (
    <Container className="px-3 sm:px-4">
      <CmsLanguageDropdown />
      <Heading level="h1" className="mb-4 sm:mb-6 text-xl sm:text-2xl">New Page</Heading>
      <div className="flex flex-col gap-4 w-full max-w-md">
        {successMessage && <div className="p-3 rounded bg-green-100 text-green-800 text-sm">{successMessage}</div>}
        {error && <div className="p-3 rounded bg-red-100 text-red-800 text-sm">{error}</div>}
        <div className="min-w-0">
          <Label>Title *</Label>
          <Input value={title} onChange={(e) => { const v = e.target.value; setTitle(v); if (!slugManuallyEdited) setSlug(slugify(v)); }} placeholder="Required" className="w-full" />
        </div>
        <div className="min-w-0">
          <Label>Slug *</Label>
          <Input value={slug} onChange={(e) => { setSlug(e.target.value.replace(/\s/g, "-").toLowerCase()); setSlugManuallyEdited(true); }} placeholder="Auto-generated from title" className="w-full" />
        </div>
        <div className="min-w-0">
          <Label>Description</Label>
          <Textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows={4}
            placeholder="Enter page description"
            className="w-full"
          />
        </div>
        <div className="flex flex-col sm:flex-row gap-2">
          <Button onClick={() => create.mutate()} disabled={create.isPending} className="w-full sm:w-auto">Create</Button>
          <Button variant="secondary" onClick={() => navigate("/page-builder")} className="w-full sm:w-auto">Cancel</Button>
        </div>
      </div>
    </Container>
  )
}