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="min-h-dvh bg-[#f5f4f0] pb-24 px-4 pt-6">
        <div className="animate-pulse space-y-4 max-w-3xl mx-auto">
          <div className="h-4 bg-gray-200 rounded w-24" />
          <div className="h-8 bg-gray-200 rounded w-3/4" />
          <div className="h-4 bg-gray-200 rounded w-1/3" />
          <div className="h-32 bg-gray-200 rounded-2xl" />
        </div>
      </div>
    )
  }

  if (error || !thread) {
    return (
      <div className="min-h-dvh bg-[#f5f4f0] pb-24 px-4 pt-6 max-w-3xl mx-auto">
        <button
          onClick={() => router.push('/forum')}
          className="flex items-center gap-1 text-emerald-600 text-sm mb-4 active:opacity-70 transition"
        >
          <ArrowLeft size={16} /> Back to Forum
        </button>
        <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-8 text-center">
          <MessageCircle size={40} className="mx-auto text-gray-300 mb-3" />
          <p className="text-gray-500">{error || 'Thread not found'}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-dvh bg-[#f5f4f0] pb-24">
      <div className="max-w-3xl mx-auto px-4 pt-6 space-y-4">
        <button
          onClick={() => router.push('/forum')}
          className="flex items-center gap-1 text-emerald-600 text-sm active:opacity-70 transition"
        >
          <ArrowLeft size={16} /> Back to Forum
        </button>

        {/* Thread card */}
        <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-5 space-y-3">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="bg-emerald-50 text-emerald-700 text-xs font-semibold px-2.5 py-1 rounded-lg">
              {thread.category.name}
            </span>
            {thread.shariahStatus === 'approved' ? (
              <span className="flex items-center gap-1 text-green-600 text-xs">
                <ShieldCheck size={13} /> Shariah Approved
              </span>
            ) : (
              <span className="flex items-center gap-1 text-yellow-600 text-xs">
                <ShieldAlert size={13} /> {thread.shariahStatus === 'pending' ? 'Pending Review' : 'Flagged'}
              </span>
            )}
          </div>
          <h1 className="text-lg font-bold text-gray-900">{thread.title}</h1>
          <p className="text-xs text-gray-400">
            By <span className="text-gray-600 font-medium">{thread.author.name}</span> &middot; {new Date(thread.createdAt).toLocaleDateString()}
          </p>
          <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{thread.content}</p>
        </div>

        {/* Replies section */}
        <div className="space-y-3">
          <h2 className="text-base font-semibold text-gray-900 flex items-center gap-2">
            <MessageCircle size={16} className="text-emerald-600" />
            Replies ({posts.length})
          </h2>

          {posts.length === 0 ? (
            <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-6 text-center">
              <p className="text-gray-400 text-sm">No replies yet. Be the first to respond.</p>
            </div>
          ) : (
            posts.map(post => (
              <div key={post.id} className="bg-white border border-gray-100 shadow-sm rounded-2xl p-4 space-y-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded-xl bg-emerald-100 flex items-center justify-center">
                      <span className="text-xs font-bold text-emerald-700">{post.author.name[0]?.toUpperCase()}</span>
                    </div>
                    <span className="text-sm font-semibold text-gray-900">{post.author.name}</span>
                  </div>
                  <span className="text-xs text-gray-400">{new Date(post.createdAt).toLocaleDateString()}</span>
                </div>
                <p className="text-sm text-gray-700 whitespace-pre-wrap">{post.content}</p>
                {post.shariahStatus !== 'approved' && (
                  <div className="flex items-center gap-1 text-yellow-600 text-xs pt-1">
                    <ShieldAlert size={12} /> Pending shariah review
                  </div>
                )}
              </div>
            ))
          )}
        </div>

        {/* Reply form */}
        {token ? (
          <form onSubmit={handleReply} className="bg-white border border-gray-100 shadow-sm rounded-2xl 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-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-900 placeholder-gray-400 focus:border-emerald-400 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.5 bg-emerald-600 text-white px-4 py-2.5 rounded-xl text-sm font-semibold disabled:opacity-50 active:scale-[0.97] transition-transform"
            >
              <Send size={15} /> {submitting ? 'Posting...' : 'Post Reply'}
            </button>
          </form>
        ) : (
          <div className="bg-white border border-gray-100 shadow-sm rounded-2xl p-4 text-center">
            <p className="text-sm text-gray-500">
              <a href="/login" className="text-emerald-600 font-semibold">Sign in</a> to reply to this thread.
            </p>
          </div>
        )}
      </div>
    </div>
  )
}