import React, { useState, useCallback } from 'react'
import Breadcrumbs from '../../components/forum/Breadcrumbs'
import PostCard from '../../components/forum/PostCard'
import ReplyForm from '../../components/forum/ReplyForm'
import Pagination from '../../components/forum/Pagination'
import SeoHead from '../../components/seo/SeoHead'

export default function ForumThread({
  thread,
  category,
  forumCategory,
  author,
  opPost,
  posts = [],
  pagination = {},
  replyCount = 0,
  sort = 'asc',
  quotedPost = null,
  replyPrefill = '',
  isAuthenticated = false,
  canModerate = false,
  csrfToken = '',
  status = null,
  captcha = {},
  seo = {},
}) {
  const [currentSort, setCurrentSort] = useState(sort)

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    ...(forumCategory?.name ? [{ label: forumCategory.name }] : []),
    { label: category?.name ?? 'Board', href: category?.slug ? `/forum/${category.slug}` : '/forum' },
    { label: thread?.title ?? 'Thread' },
  ]

  const handleSortToggle = useCallback(() => {
    const newSort = currentSort === 'asc' ? 'desc' : 'asc'
    setCurrentSort(newSort)
    const url = new URL(window.location.href)
    url.searchParams.set('sort', newSort)
    window.location.href = url.toString()
  }, [currentSort])

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

      {/* Status flash */}
      {status && (
        <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-300">
          {status}
        </div>
      )}

      {/* Thread header card */}
      <section className="rounded-2xl border border-white/[0.06] bg-nova-800/50 p-5 backdrop-blur">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            <h1 className="text-2xl font-bold text-white leading-snug">{thread?.title}</h1>
            {thread?.description ? (
              <p className="mt-3 max-w-3xl text-sm leading-6 text-zinc-300 sm:text-[15px]">
                {thread.description}
              </p>
            ) : null}
            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-zinc-500">
              <span>By {author?.name ?? 'Unknown'}</span>
              <span className="text-zinc-700">•</span>
              {thread?.created_at && (
                <time dateTime={thread.created_at}>{formatDate(thread.created_at)}</time>
              )}
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2 text-xs">
            <span className="rounded-full bg-sky-500/15 px-2.5 py-1 text-sky-300">
              {number(thread?.views ?? 0)} views
            </span>
            <span className="rounded-full bg-cyan-500/15 px-2.5 py-1 text-cyan-300">
              {number(replyCount)} replies
            </span>
            {thread?.is_pinned && (
              <span className="rounded-full bg-amber-500/15 px-2.5 py-1 text-amber-300">Pinned</span>
            )}
            {thread?.is_locked && (
              <span className="rounded-full bg-red-500/15 px-2.5 py-1 text-red-300">Locked</span>
            )}
          </div>
        </div>

        {/* Moderation tools */}
        {canModerate && (
          <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-white/[0.06] pt-3">
            {thread?.is_locked ? (
              <ModForm action={`/forum/topic/${thread.slug}/unlock`} csrf={csrfToken} label="Unlock" variant="danger" />
            ) : (
              <ModForm action={`/forum/topic/${thread.slug}/lock`} csrf={csrfToken} label="Lock" variant="danger" />
            )}
            {thread?.is_pinned ? (
              <ModForm action={`/forum/topic/${thread.slug}/unpin`} csrf={csrfToken} label="Unpin" variant="warning" />
            ) : (
              <ModForm action={`/forum/topic/${thread.slug}/pin`} csrf={csrfToken} label="Pin" variant="warning" />
            )}
          </div>
        )}
      </section>

      {/* Sort toggle + reply count */}
      <div className="flex items-center justify-between">
        <p className="text-xs text-zinc-500">{number(replyCount)} {replyCount === 1 ? 'reply' : 'replies'}</p>
        <button
          onClick={handleSortToggle}
          className="flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-200"
        >
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points={currentSort === 'asc' ? '18 15 12 21 6 15' : '18 9 12 3 6 9'} />
            <line x1="12" y1="3" x2="12" y2="21" />
          </svg>
          {currentSort === 'asc' ? 'Oldest first' : 'Newest first'}
        </button>
      </div>

      {/* OP Post */}
      {opPost && (
        <PostCard
          post={opPost}
          thread={thread}
          isOp
          isAuthenticated={isAuthenticated}
          canModerate={canModerate}
        />
      )}

      {/* Reply list */}
      <section className="space-y-4" aria-label="Replies">
        {posts.length === 0 ? (
          <div className="rounded-2xl border border-white/[0.06] bg-nova-800/40 px-5 py-8 text-center text-zinc-500 text-sm">
            No replies yet. Be the first to respond!
          </div>
        ) : (
          posts.map((post) => (
            <PostCard
              key={post.id}
              post={post}
              thread={thread}
              isAuthenticated={isAuthenticated}
              canModerate={canModerate}
            />
          ))
        )}
      </section>

      {/* Pagination */}
      {pagination?.last_page > 1 && (
        <div className="sticky bottom-3 z-10 rounded-xl border border-white/[0.06] bg-nova-800/80 p-2 backdrop-blur">
          <Pagination meta={pagination} />
        </div>
      )}

      {/* Reply form or locked / auth prompt */}
      {isAuthenticated ? (
        thread?.is_locked ? (
          <div className="rounded-2xl border border-red-500/20 bg-red-500/5 px-5 py-4 text-sm text-red-300">
            This thread is locked. Replies are disabled.
          </div>
        ) : (
          <ReplyForm
            topicKey={thread?.slug ?? thread?.id}
            prefill={replyPrefill}
            quotedAuthor={quotedPost?.user?.name}
            csrfToken={csrfToken}
            captcha={captcha}
          />
        )
      ) : (
        <div className="rounded-2xl border border-white/[0.06] bg-nova-800/40 px-5 py-5 text-sm text-zinc-400">
          <a href="/login" className="text-sky-300 hover:text-sky-200 font-medium">Sign in</a> to post a reply.
        </div>
      )}
    </div>
    </>
  )
}

function ModForm({ action, csrf, label, variant }) {
  const colors = variant === 'danger'
    ? 'bg-red-500/15 text-red-300 hover:bg-red-500/25 border-red-500/20'
    : 'bg-amber-500/15 text-amber-300 hover:bg-amber-500/25 border-amber-500/20'

  return (
    <form method="POST" action={action}>
      <input type="hidden" name="_token" value={csrf} />
      <button type="submit" className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${colors}`}>
        {label}
      </button>
    </form>
  )
}

function number(n) {
  return (n ?? 0).toLocaleString()
}

function formatDate(dateStr) {
  try {
    const d = new Date(dateStr)
    return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })
      + ' ' + d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
  } catch {
    return ''
  }
}