'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

import PageNavbar from '@/components/layouts/PageNavbar'
import Button from '@/components/formElements/Button'
import { Tab } from '@/components/heroui/Tabs'
import AppTabs from '@/components/ui/AppTabs'
import { useQueryTab } from '@/hooks/useQueryTab'

const InAppNotificationsPanel = dynamic(() => import('@/app/(dashboard)/notifications/_components/InAppNotificationsPanel'), {
  ssr: false,
})
const PushDeliveriesPanel = dynamic(() => import('@/app/(dashboard)/notifications/_components/PushDeliveriesPanel'), {
  ssr: false,
})
const SmsMessagesPanel = dynamic(() => import('@/app/(dashboard)/notifications/_components/SmsMessagesPanel'), {
  ssr: false,
})
const NotificationRulesPanel = dynamic(() => import('@/app/(dashboard)/notifications/_components/NotificationRulesPanel'), {
  ssr: false,
})
const SendManualNotificationModal = dynamic(() => import('@/app/(dashboard)/notifications/_components/SendManualNotificationModal'), {
  ssr: false,
})

const NOTIFICATION_TABS = ['in-app', 'push', 'sms', 'settings'] as const

type NotificationTab = (typeof NOTIFICATION_TABS)[number]
type SendChannel = 'in_app' | 'sms' | 'both'

const defaultChannelForTab = (tab: NotificationTab): SendChannel => (tab === 'sms' ? 'sms' : 'in_app')

export default function NotificationsPage() {
  const [selectedTab, handleTabChange] = useQueryTab({
    values: NOTIFICATION_TABS,
    defaultValue: 'in-app',
  })
  const [isSendOpen, setIsSendOpen] = useState(false)
  const [listEpoch, setListEpoch] = useState(0)

  return (
    <section className="h-full w-full text-right">
      <PageNavbar
        endSlot={
          selectedTab === 'settings' ? undefined : (
            <Button
              size="sm"
              variant="solid"
              onClick={() => {
                setIsSendOpen(true)
              }}
            >
              ارسال
            </Button>
          )
        }
        pageTitle="اعلان‌ها"
      />
      <div className="admin-page-container">
        <AppTabs
          aria-label="کانال‌های اعلان"
          classNames={{ tabList: 'overflow-x-auto', tab: 'min-w-fit px-4' }}
          selectedKey={selectedTab}
          surface="admin"
          onSelectionChange={handleTabChange}
        >
          <Tab
            key="in-app"
            title="درون‌برنامه‌ای"
          >
            {selectedTab === 'in-app' ? <InAppNotificationsPanel key={listEpoch} /> : null}
          </Tab>
          <Tab
            key="push"
            title="پوش"
          >
            {selectedTab === 'push' ? <PushDeliveriesPanel key={listEpoch} /> : null}
          </Tab>
          <Tab
            key="sms"
            title="پیامک‌ها"
          >
            {selectedTab === 'sms' ? <SmsMessagesPanel key={listEpoch} /> : null}
          </Tab>
          <Tab
            key="settings"
            title="تنظیمات"
          >
            {selectedTab === 'settings' ? <NotificationRulesPanel /> : null}
          </Tab>
        </AppTabs>
      </div>
      {isSendOpen ? (
        <SendManualNotificationModal
          defaultChannel={defaultChannelForTab(selectedTab)}
          isOpen={isSendOpen}
          onClose={() => {
            setIsSendOpen(false)
          }}
          onSent={() => {
            setIsSendOpen(false)
            setListEpoch((current) => current + 1)
          }}
        />
      ) : null}
    </section>
  )
}