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

export default function ForumNewThread({ category, csrfToken, errors = {}, oldValues = {}, captcha = {}, seo = {} }) {
  const [title, setTitle]     = useState(oldValues.title ?? '')
  const [content, setContent] = useState(oldValues.content ?? '')
  const [captchaToken, setCaptchaToken] = useState('')
  const [submitting, setSubmitting] = useState(false)

  const slug = category?.slug
  const categoryName = category?.name ?? 'Category'

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    { label: categoryName, href: slug ? `/forum/${slug}` : '/forum' },
    { label: 'New topic' },
  ]

  const handleSubmit = useCallback(async (e) => {
    e.preventDefault()
    if (submitting) return
    setSubmitting(true)

    // Standard form submission to keep server-side validation + redirect
    await populateBotFingerprint(e.currentTarget)
    e.target.submit()
  }, [submitting])

  return (
    <>
      <SeoHead seo={seo} />
      <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">New topic</p>
        <h1 className="text-2xl font-bold text-white leading-tight">
          Create topic in {categoryName}
        </h1>
      </div>

      {/* Form */}
      <form
        method="POST"
        action={`/forum/${slug}/new`}
        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="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}

        <TextInput
          label="Title"
          name="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
          maxLength={255}
          placeholder="Thread title…"
          error={errors.title}
        />

        {/* Rich text editor */}
        <div>
          <label className="mb-1.5 block text-sm font-medium text-white/85">
            Content <span className="text-red-400 ml-1">*</span>
          </label>
          <RichTextEditor
            content={content}
            onChange={setContent}
            placeholder="Write 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}

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