'use client'

import { useEffect, useState } from 'react'
import { apiFetch } from '@/lib/api'
import { useDashboardI18n } from '@/components/I18nProvider'

type NotificationItem = {
  id: string
  type: string
  title: string
  body: string
  channel: string
  status: string
  sentAt: string | null
  readAt: string | null
  createdAt: string
  providerMessageId: string | null
  locale: string
}

type PreferenceItem = {
  notificationType: string
  channel: string
  enabled: boolean
}

const COMPANY_EVENTS = [
  'NEW_RESERVATION',
  'RESERVATION_CANCELLED',
  'PAYMENT_RECEIVED',
  'SUBSCRIPTION_TRIAL_ENDING',
  'MAINTENANCE_DUE',
  'OFFER_EXPIRING',
]

const COMPANY_CHANNELS = ['EMAIL', 'SMS', 'WHATSAPP', 'IN_APP', 'PUSH']

const CHANNEL_BADGE: Record<string, string> = {
  EMAIL:    'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
  SMS:      'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
  WHATSAPP: 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300',
  IN_APP:   'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
  PUSH:     'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
}

const STATUS_BADGE: Record<string, string> = {
  PENDING:   'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
  SENT:      'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
  DELIVERED: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
  FAILED:    'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
  READ:      'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400',
}

