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/Channels.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import { SettingsCard } from '../components/SettingsCard';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, Mail, MessageCircle, Send, Bell, ExternalLink, Settings } from 'lucide-react';
+import { __ } from '@/lib/i18n';
+
+interface NotificationChannel {
+  id: string;
+  label: string;
+  icon: string;
+  enabled: boolean;
+  builtin?: boolean;
+  addon?: string;
+}
+
+export default function NotificationChannels() {
+  // Fetch channels
+  const { data: channels, isLoading } = useQuery({
+    queryKey: ['notification-channels'],
+    queryFn: () => api.get('/notifications/channels'),
+  });
+
+  const getChannelIcon = (channelId: string) => {
+    switch (channelId) {
+      case 'email':
+        return <Mail className="h-5 w-5" />;
+      case 'whatsapp':
+        return <MessageCircle className="h-5 w-5" />;
+      case 'telegram':
+        return <Send className="h-5 w-5" />;
+      default:
+        return <Bell className="h-5 w-5" />;
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  const builtinChannels = channels?.filter((c: NotificationChannel) => c.builtin) || [];
+  const addonChannels = channels?.filter((c: NotificationChannel) => !c.builtin) || [];
+
+  return (
+    <div className="space-y-6">
+      {/* Info Card */}
+      <SettingsCard
+        title={__('Notification Channels')}
+        description={__('Configure how notifications are sent')}
+      >
+        <div className="text-sm space-y-3">
+          <p className="text-muted-foreground">
+            {__(
+              'Channels are the different ways notifications can be sent. Email is built-in and always available. Install addons to enable additional channels like WhatsApp, Telegram, SMS, and more.'
+            )}
+          </p>
+        </div>
+      </SettingsCard>
+
+      {/* Built-in Channels */}
+      <SettingsCard title={__('Built-in Channels')} description={__('Channels included with WooNooW')}>
+        <div className="space-y-4">
+          {builtinChannels.map((channel: NotificationChannel) => (
+            <div key={channel.id} className="flex items-center justify-between p-4 rounded-lg border bg-card">
+              <div className="flex items-center gap-4">
+                <div className="p-3 rounded-lg bg-primary/10">{getChannelIcon(channel.id)}</div>
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium">{channel.label}</h3>
+                    <Badge variant="secondary" className="text-xs">
+                      {__('Built-in')}
+                    </Badge>
+                    <Badge variant={channel.enabled ? 'default' : 'secondary'} className="text-xs">
+                      {channel.enabled ? __('Active') : __('Inactive')}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {channel.id === 'email' &&
+                      __('Email notifications powered by WooCommerce. Configure templates and SMTP settings.')}
+                  </p>
+                </div>
+              </div>
+              {channel.id === 'email' && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    window.open(
+                      `${(window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'}/admin.php?page=wc-settings&tab=email`,
+                      '_blank'
+                    )
+                  }
+                >
+                  <Settings className="h-4 w-4 mr-2" />
+                  {__('Configure')}
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      </SettingsCard>
+
+      {/* Addon Channels */}
+      {addonChannels.length > 0 ? (
+        <SettingsCard title={__('Addon Channels')} description={__('Channels provided by installed addons')}>
+          <div className="space-y-4">
+            {addonChannels.map((channel: NotificationChannel) => (
+              <div key={channel.id} className="flex items-center justify-between p-4 rounded-lg border bg-card">
+                <div className="flex items-center gap-4">
+                  <div className="p-3 rounded-lg bg-primary/10">{getChannelIcon(channel.id)}</div>
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="font-medium">{channel.label}</h3>
+                      <Badge variant="outline" className="text-xs">
+                        {__('Addon')}
+                      </Badge>
+                      <Badge variant={channel.enabled ? 'default' : 'secondary'} className="text-xs">
+                        {channel.enabled ? __('Active') : __('Inactive')}
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Provided by')} {channel.addon}
+                    </p>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  <Settings className="h-4 w-4 mr-2" />
+                  {__('Configure')}
+                </Button>
+              </div>
+            ))}
+          </div>
+        </SettingsCard>
+      ) : (
+        <SettingsCard
+          title={__('Extend with Addons')}
+          description={__('Add more notification channels to your store')}
+        >
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {__(
+                'Install notification addons to send notifications via WhatsApp, Telegram, SMS, Push notifications, and more.'
+              )}
+            </p>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              {/* Example addon cards */}
+              <div className="p-4 rounded-lg border bg-card">
+                <div className="flex items-center gap-3 mb-2">
+                  <MessageCircle className="h-5 w-5 text-green-600" />
+                  <h4 className="font-medium">{__('WhatsApp Notifications')}</h4>
+                </div>
+                <p className="text-sm text-muted-foreground mb-3">
+                  {__('Send order updates and notifications via WhatsApp Business API')}
+                </p>
+                <Button variant="outline" size="sm" className="w-full">
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  {__('View Addon')}
+                </Button>
+              </div>
+
+              <div className="p-4 rounded-lg border bg-card">
+                <div className="flex items-center gap-3 mb-2">
+                  <Send className="h-5 w-5 text-blue-600" />
+                  <h4 className="font-medium">{__('Telegram Notifications')}</h4>
+                </div>
+                <p className="text-sm text-muted-foreground mb-3">
+                  {__('Get instant notifications in your Telegram channel or group')}
+                </p>
+                <Button variant="outline" size="sm" className="w-full">
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  {__('View Addon')}
+                </Button>
+              </div>
+
+              <div className="p-4 rounded-lg border bg-card">
+                <div className="flex items-center gap-3 mb-2">
+                  <Bell className="h-5 w-5 text-purple-600" />
+                  <h4 className="font-medium">{__('SMS Notifications')}</h4>
+                </div>
+                <p className="text-sm text-muted-foreground mb-3">
+                  {__('Send SMS notifications via Twilio, Nexmo, or other providers')}
+                </p>
+                <Button variant="outline" size="sm" className="w-full">
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  {__('View Addon')}
+                </Button>
+              </div>
+
+              <div className="p-4 rounded-lg border bg-card">
+                <div className="flex items-center gap-3 mb-2">
+                  <Bell className="h-5 w-5 text-orange-600" />
+                  <h4 className="font-medium">{__('Push Notifications')}</h4>
+                </div>
+                <p className="text-sm text-muted-foreground mb-3">
+                  {__('Send browser push notifications to customers and admins')}
+                </p>
+                <Button variant="outline" size="sm" className="w-full">
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  {__('View Addon')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </SettingsCard>
+      )}
+    </div>
+  );
+}