Loader Message

"use client";

import { GencnUILoaderMessage } from "@/registry/new-york/gencn-ui/items/loader-message/gencn-ui-loader-message";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Spinner } from "@/components/ui/spinner";
import * as React from "react";

export function GencnUILoaderMessageExample() {
  return (
    <div className="space-y-4">
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">Show Loader Message</Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Submitting form data (example)</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
            <span className="inline-flex items-center gap-2">
              <Spinner className="size-4" />
              <GencnUILoaderMessage
                text="Your request is being processed..."
                tone="funny"
                numberOfMessages={3}
                duration={3000}
                loopBack={true}
              />
            </span>
          </AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

"use client";
import { useState, useRef, useCallback, useEffect, useMemo } from "react";
import { useStructuredAPI } from "@/registry/new-york/gencn-ui/items/shared/hooks/internal/use-gencn-ui-structured-api";
import type { AITone } from "@/registry/new-york/gencn-ui/items/shared/gencn-ui-types";

export interface GencnUILoaderMessageProps {
  text: string;
  tone?: AITone;
  length?: "shorter" | "as-is" | "longer";
  format?: "as-is" | "markdown" | "plain-text";
  context?: string;
  numberOfMessages?: number; // Default: 3
  duration?: number; // Duration in milliseconds, default: 3000
  loopBack?: boolean; // Whether to loop back to first message after last, default: false
}

export function GencnUILoaderMessage({
  text,
  tone,
  length = "as-is",
  format = "as-is",
  context,
  numberOfMessages = 3,
  duration = 3000,
  loopBack = false,
}: GencnUILoaderMessageProps) {
  // Clamp numberOfMessages to maximum of 10
  const clampedNumberOfMessages = Math.min(
    Math.max(1, numberOfMessages || 3),
    10
  );

  const [messages, setMessages] = useState<string[]>([]);
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [isMounted, setIsMounted] = useState<boolean>(false);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const abortRef = useRef<AbortController | null>(null);
  const isGeneratingRef = useRef<boolean>(false);
  const lastGeneratedKeyRef = useRef<string | null>(null);

  // Create JSON schema for message variations
  const schema = useMemo(() => {
    return {
      type: "object",
      properties: {
        messages: {
          type: "array",
          minItems: clampedNumberOfMessages,
          maxItems: clampedNumberOfMessages,
          items: {
            type: "object",
            properties: {
              text: {
                type: "string",
                description: "A unique variation of the original message text",
              },
            },
            required: ["text"],
          },
        },
      },
      required: ["messages"],
    };
  }, [clampedNumberOfMessages]);

  // Use structured API hook for generating multiple message variations
  const structuredAPI = useStructuredAPI({
    schema,
    omitResponseConstraintInput: true,
    serverFallback: {
      api: "/api/structured",
    },
  });

  // Mark component as mounted (client-side only)
  useEffect(() => {
    setIsMounted(true);
  }, []);

  // Build prompt for generating message variations
  const buildPrompt = useCallback(() => {
    const instructions: string[] = [];

    // Use sonner's tone instruction style
    if (tone) {
      instructions.push(
        `Rephrase the following text in a ${tone} tone while preserving intent.`
      );
    } else {
      instructions.push(
        "Rephrase the following text to improve clarity while preserving intent."
      );
    }

    if (length !== "as-is") {
      instructions.push(`Length: ${length}`);
    }
    if (format !== "as-is") {
      instructions.push(`Format: ${format}`);
    }

    const baseInstruction = instructions.join(" ");
    const contextText = context ? `\n\nAdditional context: ${context}` : "";

    return `Original text: "${text}"

${baseInstruction}${contextText}

Generate exactly ${clampedNumberOfMessages} unique variations of this text. Each variation must be:
- A complete, independent message
- Distinctly different from all other variations
- Using different words, phrasing, and sentence structure
- Maintaining the same core meaning and intent
- Appropriate for use as a loading/processing message

Return a JSON object with a "messages" array, where each message has a "text" property containing one unique variation.`;
  }, [text, tone, length, format, context, clampedNumberOfMessages]);

  // Generate all messages upfront using structured API
  const generateMessages = useCallback(async () => {
    if (!isMounted || !text.trim() || isGeneratingRef.current) {
      return;
    }

    // Create a unique key for this generation request
    const generationKey = `${text}|${tone}|${length}|${format}|${context || ""}|${clampedNumberOfMessages}`;

    // If we've already generated for this exact configuration, don't regenerate
    if (lastGeneratedKeyRef.current === generationKey && messages.length > 0) {
      return;
    }

    isGeneratingRef.current = true;
    setIsGenerating(true);
    const controller = new AbortController();
    abortRef.current = controller;

    try {
      const promptText = buildPrompt();

      // Generate all message variations in a single structured API call
      const result = await structuredAPI.prompt(promptText);

      // Extract messages from the structured response
      if (result && result.messages && Array.isArray(result.messages)) {
        const validMessages: string[] = result.messages
          .filter(
            (m: any) => m && typeof m.text === "string" && m.text.trim() !== ""
          )
          .map((m: any) => m.text.trim())
          .slice(0, clampedNumberOfMessages);

        // Remove duplicates (though structured API should generate unique ones)
        const uniqueMessages = Array.from(new Set(validMessages));

        if (!controller.signal.aborted && uniqueMessages.length > 0) {
          setMessages(uniqueMessages);
          setCurrentIndex(0);
          lastGeneratedKeyRef.current = generationKey;
        } else if (!controller.signal.aborted) {
          // If all messages failed, keep original text as fallback
          setMessages([text]);
          setCurrentIndex(0);
          lastGeneratedKeyRef.current = generationKey;
        }
      } else {
        // Invalid response format, fallback to original text
        if (!controller.signal.aborted) {
          setMessages([text]);
          setCurrentIndex(0);
          lastGeneratedKeyRef.current = generationKey;
        }
      }
    } catch (e) {
      // On error, fallback to original text
      console.warn("[LoaderMessage] Failed to generate messages:", e);
      if (!controller.signal.aborted) {
        setMessages([text]);
        setCurrentIndex(0);
        lastGeneratedKeyRef.current = generationKey;
      }
    } finally {
      if (!controller.signal.aborted) {
        setIsGenerating(false);
        isGeneratingRef.current = false;
      }
      if (abortRef.current === controller) {
        abortRef.current = null;
      }
    }
  }, [
    text,
    tone,
    length,
    format,
    context,
    clampedNumberOfMessages,
    structuredAPI,
    isMounted,
    buildPrompt,
  ]);

  // Reset state when text or options change
  useEffect(() => {
    const generationKey = `${text}|${tone}|${length}|${format}|${context || ""}|${clampedNumberOfMessages}`;
    // Only reset if the key actually changed
    if (lastGeneratedKeyRef.current !== generationKey) {
      setMessages([]);
      setCurrentIndex(0);
      setIsGenerating(false);
      isGeneratingRef.current = false;
      lastGeneratedKeyRef.current = null;
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
      if (abortRef.current) {
        abortRef.current.abort();
        abortRef.current = null;
      }
    }
  }, [
    text,
    tone,
    length,
    format,
    context,
    clampedNumberOfMessages,
    duration,
    loopBack,
  ]);

  // Generate messages when component mounts or when generation key changes
  useEffect(() => {
    if (isMounted && text.trim()) {
      const generationKey = `${text}|${tone}|${length}|${format}|${context || ""}|${clampedNumberOfMessages}`;
      // Only generate if we haven't generated for this key yet
      if (lastGeneratedKeyRef.current !== generationKey) {
        void generateMessages();
      }
    }
  }, [
    isMounted,
    text,
    tone,
    length,
    format,
    context,
    clampedNumberOfMessages,
    generateMessages,
  ]);

  // Set up rotation interval
  useEffect(() => {
    // Only start rotation if we have messages and more than one message
    if (messages.length <= 1) {
      return;
    }

    // Clear any existing interval
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }

    // Set up rotation interval
    intervalRef.current = setInterval(() => {
      setCurrentIndex((prevIndex) => {
        const nextIndex = prevIndex + 1;

        // If we've reached the last message
        if (nextIndex >= messages.length) {
          if (loopBack) {
            // Loop back to first message
            return 0;
          } else {
            // Stay on last message
            return prevIndex;
          }
        }

        return nextIndex;
      });
    }, duration);

    // Cleanup interval on unmount or when dependencies change
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, [messages, duration, loopBack]);

  // Determine what to display
  // Show existing messages if available, even while generating new ones
  // Only show original text if we have no messages at all
  const displayText =
    messages.length > 0
      ? (messages[currentIndex] ?? messages[0] ?? text)
      : text; // Fallback to original text only if no messages exist

  return (
    <span className="inline-flex items-center">
      <span>{displayText}</span>
    </span>
  );
}