"use client"

import { useState, useEffect, useCallback } from 'react'
import { 
  Search, Mail, Clock, CheckCircle, Archive,
  Phone, RefreshCw, Loader2, MessageSquare, Globe, Users,
  Send, FileText, X
} from 'lucide-react'
import { getSupabaseClient } from '@/lib/supabase/client'
import { useAuth } from '@/lib/auth/AuthProvider'
import { useVisibilityRefresh } from '@/lib/hooks/useVisibilityRefresh'
import Link from 'next/link'

interface ContactMessage {
  id: string
  type: 'contact' | 'portal'
  company_name: string
  contact_person: string
  email: string
  phone: string
  employee_count: string | null
  service_type: string | null
  subject: string | null
  message: string | null
  status: string
  created_at: string
  read_at: string | null
}

const statusConfig = {
  new: { label: 'Yeni', color: 'bg-blue-100 text-blue-700' },
  read: { label: 'Okundu', color: 'bg-amber-100 text-amber-700' },
  replied: { label: 'Yanıtlandı', color: 'bg-emerald-100 text-emerald-700' },
  archived: { label: 'Arşiv', color: 'bg-slate-100 text-slate-600' },
}

const serviceLabels: Record<string, string> = {
  'is-guvenligi': 'İş Güvenliği',
  'isyeri-hekimligi': 'İşyeri Hekimliği',
  'risk-analizi': 'Risk Analizi',
  'komple': 'Komple Paket',
}

