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

'use client'

import { useState, useEffect } from 'react'
import { useAuth } from '@/lib/AuthContext'
import { Plus, ChevronRight, MessageCircle, X, ArrowLeft } 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<Category | null>(null)
  const [view, setView] = useState<'categories' | 'threads'>('categories')
  const [showCreate, setShowCreate] = useState(false)
  const [loading, setLoading] = useState(true)
  const [toast, setToast] = useState('')

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

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

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3000) }

  return (
    <div className="min-h-dvh bg-bg-deep pb-32 text-white">

      {/* Header */}
      <div className="px-5 pt-14 pb-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          {view === 'threads' && (
            <button onClick={() => { setView('categories'); setSelectedCat(null) }} className="w-9 h-9 flex items-center justify-center rounded-xl bg-bg-card border border-border active:opacity-60 cursor-pointer">
              <ArrowLeft size={18} className="text-text-secondary" />
            </button>
          )}
          <div>
            <h1 className="text-xl font-bold text-white">{view === 'threads' && selectedCat ? selectedCat.name : 'Forum'}</h1>
            <p className="text-[11px] text-text-secondary mt-0.5">
              {view === 'categories' ? 'Community discussions' : `${threads.length} threads`}
            </p>
          </div>
        </div>
        {token && (
          <button
            onClick={() => setShowCreate(true)}
            className="flex items-center gap-1.5 gold-gradient text-bg-deep px-4 py-2.5 rounded-xl font-bold text-sm active:scale-[0.97] transition-transform cursor-pointer shadow-sm shadow-gold/10"
          >
            <Plus size={16} /> Post
          </button>
        )}
      </div>

      {/* Loading */}
      {loading && (
        <div className="px-5 pt-4 space-y-3">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="h-20 rounded-2xl bg-bg-card border border-border/50 animate-pulse" />
          ))}
        </div>
      )}

      {/* Categories view */}
      {!loading && view === 'categories' && (
        <div className="px-5 pt-4 space-y-3">
          {categories.length === 0 ? (
            <div className="text-center py-16">
              <div className="text-4xl mb-3">🕌</div>
              <p className="text-text-secondary text-sm">No categories yet</p>
            </div>
          ) : categories.map(c => (
            <button
              key={c.id}
              onClick={() => { setSelectedCat(c); setView('threads'); loadThreads(c.id) }}
              className="w-full text-left bg-bg-card rounded-2xl border border-border p-4 active:scale-[0.97] transition-transform hover:border-gold/30 cursor-pointer"
            >
              <div className="flex items-center gap-3">
                <span className="text-2xl w-10 h-10 flex items-center justify-center bg-bg-deep border border-border rounded-xl shrink-0">
                  {c.icon || '💬'}
                </span>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-white text-sm">{c.name}</h3>
                  <p className="text-xs text-text-secondary mt-0.5 line-clamp-1">{c.description}</p>
                </div>
                <ChevronRight size={16} className="text-text-muted shrink-0" />
              </div>
            </button>
          ))}
        </div>
      )}

      {/* Threads view */}
      {!loading && view === 'threads' && (
        <div className="px-5 pt-4 space-y-3">
          {threads.length === 0 ? (
            <div className="text-center py-16">
              <div className="text-4xl mb-3">💬</div>
              <p className="text-white font-semibold mb-1">No threads yet</p>
              <p className="text-text-secondary text-sm">Start the first discussion</p>
            </div>
          ) : threads.map(t => (
            <div key={t.id} className="bg-bg-card rounded-2xl border border-border p-4">
              <h3 className="font-semibold text-white text-sm leading-snug mb-1">{t.title}</h3>
              <p className="text-xs text-text-secondary line-clamp-2 mb-3">{t.content}</p>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1.5">
                  <div className="w-5 h-5 rounded-full bg-bg-deep border border-border flex items-center justify-center">
                    <span className="text-[9px] text-[#D4AF37] font-bold">{t.author.name[0]}</span>
                  </div>
                  <span className="text-[11px] text-text-secondary">{t.author.name}</span>
                </div>
                <div className="flex items-center gap-1 text-[11px] text-text-secondary">
                  <MessageCircle size={12} />
                  {t._count.posts}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Toast */}
      {toast && (
        <div className="fixed bottom-24 left-5 right-5 bg-bg-card border border-border text-white rounded-2xl px-4 py-3 text-sm text-center z-50 shadow-xl">
          {toast}
        </div>
      )}

      {/* Create thread bottom sheet */}
      {showCreate && token && (
        <CreateThreadSheet
          token={token}
          categories={categories}
          onClose={() => setShowCreate(false)}
          onCreated={() => { if (selectedCat) loadThreads(selectedCat.id); showToast('Thread posted!') }}
          showToast={showToast}
        />
      )}
    </div>
  )
}

function CreateThreadSheet({ token, categories, onClose, onCreated, showToast }: {
  token: string; categories: Category[]; onClose: () => void; onCreated: () => void; showToast: (m: string) => 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()
    if (!categoryId) return
    setLoading(true)
    try {
      const res = await fetch('/api/forum/threads', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ title, content, categoryId }),
      })
      const data = await res.json()
      if (res.ok) { onCreated(); onClose() }
      else showToast(data.error || 'Failed to post')
    } catch { showToast('Something went wrong') }
    setLoading(false)
  }

  return (
    <div className="fixed inset-0 z-50 flex flex-col justify-end" onClick={onClose}>
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
      <form
        onSubmit={handleSubmit}
        className="relative bg-bg-card border-t border-x border-border rounded-t-3xl p-6 pb-10 space-y-4"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-1">
          <div className="w-10 h-1 bg-border rounded-full mx-auto absolute left-1/2 -translate-y-1/2 top-3" />
          <h2 className="text-lg font-bold text-white mt-2">New Thread</h2>
          <button type="button" onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full bg-bg-deep border border-border text-text-muted mt-2 cursor-pointer">
            <X size={15} />
          </button>
        </div>

        <select
          value={categoryId} onChange={e => setCategoryId(e.target.value)}
          className="w-full bg-bg-deep border border-border rounded-xl px-4 py-3.5 text-sm text-white focus:border-gold focus:outline-none"
        >
          {categories.map(c => <option key={c.id} value={c.id} className="bg-bg-card">{c.icon} {c.name}</option>)}
        </select>

        <input
          type="text" placeholder="Thread title" value={title} onChange={e => setTitle(e.target.value)} required
          className="w-full bg-bg-deep border border-border rounded-xl px-4 py-4 text-sm text-white placeholder-text-muted focus:border-gold focus:outline-none"
        />
        <textarea
          placeholder="Share your thoughts…" value={content} onChange={e => setContent(e.target.value)} required rows={4}
          className="w-full bg-bg-deep border border-border rounded-xl px-4 py-3 text-sm text-white placeholder-text-muted focus:border-gold focus:outline-none resize-none"
        />
        <button
          type="submit" disabled={loading}
          className="w-full gold-gradient text-bg-deep py-4 rounded-2xl font-bold disabled:opacity-50 active:scale-[0.97] transition-transform cursor-pointer"
        >
          {loading ? 'Posting…' : 'Post Thread'}
        </button>
      </form>
    </div>
  )
}