import { useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { Send, Bell, Users, ArrowLeft } from "lucide-react";
import { Link } from "wouter";
import { apiRequest } from "@/lib/queryClient";

export default function AdminPushPage() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [url, setUrl] = useState("");
  const { toast } = useToast();

  const { data: countData } = useQuery<{ count: number }>({
    queryKey: ["/api/push/count"],
    refetchInterval: 10000,
  });

  const sendMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/admin/push/send", { title, body, url: url || "/" });
      return res.json();
    },
    onSuccess: (data: any) => {
      toast({
        title: "Push gesendet",
        description: `Erfolgreich: ${data.sent}, Fehlgeschlagen: ${data.failed} von ${data.total} Abonnenten`,
      });
      setTitle("");
      setBody("");
      setUrl("");
    },
    onError: () => {
      toast({ title: "Fehler", description: "Push-Nachricht konnte nicht gesendet werden.", variant: "destructive" });
    },
  });

  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-2xl mx-auto px-4 py-8">
        <div className="flex items-center gap-3 mb-6">
          <Link href="/">
            <Button variant="ghost" size="icon" data-testid="button-back-home">
              <ArrowLeft className="w-5 h-5" />
            </Button>
          </Link>
          <Bell className="w-6 h-6 text-primary" />
          <h1 className="text-2xl font-bold text-foreground" data-testid="text-admin-push-title">Push-Benachrichtigungen</h1>
        </div>

        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <Users className="w-5 h-5" />
              Abonnenten
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-primary" data-testid="text-subscriber-count">
              {countData?.count ?? 0}
            </p>
            <p className="text-sm text-muted-foreground mt-1">aktive Push-Abonnenten</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <Send className="w-5 h-5" />
              Neue Benachrichtigung senden
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium text-foreground mb-1 block">Titel</label>
                <Input
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="z.B. Neuer Artikel auf FOLX TV"
                  data-testid="input-push-title"
                />
              </div>
              <div>
                <label className="text-sm font-medium text-foreground mb-1 block">Nachricht</label>
                <Textarea
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  placeholder="z.B. Lesen Sie jetzt unseren neuesten Beitrag..."
                  rows={3}
                  data-testid="input-push-body"
                />
              </div>
              <div>
                <label className="text-sm font-medium text-foreground mb-1 block">Link (optional)</label>
                <Input
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="z.B. /article/mein-artikel-slug"
                  data-testid="input-push-url"
                />
                <p className="text-xs text-muted-foreground mt-1">Leer lassen für Startseite</p>
              </div>
              <Button
                onClick={() => sendMutation.mutate()}
                disabled={!title.trim() || !body.trim() || sendMutation.isPending}
                className="w-full"
                data-testid="button-send-push"
              >
                {sendMutation.isPending ? "Wird gesendet..." : `An ${countData?.count ?? 0} Abonnenten senden`}
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}