'use client'

/**
 * Alerts Monitoring Admin Page
 *
 * Google Alerts & Feed-Ueberwachung Dashboard
 * Provides inbox management, topic configuration, rule builder, and relevance profiles
 */

import { useState } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import SystemInfoSection from '@/components/admin/SystemInfoSection'
import type { TabId } from './_components/types'
import { useAlertsData } from './_components/useAlertsData'
import { alertsSystemConfig } from './_components/alertsSystemConfig'
import DashboardTab from './_components/DashboardTab'
import InboxTab from './_components/InboxTab'
import TopicsTab from './_components/TopicsTab'
import RulesTab from './_components/RulesTab'
import ProfileTab from './_components/ProfileTab'
import DocumentationTab from './_components/DocumentationTab'

export default function AlertsPage() {
  const [activeTab, setActiveTab] = useState<TabId>('dashboard')
  const {
    stats,
    alerts,
    topics,
    rules,
    profile,
    error,
    inboxFilter,
    setInboxFilter,
    filteredAlerts,
  } = useAlertsData()

  const tabs: { id: TabId; label: string; badge?: number }[] = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'inbox', label: 'Inbox', badge: stats?.new_alerts || 0 },
    { id: 'topics', label: 'Topics' },
    { id: 'rules', label: 'Regeln' },
    { id: 'profile', label: 'Profil' },
    { id: 'audit', label: 'Audit' },
    { id: 'documentation', label: 'Dokumentation' },
  ]

  return (
    <AdminLayout title="Alerts Monitoring" description="Google Alerts & Feed-Ueberwachung">
      {/* Tab Navigation */}
      <div className="border-b border-slate-200 mb-6">
        <nav className="flex gap-4">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
                activeTab === tab.id
                  ? 'border-primary-600 text-primary-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              {tab.label}
              {tab.badge !== undefined && tab.badge > 0 && (
                <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500 text-white">
                  {tab.badge}
                </span>
              )}
            </button>
          ))}
        </nav>
      </div>

      {activeTab === 'dashboard' && (
        <DashboardTab stats={stats} topics={topics} alerts={alerts} error={error} />
      )}

      {activeTab === 'inbox' && (
        <InboxTab inboxFilter={inboxFilter} setInboxFilter={setInboxFilter} filteredAlerts={filteredAlerts} />
      )}

      {activeTab === 'topics' && <TopicsTab topics={topics} />}

      {activeTab === 'rules' && <RulesTab rules={rules} />}

      {activeTab === 'profile' && <ProfileTab profile={profile} />}

      {activeTab === 'audit' && <SystemInfoSection config={alertsSystemConfig} />}

      {activeTab === 'documentation' && <DocumentationTab />}
    </AdminLayout>
  )
}