leggen/frontend/src/components/Notifications.tsx

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Bell,
  MessageSquare,
  Send,
  Trash2,
  RefreshCw,
  AlertCircle,
  CheckCircle,
  Settings,
  TestTube,
} from "lucide-react";
import { apiClient } from "../lib/api";
import LoadingSpinner from "./LoadingSpinner";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "./ui/card";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import type { NotificationSettings, NotificationService } from "../types/api";

export default function Notifications() {
  const [testService, setTestService] = useState("");
  const [testMessage, setTestMessage] = useState(
    "Test notification from Leggen",
  );
  const queryClient = useQueryClient();

  const {
    data: settings,
    isLoading: settingsLoading,
    error: settingsError,
    refetch: refetchSettings,
  } = useQuery<NotificationSettings>({
    queryKey: ["notificationSettings"],
    queryFn: apiClient.getNotificationSettings,
  });

  const {
    data: services,
    isLoading: servicesLoading,
    error: servicesError,
    refetch: refetchServices,
  } = useQuery<NotificationService[]>({
    queryKey: ["notificationServices"],
    queryFn: apiClient.getNotificationServices,
  });

  const testMutation = useMutation({
    mutationFn: apiClient.testNotification,
    onSuccess: () => {
      // Could show a success toast here
      console.log("Test notification sent successfully");
    },
    onError: (error) => {
      console.error("Failed to send test notification:", error);
    },
  });

  const deleteServiceMutation = useMutation({
    mutationFn: apiClient.deleteNotificationService,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
      queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
    },
  });

  if (settingsLoading || servicesLoading) {
    return (
      <Card>
        <LoadingSpinner message="Loading notifications..." />
      </Card>
    );
  }

  if (settingsError || servicesError) {
    return (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Failed to load notifications</AlertTitle>
        <AlertDescription className="space-y-3">
          <p>
            Unable to connect to the Leggen API. Please check your configuration
            and ensure the API server is running.
          </p>
          <Button
            onClick={() => {
              refetchSettings();
              refetchServices();
            }}
            variant="outline"
            size="sm"
          >
            <RefreshCw className="h-4 w-4 mr-2" />
            Retry
          </Button>
        </AlertDescription>
      </Alert>
    );
  }

  const handleTestNotification = () => {
    if (!testService) return;

    testMutation.mutate({
      service: testService.toLowerCase(),
      message: testMessage,
    });
  };

  const handleDeleteService = (serviceName: string) => {
    if (
      confirm(
        `Are you sure you want to delete the ${serviceName} notification service?`,
      )
    ) {
      deleteServiceMutation.mutate(serviceName.toLowerCase());
    }
  };

  return (
    <div className="space-y-6">
      {/* Test Notification Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <TestTube className="h-5 w-5 text-primary" />
            <span>Test Notifications</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="service" className="text-foreground">
                Service
              </Label>
              <Select value={testService} onValueChange={setTestService}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a service..." />
                </SelectTrigger>
                <SelectContent>
                  {services?.map((service) => (
                    <SelectItem key={service.name} value={service.name}>
                      {service.name}{" "}
                      {service.enabled ? "(Enabled)" : "(Disabled)"}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="message" className="text-foreground">
                Message
              </Label>
              <Input
                id="message"
                type="text"
                value={testMessage}
                onChange={(e) => setTestMessage(e.target.value)}
                placeholder="Test message..."
              />
            </div>
          </div>

          <div className="mt-4">
            <Button
              onClick={handleTestNotification}
              disabled={!testService || testMutation.isPending}
            >
              <Send className="h-4 w-4 mr-2" />
              {testMutation.isPending ? "Sending..." : "Send Test Notification"}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Notification Services */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Bell className="h-5 w-5 text-primary" />
            <span>Notification Services</span>
          </CardTitle>
          <CardDescription>Manage your notification services</CardDescription>
        </CardHeader>

        {!services || services.length === 0 ? (
          <CardContent className="text-center">
            <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-medium text-foreground mb-2">
              No notification services configured
            </h3>
            <p className="text-muted-foreground">
              Configure notification services in your backend to receive alerts.
            </p>
          </CardContent>
        ) : (
          <CardContent className="p-0">
            <div className="divide-y divide-border">
              {services.map((service) => (
                <div
                  key={service.name}
                  className="p-6 hover:bg-accent transition-colors"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <div className="p-3 bg-muted rounded-full">
                        {service.name.toLowerCase().includes("discord") ? (
                          <MessageSquare className="h-6 w-6 text-muted-foreground" />
                        ) : service.name.toLowerCase().includes("telegram") ? (
                          <Send className="h-6 w-6 text-muted-foreground" />
                        ) : (
                          <Bell className="h-6 w-6 text-muted-foreground" />
                        )}
                      </div>
                      <div>
                        <h4 className="text-lg font-medium text-foreground capitalize">
                          {service.name}
                        </h4>
                        <div className="flex items-center space-x-2 mt-1">
                          <span
                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                              service.enabled
                                ? "bg-green-100 text-green-800"
                                : "bg-red-100 text-red-800"
                            }`}
                          >
                            {service.enabled ? (
                              <CheckCircle className="h-3 w-3 mr-1" />
                            ) : (
                              <AlertCircle className="h-3 w-3 mr-1" />
                            )}
                            {service.enabled ? "Enabled" : "Disabled"}
                          </span>
                          <span
                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                              service.configured
                                ? "bg-blue-100 text-blue-800"
                                : "bg-yellow-100 text-yellow-800"
                            }`}
                          >
                            {service.configured
                              ? "Configured"
                              : "Not Configured"}
                          </span>
                        </div>
                      </div>
                    </div>

                    <Button
                      onClick={() => handleDeleteService(service.name)}
                      disabled={deleteServiceMutation.isPending}
                      variant="ghost"
                      size="sm"
                      className="text-destructive hover:text-destructive hover:bg-destructive/10"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        )}
      </Card>

      {/* Notification Settings */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Settings className="h-5 w-5 text-primary" />
            <span>Notification Settings</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {settings && (
            <div className="space-y-4">
              <div>
                <h4 className="text-sm font-medium text-foreground mb-2">
                  Filters
                </h4>
                <div className="bg-muted rounded-md p-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <Label className="text-xs font-medium text-muted-foreground mb-1 block">
                        Case Insensitive Filters
                      </Label>
                      <p className="text-sm text-foreground">
                        {settings.filters.case_insensitive.length > 0
                          ? settings.filters.case_insensitive.join(", ")
                          : "None"}
                      </p>
                    </div>
                    <div>
                      <Label className="text-xs font-medium text-muted-foreground mb-1 block">
                        Case Sensitive Filters
                      </Label>
                      <p className="text-sm text-foreground">
                        {settings.filters.case_sensitive &&
                        settings.filters.case_sensitive.length > 0
                          ? settings.filters.case_sensitive.join(", ")
                          : "None"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="text-sm text-muted-foreground">
                <p>
                  Configure notification settings through your backend API to
                  customize filters and service configurations.
                </p>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}