'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,
  Tag,
  ShoppingCart,
  DollarSign,
  CheckCircle,
  AlertCircle,
  Mail,
  ExternalLink,
} from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import clsx from 'clsx'

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

type SellerInquiry = {
  id: number
  listing_id: number
  domain: string
  slug: string
  buyer_name: string
  buyer_email: string
  offer_amount: number | null
  status: string
  created_at: string
  read_at: string | null
  replied_at: string | null
  closed_at: string | null
  closed_reason: string | null
  has_unread_reply: boolean
  last_message_preview: string
  last_message_at: string
  last_message_is_buyer: boolean
}

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

type InboxTab = 'buying' | 'selling'

export default function InboxPage() {
  const { user, subscription, logout, checkAuth } = useStore()
  const searchParams = useSearchParams()
  const openInquiryId = searchParams.get('inquiry')
  const initialTab = searchParams.get('tab') as InboxTab | null

  const [activeTab, setActiveTab] = useState<InboxTab>(initialTab || 'buying')
  
  // Buyer state
  const [buyerThreads, setBuyerThreads] = useState<BuyerThread[]>([])
  const [loadingBuyer, setLoadingBuyer] = useState(true)
  
  // Seller state
  const [sellerInquiries, setSellerInquiries] = useState<SellerInquiry[]>([])
  const [loadingSeller, setLoadingSeller] = useState(true)
  const [sellerUnread, setSellerUnread] = useState(0)
  
  // Shared state
  const [menuOpen, setMenuOpen] = useState(false)
  const [activeThread, setActiveThread] = useState<BuyerThread | SellerInquiry | 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 isSeller = tierName !== 'Scout' // Scout can't list domains

  // Load buyer threads
  const loadBuyerThreads = useCallback(async () => {
    setLoadingBuyer(true)
    setError(null)
    try {
      const data = await api.getMyInquiryThreads()
      setBuyerThreads(data)
    } catch (err: any) {
      // Silently fail - might not have any threads
    } finally {
      setLoadingBuyer(false)
    }
  }, [])

  // Load seller inquiries
  const loadSellerInquiries = useCallback(async () => {
    if (!isSeller) {
      setLoadingSeller(false)
      return
    }
    setLoadingSeller(true)
    try {
      const data = await api.getSellerInbox()
      setSellerInquiries(data.inquiries)
      setSellerUnread(data.unread)
    } catch (err: any) {
      // Silently fail
    } finally {
      setLoadingSeller(false)
    }
  }, [isSeller])

  useEffect(() => {
    loadBuyerThreads()
    loadSellerInquiries()
    
    // Poll inbox counts every 30 seconds for badge updates
    const pollInterval = setInterval(() => {
      loadBuyerThreads()
      loadSellerInquiries()
    }, 30000)
    
    return () => clearInterval(pollInterval)
  }, [loadBuyerThreads, loadSellerInquiries])

  // Handle URL parameter for opening specific inquiry
  const threadsById = useMemo(() => {
    const map = new Map<number, BuyerThread | SellerInquiry>()
    buyerThreads.forEach(t => map.set(t.id, t))
    sellerInquiries.forEach(t => map.set(t.id, t))
    return map
  }, [buyerThreads, sellerInquiries])

  useEffect(() => {
    if (!openInquiryId) return
    const id = Number(openInquiryId)
    if (!Number.isFinite(id)) return
    const t = threadsById.get(id)
    if (t) {
      setActiveThread(t)
      // Determine which tab
      if ('buyer_name' in t) {
        setActiveTab('selling')
      } else {
        setActiveTab('buying')
      }
    }
  }, [openInquiryId, threadsById])

  // Load messages for thread
  const loadMessages = useCallback(async (thread: BuyerThread | SellerInquiry) => {
    setLoadingMessages(true)
    setError(null)
    try {
      if ('buyer_name' in thread) {
        // Seller loading buyer's messages
        const data = await api.getInquiryMessagesAsSeller(thread.listing_id, thread.id)
        setMessages(data)
      } else {
        // Buyer loading their own messages
        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)
    
    // Poll for new messages every 15 seconds when thread is open
    const pollInterval = setInterval(() => {
      loadMessages(activeThread)
    }, 15000)
    
    return () => clearInterval(pollInterval)
  }, [activeThread, loadMessages])

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

    setSending(true)
    setError(null)
    try {
      let created: Message
      if ('buyer_name' in activeThread) {
        // Seller replying
        created = await api.sendInquiryMessageAsSeller(activeThread.listing_id, activeThread.id, body)
      } else {
        // Buyer replying
        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])

  // Refresh on tab change
  useEffect(() => {
    setActiveThread(null)
    setMessages([])
    setDraft('')
    if (activeTab === 'buying') {
      loadBuyerThreads()
    } else {
      loadSellerInquiries()
    }
  }, [activeTab, loadBuyerThreads, loadSellerInquiries])

  const isLoading = activeTab === 'buying' ? loadingBuyer : loadingSeller
  const currentItems = activeTab === 'buying' ? buyerThreads : sellerInquiries
  const emptyMessage = activeTab === 'buying' 
    ? 'No inquiries yet. Browse Pounce Direct deals and send an inquiry.'
    : 'No buyer inquiries yet. List a domain for sale to receive offers.'
  const emptyAction = activeTab === 'buying' 
    ? { href: '/acquire', label: 'Browse Deals' }
    : { href: '/terminal/listing', label: 'List Domain' }

  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">
                Manage your domain inquiries and conversations.
              </p>
            </div>
          </div>
        </section>

        {/* TABS */}
        <section className="px-4 lg:px-10 pb-4">
          <div className="flex border border-white/[0.08] bg-white/[0.02]">
            <button
              type="button"
              onClick={() => setActiveTab('buying')}
              className={clsx(
                'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
                activeTab === 'buying'
                  ? 'bg-accent/10 text-accent border-accent'
                  : 'text-white/40 hover:text-white border-transparent'
              )}
            >
              <ShoppingCart className="w-4 h-4" />
              Buying
              {buyerThreads.length > 0 && (
                <span className="ml-1 px-1.5 py-0.5 bg-white/10 text-[10px]">{buyerThreads.length}</span>
              )}
            </button>
            {isSeller && (
              <button
                type="button"
                onClick={() => setActiveTab('selling')}
                className={clsx(
                  'flex-1 py-3 flex items-center justify-center gap-2 text-xs font-mono uppercase tracking-wider transition-all border-b-2',
                  activeTab === 'selling'
                    ? 'bg-accent/10 text-accent border-accent'
                    : 'text-white/40 hover:text-white border-transparent'
                )}
              >
                <Tag className="w-4 h-4" />
                Selling
                {sellerUnread > 0 && (
                  <span className="ml-1 px-1.5 py-0.5 bg-accent text-black text-[10px] font-bold">{sellerUnread}</span>
                )}
              </button>
            )}
          </div>
        </section>

        {/* CONTENT */}
        <section className="px-4 lg:px-10 pb-28 lg:pb-10">
          {isLoading ? (
            <div className="flex items-center justify-center py-20">
              <Loader2 className="w-6 h-6 text-accent animate-spin" />
            </div>
          ) : error && !activeThread ? (
            <div className="p-4 border border-rose-400/20 bg-rose-400/5 text-rose-300 text-sm font-mono">{error}</div>
          ) : currentItems.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">{emptyMessage}</p>
              <Link href={emptyAction.href} className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase">
                {emptyAction.label}
              </Link>
            </div>
          ) : (
            <div className="grid lg:grid-cols-[400px_1fr] gap-4">
              {/* Thread/Inquiry list */}
              <div className="border border-white/[0.08] bg-white/[0.02] max-h-[600px] overflow-auto">
                <div className="px-3 py-2 border-b border-white/[0.08] text-[10px] font-mono text-white/40 uppercase tracking-wider sticky top-0 bg-[#0A0A0A]">
                  {activeTab === 'buying' ? 'Your Inquiries' : 'Buyer Inquiries'}
                </div>
                <div className="divide-y divide-white/[0.06]">
                  {activeTab === 'buying' ? (
                    // Buyer view
                    buyerThreads.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')}
                            </div>
                          </div>
                          <span className={clsx(
                            'px-2 py-1 text-[9px] font-mono uppercase border shrink-0',
                            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>
                    ))
                  ) : (
                    // Seller view
                    sellerInquiries.map(inq => (
                      <button
                        key={inq.id}
                        type="button"
                        onClick={() => setActiveThread(inq)}
                        className={clsx(
                          'w-full text-left px-3 py-3 hover:bg-white/[0.03] transition-colors',
                          activeThread?.id === inq.id && 'bg-white/[0.03]',
                          inq.has_unread_reply && 'border-l-2 border-accent'
                        )}
                      >
                        <div className="flex items-start justify-between gap-3">
                          <div className="min-w-0 flex-1">
                            <div className="flex items-center gap-2">
                              <span className="text-sm font-bold text-white font-mono truncate">{inq.domain}</span>
                              {inq.has_unread_reply && (
                                <span className="w-2 h-2 bg-accent rounded-full animate-pulse shrink-0" />
                              )}
                            </div>
                            <div className="text-[10px] font-mono text-white/50 mt-0.5 truncate">
                              {inq.buyer_name} • {inq.buyer_email}
                            </div>
                            {inq.offer_amount && (
                              <div className="text-[10px] font-mono text-accent mt-0.5">
                                ${inq.offer_amount.toLocaleString()} offer
                              </div>
                            )}
                            <div className="text-[10px] font-mono text-white/30 mt-1 truncate">
                              {inq.last_message_preview}
                            </div>
                          </div>
                          <div className="text-right shrink-0">
                            <span className={clsx(
                              'px-2 py-1 text-[9px] font-mono uppercase border',
                              inq.status === 'new' ? 'bg-amber-400/10 text-amber-400 border-amber-400/20' :
                              inq.status === 'closed' ? 'bg-white/[0.03] text-white/40 border-white/[0.10]' :
                              inq.status === 'spam' ? 'bg-rose-500/10 text-rose-300 border-rose-500/20' :
                              'bg-accent/10 text-accent border-accent/20'
                            )}>
                              {inq.status}
                            </span>
                            <div className="text-[9px] font-mono text-white/20 mt-1">
                              {new Date(inq.last_message_at).toLocaleDateString('en-US')}
                            </div>
                          </div>
                        </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">
                    <MessageSquare className="w-8 h-8 mx-auto mb-3 text-white/10" />
                    Select a conversation
                  </div>
                ) : (
                  <>
                    {/* Thread header */}
                    <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">
                          {activeTab === 'buying' ? 'Thread' : 'Inquiry'}
                        </div>
                        <div className="text-sm font-bold text-white font-mono">
                          {'buyer_name' in activeThread ? activeThread.domain : activeThread.domain}
                        </div>
                        {'buyer_name' in activeThread && (
                          <div className="text-[10px] font-mono text-white/40 mt-0.5">
                            From: {activeThread.buyer_name} ({activeThread.buyer_email})
                          </div>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
                        {'buyer_name' in activeThread && (
                          <a
                            href={`mailto:${activeThread.buyer_email}?subject=Re: ${activeThread.domain}`}
                            className="p-2 border border-white/[0.10] bg-white/[0.03] text-white/50 hover:text-white"
                            title="Reply via email"
                          >
                            <Mail className="w-4 h-4" />
                          </a>
                        )}
                        <Link
                          href={`/buy/${activeThread.slug}`}
                          className="p-2 border border-white/[0.10] bg-white/[0.03] text-white/50 hover:text-white"
                          title="View listing"
                        >
                          <ExternalLink className="w-4 h-4" />
                        </Link>
                      </div>
                    </div>

                    {/* Messages */}
                    <div className="p-4 space-y-3 min-h-[280px] max-h-[450px] 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 yet</div>
                      ) : (
                        messages.map(m => {
                          const isMe = m.sender_user_id === user?.id
                          return (
                            <div
                              key={m.id}
                              className={clsx(
                                'p-3 border max-w-[85%]',
                                isMe
                                  ? 'bg-accent/10 border-accent/20 ml-auto'
                                  : '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>{isMe ? 'You' : (activeTab === 'buying' ? 'Seller' : 'Buyer')}</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>

                    {/* Reply form */}
                    <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" /> This conversation is closed.
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <textarea
                            value={draft}
                            onChange={(e) => setDraft(e.target.value)}
                            onKeyDown={(e) => {
                              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                                e.preventDefault()
                                sendMessage()
                              }
                            }}
                            placeholder="Write a message... (Cmd+Enter to send)"
                            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 resize-none"
                          />
                          <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 self-end"
                          >
                            {sending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
                            Send
                          </button>
                        </div>
                      )}
                      {error && (
                        <div className="mt-2 text-[11px] font-mono text-rose-400">{error}</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-puma.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-4">
                <Link href="/terminal/hunt" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
                  <Target className="w-4 h-4" /> Hunt
                </Link>
                <Link href="/terminal/watchlist" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
                  <Eye className="w-4 h-4" /> Watchlist
                </Link>
                <Link href="/terminal/listing" className="flex items-center gap-3 px-3 py-2.5 border border-white/[0.08] text-white/70" onClick={() => setMenuOpen(false)}>
                  <Tag className="w-4 h-4" /> For Sale
                </Link>
                <div className="pt-4 border-t border-white/[0.08]">
                  <button onClick={() => { logout(); setMenuOpen(false) }} className="flex items-center gap-3 px-3 py-2.5 text-rose-400/60">
                    <LogOut className="w-4 h-4" /> Logout
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}