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 CustomerChannels from './Customer/Channels';
import CustomerEvents from './Customer/Events';

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

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

  return (
    <SettingsLayout
      title={__('Customer Notifications')}
      description={__('Configure notifications sent to customers')}
      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 max-w-md grid-cols-2">
          <TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
          <TabsTrigger value="events">{__('Events')}</TabsTrigger>
        </TabsList>

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

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