import React, { useState } from 'react';
import { SettingsLayout } from './components/SettingsLayout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { __ } from '@/lib/i18n';
import NotificationEvents from './Notifications/Events';
import NotificationChannels from './Notifications/Channels';
import NotificationTemplates from './Notifications/Templates';

export default function NotificationsSettings() {
  const [activeTab, setActiveTab] = useState('events');

  return (
    <SettingsLayout
      title={__('Notifications')}
      description={__('Manage notification events, channels, and templates')}
      action={<div />} // Empty action to trigger contextual header
    >
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="events">{__('Events')}</TabsTrigger>
          <TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
          <TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
        </TabsList>

        <TabsContent value="events" className="space-y-4">
          <NotificationEvents />
        </TabsContent>

        <TabsContent value="channels" className="space-y-4">
          <NotificationChannels />
        </TabsContent>

        <TabsContent value="templates" className="space-y-4">
          <NotificationTemplates />
        </TabsContent>
      </Tabs>
    </SettingsLayout>
  );
}