// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

'use client';

import * as React from 'react';
import { motion } from 'motion/react';
import { Bell, History, Layers, Settings } from 'lucide-react';
import { useTranslations } from 'next-intl';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { EventsTab } from './components/events-tab';
import { HistoriesTab } from './components/histories-tab';
import { SettingsTab } from './components/settings-tab';

export default function PushAdminPage() {
  const t = useTranslations('admin.push');
  const [activeTab, setActiveTab] = React.useState('events');

  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, ease: 'easeOut' }}
      className='w-full py-6 space-y-6'
    >
      <div className='flex items-center gap-2'>
        <Bell className='size-5 text-primary' />
        <div>
          <h1 className='text-2xl font-semibold tracking-tight'>
            {t('pageTitle')}
          </h1>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
        <TabsList variant='line' className='w-fit inline-flex gap-8'>
          <TabsTrigger
            value='events'
            className='px-0 pb-2 text-xs font-semibold'
          >
            <Layers className='size-3.5 mr-1' />
            {t('eventsTab')}
          </TabsTrigger>
          <TabsTrigger
            value='histories'
            className='px-0 pb-2 text-xs font-semibold'
          >
            <History className='size-3.5 mr-1' />
            {t('historiesTab')}
          </TabsTrigger>
          <TabsTrigger
            value='settings'
            className='px-0 pb-2 text-xs font-semibold'
          >
            <Settings className='size-3.5 mr-1' />
            {t('settingsTab')}
          </TabsTrigger>
        </TabsList>

        {/* ==================== 1. 事件管理 TAB ==================== */}
        <TabsContent value='events' className='focus-visible:outline-none'>
          <EventsTab />
        </TabsContent>

        {/* ==================== 2. 通知历史 TAB ==================== */}
        <TabsContent value='histories' className='focus-visible:outline-none'>
          <HistoriesTab />
        </TabsContent>

        {/* ==================== 3. 通道管理与设置 TAB ==================== */}
        <TabsContent value='settings' className='focus-visible:outline-none'>
          <SettingsTab />
        </TabsContent>
      </Tabs>
    </motion.div>
  );
}