WooNooW/admin-spa/src/routes/Marketing/Newsletter/Subscribers.tsx

import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { SettingsCard } from '@/routes/Settings/components/SettingsCard';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';
import { Download, Trash2, Search, MoreHorizontal } from 'lucide-react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { api } from '@/lib/api';
import { useNavigate } from 'react-router-dom';
import { __ } from '@/lib/i18n';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export default function Subscribers() {
    const [searchQuery, setSearchQuery] = useState('');
    const queryClient = useQueryClient();
    const navigate = useNavigate();

    const { data: subscribersData, isLoading } = useQuery({
        queryKey: ['newsletter-subscribers'],
        queryFn: async () => {
            const response = await api.get('/newsletter/subscribers');
            return response.data;
        },
    });

    const deleteSubscriber = useMutation({
        mutationFn: async (emails: string[]) => {
            for (const email of emails) {
                await api.del(`/newsletter/subscribers/${encodeURIComponent(email)}`);
            }
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['newsletter-subscribers'] });
            toast.success(__('Subscriber(s) removed successfully'));
            setSelectedIds([]);
            setShowDeleteDialog(false);
            setDeleteTargetEmail(null);
        },
        onError: () => {
            toast.error(__('Failed to remove subscriber(s)'));
            setShowDeleteDialog(false);
            setDeleteTargetEmail(null);
        },
    });

    const exportSubscribers = () => {
        if (!subscribersData?.subscribers) return;

        const csv = ['Email,Subscribed Date'].concat(
            subscribersData.subscribers.map((sub: any) =>
                `${sub.email},${sub.subscribed_at || 'N/A'}`
            )
        ).join('\n');

        const blob = new Blob([csv], { type: 'text/csv' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `newsletter-subscribers-${new Date().toISOString().split('T')[0]}.csv`;
        a.click();
        window.URL.revokeObjectURL(url);
    };

    const subscribers = subscribersData?.subscribers || [];
    const filteredSubscribers = subscribers.filter((sub: any) =>
        sub.email.toLowerCase().includes(searchQuery.toLowerCase())
    );

    const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const toggleAll = () => {
        if (selectedIds.length === filteredSubscribers.length) {
            setSelectedIds([]);
        } else {
            setSelectedIds(filteredSubscribers.map((s: any) => s.email));
        }
    };

    const toggleRow = (email: string) => {
        setSelectedIds(prev =>
            prev.includes(email) ? prev.filter(e => e !== email) : [...prev, email]
        );
    };

    const confirmDelete = () => {
        const emailsToDelete = deleteTargetEmail ? [deleteTargetEmail] : selectedIds;
        deleteSubscriber.mutate(emailsToDelete);
    };

    return (
        <div className="space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div className="relative flex-1 max-w-sm">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                    <Input
                        placeholder={__('Filter subscribers...')}
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="!pl-9"
                    />
                </div>
                <div className="flex gap-2">
                    {selectedIds.length > 0 && (
                        <Button onClick={() => setShowDeleteDialog(true)} variant="destructive" size="sm">
                            <Trash2 className="mr-2 h-4 w-4" />
                            {__('Delete')} ({selectedIds.length})
                        </Button>
                    )}
                    <Button onClick={exportSubscribers} variant="outline" size="sm">
                        <Download className="mr-2 h-4 w-4" />
                        {__('Export CSV')}
                    </Button>
                </div>
            </div >

            {isLoading ? (
                <div className="text-center py-8 text-muted-foreground">
                    {__('Loading subscribers...')}
                </div>
            ) : filteredSubscribers.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                    {searchQuery ? __('No subscribers found matching your search') : __('No subscribers yet')}
                </div>
            ) : (
                <div className="border rounded-lg">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-12 p-3">
                                    <Checkbox
                                        checked={filteredSubscribers.length > 0 && selectedIds.length === filteredSubscribers.length}
                                        onCheckedChange={toggleAll}
                                        aria-label={__('Select all')}
                                    />
                                </TableHead>
                                <TableHead>{__('Email')}</TableHead>
                                <TableHead>{__('Status')}</TableHead>
                                <TableHead>{__('Subscribed Date')}</TableHead>
                                <TableHead>{__('WP User')}</TableHead>
                                <TableHead className="text-right">{__('Actions')}</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {filteredSubscribers.map((subscriber: any) => (
                                <TableRow key={subscriber.email}>
                                    <TableCell className="p-3">
                                        <Checkbox
                                            checked={selectedIds.includes(subscriber.email)}
                                            onCheckedChange={() => toggleRow(subscriber.email)}
                                            aria-label={__('Select subscriber')}
                                        />
                                    </TableCell>
                                    <TableCell className="font-medium">{subscriber.email}</TableCell>
                                    <TableCell>
                                        <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                                            {subscriber.status || __('Active')}
                                        </span>
                                    </TableCell>
                                    <TableCell className="text-muted-foreground">
                                        {subscriber.subscribed_at
                                            ? new Date(subscriber.subscribed_at).toLocaleDateString()
                                            : 'N/A'
                                        }
                                    </TableCell>
                                    <TableCell>
                                        {subscriber.user_id ? (
                                            <span className="text-xs text-blue-600">{__('Yes')} (ID: {subscriber.user_id})</span>
                                        ) : (
                                            <span className="text-xs text-muted-foreground">{__('No')}</span>
                                        )}
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button variant="ghost" className="h-8 w-8 p-0">
                                                    <span className="sr-only">{__('Open menu')}</span>
                                                    <MoreHorizontal className="h-4 w-4" />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem
                                                    className="text-destructive focus:text-destructive"
                                                    onClick={() => {
                                                        setDeleteTargetEmail(subscriber.email);
                                                        setShowDeleteDialog(true);
                                                    }}
                                                >
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    {__('Remove')}
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
            )}

            <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>{__('Are you sure?')}</AlertDialogTitle>
                        <AlertDialogDescription>
                            {__('This action cannot be undone. This will permanently remove the selected subscriber(s).')}
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>{__('Cancel')}</AlertDialogCancel>
                        <AlertDialogAction onClick={confirmDelete} className="bg-destructive hover:bg-destructive/90">
                            {__('Delete')}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <SettingsCard
                title={__('Email Templates')}
                description={__('Customize newsletter email templates using the email builder')}
            >
                <div className="space-y-4">
                    <div className="p-4 border rounded-lg bg-muted/50">
                        <h4 className="font-medium mb-2">{__('Newsletter Welcome Email')}</h4>
                        <p className="text-sm text-muted-foreground mb-4">
                            {__('Welcome email sent when someone subscribes to your newsletter')}
                        </p>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => navigate('/settings/notifications/edit-template?event=newsletter_welcome&channel=email&recipient=customer')}
                        >
                            {__('Edit Template')}
                        </Button>
                    </div>

                    <div className="p-4 border rounded-lg bg-muted/50">
                        <h4 className="font-medium mb-2">{__('New Subscriber Notification (Admin)')}</h4>
                        <p className="text-sm text-muted-foreground mb-4">
                            {__('Admin notification when someone subscribes to newsletter')}
                        </p>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => navigate('/settings/notifications/edit-template?event=newsletter_subscribed_admin&channel=email&recipient=staff')}
                        >
                            {__('Edit Template')}
                        </Button>
                    </div>
                </div>
            </SettingsCard>
        </div >
    );
}