feat: Implement notification system with 3 subpages (Events, Channels, Templates)

## ✅ Correct Implementation Following NOTIFICATION_STRATEGY.md

### Frontend (React) - 3 Subpages

**1. Main Notifications Page** (`Notifications.tsx`)
- Tab navigation for 3 sections
- Events | Channels | Templates

**2. Events Subpage** (`Notifications/Events.tsx`)
- Configure which channels per event
- Grouped by category (Orders, Products, Customers)
- Toggle channels (Email, WhatsApp, Telegram, etc.)
- Show recipient (Admin/Customer/Both)
- Switch UI for enable/disable per channel

**3. Channels Subpage** (`Notifications/Channels.tsx`)
- List available channels
- Built-in channels (Email)
- Addon channels (WhatsApp, Telegram, SMS, Push)
- Channel status (Active/Inactive)
- Configure button for each channel
- Addon discovery cards

**4. Templates Subpage** (`Notifications/Templates.tsx`)
- Email templates (link to WooCommerce)
- Addon channel templates
- Template variables reference
- Preview and edit buttons
- Variable documentation ({order_number}, {customer_name}, etc.)

### Backend (PHP) - Bridge to WooCommerce

**NotificationsController** (`includes/Api/NotificationsController.php`)
- Bridges to WooCommerce email system
- Does NOT reinvent notification system
- Provides addon integration hooks

**REST API Endpoints:**
```
GET  /notifications/channels  - List channels (email + addons)
GET  /notifications/events     - List events (maps to WC emails)
POST /notifications/events/update - Update event channel settings
```

**Key Features:**
✅ Leverages WooCommerce emails (not reinventing)
✅ Stores settings in wp_options
✅ Provides hooks for addons:
   - `woonoow_notification_channels` filter
   - `woonoow_notification_events` filter
   - `woonoow_notification_event_updated` action

### Addon Integration

**Example: WhatsApp Addon**
```php
// Register channel
add_filter("woonoow_notification_channels", function($channels) {
    $channels[] = [
        "id" => "whatsapp",
        "label" => "WhatsApp",
        "icon" => "message-circle",
        "enabled" => true,
        "addon" => "woonoow-whatsapp",
    ];
    return $channels;
});

// React to event updates
add_action("woonoow_notification_event_updated", function($event_id, $channel_id, $enabled, $recipient) {
    if ($channel_id === "whatsapp" && $enabled) {
        // Setup WhatsApp notification for this event
    }
}, 10, 4);

// Hook into WooCommerce email triggers
add_action("woocommerce_order_status_processing", function($order_id) {
    // Send WhatsApp notification
}, 10, 1);
```

### Architecture

**NOT a new notification system** ✅
- Uses WooCommerce email infrastructure
- Maps events to WC email IDs
- Addons hook into WC triggers

**IS an extensible framework** ✅
- Unified UI for all channels
- Per-event channel configuration
- Template management
- Addon discovery

### Files Created
- `Notifications.tsx` - Main page with tabs
- `Notifications/Events.tsx` - Events configuration
- `Notifications/Channels.tsx` - Channel management
- `Notifications/Templates.tsx` - Template editor
- `NotificationsController.php` - REST API bridge

### Files Modified
- `Routes.php` - Register NotificationsController

---

**Ready for addon development!** 🚀
Next: Build Telegram addon as proof of concept

admin-spa/src/routes/Settings/Notifications.tsx

