'use client'

import { useEffect, useState } from 'react'
import { Modal } from '../../components/ui/Modal.js'
import { Button } from '../../components/ui/Button.js'
import { MediaPickerModal } from '../../components/MediaPickerModal.js'
import { RichTextField } from '../../fields/RichTextField.js'
import type { EditorPost } from '../../lib/post-editor-service.js'

interface PostFieldsModalProps {
  open: boolean
  post: EditorPost
  canEdit: boolean
  onClose: () => void
  onSave: (patch: Partial<EditorPost>) => void
}

const LABEL = 'text-foreground mb-1 block text-xs font-medium'
const INPUT =
  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'

function slugify(value: string): string {
  return value
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
}

/** Edits post-level fields: title, slug, excerpt, featured image, category, body, SEO. */
export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFieldsModalProps) {
  const [title, setTitle] = useState(post.title)
  const [slug, setSlug] = useState(post.slug)
  const [excerpt, setExcerpt] = useState(post.excerpt)
  const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
  const [category, setCategory] = useState(post.category)
  const [body, setBody] = useState(post.body)
  const [seoTitle, setSeoTitle] = useState(post.seoTitle)
  const [seoDescription, setSeoDescription] = useState(post.seoDescription)
  const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
  const [mediaOpen, setMediaOpen] = useState(false)

  useEffect(() => {
    if (!open) return
    setTitle(post.title)
    setSlug(post.slug)
    setExcerpt(post.excerpt)
    setFeaturedImage(post.featuredImage)
    setCategory(post.category)
    setBody(post.body)
    setSeoTitle(post.seoTitle)
    setSeoDescription(post.seoDescription)
    setSlugTouched(Boolean(post.slug))
  }, [open, post])

  function handleTitle(next: string) {
    setTitle(next)
    if (!slugTouched) setSlug(slugify(next))
  }

  function handleSave() {
    onSave({ title, slug, excerpt, featuredImage, category, body, seoTitle, seoDescription })
    onClose()
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Post details"
      actions={
        <>
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSave} disabled={!canEdit}>
            Done
          </Button>
        </>
      }
    >
      <div className="space-y-3">
        <div>
          <label className={LABEL} htmlFor="pf-title">
            Title <span className="text-destructive">*</span>
          </label>
          <input
            id="pf-title"
            className={INPUT}
            value={title}
            disabled={!canEdit}
            onChange={(e) => handleTitle(e.target.value)}
          />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className={LABEL} htmlFor="pf-slug">
              Slug <span className="text-destructive">*</span>
            </label>
            <input
              id="pf-slug"
              className={INPUT}
              value={slug}
              disabled={!canEdit}
              onChange={(e) => {
                setSlugTouched(true)
                setSlug(slugify(e.target.value))
              }}
            />
          </div>
          <div>
            <label className={LABEL} htmlFor="pf-category">
              Category
            </label>
            <input
              id="pf-category"
              className={INPUT}
              value={category}
              disabled={!canEdit}
              placeholder="e.g. Product"
              onChange={(e) => setCategory(e.target.value)}
            />
          </div>
        </div>
        <div>
          <label className={LABEL} htmlFor="pf-excerpt">
            Excerpt
          </label>
          <textarea
            id="pf-excerpt"
            className={`${INPUT} min-h-[60px] resize-y`}
            value={excerpt}
            disabled={!canEdit}
            placeholder="A short summary shown in listings and the header."
            onChange={(e) => setExcerpt(e.target.value)}
          />
        </div>
        <div>
          <label className={LABEL} htmlFor="pf-image">
            Featured image
          </label>
          <div className="flex gap-2">
            <input
              id="pf-image"
              className={`${INPUT} flex-1`}
              value={featuredImage}
              disabled={!canEdit}
              placeholder="https://… or pick from the media library"
              onChange={(e) => setFeaturedImage(e.target.value)}
            />
            <button
              type="button"
              disabled={!canEdit}
              onClick={() => setMediaOpen(true)}
              className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
            >
              Browse
            </button>
          </div>
          {featuredImage && (
            <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
              <img src={featuredImage} alt="" className="h-28 w-full object-cover" />
            </div>
          )}
        </div>
        <div>
          <RichTextField
            label="Body"
            value={body}
            onChange={canEdit ? setBody : () => {}}
            helpText="Rendered by the Article Body section when its source is set to the post Body field."
          />
        </div>
        <div>
          <label className={LABEL} htmlFor="pf-seo-title">
            SEO title
          </label>
          <input
            id="pf-seo-title"
            className={INPUT}
            value={seoTitle}
            disabled={!canEdit}
            onChange={(e) => setSeoTitle(e.target.value)}
          />
        </div>
        <div>
          <label className={LABEL} htmlFor="pf-seo-desc">
            SEO description
          </label>
          <textarea
            id="pf-seo-desc"
            className={`${INPUT} min-h-[60px] resize-y`}
            value={seoDescription}
            disabled={!canEdit}
            onChange={(e) => setSeoDescription(e.target.value)}
          />
        </div>
      </div>

      <MediaPickerModal
        open={mediaOpen}
        onClose={() => setMediaOpen(false)}
        onSelect={(url) => {
          setFeaturedImage(url)
          setMediaOpen(false)
        }}
        accept="image/*"
      />
    </Modal>
  )
}