export default function DashboardNotificationsPage() {
  const { language } = useDashboardI18n()
  const [notifications, setNotifications] = useState<NotificationItem[]>([])
  const [history, setHistory] = useState<NotificationItem[]>([])
  const [preferences, setPreferences] = useState<Record<string, boolean>>({})
  const [activeTab, setActiveTab] = useState<'inbox' | 'history' | 'preferences'>('inbox')
  const [loading, setLoading] = useState(true)
  const [historyLoading, setHistoryLoading] = useState(false)
  const [historyLoaded, setHistoryLoaded] = useState(false)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [filterChannel, setFilterChannel] = useState('')
  const [filterStatus, setFilterStatus] = useState('')

  const copy = {
    en: {
      title: 'Notifications',
      subtitle: 'Track in-app alerts, audit delivery history, and control preferences for your team account.',
      inbox: 'Inbox',
      history: 'History',
      preferences: 'Preferences',
      markAllRead: 'Mark all as read',
      loading: 'Loading notifications…',
      empty: 'No notifications yet.',
      read: 'Read',
      markRead: 'Mark as read',
      event: 'Event',
      channel: 'Channel',
      status: 'Status',
      sentAt: 'Sent at',
      date: 'Date',
      allChannels: 'All channels',
      allStatuses: 'All statuses',
      savePreferences: 'Save preferences',
      saving: 'Saving…',
      failedLoad: 'Failed to load notifications',
      failedSave: 'Failed to save preferences',
      noHistory: 'No notification history found.',
      channels: { EMAIL: 'Email', SMS: 'SMS', WHATSAPP: 'WhatsApp', IN_APP: 'In-app', PUSH: 'Push' } as Record<string, string>,
      statuses: { PENDING: 'Pending', SENT: 'Sent', DELIVERED: 'Delivered', FAILED: 'Failed', READ: 'Read' } as Record<string, string>,
      events: {
        NEW_RESERVATION: 'New reservation',
        RESERVATION_CANCELLED: 'Reservation cancelled',
        PAYMENT_RECEIVED: 'Payment received',
        SUBSCRIPTION_TRIAL_ENDING: 'Trial ending',
        MAINTENANCE_DUE: 'Maintenance due',
        OFFER_EXPIRING: 'Offer expiring',
        BOOKING_CONFIRMED: 'Booking confirmed',
        VEHICLE_MAINTENANCE_DUE: 'Vehicle maintenance due',
      } as Record<string, string>,
    },
    fr: {
      title: 'Notifications',
      subtitle: 'Suivez les alertes, auditez l\'historique de diffusion et gérez les préférences de votre équipe.',
      inbox: 'Boîte de réception',
      history: 'Historique',
      preferences: 'Préférences',
      markAllRead: 'Tout marquer comme lu',
      loading: 'Chargement des notifications…',
      empty: 'Aucune notification pour le moment.',
      read: 'Lu',
      markRead: 'Marquer comme lu',
      event: 'Événement',
      channel: 'Canal',
      status: 'Statut',
      sentAt: 'Envoyé le',
      date: 'Date',
      allChannels: 'Tous les canaux',
      allStatuses: 'Tous les statuts',
      savePreferences: 'Enregistrer les préférences',
      saving: 'Enregistrement…',
      failedLoad: 'Échec du chargement des notifications',
      failedSave: 'Échec de l\'enregistrement des préférences',
      noHistory: 'Aucun historique de notification trouvé.',
      channels: { EMAIL: 'Email', SMS: 'SMS', WHATSAPP: 'WhatsApp', IN_APP: 'Dans l\'application', PUSH: 'Push' } as Record<string, string>,
      statuses: { PENDING: 'En attente', SENT: 'Envoyé', DELIVERED: 'Délivré', FAILED: 'Échoué', READ: 'Lu' } as Record<string, string>,
      events: {
        NEW_RESERVATION: 'Nouvelle réservation',
        RESERVATION_CANCELLED: 'Réservation annulée',
        PAYMENT_RECEIVED: 'Paiement reçu',
        SUBSCRIPTION_TRIAL_ENDING: 'Fin d\'essai proche',
        MAINTENANCE_DUE: 'Maintenance due',
        OFFER_EXPIRING: 'Offre expirante',
        BOOKING_CONFIRMED: 'Réservation confirmée',
        VEHICLE_MAINTENANCE_DUE: 'Maintenance véhicule due',
      } as Record<string, string>,
    },
    ar: {
      title: 'الإشعارات',
      subtitle: 'تابع التنبيهات وراجع سجل الإرسال وتحكم في التفضيلات لحساب فريقك.',
      inbox: 'صندوق الوارد',
      history: 'السجل',
      preferences: 'التفضيلات',
      markAllRead: 'تحديد الكل كمقروء',
      loading: 'جارٍ تحميل الإشعارات…',
      empty: 'لا توجد إشعارات حالياً.',
      read: 'مقروء',
      markRead: 'تحديد كمقروء',
      event: 'الحدث',
      channel: 'القناة',
      status: 'الحالة',
      sentAt: 'وقت الإرسال',
      date: 'التاريخ',
      allChannels: 'جميع القنوات',
      allStatuses: 'جميع الحالات',
      savePreferences: 'حفظ التفضيلات',
      saving: 'جارٍ الحفظ…',
      failedLoad: 'فشل تحميل الإشعارات',
      failedSave: 'فشل حفظ التفضيلات',
      noHistory: 'لا يوجد سجل إشعارات.',
      channels: { EMAIL: 'البريد', SMS: 'رسائل', WHATSAPP: 'واتساب', IN_APP: 'داخل التطبيق', PUSH: 'إشعار فوري' } as Record<string, string>,
      statuses: { PENDING: 'قيد الانتظار', SENT: 'مرسل', DELIVERED: 'تم التسليم', FAILED: 'فشل', READ: 'مقروء' } as Record<string, string>,
      events: {
        NEW_RESERVATION: 'حجز جديد',
        RESERVATION_CANCELLED: 'إلغاء حجز',
        PAYMENT_RECEIVED: 'تم استلام الدفع',
        SUBSCRIPTION_TRIAL_ENDING: 'اقتراب نهاية التجربة',
        MAINTENANCE_DUE: 'صيانة مستحقة',
        OFFER_EXPIRING: 'عرض على وشك الانتهاء',
        BOOKING_CONFIRMED: 'تأكيد الحجز',
        VEHICLE_MAINTENANCE_DUE: 'صيانة المركبة مستحقة',
      } as Record<string, string>,
    },
  }[language]

  async function load() {
    setLoading(true)
    setError(null)
    try {
      const [notificationData, preferenceData] = await Promise.all([
        apiFetch<NotificationItem[]>('/notifications/company'),
        apiFetch<PreferenceItem[]>('/notifications/company/preferences'),
      ])
      setNotifications(notificationData)
      const mapped = Object.fromEntries(
        preferenceData.map((item) => [`${item.notificationType}:${item.channel}`, item.enabled]),
      )
      setPreferences(mapped)
    } catch (err: any) {
      setError(err.message ?? copy.failedLoad)
    } finally {
      setLoading(false)
    }
  }

  async function loadHistory() {
    setHistoryLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams()
      if (filterChannel) params.set('channel', filterChannel)
      if (filterStatus) params.set('status', filterStatus)
      const qs = params.toString()
      const data = await apiFetch<NotificationItem[]>(`/notifications/history${qs ? `?${qs}` : ''}`)
      setHistory(data)
      setHistoryLoaded(true)
    } catch (err: any) {
      setError(err.message ?? copy.failedLoad)
    } finally {
      setHistoryLoading(false)
    }
  }

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

  useEffect(() => {
    if (activeTab === 'history') {
      loadHistory()
    }
  }, [activeTab, filterChannel, filterStatus])

  async function markRead(id: string) {
    await apiFetch(`/notifications/company/${id}/read`, { method: 'POST' })
    setNotifications((current) =>
      current.map((item) => (item.id === id ? { ...item, readAt: new Date().toISOString() } : item)),
    )
    window.dispatchEvent(new Event('notifications:updated'))
  }

  async function markAllRead() {
    await apiFetch('/notifications/company/read-all', { method: 'POST' })
    setNotifications((current) => current.map((item) => ({ ...item, readAt: item.readAt ?? new Date().toISOString() })))
    window.dispatchEvent(new Event('notifications:updated'))
  }

  async function savePreferences() {
    setSaving(true)
    setError(null)
    try {
      const body = Object.entries(preferences).map(([key, enabled]) => {
        const [notificationType, channel] = key.split(':')
        return { notificationType, channel, enabled }
      })
      await apiFetch('/notifications/company/preferences', {
        method: 'PATCH',
        body: JSON.stringify(body),
      })
    } catch (err: any) {
      setError(err.message ?? copy.failedSave)
    } finally {
      setSaving(false)
    }
  }

  function preferenceValue(notificationType: string, channel: string) {
    return preferences[`${notificationType}:${channel}`] ?? true
  }

  function setPreference(notificationType: string, channel: string, enabled: boolean) {
    setPreferences((current) => ({
      ...current,
      [`${notificationType}:${channel}`]: enabled,
    }))
  }

  function labelEvent(type: string) {
    return copy.events[type] ?? type.replaceAll('_', ' ')
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">{copy.title}</h1>
          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{copy.subtitle}</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setActiveTab('inbox')}
            className={activeTab === 'inbox' ? 'btn-primary' : 'btn-secondary'}
          >
            {copy.inbox}
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('history')}
            className={activeTab === 'history' ? 'btn-primary' : 'btn-secondary'}
          >
            {copy.history}
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('preferences')}
            className={activeTab === 'preferences' ? 'btn-primary' : 'btn-secondary'}
          >
            {copy.preferences}
          </button>
        </div>
      </div>

      {error ? <div className="card p-4 text-sm text-red-600 dark:text-red-400">{error}</div> : null}

      {/* ── Inbox ── */}
      {activeTab === 'inbox' ? (
        <div className="space-y-4">
          <div className="flex justify-end">
            <button type="button" onClick={markAllRead} className="btn-secondary">
              {copy.markAllRead}
            </button>
          </div>
          {loading ? <div className="card p-6 text-sm text-slate-500">{copy.loading}</div> : null}
          {!loading && notifications.length === 0 ? <div className="card p-6 text-sm text-slate-500">{copy.empty}</div> : null}
          {!loading
            ? notifications.map((notification) => (
                <article key={notification.id} className="card p-6">
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
                        {labelEvent(notification.type)}
                      </p>
                      <h2 className="mt-2 text-lg font-semibold text-slate-900 dark:text-slate-100">{notification.title}</h2>
                    </div>
                    {notification.readAt ? (
                      <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-400">{copy.read}</span>
                    ) : (
                      <button type="button" onClick={() => markRead(notification.id)} className="btn-secondary">
                        {copy.markRead}
                      </button>
                    )}
                  </div>
                  <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">{notification.body}</p>
                  <p className="mt-4 text-xs text-slate-400">{new Date(notification.createdAt).toLocaleString()}</p>
                </article>
              ))
            : null}
        </div>
      ) : null}

      {/* ── History ── */}
      {activeTab === 'history' ? (
        <div className="space-y-4">
          {/* Filters */}
          <div className="flex flex-wrap items-center gap-3">
            <select
              value={filterChannel}
              onChange={(e) => setFilterChannel(e.target.value)}
              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
            >
              <option value="">{copy.allChannels}</option>
              {COMPANY_CHANNELS.map((ch) => (
                <option key={ch} value={ch}>{copy.channels[ch] ?? ch}</option>
              ))}
            </select>
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
            >
              <option value="">{copy.allStatuses}</option>
              {Object.keys(copy.statuses).map((s) => (
                <option key={s} value={s}>{copy.statuses[s]}</option>
              ))}
            </select>
          </div>

          {historyLoading ? (
            <div className="card p-6 text-sm text-slate-500">{copy.loading}</div>
          ) : historyLoaded && history.length === 0 ? (
            <div className="card p-6 text-sm text-slate-500">{copy.noHistory}</div>
          ) : (
            <div className="card overflow-hidden">
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm">
                  <thead className="bg-slate-50 dark:bg-blue-950">
                    <tr>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.date}</th>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.event}</th>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.channel}</th>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.title ?? 'Title'}</th>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.status}</th>
                      <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.sentAt}</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 dark:divide-blue-900/50">
                    {history.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50/60 dark:hover:bg-blue-900/20">
                        <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
                          {new Date(item.createdAt).toLocaleString()}
                        </td>
                        <td className="whitespace-nowrap px-4 py-3 text-xs font-medium text-slate-700 dark:text-slate-300">
                          {labelEvent(item.type)}
                        </td>
                        <td className="px-4 py-3">
                          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${CHANNEL_BADGE[item.channel] ?? 'bg-slate-100 text-slate-600'}`}>
                            {copy.channels[item.channel] ?? item.channel}
                          </span>
                        </td>
                        <td className="max-w-[260px] px-4 py-3">
                          <p className="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{item.title}</p>
                          <p className="truncate text-xs text-slate-400 dark:text-slate-500">{item.body}</p>
                        </td>
                        <td className="px-4 py-3">
                          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${STATUS_BADGE[item.status] ?? 'bg-slate-100 text-slate-600'}`}>
                            {copy.statuses[item.status] ?? item.status}
                          </span>
                        </td>
                        <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
                          {item.sentAt ? new Date(item.sentAt).toLocaleString() : '—'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      ) : null}

      {/* ── Preferences ── */}
      {activeTab === 'preferences' ? (
        <div className="card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead className="bg-slate-50 dark:bg-blue-950">
                <tr>
                  <th className="px-4 py-3 text-left font-semibold text-slate-600 dark:text-slate-300">{copy.event}</th>
                  {COMPANY_CHANNELS.map((channel) => (
                    <th key={channel} className="px-4 py-3 text-center font-semibold text-slate-600 dark:text-slate-300">
                      {copy.channels[channel] ?? channel.replace('_', ' ')}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {COMPANY_EVENTS.map((eventName) => (
                  <tr key={eventName} className="border-t border-slate-100 dark:border-blue-900/50">
                    <td className="px-4 py-3 font-medium text-slate-900 dark:text-slate-200">{copy.events[eventName] ?? eventName.replaceAll('_', ' ')}</td>
                    {COMPANY_CHANNELS.map((channel) => (
                      <td key={`${eventName}-${channel}`} className="px-4 py-3 text-center">
                        <input
                          type="checkbox"
                          checked={preferenceValue(eventName, channel)}
                          onChange={(event) => setPreference(eventName, channel, event.target.checked)}
                          className="h-4 w-4 rounded border-slate-300 text-blue-600"
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="flex justify-end border-t border-slate-100 dark:border-blue-900/50 p-4">
            <button type="button" onClick={savePreferences} disabled={saving} className="btn-primary">
              {saving ? copy.saving : copy.savePreferences}
            </button>
          </div>
        </div>
      ) : null}
    </div>
  )
}
