import React, { useState, useEffect } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { SettingsLayout } from '../components/SettingsLayout';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { __ } from '@/lib/i18n';
import { ChevronLeft } from 'lucide-react';
import StaffChannels from './Staff/Channels';
import StaffEvents from './Staff/Events';
import NotificationTemplates from './Templates';

export default function StaffNotifications() {
  const [searchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState('channels');

  // Check for tab query param
  useEffect(() => {
    const tabParam = searchParams.get('tab');
    if (tabParam && ['channels', 'events', 'templates'].includes(tabParam)) {
      setActiveTab(tabParam);
    }
  }, [searchParams]);

  return (
    <SettingsLayout
      title={__('Staff Notifications')}
      description={__('Configure notifications for admins and staff members')}
      action={
        <Link to="/settings/notifications">
          <Button variant="ghost" size="sm">
            <ChevronLeft className="mr-2 h-4 w-4" />
            {__('Back to Notifications')}
          </Button>
        </Link>
      }
    >
      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
          <TabsTrigger value="events">{__('Events')}</TabsTrigger>
          <TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
        </TabsList>

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

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

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