import React, { useState, useCallback } from 'react'
import Breadcrumbs from '../../components/forum/Breadcrumbs'
import Button from '../../components/ui/Button'
import RichTextEditor from '../../components/forum/RichTextEditor'
import TurnstileField from '../../components/security/TurnstileField'
import { populateBotFingerprint } from '../../lib/security/botFingerprint'

export default function ForumEditPost({ post, thread, csrfToken, errors = {}, captcha = {} }) {
  const [content, setContent] = useState(post?.content ?? '')
  const [captchaToken, setCaptchaToken] = useState('')
  const [submitting, setSubmitting] = useState(false)

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    { label: thread?.title ?? 'Topic', href: thread?.slug ? `/forum/topic/${thread.slug}` : '/forum' },
    { label: 'Edit post' },
  ]

  const handleSubmit = useCallback((e) => {
    if (submitting) return
    setSubmitting(true)
    // Let the form submit normally for PRG
    populateBotFingerprint(e.currentTarget).finally(() => {
      e.currentTarget.submit()
    })
    e.preventDefault()
  }, [submitting])

  return (
    <div className="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-3xl mx-auto">
      <Breadcrumbs items={breadcrumbs} />

      {/* Header */}
      <div className="mt-5 mb-6">
        <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Edit</p>
        <h1 className="text-2xl font-bold text-white leading-tight">Edit post</h1>
      </div>

      {/* Form */}
      <form
        method="POST"
        action={`/forum/post/${post?.id}`}
        onSubmit={handleSubmit}
        className="space-y-5 rounded-2xl border border-white/[0.06] bg-nova-800/50 p-6 backdrop-blur"
      >
        <input type="hidden" name="_token" value={csrfToken} />
        <input type="hidden" name="_method" value="PUT" />
        <input type="text" name="homepage_url" defaultValue="" autoComplete="off" className="hidden" aria-hidden="true" tabIndex={-1} />
        <input type="hidden" name="_bot_fingerprint" value="" />
        <input type="hidden" name={captcha.inputName || 'cf-turnstile-response'} value={captchaToken} />

        {errors.bot ? (
          <div className="rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">
            {Array.isArray(errors.bot) ? errors.bot[0] : errors.bot}
          </div>
        ) : null}
        {errors.captcha ? (
          <div className="rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
            {Array.isArray(errors.captcha) ? errors.captcha[0] : errors.captcha}
          </div>
        ) : null}

        {/* Rich text editor */}
        <div>
          <label className="mb-1.5 block text-sm font-medium text-white/85">
            Content
          </label>
          <RichTextEditor
            content={content}
            onChange={setContent}
            placeholder="Edit your post…"
            error={errors.content}
            minHeight={14}
            autofocus={false}
          />
          <input type="hidden" name="content" value={content} />
        </div>

        {captcha.siteKey ? (
          <TurnstileField
            provider={captcha.provider}
            siteKey={captcha.siteKey}
            scriptUrl={captcha.scriptUrl}
            onToken={setCaptchaToken}
            className="rounded-lg border border-white/10 bg-black/20 p-3"
          />
        ) : null}

        {/* Actions */}
        <div className="flex items-center justify-between pt-2">
          <a
            href={thread?.slug ? `/forum/topic/${thread.slug}` : '/forum'}
            className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors"
          >
            ← Cancel
          </a>
          <Button type="submit" variant="primary" size="md" loading={submitting}>
            Save changes
          </Button>
        </div>
      </form>
    </div>
  )
}