@@ -1,280 +1,38 @@
 import React, { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { api } from '@/lib/api';
 import { SettingsLayout } from './components/SettingsLayout';
-import { SettingsCard } from './components/SettingsCard';
-import { Switch } from '@/components/ui/switch';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { ExternalLink, RefreshCw, Mail, MessageCircle, Send, Bell } from 'lucide-react';
-import { toast } from 'sonner';
+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 queryClient = useQueryClient();
-  const [activeTab, setActiveTab] = useState<'channels' | 'events'>('channels');
-
-  // Fetch notification channels
-  const { data: channels, isLoading: channelsLoading } = useQuery({
-    queryKey: ['notification-channels'],
-    queryFn: () => api.get('/notifications/channels'),
-  });
-
-  // Fetch notification events
-  const { data: events, isLoading: eventsLoading } = useQuery({
-    queryKey: ['notification-events'],
-    queryFn: () => api.get('/notifications/events'),
-  });
-
-  // Fetch notification settings
-  const { data: settings, isLoading: settingsLoading } = useQuery({
-    queryKey: ['notification-settings'],
-    queryFn: () => api.get('/notifications/settings'),
-  });
-
-  // Update settings mutation
-  const updateMutation = useMutation({
-    mutationFn: async (newSettings: any) => {
-      return api.post('/notifications/settings', newSettings);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notification-settings'] });
-      queryClient.invalidateQueries({ queryKey: ['notification-events'] });
-      toast.success(__('Notification settings updated'));
-    },
-    onError: (error: any) => {
-      toast.error(error?.message || __('Failed to update settings'));
-    },
-  });
-
-  const toggleEventChannel = (eventId: string, channelId: string, enabled: boolean) => {
-    const newSettings = { ...settings };
-    if (!newSettings.events) newSettings.events = {};
-    if (!newSettings.events[eventId]) newSettings.events[eventId] = { enabled: true, channels: [], recipients: {} };
-    
-    const channels = newSettings.events[eventId].channels || [];
-    if (enabled) {
-      if (!channels.includes(channelId)) {
-        newSettings.events[eventId].channels = [...channels, channelId];
-      }
-    } else {
-      newSettings.events[eventId].channels = channels.filter((c: string) => c !== channelId);
-    }
-    
-    updateMutation.mutate(newSettings);
-  };
-
-  const isLoading = channelsLoading || eventsLoading || settingsLoading;
-
-  if (isLoading) {
-    return (
-      <SettingsLayout
-        title={__('Notifications')}
-        description={__('Manage notifications sent via email and other channels')}
-      >
-        <div className="flex items-center justify-center py-12">
-          <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
-        </div>
-      </SettingsLayout>
-    );
-  }
-
-  const getChannelIcon = (channelId: string) => {
-    switch (channelId) {
-      case 'email': return <Mail className="h-4 w-4" />;
-      case 'whatsapp': return <MessageCircle className="h-4 w-4" />;
-      case 'telegram': return <Send className="h-4 w-4" />;
-      default: return <Bell className="h-4 w-4" />;
-    }
-  };
+  const [activeTab, setActiveTab] = useState('events');
 
   return (
     <SettingsLayout
       title={__('Notifications')}
-      description={__('Manage notifications sent via email and other channels')}
+      description={__('Manage notification events, channels, and templates')}
     >
-      <div className="space-y-6">
-        {/* Notification Channels */}
-        <SettingsCard
-          title={__('Notification Channels')}
-          description={__('Available channels for sending notifications')}
-        >
-          <div className="space-y-4">
-            {channels?.map((channel: any) => (
-              <div key={channel.id} className="flex items-center justify-between py-3 border-b last:border-0">
-                <div className="flex items-center gap-3 flex-1">
-                  <div className="p-2 rounded-lg bg-muted">
-                    {getChannelIcon(channel.id)}
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-medium text-sm">{channel.label}</h3>
-                      {channel.builtin && (
-                        <Badge variant="secondary" className="text-xs">{__('Built-in')}</Badge>
-                      )}
-                      {channel.addon && (
-                        <Badge variant="outline" className="text-xs">{__('Addon')}</Badge>
-                      )}
-                    </div>
-                    {channel.addon && (
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {__('Provided by')} {channel.addon}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <Badge variant={channel.enabled ? 'default' : 'secondary'}>
-                  {channel.enabled ? __('Active') : __('Inactive')}
-                </Badge>
-              </div>
-            ))}
-            
-            <div className="bg-muted/50 rounded-lg p-4 mt-4">
-              <p className="text-sm text-muted-foreground">
-                💡 {__('Want more channels like WhatsApp, Telegram, or SMS? Install notification addons to extend your notification capabilities.')}
-              </p>
-            </div>
-          </div>
-        </SettingsCard>
+      <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>
 
-        {/* Order Notifications */}
-        {events?.orders && events.orders.length > 0 && (
-          <SettingsCard
-            title={__('Order Notifications')}
-            description={__('Notifications sent when order status changes')}
-          >
-            <div className="space-y-4">
-              {events.orders.map((event: any) => (
-                <div key={event.id} className="py-3 border-b last:border-0">
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <h3 className="font-medium text-sm">{event.label}</h3>
-                      <p className="text-xs text-muted-foreground mt-0.5">{event.description}</p>
-                    </div>
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {channels?.map((channel: any) => {
-                      const isEnabled = event.channels?.includes(channel.id);
-                      return (
-                        <Button
-                          key={channel.id}
-                          variant={isEnabled ? 'default' : 'outline'}
-                          size="sm"
-                          onClick={() => toggleEventChannel(event.id, channel.id, !isEnabled)}
-                          disabled={!channel.enabled || updateMutation.isPending}
-                          className="text-xs"
-                        >
-                          {getChannelIcon(channel.id)}
-                          <span className="ml-1.5">{channel.label}</span>
-                        </Button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SettingsCard>
-        )}
+        <TabsContent value="events" className="space-y-4">
+          <NotificationEvents />
+        </TabsContent>
 
-        {/* Product Notifications */}
-        {events?.products && events.products.length > 0 && (
-          <SettingsCard
-            title={__('Product Notifications')}
-            description={__('Notifications about product stock levels')}
-          >
-            <div className="space-y-4">
-              {events.products.map((event: any) => (
-                <div key={event.id} className="py-3 border-b last:border-0">
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <h3 className="font-medium text-sm">{event.label}</h3>
-                      <p className="text-xs text-muted-foreground mt-0.5">{event.description}</p>
-                    </div>
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {channels?.map((channel: any) => {
-                      const isEnabled = event.channels?.includes(channel.id);
-                      return (
-                        <Button
-                          key={channel.id}
-                          variant={isEnabled ? 'default' : 'outline'}
-                          size="sm"
-                          onClick={() => toggleEventChannel(event.id, channel.id, !isEnabled)}
-                          disabled={!channel.enabled || updateMutation.isPending}
-                          className="text-xs"
-                        >
-                          {getChannelIcon(channel.id)}
-                          <span className="ml-1.5">{channel.label}</span>
-                        </Button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SettingsCard>
-        )}
+        <TabsContent value="channels" className="space-y-4">
+          <NotificationChannels />
+        </TabsContent>
 
-        {/* Customer Notifications */}
-        {events?.customers && events.customers.length > 0 && (
-          <SettingsCard
-            title={__('Customer Notifications')}
-            description={__('Notifications about customer activities')}
-          >
-            <div className="space-y-4">
-              {events.customers.map((event: any) => (
-                <div key={event.id} className="py-3 border-b last:border-0">
-                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <h3 className="font-medium text-sm">{event.label}</h3>
-                      <p className="text-xs text-muted-foreground mt-0.5">{event.description}</p>
-                    </div>
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {channels?.map((channel: any) => {
-                      const isEnabled = event.channels?.includes(channel.id);
-                      return (
-                        <Button
-                          key={channel.id}
-                          variant={isEnabled ? 'default' : 'outline'}
-                          size="sm"
-                          onClick={() => toggleEventChannel(event.id, channel.id, !isEnabled)}
-                          disabled={!channel.enabled || updateMutation.isPending}
-                          className="text-xs"
-                        >
-                          {getChannelIcon(channel.id)}
-                          <span className="ml-1.5">{channel.label}</span>
-                        </Button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SettingsCard>
-        )}
-
-        {/* WooCommerce Email Settings Link */}
-        <SettingsCard
-          title={__('Advanced Email Settings')}
-          description={__('Customize email templates and sender details')}
-        >
-          <div className="text-sm space-y-3">
-            <p className="text-muted-foreground">
-              {__('Email notifications are powered by WooCommerce. For advanced customization like templates, subject lines, and sender details, use the WooCommerce email settings.')}
-            </p>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => window.open(`${(window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'}/admin.php?page=wc-settings&tab=email`, '_blank')}
-            >
-              <ExternalLink className="h-4 w-4 mr-2" />
-              {__('Open WooCommerce Email Settings')}
-            </Button>
-          </div>
-        </SettingsCard>
-
-      </div>
+        <TabsContent value="templates" className="space-y-4">
+          <NotificationTemplates />
+        </TabsContent>
+      </Tabs>
     </SettingsLayout>
   );
 }