"use client";

import * as React from "react";
import Image from "next/image";
import {
  Bell,
  Send,
  Users,
  CheckCircle2,
  ExternalLink,
} from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { FloatingInput, FloatingTextarea } from "@/components/ui/floating-input";
import { toast } from "sonner";

export interface PushTargetPost {
  id: string;
  title: string;
  excerpt?: string | null;
  slug: string;
  liveSlug?: string | null;
  featuredImage?: string | null;
}

export interface PushSendDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  post: PushTargetPost | null;
}

interface PushSendResult {
  sent: number;
  failed: number;
  invalidSubscriptions?: number;
  subscriberCount: number;
  message?: string;
}

export function PushSendDialog({ open, onOpenChange, post }: PushSendDialogProps) {
  const [title, setTitle] = React.useState("");
  const [body, setBody] = React.useState("");
  const [subscriberCount, setSubscriberCount] = React.useState<number | null>(null);
  const [fetchingCount, setFetchingCount] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [confirming, setConfirming] = React.useState(false);
  const [result, setResult] = React.useState<PushSendResult | null>(null);

  // When post changes or dialog opens, initialize fields
  React.useEffect(() => {
    if (open && post) {
      setTitle(`New on Quto AI: ${post.title}`);

      const rawExcerpt = (post.excerpt || "").trim();
      let formattedBody = "Read the latest publication on Quto AI.";
      if (rawExcerpt) {
        if (rawExcerpt.length <= 150) {
          formattedBody = rawExcerpt;
        } else {
          const cut = rawExcerpt.slice(0, 150);
          const lastSpace = cut.lastIndexOf(" ");
          formattedBody = (lastSpace > 50 ? cut.slice(0, lastSpace) : cut) + "...";
        }
      }
      setBody(formattedBody);
      setConfirming(false);
      setResult(null);

      // Fetch active subscriber count
      setFetchingCount(true);
      fetch("/api/admin/push/send")
        .then((res) => (res.ok ? res.json() : null))
        .then((data) => {
          if (data && typeof data.subscriberCount === "number") {
            setSubscriberCount(data.subscriberCount);
          } else {
            setSubscriberCount(0);
          }
        })
        .catch(() => setSubscriberCount(0))
        .finally(() => setFetchingCount(false));
    }
  }, [open, post]);

  if (!post) return null;

  const targetUrl = `/blog/${post.liveSlug || post.slug}`;

  const handleTriggerSend = async () => {
    try {
      setSending(true);
      const res = await fetch("/api/admin/push/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          postId: post.id,
          title: title.trim() || undefined,
          body: body.trim() || undefined,
        }),
      });

      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || "Failed to broadcast push notification.");
      }

      const resObj: PushSendResult = {
        sent: data.sent ?? 0,
        failed: data.failed ?? 0,
        invalidSubscriptions: data.invalidSubscriptions ?? 0,
        subscriberCount: subscriberCount ?? 0,
        message: data.message,
      };

      setResult(resObj);
      setConfirming(false);
      toast.success(data.message || `Push notification delivered to ${resObj.sent} subscribers.`);
    } catch (err: any) {
      toast.error(err.message || "Failed to broadcast push notification.");
      setConfirming(false);
    } finally {
      setSending(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px] p-6">
        <DialogHeader className="pb-3 border-b border-neutral-100 dark:border-neutral-800">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-purple-100 text-purple-600 dark:bg-purple-950/80 dark:text-purple-400">
              <Bell className="h-5 w-5" />
            </div>
            <div>
              <DialogTitle className="text-base font-bold text-neutral-900 dark:text-white">
                {confirming ? "Review & Confirm Broadcast" : "Broadcast Web Push Notification"}
              </DialogTitle>
              <DialogDescription className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">
                {confirming
                  ? "Verify the notification preview before dispatching to readers."
                  : "Send an instant browser notification to all readers who subscribed on your blog."}
              </DialogDescription>
            </div>
          </div>
        </DialogHeader>

        {/* RESULT VIEW */}
        {result ? (
          <div className="space-y-4 pt-4 text-xs">
            <div className="rounded-2xl border border-emerald-200/90 bg-emerald-50/50 p-4 dark:border-emerald-900/50 dark:bg-emerald-950/30">
              <div className="flex items-center gap-2.5 text-emerald-800 dark:text-emerald-300 font-semibold text-sm">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-900/60 dark:text-emerald-300">
                  <CheckCircle2 className="h-4.5 w-4.5" />
                </div>
                <div>
                  <span>Broadcast Dispatched</span>
                  <p className="text-[11px] font-normal text-emerald-700/90 dark:text-emerald-400">
                    {result.message || "Notification delivered across the Web Push network."}
                  </p>
                </div>
              </div>

              <div className="mt-4 grid grid-cols-3 gap-2.5 text-center text-xs">
                <div className="rounded-xl bg-white/90 p-3 border border-emerald-100 dark:border-emerald-950 dark:bg-neutral-900/90">
                  <span className="block text-neutral-400 text-[10px] uppercase font-bold tracking-wider">Subscribers</span>
                  <span className="font-mono font-bold text-base text-neutral-900 dark:text-white mt-0.5 block">
                    {result.subscriberCount}
                  </span>
                </div>
                <div className="rounded-xl bg-white/90 p-3 border border-emerald-100 dark:border-emerald-950 dark:bg-neutral-900/90">
                  <span className="block text-emerald-600 dark:text-emerald-400 text-[10px] uppercase font-bold tracking-wider">Delivered</span>
                  <span className="font-mono font-bold text-base text-emerald-700 dark:text-emerald-300 mt-0.5 block">
                    {result.sent}
                  </span>
                </div>
                <div className="rounded-xl bg-white/90 p-3 border border-emerald-100 dark:border-emerald-950 dark:bg-neutral-900/90">
                  <span className="block text-neutral-400 text-[10px] uppercase font-bold tracking-wider">Failed / Pruned</span>
                  <span className="font-mono font-bold text-base text-neutral-600 dark:text-neutral-400 mt-0.5 block">
                    {result.failed + (result.invalidSubscriptions || 0)}
                  </span>
                </div>
              </div>
            </div>

            <DialogFooter className="pt-2">
              <Button
                type="button"
                onClick={() => {
                  setResult(null);
                  onOpenChange(false);
                }}
                className="w-full bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 text-xs font-semibold h-9.5 rounded-xl"
              >
                Done
              </Button>
            </DialogFooter>
          </div>
        ) : confirming ? (
          /* CONFIRMATION / PREVIEW VIEW */
          <div className="space-y-4 pt-3 text-xs">
            {/* Realistic Push Notification Preview Card */}
            <div>
              <div className="flex items-center justify-between mb-2">
                <span className="text-[10.5px] font-bold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
                  Notification Live Preview
                </span>
                <span className="text-[10.5px] text-neutral-400">Desktop & Mobile</span>
              </div>

              <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/80">
                {/* Notification Card Header */}
                <div className="flex items-center justify-between pb-2.5 mb-2.5 border-b border-neutral-100 dark:border-neutral-800/80">
                  <div className="flex items-center gap-2">
                    <div className="relative flex h-5 w-5 items-center justify-center overflow-hidden rounded-md bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
                      <Image
                        src="/images/quto-logo.webp"
                        alt="Quto AI"
                        width={14}
                        height={14}
                        className="object-contain"
                      />
                    </div>
                    <span className="text-[11px] font-bold text-neutral-800 dark:text-neutral-200 tracking-tight">
                      Quto AI
                    </span>
                    <span className="text-[10px] text-neutral-400 font-medium">• now</span>
                  </div>
                  <span className="rounded-full bg-purple-50 px-2 py-0.5 text-[9.5px] font-semibold text-purple-700 dark:bg-purple-950/60 dark:text-purple-300">
                    Push Notification
                  </span>
                </div>

                {/* Notification Card Content */}
                <div className="flex items-start gap-3">
                  <div className="flex-1 min-w-0 space-y-1">
                    <p className="text-xs font-bold text-neutral-900 dark:text-white leading-snug">
                      {title}
                    </p>
                    <p className="text-xs text-neutral-600 dark:text-neutral-300 leading-relaxed line-clamp-3">
                      {body}
                    </p>
                  </div>
                  {post.featuredImage && (
                    <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800">
                      <Image
                        src={post.featuredImage}
                        alt="Featured"
                        fill
                        className="object-cover"
                      />
                    </div>
                  )}
                </div>

                {/* Click Action Preview */}
                <div className="mt-3 flex items-center gap-1.5 pt-2.5 border-t border-neutral-100 dark:border-neutral-800/80 text-[11px]">
                  <ExternalLink className="h-3 w-3 text-purple-600 dark:text-purple-400 shrink-0" />
                  <span className="text-neutral-500 dark:text-neutral-400">Clicking opens:</span>
                  <span className="truncate font-mono text-[10.5px] font-medium text-purple-600 dark:text-purple-400">
                    {targetUrl}
                  </span>
                </div>
              </div>
            </div>

            {/* Target Audience Pill */}
            <div className="flex items-center justify-between rounded-xl border border-purple-100 bg-purple-50/50 px-3.5 py-2.5 dark:border-purple-950 dark:bg-purple-950/30">
              <div className="flex items-center gap-2 text-purple-900 dark:text-purple-200">
                <Users className="h-4 w-4 text-purple-600 dark:text-purple-400 shrink-0" />
                <span className="font-medium">Total Audience:</span>
              </div>
              <span className="font-bold text-purple-950 dark:text-purple-100">
                {subscriberCount ?? 0} active reader{(subscriberCount ?? 0) === 1 ? "" : "s"}
              </span>
            </div>

            <DialogFooter className="pt-2 border-t border-neutral-100 dark:border-neutral-800 flex items-center justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => setConfirming(false)}
                disabled={sending}
                className="h-9 px-3.5 text-xs rounded-xl"
              >
                Back to Edit
              </Button>
              <Button
                type="button"
                onClick={handleTriggerSend}
                disabled={sending}
                className="h-9 px-4 text-xs bg-purple-600 hover:bg-purple-700 text-white font-semibold shadow-sm gap-1.5 rounded-xl"
              >
                <Send className="h-3.5 w-3.5" />
                <span>{sending ? "Broadcasting..." : `Send to ${subscriberCount ?? 0} Subscribers`}</span>
              </Button>
            </DialogFooter>
          </div>
        ) : (
          /* COMPOSER VIEW */
          <div className="space-y-4 pt-3 text-xs">
            {/* Subscriber Counter Pill */}
            <div className="flex items-center justify-between rounded-xl border border-purple-100 bg-purple-50/60 px-3.5 py-2.5 text-purple-900 dark:border-purple-900/40 dark:bg-purple-950/40 dark:text-purple-200">
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                <span className="font-medium">Active Blog Subscribers:</span>
              </div>
              <span className="font-mono font-bold text-sm">
                {fetchingCount ? "Loading..." : subscriberCount === null ? "—" : subscriberCount}
              </span>
            </div>

            {/* Title Input */}
            <FloatingInput
              id="push-notif-title"
              label="Notification Title *"
              value={title}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
              maxLength={100}
              required
            />

            {/* Message Body Input */}
            <FloatingTextarea
              id="push-notif-body"
              label="Notification Message *"
              value={body}
              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setBody(e.target.value)}
              rows={3}
              maxLength={200}
              required
            />

            {/* Destination Preview */}
            <div className="space-y-1 text-[11px] text-neutral-500 dark:text-neutral-400">
              <div className="flex items-center gap-1">
                <span>Destination:</span>
                <span className="font-mono text-purple-600 dark:text-purple-400">{targetUrl}</span>
              </div>
              <p>• Only subscribed visitors who granted notification permissions will receive this.</p>
            </div>

            <DialogFooter className="pt-2 border-t border-neutral-100 dark:border-neutral-800">
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={sending}
                className="h-9 px-3.5 text-xs rounded-xl"
              >
                Cancel
              </Button>
              <Button
                type="button"
                onClick={() => setConfirming(true)}
                disabled={!title.trim() || !body.trim() || subscriberCount === 0 || fetchingCount}
                className="h-9 px-4 text-xs bg-purple-600 hover:bg-purple-700 text-white font-semibold gap-1.5 rounded-xl"
              >
                <Send className="h-3.5 w-3.5" />
                <span>Review & Send</span>
              </Button>
            </DialogFooter>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}