export default function MesajlarPage() {
  const { user } = useAuth()
  const [messages, setMessages] = useState<ContactMessage[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState<'all' | 'contact' | 'portal'>('all')
  const [statusFilter, setStatusFilter] = useState<'all' | 'new' | 'read' | 'replied' | 'archived'>('all')
  const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null)
  const [updating, setUpdating] = useState(false)
  const [replyContent, setReplyContent] = useState('')
  const [sendingReply, setSendingReply] = useState(false)

  const supabase = getSupabaseClient()

  const fetchMessages = useCallback(async () => {
    if (!user) return
    setLoading(true)
    try {
      const allMessages: ContactMessage[] = []
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const { data: contactData } = await (supabase as any)
        .from('contact_messages').select('*').order('created_at', { ascending: false })
      if (contactData) {
        contactData.forEach((msg: Record<string, unknown>) => {
          allMessages.push({
            id: msg.id as string, type: 'contact', company_name: msg.company_name as string,
            contact_person: msg.contact_person as string, email: msg.email as string, phone: msg.phone as string,
            employee_count: msg.employee_count as string | null, service_type: msg.service_type as string | null,
            subject: null, message: msg.message as string | null, status: msg.status as string || 'new',
            created_at: msg.created_at as string, read_at: msg.read_at as string | null
          })
        })
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const { data: portalData } = await (supabase as any).from('messages').select('*').order('created_at', { ascending: false })
      if (portalData) {
        const companyIds = [...new Set(portalData.map((m: Record<string, unknown>) => m.company_id).filter(Boolean))]
        let companiesMap: Record<string, { name: string; email: string; phone: string | null }> = {}
        if (companyIds.length > 0) {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const { data: companiesData } = await (supabase as any).from('companies').select('id, company_name, email, phone').in('id', companyIds)
          if (companiesData) {
            companiesMap = companiesData.reduce((acc: Record<string, { name: string; email: string; phone: string | null }>, c: { id: string; company_name: string; email: string; phone: string | null }) => {
              acc[c.id] = { name: c.company_name, email: c.email, phone: c.phone }; return acc
            }, {})
          }
        }
        portalData.forEach((msg: Record<string, unknown>) => {
          const company = companiesMap[msg.company_id as string]
          allMessages.push({
            id: msg.id as string, type: 'portal', company_name: company?.name || 'Şirket Portalı',
            contact_person: 'Portal Kullanıcısı', email: company?.email || '', phone: company?.phone || '',
            employee_count: null, service_type: null, subject: msg.subject as string | null,
            message: msg.content as string | null, status: (msg.read_at as string) ? 'read' : 'new',
            created_at: msg.created_at as string, read_at: msg.read_at as string | null
          })
        })
      }
      allMessages.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
      setMessages(allMessages)
    } catch (err) { console.error('Error:', err); setMessages([]) }
    setLoading(false)
  }, [user, supabase])

  useEffect(() => { if (user) fetchMessages() }, [user, fetchMessages])
  useVisibilityRefresh(fetchMessages, !!user)

  const updateStatus = async (msg: ContactMessage, newStatus: string) => {
    setUpdating(true)
    try {
      if (msg.type === 'contact') {
        const updateData: Record<string, unknown> = { status: newStatus }
        if (newStatus === 'read') updateData.read_at = new Date().toISOString()
        if (newStatus === 'replied') updateData.replied_at = new Date().toISOString()
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await (supabase as any).from('contact_messages').update(updateData).eq('id', msg.id)
      } else {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await (supabase as any).from('messages').update({ read_at: newStatus !== 'new' ? new Date().toISOString() : null }).eq('id', msg.id)
      }
      setMessages(prev => prev.map(m => m.id === msg.id ? { ...m, status: newStatus } : m))
      if (selectedMessage?.id === msg.id) setSelectedMessage({ ...msg, status: newStatus })
    } catch (err) { console.error('Update error:', err) }
    setUpdating(false)
  }

  const handleSelect = async (msg: ContactMessage) => {
    setSelectedMessage(msg); setReplyContent('')
    if (msg.status === 'new') await updateStatus(msg, 'read')
  }

  const sendReply = async () => {
    if (!selectedMessage || !replyContent.trim()) return
    setSendingReply(true)
    try {
      if (selectedMessage.type === 'contact') {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await (supabase as any).from('contact_messages').update({
          status: 'replied', replied_at: new Date().toISOString(), admin_reply: replyContent
        }).eq('id', selectedMessage.id)
      }
      setMessages(prev => prev.map(m => m.id === selectedMessage.id ? { ...m, status: 'replied' } : m))
      setSelectedMessage({ ...selectedMessage, status: 'replied' }); setReplyContent('')
    } catch (err) { console.error('Reply error:', err) }
    setSendingReply(false)
  }

  const filtered = messages.filter(m => {
    const matchesFilter = filter === 'all' || m.type === filter
    const matchesStatus = statusFilter === 'all' || m.status === statusFilter
    const matchesSearch = m.company_name.toLowerCase().includes(search.toLowerCase()) ||
      m.contact_person.toLowerCase().includes(search.toLowerCase()) ||
      m.email.toLowerCase().includes(search.toLowerCase()) ||
      (m.subject?.toLowerCase().includes(search.toLowerCase()) || false)
    return matchesFilter && matchesStatus && matchesSearch
  })

  const formatDate = (dateStr: string) => new Date(dateStr).toLocaleDateString('tr-TR', { day: '2-digit', month: '2-digit', year: 'numeric' })
  const newCount = messages.filter(m => m.status === 'new').length
  const contactCount = messages.filter(m => m.type === 'contact').length
  const portalCount = messages.filter(m => m.type === 'portal').length

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="page-title">Mesajlar</h1>
        <div className="flex items-center gap-3">
          {newCount > 0 && <span className="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-medium">{newCount} yeni</span>}
          <button onClick={fetchMessages} disabled={loading}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 rounded-xl transition-colors disabled:opacity-50 shadow-sm">
            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} /> Yenile
          </button>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <button onClick={() => setFilter('all')} className={`px-3 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-colors ${filter === 'all' ? 'bg-blue-500 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}>
          Tümü {messages.length}
        </button>
        <button onClick={() => setFilter('contact')} className={`px-3 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-colors flex items-center gap-1.5 sm:gap-2 ${filter === 'contact' ? 'bg-blue-500 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}>
          <Globe className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> <span className="hidden sm:inline">Web Sitesi</span><span className="sm:hidden">Web</span> {contactCount}
        </button>
        <button onClick={() => setFilter('portal')} className={`px-3 sm:px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-colors flex items-center gap-1.5 sm:gap-2 ${filter === 'portal' ? 'bg-purple-500 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}>
          <Users className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> Portal {portalCount}
        </button>
      </div>

      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm">
        <div className="p-3 sm:p-4 border-b border-slate-100 flex flex-col sm:flex-row gap-3 sm:gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input type="text" placeholder="Ara..." value={search} onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/30" />
          </div>
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
            className="px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30">
            <option value="all">Tüm Durumlar</option>
            <option value="new">Yeni</option>
            <option value="read">Okundu</option>
            <option value="replied">Yanıtlandı</option>
            <option value="archived">Arşiv</option>
          </select>
        </div>

        <div className="divide-y divide-slate-100">
          {loading ? (
            <div className="flex items-center justify-center py-20"><Loader2 className="w-6 h-6 text-blue-500 animate-spin" /></div>
          ) : filtered.length === 0 ? (
            <div className="text-center py-20"><MessageSquare className="w-12 h-12 text-slate-300 mx-auto mb-3" /><p className="text-slate-500">Mesaj bulunamadı</p></div>
          ) : (
            filtered.map((msg) => {
              const status = statusConfig[msg.status as keyof typeof statusConfig]
              const isSelected = selectedMessage?.id === msg.id
              return (
                <button key={msg.id} onClick={() => handleSelect(msg)} 
                  className={`w-full p-4 text-left flex items-center gap-4 hover:bg-slate-50 transition-colors ${isSelected ? 'bg-blue-50' : ''}`}>
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${msg.type === 'portal' ? 'bg-purple-100' : 'bg-blue-100'}`}>
                    {msg.type === 'portal' ? <Users className="w-5 h-5 text-purple-600" /> : <Globe className="w-5 h-5 text-blue-600" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <p className={`font-medium ${msg.status === 'new' ? 'text-slate-800' : 'text-slate-600'}`}>{msg.company_name}</p>
                      <span className={`px-2 py-0.5 text-xs font-medium rounded-lg ${status?.color || 'bg-slate-100 text-slate-600'}`}>{status?.label || 'Yeni'}</span>
                      {msg.status === 'new' && <span className="w-2 h-2 bg-blue-500 rounded-full" />}
                    </div>
                    <p className="text-sm text-slate-500 truncate mt-0.5">{msg.subject || msg.contact_person}{msg.message && ` • ${msg.message.substring(0, 50)}...`}</p>
                  </div>
                  <div className="flex items-center gap-4 flex-shrink-0">
                    <span className="text-sm text-slate-400">{formatDate(msg.created_at)}</span>
                    {msg.phone && <span className="text-sm text-slate-400 hidden sm:block">{msg.phone}</span>}
                  </div>
                </button>
              )
            })
          )}
        </div>
      </div>

      {/* Sağdan Açılan Panel (Drawer) */}
      {selectedMessage && (
        <>
          <div className="fixed inset-0 bg-black/20 z-40" onClick={() => setSelectedMessage(null)} />
          <div className="fixed right-0 top-0 h-full w-full sm:max-w-lg bg-white shadow-2xl z-50 flex flex-col animate-in slide-in-from-right duration-200">
            {/* Header */}
            <div className="p-4 border-b border-slate-100 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${selectedMessage.type === 'portal' ? 'bg-purple-100' : 'bg-blue-100'}`}>
                  {selectedMessage.type === 'portal' ? <Users className="w-5 h-5 text-purple-600" /> : <Globe className="w-5 h-5 text-blue-600" />}
                </div>
                <div>
                  <h2 className="font-semibold text-slate-800">{selectedMessage.company_name}</h2>
                  <p className="text-sm text-slate-500">{selectedMessage.contact_person}</p>
                </div>
              </div>
              <button onClick={() => setSelectedMessage(null)} className="p-2 hover:bg-slate-100 rounded-lg transition-colors">
                <X className="w-5 h-5 text-slate-500" />
              </button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              <div className="flex items-center gap-2">
                <span className={`px-2 py-1 text-xs font-medium rounded-lg ${statusConfig[selectedMessage.status as keyof typeof statusConfig]?.color || 'bg-slate-100 text-slate-600'}`}>
                  {statusConfig[selectedMessage.status as keyof typeof statusConfig]?.label || 'Yeni'}
                </span>
                <span className={`px-2 py-1 text-xs font-medium rounded-lg ${selectedMessage.type === 'portal' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-600'}`}>
                  {selectedMessage.type === 'portal' ? 'Portal' : 'Web Sitesi'}
                </span>
                <span className="text-xs text-slate-400 ml-auto flex items-center gap-1"><Clock className="w-3 h-3" />{formatDate(selectedMessage.created_at)}</span>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <a href={`mailto:${selectedMessage.email}`} className="flex items-center gap-2 bg-slate-50 rounded-xl p-3 hover:bg-slate-100 transition-colors">
                  <Mail className="w-4 h-4 text-slate-400 flex-shrink-0" />
                  <div className="min-w-0"><p className="text-xs text-slate-500">E-posta</p><p className="text-sm text-blue-500 truncate">{selectedMessage.email || '-'}</p></div>
                </a>
                <a href={`tel:${selectedMessage.phone}`} className="flex items-center gap-2 bg-slate-50 rounded-xl p-3 hover:bg-slate-100 transition-colors">
                  <Phone className="w-4 h-4 text-slate-400 flex-shrink-0" />
                  <div className="min-w-0"><p className="text-xs text-slate-500">Telefon</p><p className="text-sm text-blue-500 truncate">{selectedMessage.phone || '-'}</p></div>
                </a>
              </div>

              {selectedMessage.type === 'contact' && (selectedMessage.employee_count || selectedMessage.service_type) && (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {selectedMessage.employee_count && <div className="bg-slate-50 rounded-xl p-3"><p className="text-xs text-slate-500">Çalışan Sayısı</p><p className="text-sm text-slate-800">{selectedMessage.employee_count}</p></div>}
                  {selectedMessage.service_type && <div className="bg-slate-50 rounded-xl p-3"><p className="text-xs text-slate-500">İlgilendiği Hizmet</p><p className="text-sm text-slate-800">{serviceLabels[selectedMessage.service_type] || selectedMessage.service_type}</p></div>}
                </div>
              )}

              {selectedMessage.subject && (
                <div className="bg-slate-50 rounded-xl p-3"><p className="text-xs text-slate-500 mb-1">Konu</p><p className="text-sm text-slate-800 font-medium">{selectedMessage.subject}</p></div>
              )}

              {selectedMessage.message && (
                <div className="bg-slate-50 rounded-xl p-3"><p className="text-xs text-slate-500 mb-1">Mesaj</p><p className="text-sm text-slate-700 whitespace-pre-wrap">{selectedMessage.message}</p></div>
              )}
            </div>

            {/* Footer Actions */}
            <div className="p-4 border-t border-slate-100 space-y-3">
              {selectedMessage.status !== 'replied' && (
                <div className="flex gap-2">
                  <input type="text" placeholder="Hızlı yanıt yaz..." value={replyContent} onChange={(e) => setReplyContent(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && replyContent.trim() && sendReply()}
                    className="flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/30" />
                  <button onClick={sendReply} disabled={!replyContent.trim() || sendingReply}
                    className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-xl text-sm font-medium transition-colors disabled:opacity-50 flex items-center gap-2">
                    {sendingReply ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
                  </button>
                </div>
              )}
              <div className="grid grid-cols-1 gap-2">
                {selectedMessage.type === 'contact' && selectedMessage.employee_count && (
                  <Link href={`/admin/teklifler?company=${encodeURIComponent(selectedMessage.company_name)}&email=${encodeURIComponent(selectedMessage.email)}&phone=${encodeURIComponent(selectedMessage.phone || '')}&employee=${selectedMessage.employee_count}`}
                    className="w-full py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2">
                    <FileText className="w-4 h-4" /> Teklif Oluştur
                  </Link>
                )}
                <div className="grid grid-cols-2 gap-2">
                  {selectedMessage.status !== 'replied' && (
                    <button onClick={() => updateStatus(selectedMessage, 'replied')} disabled={updating}
                      className="w-full py-2.5 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-xl text-sm font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
                      <CheckCircle className="w-4 h-4" /> Yanıtlandı
                    </button>
                  )}
                  {selectedMessage.status !== 'archived' && selectedMessage.type === 'contact' && (
                    <button onClick={() => updateStatus(selectedMessage, 'archived')} disabled={updating}
                      className="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2">
                      <Archive className="w-4 h-4" /> Arşivle
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}