pounce/frontend/src/app/terminal/inbox/page.tsx

'use client'

import { useEffect, useMemo, useState, useCallback } from 'react'
import { useSearchParams } from 'next/navigation'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { Sidebar } from '@/components/Sidebar'
import {
  Loader2,
  MessageSquare,
  X,
  Send,
  Lock,
  Target,
  Gavel,
  Eye,
  TrendingUp,
  Menu,
  Settings,
  LogOut,
  Crown,
  Zap,
} from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import clsx from 'clsx'

type Thread = {
  id: number
  listing_id: number
  domain: string
  slug: string
  status: string
  created_at: string
  closed_at: string | null
  closed_reason: string | null
}

type Message = {
  id: number
  inquiry_id: number
  listing_id: number
  sender_user_id: number
  body: string
  created_at: string
}

export default function InboxPage() {
  const { user, subscription, logout, checkAuth } = useStore()
  const searchParams = useSearchParams()
  const openInquiryId = searchParams.get('inquiry')

  const [threads, setThreads] = useState<Thread[]>([])
  const [loading, setLoading] = useState(true)
  const [menuOpen, setMenuOpen] = useState(false)

  const [activeThread, setActiveThread] = useState<Thread | null>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [loadingMessages, setLoadingMessages] = useState(false)
  const [sending, setSending] = useState(false)
  const [draft, setDraft] = useState('')
  const [error, setError] = useState<string | null>(null)

  useEffect(() => { checkAuth() }, [checkAuth])

  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap

  const drawerNavSections = [
    { title: 'Discover', items: [
      { href: '/terminal/hunt', label: 'Radar', icon: Target },
      { href: '/terminal/market', label: 'Market', icon: Gavel },
      { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
    ]},
    { title: 'Manage', items: [
      { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
      { href: '/terminal/inbox', label: 'Inbox', icon: MessageSquare, active: true },
    ]},
  ]

  const loadThreads = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await api.getMyInquiryThreads()
      setThreads(data)
    } catch (err: any) {
      setError(err?.message || 'Failed to load inbox')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => { loadThreads() }, [loadThreads])

  const threadsById = useMemo(() => {
    const map = new Map<number, Thread>()
    threads.forEach(t => map.set(t.id, t))
    return map
  }, [threads])

  useEffect(() => {
    if (!openInquiryId) return
    const id = Number(openInquiryId)
    if (!Number.isFinite(id)) return
    const t = threadsById.get(id)
    if (t) setActiveThread(t)
  }, [openInquiryId, threadsById])

  const loadMessages = useCallback(async (thread: Thread) => {
    setLoadingMessages(true)
    setError(null)
    try {
      const data = await api.getInquiryMessagesAsBuyer(thread.id)
      setMessages(data)
    } catch (err: any) {
      setError(err?.message || 'Failed to load messages')
    } finally {
      setLoadingMessages(false)
    }
  }, [])

  useEffect(() => {
    if (!activeThread) return
    loadMessages(activeThread)
  }, [activeThread, loadMessages])

  const sendMessage = useCallback(async () => {
    if (!activeThread) return
    const body = draft.trim()
    if (!body) return

    setSending(true)
    setError(null)
    try {
      const created = await api.sendInquiryMessageAsBuyer(activeThread.id, body)
      setDraft('')
      setMessages(prev => [...prev, created])
    } catch (err: any) {
      setError(err?.message || 'Failed to send')
    } finally {
      setSending(false)
    }
  }, [activeThread, draft])

  return (
    <div className="min-h-screen bg-[#020202]">
      <div className="hidden lg:block"><Sidebar /></div>

      <main className="lg:pl-[240px]">
        {/* MOBILE HEADER */}
        <header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
          <div className="px-4 py-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Inbox</span>
              </div>
              <button onClick={() => setMenuOpen(true)} className="p-2 text-white/40">
                <Menu className="w-5 h-5" />
              </button>
            </div>
          </div>
        </header>

        {/* DESKTOP HEADER */}
        <section className="hidden lg:block px-10 pt-10 pb-6">
          <div className="flex items-end justify-between gap-6">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Inbox</span>
              </div>
              <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
                <span className="text-white">Inbox</span>
              </h1>
              <p className="text-sm text-white/40 font-mono max-w-lg">
                Your inquiry threads with verified sellers.
              </p>
            </div>
          </div>
        </section>

        <section className="px-4 lg:px-10 pb-28 lg:pb-10">
          {loading ? (
            <div className="flex items-center justify-center py-20">
              <Loader2 className="w-6 h-6 text-accent animate-spin" />
            </div>
          ) : error ? (
            <div className="p-4 border border-rose-400/20 bg-rose-400/5 text-rose-300 text-sm font-mono">{error}</div>
          ) : threads.length === 0 ? (
            <div className="text-center py-16 border border-dashed border-white/[0.08]">
              <MessageSquare className="w-8 h-8 text-white/10 mx-auto mb-3" />
              <p className="text-white/40 text-sm font-mono">No threads yet</p>
              <p className="text-white/25 text-xs font-mono mt-1">Browse Pounce Direct deals and send an inquiry.</p>
              <Link href="/acquire" className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase">
                View Deals
              </Link>
            </div>
          ) : (
            <div className="grid lg:grid-cols-[360px_1fr] gap-4">
              {/* Thread list */}
              <div className="border border-white/[0.08] bg-white/[0.02]">
                <div className="px-3 py-2 border-b border-white/[0.08] text-[10px] font-mono text-white/40 uppercase tracking-wider">
                  Threads
                </div>
                <div className="divide-y divide-white/[0.06]">
                  {threads.map(t => (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => setActiveThread(t)}
                      className={clsx(
                        'w-full text-left px-3 py-3 hover:bg-white/[0.03] transition-colors',
                        activeThread?.id === t.id && 'bg-white/[0.03]'
                      )}
                    >
                      <div className="flex items-center justify-between gap-3">
                        <div className="min-w-0">
                          <div className="text-sm font-bold text-white font-mono truncate">{t.domain}</div>
                          <div className="text-[10px] font-mono text-white/30 mt-0.5">
                            {new Date(t.created_at).toLocaleDateString('en-US')}
                            {t.status === 'closed' && t.closed_reason ? ` • closed: ${t.closed_reason}` : ''}
                          </div>
                        </div>
                        <span className={clsx(
                          'px-2 py-1 text-[9px] font-mono uppercase border',
                          t.status === 'closed' ? 'bg-white/[0.03] text-white/40 border-white/[0.10]' :
                          t.status === 'spam' ? 'bg-rose-500/10 text-rose-300 border-rose-500/20' :
                          'bg-accent/10 text-accent border-accent/20'
                        )}>
                          {t.status}
                        </span>
                      </div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Thread detail */}
              <div className="border border-white/[0.08] bg-[#020202]">
                {!activeThread ? (
                  <div className="p-10 text-center text-white/40 font-mono">Select a thread</div>
                ) : (
                  <>
                    <div className="px-4 py-3 border-b border-white/[0.08] flex items-center justify-between">
                      <div>
                        <div className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Thread</div>
                        <div className="text-sm font-bold text-white font-mono">{activeThread.domain}</div>
                      </div>
                      <Link
                        href={`/buy/${activeThread.slug}`}
                        className="px-3 py-2 border border-white/[0.10] bg-white/[0.03] text-white/70 hover:text-white text-[10px] font-mono uppercase"
                        title="View listing"
                      >
                        View Deal
                      </Link>
                    </div>

                    <div className="p-4 space-y-3 min-h-[280px] max-h-[520px] overflow-auto">
                      {loadingMessages ? (
                        <div className="flex items-center justify-center py-12">
                          <Loader2 className="w-6 h-6 text-accent animate-spin" />
                        </div>
                      ) : messages.length === 0 ? (
                        <div className="text-sm font-mono text-white/40">No messages</div>
                      ) : (
                        messages.map(m => (
                          <div
                            key={m.id}
                            className={clsx(
                              'p-3 border',
                              m.sender_user_id === user?.id
                                ? 'bg-accent/10 border-accent/20'
                                : 'bg-white/[0.02] border-white/[0.08]'
                            )}
                          >
                            <div className="flex items-center justify-between text-[10px] font-mono text-white/40 mb-1">
                              <span>{m.sender_user_id === user?.id ? 'You' : 'Seller'}</span>
                              <span>{new Date(m.created_at).toLocaleString('en-US')}</span>
                            </div>
                            <div className="text-sm text-white/80 whitespace-pre-line">{m.body}</div>
                          </div>
                        ))
                      )}
                    </div>

                    <div className="p-4 border-t border-white/[0.08]">
                      {activeThread.status === 'closed' || activeThread.status === 'spam' ? (
                        <div className="flex items-center gap-2 text-[11px] font-mono text-white/40">
                          <Lock className="w-4 h-4" /> Thread is closed.
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <textarea
                            value={draft}
                            onChange={(e) => setDraft(e.target.value)}
                            placeholder="Write a message..."
                            rows={2}
                            className="flex-1 px-3 py-2 bg-[#0A0A0A] border border-white/10 text-white font-mono text-sm placeholder:text-white/20 focus:outline-none focus:border-accent"
                          />
                          <button
                            type="button"
                            onClick={sendMessage}
                            disabled={sending || !draft.trim()}
                            className="px-4 py-2 bg-accent text-black text-xs font-bold uppercase disabled:opacity-50 flex items-center gap-2"
                          >
                            {sending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
                            Send
                          </button>
                        </div>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
        </section>

        {/* MOBILE DRAWER */}
        {menuOpen && (
          <div className="lg:hidden fixed inset-0 z-50">
            <button onClick={() => setMenuOpen(false)} className="absolute inset-0 bg-black/70" />
            <div className="absolute right-0 top-0 bottom-0 w-[320px] bg-[#020202] border-l border-white/[0.08]">
              <div className="p-4 border-b border-white/[0.08]">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Image src="/pounce-icon.png" alt="Pounce" width={24} height={24} />
                    <div>
                      <div className="text-sm font-bold text-white">Terminal</div>
                      <div className="text-[10px] font-mono text-white/40">{tierName}</div>
                    </div>
                  </div>
                  <button onClick={() => setMenuOpen(false)} className="p-1 text-white/40 hover:text-white">
                    <X className="w-5 h-5" />
                  </button>
                </div>
              </div>
              <div className="p-4 space-y-6">
                {drawerNavSections.map(section => (
                  <div key={section.title}>
                    <div className="text-[10px] font-mono text-white/30 uppercase tracking-wider mb-2">{section.title}</div>
                    <div className="space-y-1">
                      {section.items.map(item => (
                        <Link
                          key={item.href}
                          href={item.href}
                          className={clsx(
                            'flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] bg-white/[0.02] text-white/70 hover:text-white',
                            (item as any).active && 'border-accent/20 bg-accent/5 text-accent'
                          )}
                          onClick={() => setMenuOpen(false)}
                        >
                          <item.icon className="w-4 h-4" />
                          <span className="text-sm font-medium">{item.label}</span>
                        </Link>
                      ))}
                    </div>
                  </div>
                ))}

                <div className="space-y-2 pt-4 border-t border-white/[0.08]">
                  <Link
                    href="/terminal/settings"
                    className="w-full flex items-center gap-3 px-3 py-2.5 text-white/70 hover:text-white transition-colors"
                    onClick={() => setMenuOpen(false)}
                  >
                    <Settings className="w-4 h-4" />
                    <span className="text-sm font-medium">Settings</span>
                  </Link>
                  <button
                    onClick={() => { logout(); setMenuOpen(false) }}
                    className="w-full flex items-center gap-3 px-3 py-2.5 text-rose-400/60 hover:text-rose-400 transition-colors"
                  >
                    <LogOut className="w-4 h-4" />
                    <span className="text-sm font-medium">Logout</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}