falah-mobile/src/app/forum/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { useAuth } from '@/lib/AuthContext'
import { Plus, ChevronRight } from 'lucide-react'

interface Category { id: string; name: string; description: string; icon: string }
interface Thread { id: string; title: string; content: string; author: { name: string }; category: { name: string }; _count: { posts: number }; createdAt: string }

export default function ForumPage() {
  const { token } = useAuth()
  const [categories, setCategories] = useState<Category[]>([])
  const [threads, setThreads] = useState<Thread[]>([])
  const [selectedCat, setSelectedCat] = useState<string | null>(null)
  const [view, setView] = useState<'categories' | 'threads'>('categories')
  const [showCreate, setShowCreate] = useState(false)

  useEffect(() => { fetch('/api/forum/categories').then(r => r.json()).then(d => setCategories(d.categories || [])) }, [])

  const loadThreads = async (catId?: string) => {
    const params = catId ? `?categoryId=${catId}` : ''
    const res = await fetch(`/api/forum/threads${params}`)
    const data = await res.json()
    setThreads(data.threads || [])
  }

  return (
    <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-[#D4AF37]">Forum</h1>
        {token && (
          <button onClick={() => setShowCreate(true)}
            className="flex items-center gap-1 bg-[#D4AF37] text-[#0a0a0f] px-3 py-2 rounded text-sm font-semibold hover:bg-[#C9A84C] transition"><Plus size={16} /> New Thread</button>
        )}
      </div>
      {view === 'categories' ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {categories.map(c => (
            <button key={c.id} onClick={() => { setSelectedCat(c.id); setView('threads'); loadThreads(c.id) }}
              className="bg-[#111118] border border-gray-800 rounded-lg p-4 text-left hover:border-gray-700 transition">
              <div className="flex items-center gap-3">
                <span className="text-2xl">{c.icon}</span>
                <div className="flex-1">
                  <h3 className="font-semibold">{c.name}</h3>
                  <p className="text-xs text-gray-500">{c.description}</p>
                </div>
                <ChevronRight size={16} className="text-gray-600" />
              </div>
            </button>
          ))}
        </div>
      ) : (
        <div className="space-y-3">
          <button onClick={() => setView('categories')} className="text-sm text-[#D4AF37] hover:underline mb-2 inline-block">&larr; Back to categories</button>
          {threads.map(t => (
            <div key={t.id} className="bg-[#111118] border border-gray-800 rounded-lg p-4 space-y-1">
              <h3 className="font-semibold">{t.title}</h3>
              <p className="text-sm text-gray-400 line-clamp-2">{t.content}</p>
              <div className="flex items-center gap-3 text-xs text-gray-500 pt-1">
                <span>{t.author.name}</span><span>{t.category.name}</span><span>{t._count.posts} replies</span><span>{new Date(t.createdAt).toLocaleDateString()}</span>
              </div>
            </div>
          ))}
        </div>
      )}
      {showCreate && token && <CreateThreadModal token={token} categories={categories} onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); if (selectedCat) loadThreads(selectedCat) }} />}
    </div>
  )
}

function CreateThreadModal({ token, categories, onClose, onCreated }: { token: string; categories: Category[]; onClose: () => void; onCreated: () => void }) {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [categoryId, setCategoryId] = useState(categories[0]?.id || '')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    const res = await fetch('/api/forum/threads', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ title, content, categoryId }) })
    setLoading(false)
    if (res.ok) { onCreated() } else { const d = await res.json(); alert(d.error) }
  }

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
      <form onSubmit={handleSubmit} className="bg-[#111118] border border-gray-800 rounded-lg p-6 max-w-md w-full space-y-4">
        <h2 className="text-lg font-bold">New Thread</h2>
        <select value={categoryId} onChange={e => setCategoryId(e.target.value)}
          className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none">
          {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        <input type="text" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} required
          className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none" />
        <textarea placeholder="Content" value={content} onChange={e => setContent(e.target.value)} required rows={4}
          className="w-full bg-[#0a0a0f] border border-gray-700 rounded px-3 py-2 text-sm focus:border-[#D4AF37] outline-none" />
        <button type="submit" disabled={loading}
          className="w-full bg-[#D4AF37] text-[#0a0a0f] py-2 rounded font-semibold disabled:opacity-50 hover:bg-[#C9A84C] transition">
          {loading ? 'Posting...' : 'Create Thread'}
        </button>
        <button type="button" onClick={onClose} className="w-full text-gray-500 text-sm hover:text-white">Cancel</button>
      </form>
    </div>
  )
}