import {
  Check,
  CheckCheck,
  ChevronLeft,
  Image as ImageIcon,
  MessageCircle,
  MessageSquareText,
  MoreHorizontal,
  Paperclip,
  Plus,
  RefreshCw,
  Search,
  Send,
  Smile,
  Star,
  UserRound,
  X,
} from 'lucide-react'
import { useEffect, useMemo, useRef, useState } from 'react'
import type { FormEvent } from 'react'
import { API_BASE_URL } from '../../lib/apiBase'
import {
  whatsappApi,
  type CustomerWhatsAppMessage,
  type CustomerWhatsAppSend,
  type WhatsAppAccount,
  type WhatsAppTemplateRow,
} from '../../lib/api'

type SendMode = 'text' | 'template' | 'media' | 'buttons'
type ListFilter = 'all' | 'unread' | 'important'
type ProfileTab = 'details' | 'events'

const REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🙏']

function formatWaNumber(value: string) {
  const digits = value.replace(/\D/g, '')
  if (digits.length === 12 && digits.startsWith('91')) {
    const local = digits.slice(2)
    return `+91 ${local.slice(0, 5)} ${local.slice(5)}`
  }
  if (digits.length === 10) return `+91 ${digits.slice(0, 5)} ${digits.slice(5)}`
  return value.startsWith('+') ? value : `+${digits || value}`
}

