falah-mobile/src/app/forum/[threadId]/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useAuth } from '@/lib/AuthContext'
import { ArrowLeft, ShieldCheck, ShieldAlert, Send, MessageCircle } from 'lucide-react'

interface Thread {
  id: string
  title: string
  content: string
  author: { id: string; name: string }
  category: { id: string; name: string }
  shariahStatus: string
  shariahFlags: string | null
  pinned: boolean
  createdAt: string
}

interface Post {
  id: string
  content: string
  author: { id: string; name: string }
  shariahStatus: string
  shariahFlags: string | null
  createdAt: string
}

export default function ThreadDetailPage() {
  const { threadId } = useParams<{ threadId: string }>()
  const router = useRouter()
  const { token, user } = useAuth()
  const [thread, setThread] = useState<Thread | null>(null)
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [reply, setReply] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [replyError, setReplyError] = useState<string | null>(null)

  useEffect(() => {
    if (!threadId) return
    setLoading(true)
    Promise.all([
      fetch(`/api/forum/threads?id=${threadId}`).then(r => r.json()),
      fetch(`/api/forum/posts?threadId=${threadId}`).then(r => r.json()),
    ])
      .then(([threadData, postsData]) => {
        const t = threadData.threads?.[0] || threadData.thread
        if (!t) { setError('Thread not found'); return }
        setThread(t)
        setPosts(postsData.posts || [])
      })
      .catch(() => setError('Failed to load thread'))
      .finally(() => setLoading(false))
  }, [threadId])

  const handleReply = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!token || !reply.trim()) return
    setSubmitting(true)
    setReplyError(null)
    const res = await fetch('/api/forum/posts', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
      body: JSON.stringify({ threadId, content: reply.trim() }),
    })
    const data = await res.json()
    setSubmitting(false)
    if (!res.ok) { setReplyError(data.error || 'Failed to post reply'); return }
    setPosts(prev => [...prev, data.post])
    setReply('')
  }

  if (loading) {
    return (
      <div className="max-w-3xl mx-auto p-4 sm:p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-4 bg-gray-800 rounded w-24" />
          <div className="h-8 bg-gray-800 rounded w-3/4" />
          <div className="h-4 bg-gray-800 rounded w-1/3" />
          <div className="h-32 bg-gray-800 rounded" />
        </div>
      </div>
    )
  }

  if (error || !thread) {
    return (
      <div className="max-w-3xl mx-auto p-4 sm:p-6">
        <button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline mb-4 text-sm">
          <ArrowLeft size={16} /> Back to Forum
        </button>
        <div className="bg-[#111118] border border-gray-800 rounded-lg p-8 text-center">
          <MessageCircle size={40} className="mx-auto text-gray-600 mb-3" />
          <p className="text-gray-400">{error || 'Thread not found'}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-6">
      <button onClick={() => router.push('/forum')} className="flex items-center gap-1 text-[#D4AF37] hover:underline text-sm">
        <ArrowLeft size={16} /> Back to Forum
      </button>

      <div className="bg-[#111118] border border-gray-800 rounded-lg p-5 space-y-3">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="bg-[#D4AF37]/10 text-[#D4AF37] text-xs font-semibold px-2 py-0.5 rounded">{thread.category.name}</span>
          {thread.shariahStatus === 'approved' ? (
            <span className="flex items-center gap-1 text-green-500 text-xs"><ShieldCheck size={14} /> Shariah Approved</span>
          ) : (
            <span className="flex items-center gap-1 text-yellow-500 text-xs"><ShieldAlert size={14} /> {thread.shariahStatus === 'pending' ? 'Pending Review' : 'Flagged'}</span>
          )}
        </div>
        <h1 className="text-xl font-bold">{thread.title}</h1>
        <div className="text-sm text-gray-500">
          By <span className="text-gray-300">{thread.author.name}</span> &middot; {new Date(thread.createdAt).toLocaleDateString()}
        </div>
        <p className="text-sm text-gray-300 whitespace-pre-wrap leading-relaxed">{thread.content}</p>
      </div>

      <div className="space-y-4">
        <h2 className="text-lg font-semibold flex items-center gap-2">
          <MessageCircle size={18} className="text-[#D4AF37]" />
          Replies ({posts.length})
        </h2>

        {posts.length === 0 ? (
          <div className="bg-[#111118] border border-gray-800 rounded-lg p-6 text-center">
            <p className="text-gray-500 text-sm">No replies yet. Be the first to respond.</p>
          </div>
        ) : (
          posts.map(post => (
            <div key={post.id} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm font-semibold">{post.author.name}</span>
                <span className="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
              </div>
              <p className="text-sm text-gray-300 whitespace-pre-wrap">{post.content}</p>
              {post.shariahStatus !== 'approved' && (
                <div className="flex items-center gap-1 text-yellow-500 text-xs pt-1">
                  <ShieldAlert size={12} /> Pending shariah review
                </div>
              )}
            </div>
          ))
        )}
      </div>

      {token ? (
        <form onSubmit={handleReply} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-3">
          <textarea
            placeholder="Write your reply..."
            value={reply}
            onChange={e => setReply(e.target.value)}
            required
            rows={3}
            className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none resize-none"
          />
          {replyError && <p className="text-red-500 text-xs">{replyError}</p>}
          <button type="submit" disabled={submitting || !reply.trim()}
            className="flex items-center gap-1 bg-[#D4AF37] text-[#0a0a0f] px-4 py-2 rounded text-sm font-semibold disabled:opacity-50 hover:bg-[#C9A84C] transition">
            <Send size={16} /> {submitting ? 'Posting...' : 'Post Reply'}
          </button>
        </form>
      ) : (
        <div className="bg-[#111118] border border-gray-800 rounded-lg p-4 text-center">
          <p className="text-sm text-gray-500">
            <a href="/login" className="text-[#D4AF37] hover:underline font-semibold">Sign in</a> to reply to this thread.
          </p>
        </div>
      )}
    </div>
  )
}