function formatClock(value: string) {
  return new Date(value).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

function formatChatTime(value: string) {
  const date = new Date(value)
  const now = new Date()
  if (date.toDateString() === now.toDateString()) return formatClock(value)
  const yesterday = new Date(now)
  yesterday.setDate(now.getDate() - 1)
  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return date.toLocaleDateString([], { month: 'short', day: 'numeric' })
}

function formatDayLabel(value: string) {
  const date = new Date(value)
  const now = new Date()
  if (date.toDateString() === now.toDateString()) return 'Today'
  const yesterday = new Date(now)
  yesterday.setDate(now.getDate() - 1)
  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' })
}

function formatWhen(value: string) {
  return new Date(value).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
}

function initials(name: string) {
  const parts = name.split(/\s+/).filter(Boolean)
  if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase()
  return name.replace(/\D/g, '').slice(-2) || 'WA'
}

export function CustomerWhatsAppInbox({ account, onBack }: { account: WhatsAppAccount; onBack: () => void }) {
  const [messages, setMessages] = useState<CustomerWhatsAppMessage[]>([])
  const [templates, setTemplates] = useState<WhatsAppTemplateRow[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedPeer, setSelectedPeer] = useState<string | null>(null)
  const [startingNew, setStartingNew] = useState(false)
  const [newPeer, setNewPeer] = useState('')
  const [sendMode, setSendMode] = useState<SendMode>('text')
  const [error, setError] = useState('')
  const [sending, setSending] = useState(false)
  const [textBody, setTextBody] = useState('')
  const [replyTo, setReplyTo] = useState('')
  const [replyPreview, setReplyPreview] = useState('')
  const [templateName, setTemplateName] = useState('')
  const [templateLanguage, setTemplateLanguage] = useState('en')
  const [mediaType, setMediaType] = useState<'image' | 'document' | 'audio' | 'video'>('image')
  const [mediaLink, setMediaLink] = useState('')
  const [mediaCaption, setMediaCaption] = useState('')
  const [buttonBody, setButtonBody] = useState('')
  const [buttonOne, setButtonOne] = useState('')
  const [buttonTwo, setButtonTwo] = useState('')
  const [buttonThree, setButtonThree] = useState('')
  const [threadQuery, setThreadQuery] = useState('')
  const [listFilter, setListFilter] = useState<ListFilter>('all')
  const [readPeers, setReadPeers] = useState<Set<string>>(new Set())
  const [starred, setStarred] = useState<Set<string>>(new Set())
  const [profileTab, setProfileTab] = useState<ProfileTab>('details')
  const [moreOpen, setMoreOpen] = useState(false)
  const [detailsId, setDetailsId] = useState<string | null>(null)
  const [reactFor, setReactFor] = useState<string | null>(null)
  const [emojiOpen, setEmojiOpen] = useState(false)
  const chatEndRef = useRef<HTMLDivElement | null>(null)
  const [deliveryAccount, setDeliveryAccount] = useState(account)
  const [appSecret, setAppSecret] = useState('')
  const [deliveryBusy, setDeliveryBusy] = useState(false)
  const line = deliveryAccount.primary_phone?.display_phone || deliveryAccount.name
  const canSend = deliveryAccount.messaging_status === 'active' && deliveryAccount.usable
  const repliesLive = deliveryAccount.webhooks_status === 'active'

  async function saveDelivery(event: FormEvent) {
    event.preventDefault()
    setDeliveryBusy(true)
    setError('')
    try {
      setDeliveryAccount(await whatsappApi.enableDelivery(account.id, appSecret.trim()))
      setAppSecret('')
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Replies could not be turned on')
    } finally {
      setDeliveryBusy(false)
    }
  }

  async function loadMessages() {
    setMessages(await whatsappApi.messages(account.id))
  }

  useEffect(() => {
    Promise.all([
      whatsappApi.messages(account.id),
      account.status === 'disconnected'
        ? Promise.resolve({ available: false, templates: [] as WhatsAppTemplateRow[] })
        : whatsappApi.templates(account.id).catch(() => ({ available: false, templates: [] as WhatsAppTemplateRow[] })),
    ])
      .then(([items, templatePayload]) => {
        setMessages(items)
        setTemplates(templatePayload.templates.filter((item) => item.status === 'APPROVED' || !item.status))
      })
      .catch((reason) => setError(reason instanceof Error ? reason.message : 'Unable to load conversations'))
      .finally(() => setLoading(false))
    const timer = window.setInterval(() => {
      loadMessages().catch(() => undefined)
    }, 8000)
    return () => window.clearInterval(timer)
  }, [account.id])

  const threads = useMemo(() => {
    const grouped = new Map<string, CustomerWhatsAppMessage[]>()
    for (const message of messages) {
      if (message.message_type === 'status') continue
      const peer = message.direction === 'inbound' ? message.from : message.to
      if (!peer) continue
      const list = grouped.get(peer) ?? []
      list.push(message)
      grouped.set(peer, list)
    }
    return [...grouped.entries()]
      .map(([peer, thread]) => {
        const sorted = [...thread].sort((a, b) => a.created_at.localeCompare(b.created_at))
        const latest = sorted[sorted.length - 1]
        const name = sorted.find((item) => item.contact_name)?.contact_name
        const unread = readPeers.has(peer) ? 0 : sorted.filter((item) => item.direction === 'inbound' && item.status !== 'read').length
        return {
          peer,
          title: name || formatWaNumber(peer),
          phoneLabel: formatWaNumber(peer),
          initials: initials(name || peer),
          messages: sorted,
          latest,
          unread,
          important: starred.has(peer),
        }
      })
      .sort((a, b) => b.latest.created_at.localeCompare(a.latest.created_at))
  }, [messages, readPeers, starred])

  const visibleThreads = threads.filter((thread) => {
    const query = threadQuery.trim().toLowerCase()
    if (query && !`${thread.title} ${thread.phoneLabel} ${thread.latest.body || ''}`.toLowerCase().includes(query)) return false
    if (listFilter === 'unread') return thread.unread > 0
    if (listFilter === 'important') return thread.important
    return true
  })
  const active = threads.find((thread) => thread.peer === selectedPeer) || null
  const activeThread = active?.messages ?? []
  const unreadTotal = threads.reduce((sum, thread) => sum + thread.unread, 0)
  const importantTotal = threads.filter((thread) => thread.important).length

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ block: 'end' })
  }, [activeThread.length, selectedPeer])

  function openThread(peer: string) {
    setSelectedPeer(peer)
    setStartingNew(false)
    setReadPeers((current) => new Set(current).add(peer))
    setMoreOpen(false)
  }

  async function sendReaction(message: CustomerWhatsAppMessage, emoji: string) {
    if (!message.wa_message_id) return
    setSending(true)
    setError('')
    try {
      await whatsappApi.sendAccountMessage(account.id, {
        to: message.from,
        message_type: 'reaction',
        reaction_message_id: message.wa_message_id,
        reaction_emoji: emoji,
      })
      setReactFor(null)
      await loadMessages()
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Unable to send reaction')
    } finally {
      setSending(false)
    }
  }

  async function sendMessage(event: FormEvent) {
    event.preventDefault()
    const peer = active?.peer || newPeer
    if (!peer) {
      setError('Enter a WhatsApp number')
      return
    }
    setSending(true)
    setError('')
    const payload: CustomerWhatsAppSend = { to: peer, message_type: sendMode === 'buttons' ? 'interactive_buttons' : sendMode }
    if (replyTo) payload.reply_to = replyTo
    if (sendMode === 'text') payload.text = textBody.trim()
    if (sendMode === 'template') {
      payload.template_name = templateName
      payload.template_language = templateLanguage
    }
    if (sendMode === 'media') {
      payload.message_type = mediaType
      payload.media_link = mediaLink.trim()
      payload.media_caption = mediaCaption.trim()
    }
    if (sendMode === 'buttons') {
      payload.interactive_body = buttonBody.trim()
      payload.interactive_buttons = [buttonOne, buttonTwo, buttonThree]
        .map((title) => title.trim())
        .filter(Boolean)
        .map((title, index) => ({ id: `btn_${index + 1}`, title }))
    }
    try {
      const sent = await whatsappApi.sendAccountMessage(account.id, payload)
      setSelectedPeer(sent.to)
      setStartingNew(false)
      setNewPeer('')
      setTextBody('')
      setButtonBody('')
      setMediaCaption('')
      setReplyTo('')
      setReplyPreview('')
      setSendMode('text')
      await loadMessages()
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Unable to send message')
    } finally {
      setSending(false)
    }
  }

  function mediaUrl(mediaId: string) {
    return `${API_BASE_URL}/api/v1/whatsapp/accounts/${account.id}/media/${mediaId}`
  }

  if (loading) return <p className="explorer-loading">Loading WhatsApp conversations…</p>

  return (
    <div className="wa-page wa-customer">
      <div className="wa-page-title">
        <div>
          <button type="button" className="wa-biz-back" onClick={onBack}><ChevronLeft size={16} /> Accounts</button>
          <h1><MessageCircle size={20} /> {account.business_name || account.name}</h1>
          <p>Conversations on {formatWaNumber(line)}.</p>
        </div>
        <div className="wa-topbar-actions">
          <span className={canSend ? 'wa-connected' : 'wa-connected pending'}><i />{canSend ? 'Messaging' : 'Messaging unavailable'}</span>
          <button type="button" className="wa-ghost" onClick={() => void loadMessages()}><RefreshCw size={14} /> Refresh</button>
        </div>
      </div>
      {!canSend && <p className="wa-biz-notice">{deliveryAccount.last_error || 'You can read messages already delivered here. Sending stays off until Meta connects this number.'}</p>}
      {canSend && !repliesLive && (
        <form className="wa-biz-notice" onSubmit={(event) => void saveDelivery(event)}>
          <p>WhatsApp accepted messages from this number, but delivery updates and replies are still going to the Meta app that created the token. Paste that app’s App secret so they arrive here. In Meta: the app → App settings → Basic → App secret.</p>
          <label className="explorer-input">
            <strong>App secret</strong>
            <input type="password" value={appSecret} onChange={(event) => setAppSecret(event.target.value)} autoComplete="off" required />
          </label>
          <button className="primary-button" type="submit" disabled={deliveryBusy}>Turn on replies</button>
        </form>
      )}
      <div className="wa-inbox">
        <aside className="wa-list">
          <div className="wa-list-head">
            <h2>Conversations</h2>
            <button type="button" className="wa-icon-btn" aria-label="New conversation" onClick={() => { setStartingNew(true); setSelectedPeer(null) }}>
              <Plus size={14} />
            </button>
          </div>
          <label className="wa-search">
            <Search size={14} />
            <input value={threadQuery} onChange={(event) => setThreadQuery(event.target.value)} placeholder="Search by name, phone or message…" />
          </label>
          <div className="wa-filters">
            <button type="button" className={listFilter === 'all' ? 'active' : ''} onClick={() => setListFilter('all')}>All <em>{threads.length}</em></button>
            <button type="button" className={listFilter === 'unread' ? 'active' : ''} onClick={() => setListFilter('unread')}>Unread <em>{unreadTotal}</em></button>
            <button type="button" className={listFilter === 'important' ? 'active' : ''} onClick={() => setListFilter('important')}>Important <em>{importantTotal}</em></button>
          </div>
          <div className="wa-thread-list">
            {visibleThreads.length === 0 && <p className="wa-empty">No conversations yet.</p>}
            {visibleThreads.map((thread) => (
              <button key={thread.peer} type="button" className={`wa-thread ${selectedPeer === thread.peer ? 'active' : ''}`} onClick={() => openThread(thread.peer)}>
                <span className="wa-avatar wa-avatar-green">{thread.initials}</span>
                <span className="wa-thread-copy">
                  <strong>{thread.title}</strong>
                  <span>{thread.latest.body || 'Attachment'}</span>
                </span>
                <span className="wa-thread-meta">
                  <small>{formatChatTime(thread.latest.created_at)}</small>
                  {thread.unread > 0 && <em>{thread.unread}</em>}
                </span>
              </button>
            ))}
          </div>
        </aside>

        <section className="wa-chat">
          <div className="wa-chat-head">
            {active ? (
              <>
                <span className="wa-avatar wa-avatar-green">{active.initials}</span>
                <div className="wa-chat-id">
                  <strong>{active.title}</strong>
                  <small>WhatsApp</small>
                </div>
              </>
            ) : (
              <div className="wa-chat-id">
                <strong>{startingNew ? 'New conversation' : 'Select a conversation'}</strong>
                <small>{startingNew ? 'Enter a WhatsApp number' : formatWaNumber(line)}</small>
              </div>
            )}
            <div className="wa-chat-tools">
              <button
                type="button"
                className={`wa-tool ${active && starred.has(active.peer) ? 'on' : ''}`}
                onClick={() => {
                  if (!active) return
                  setStarred((current) => {
                    const next = new Set(current)
                    if (next.has(active.peer)) next.delete(active.peer)
                    else next.add(active.peer)
                    return next
                  })
                }}
              >
                <Star size={14} /> Star
              </button>
              <div className="wa-pop">
                <button type="button" className="wa-tool" onClick={() => setMoreOpen((value) => !value)}><MoreHorizontal size={14} /> More</button>
                {moreOpen && active && (
                  <div className="wa-menu">
                    <button type="button" onClick={() => { navigator.clipboard.writeText(active.phoneLabel); setMoreOpen(false) }}>Copy number</button>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="wa-canvas">
            {!active && !startingNew && <p className="wa-empty">Messages for this WhatsApp number appear here.</p>}
            {activeThread.map((item, index) => {
              const previous = activeThread[index - 1]
              const showDay = !previous || new Date(previous.created_at).toDateString() !== new Date(item.created_at).toDateString()
              const outbound = item.direction === 'outbound'
              return (
                <div key={item.id}>
                  {showDay && <div className="wa-day">{formatDayLabel(item.created_at)}</div>}
                  <div className={`wa-bubble-row ${outbound ? 'out' : 'in'}`}>
                    <div className={`wa-bubble ${outbound ? 'out' : 'in'}`}>
                      {item.media?.id && ['image', 'sticker'].includes(item.message_type) && <img src={mediaUrl(item.media.id)} alt="" className="wa-media" />}
                      {item.media?.id && item.message_type === 'video' && <video src={mediaUrl(item.media.id)} controls className="wa-media" />}
                      {item.media?.id && item.message_type === 'audio' && <audio src={mediaUrl(item.media.id)} controls />}
                      {item.media?.id && item.message_type === 'document' && <a href={mediaUrl(item.media.id)} target="_blank" rel="noreferrer">Open document</a>}
                      {item.message_type === 'template' && <em className="wa-kind">Template</em>}
                      {item.body && <p>{item.body}</p>}
                      <footer>
                        <time>{formatClock(item.created_at)}</time>
                        {outbound && (item.status === 'delivered' || item.status === 'read' ? <CheckCheck size={13} className={item.status === 'read' ? 'read' : ''} /> : <Check size={13} />)}
                      </footer>
                      {detailsId === item.id && (
                        <div className="wa-inspector">
                          <strong>Message details</strong>
                          <span>Status · {item.status}</span>
                          <span>Type · {item.message_type.replace(/_/g, ' ')}</span>
                        </div>
                      )}
                    </div>
                    <div className="wa-hover">
                      {!outbound && <button type="button" onClick={() => { setReplyTo(item.wa_message_id || ''); setReplyPreview(item.body || 'Attachment'); setSendMode('text') }}>Reply</button>}
                      {!outbound && item.wa_message_id && <button type="button" onClick={() => setReactFor(reactFor === item.id ? null : item.id)}>React</button>}
                      <button type="button" onClick={() => setDetailsId(detailsId === item.id ? null : item.id)} aria-label="Message details"><MoreHorizontal size={14} /></button>
                      {reactFor === item.id && (
                        <span className="wa-reacts">
                          {REACTIONS.map((emoji) => <button key={emoji} type="button" onClick={() => void sendReaction(item, emoji)}>{emoji}</button>)}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              )
            })}
            <div ref={chatEndRef} />
          </div>
          <form className="wa-composer" onSubmit={(event) => void sendMessage(event)}>
            <div className="wa-modes">
              {(['text', 'template', 'media', 'buttons'] as const).map((id) => (
                <button key={id} type="button" className={sendMode === id ? 'active' : ''} onClick={() => setSendMode(id)}>{id[0].toUpperCase() + id.slice(1)}</button>
              ))}
            </div>
            {replyPreview && (
              <div className="wa-quote">
                <div><strong>Replying</strong><p>{replyPreview}</p></div>
                <button type="button" aria-label="Cancel reply" onClick={() => { setReplyPreview(''); setReplyTo('') }}><X size={14} /></button>
              </div>
            )}
            {(startingNew || !active) && <input className="wa-new-peer" value={newPeer} onChange={(event) => setNewPeer(event.target.value)} placeholder="Recipient number, e.g. 919453226814" />}
            {sendMode === 'template' && (
              <div className="wa-extra">
                <select value={templateName} onChange={(event) => setTemplateName(event.target.value)} required>
                  <option value="">Choose a template</option>
                  {templates.map((template) => <option key={`${template.name}-${template.language}`} value={template.name || ''}>{template.name} ({template.language})</option>)}
                </select>
                <input value={templateLanguage} onChange={(event) => setTemplateLanguage(event.target.value)} aria-label="Language code" />
              </div>
            )}
            {sendMode === 'media' && (
              <div className="wa-extra">
                <select value={mediaType} onChange={(event) => setMediaType(event.target.value as typeof mediaType)}>
                  <option value="image">Image</option>
                  <option value="document">Document</option>
                  <option value="audio">Audio</option>
                  <option value="video">Video</option>
                </select>
                <input value={mediaLink} onChange={(event) => setMediaLink(event.target.value)} placeholder="Public file link" required />
              </div>
            )}
            {sendMode === 'buttons' && (
              <div className="wa-extra">
                <input value={buttonOne} onChange={(event) => setButtonOne(event.target.value)} placeholder="Button 1" required />
                <input value={buttonTwo} onChange={(event) => setButtonTwo(event.target.value)} placeholder="Button 2" />
                <input value={buttonThree} onChange={(event) => setButtonThree(event.target.value)} placeholder="Button 3" />
              </div>
            )}
            <div className="wa-compose-box">
              <textarea
                rows={2}
                value={sendMode === 'media' ? mediaCaption : sendMode === 'buttons' ? buttonBody : textBody}
                onChange={(event) => {
                  if (sendMode === 'media') setMediaCaption(event.target.value)
                  else if (sendMode === 'buttons') setButtonBody(event.target.value)
                  else setTextBody(event.target.value)
                }}
                placeholder={canSend ? 'Type a message…' : 'Sending is unavailable until this number is connected'}
                required={sendMode !== 'template'}
                disabled={!canSend}
              />
            </div>
            <div className="wa-compose-bar">
              <div className="wa-compose-icons">
                <button type="button" aria-label="Emoji" onClick={() => setEmojiOpen((value) => !value)}><Smile size={16} /></button>
                <button type="button" aria-label="Attach file" onClick={() => { setSendMode('media'); setMediaType('document') }}><Paperclip size={16} /></button>
                <button type="button" aria-label="Image" onClick={() => { setSendMode('media'); setMediaType('image') }}><ImageIcon size={16} /></button>
                {emojiOpen && (
                  <span className="wa-reacts static">
                    {REACTIONS.map((emoji) => <button key={emoji} type="button" onClick={() => { setTextBody((value) => `${value}${emoji}`); setEmojiOpen(false); setSendMode('text') }}>{emoji}</button>)}
                  </span>
                )}
              </div>
              {error && <p className="wa-error">{error}</p>}
              <button className="wa-send" type="submit" disabled={sending || !canSend}><Send size={14} /> {sending ? 'Sending' : 'Send'}</button>
            </div>
          </form>
        </section>

        <aside className="wa-profile">
          <div className="wa-profile-hero">
            <span className="wa-avatar large wa-avatar-green">{active ? active.initials : <UserRound size={22} />}</span>
            <div>
              <strong className="wa-name">{active?.title || 'No contact'}</strong>
              <small>{active ? 'WhatsApp' : 'Select a conversation'}</small>
            </div>
          </div>
          <div className="wa-tabs">
            {(['details', 'events'] as const).map((id) => (
              <button key={id} type="button" className={profileTab === id ? 'active' : ''} onClick={() => setProfileTab(id)}>{id[0].toUpperCase() + id.slice(1)}</button>
            ))}
          </div>
          {profileTab === 'details' && active && (
            <dl className="wa-fields">
              <div><dt>Phone</dt><dd>{active.phoneLabel}</dd></div>
              <div><dt>Status</dt><dd>{active.latest.status}</dd></div>
              <div><dt>Messages</dt><dd>{active.messages.length}</dd></div>
              <div><dt>First seen</dt><dd>{formatWhen(active.messages[0].created_at)}</dd></div>
              <div><dt>Last message</dt><dd>{formatWhen(active.latest.created_at)}</dd></div>
              <div><dt>Source</dt><dd>WhatsApp</dd></div>
            </dl>
          )}
          {profileTab === 'details' && !active && <p className="wa-empty">Open a conversation to see the customer.</p>}
          {profileTab === 'events' && (
            <ul className="wa-events">
              {activeThread.length === 0 && <li><strong>No messages yet</strong></li>}
              {[...activeThread].reverse().map((item) => (
                <li key={item.id}><strong>{item.direction === 'inbound' ? 'Customer message' : 'Reply sent'}</strong><span>{formatWhen(item.created_at)}</span></li>
              ))}
            </ul>
          )}
          <div className="wa-quick">
            <h3>Quick actions</h3>
            <button type="button" onClick={() => setSendMode('template')}><MessageSquareText size={14} /> Send template</button>
            <button type="button" onClick={() => setSendMode('media')}><ImageIcon size={14} /> Send media</button>
          </div>
        </aside>
      </div>
    </div>
  )
}