DentalManagementMH05/apps/Frontend/src/components/settings/ai-chat-templates-card.tsx

import { useState, useEffect, useRef } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { Bot, CalendarCheck, UserPlus, MessageCircle, Info } from "lucide-react";

type AiChatTemplates = {
  reminderGreeting: string;
  newPatientGreeting: string;
  generalFallback: string;
};

type OfficeContact = {
  officeName?: string | null;
};

const DEFAULTS = {
  reminderGreeting:
    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can confirm or reschedule your appointment and answer general questions 24/7. How can I help you today?",
  newPatientGreeting:
    "Hi! My name is Lisa, the dedicated AI assistant at {officeName}. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?",
  generalFallback:
    "How can I help you today?",
};

function preview(text: string, officeName: string) {
  return text.replace(/\{officeName\}/g, officeName || "your dental office");
}

export function AiChatTemplatesCard() {
  const { toast } = useToast();

  const [reminderGreeting,   setReminderGreeting]   = useState(DEFAULTS.reminderGreeting);
  const [newPatientGreeting, setNewPatientGreeting] = useState(DEFAULTS.newPatientGreeting);
  const [generalFallback,    setGeneralFallback]    = useState(DEFAULTS.generalFallback);
  const initialized = useRef(false);

  const { data: officeContact } = useQuery<OfficeContact | null>({
    queryKey: ["/api/office-contact"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/office-contact");
      if (!res.ok) return null;
      return res.json();
    },
    staleTime: 60_000,
  });

  const { data: templates, isLoading } = useQuery<AiChatTemplates>({
    queryKey: ["/api/ai/chat-templates"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/ai/chat-templates");
      if (!res.ok) throw new Error("Failed to load templates");
      return res.json();
    },
    staleTime: Infinity,   // never silently refetch and overwrite user edits
    refetchOnWindowFocus: false,
  });

  // Seed state from server on first successful load only
  useEffect(() => {
    if (templates && !initialized.current) {
      initialized.current = true;
      setReminderGreeting(templates.reminderGreeting     || DEFAULTS.reminderGreeting);
      setNewPatientGreeting(templates.newPatientGreeting || DEFAULTS.newPatientGreeting);
      setGeneralFallback(templates.generalFallback       || DEFAULTS.generalFallback);
    }
  }, [templates]);

  const saveMutation = useMutation({
    mutationFn: async (data: AiChatTemplates) => {
      const res = await apiRequest("PUT", "/api/ai/chat-templates", data);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.message || "Failed to save templates");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/ai/chat-templates"] });
      toast({ title: "Templates saved", description: "AI chat templates have been updated." });
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err?.message, variant: "destructive" });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    saveMutation.mutate({
      reminderGreeting:   reminderGreeting.trim()   || DEFAULTS.reminderGreeting,
      newPatientGreeting: newPatientGreeting.trim()  || DEFAULTS.newPatientGreeting,
      generalFallback:    generalFallback.trim()     || DEFAULTS.generalFallback,
    });
  };

  const officeName = officeContact?.officeName?.trim() || "";

  const templates_list = [
    {
      key: "reminder" as const,
      icon: <CalendarCheck className="h-4 w-4 text-primary" />,
      label: "Appointment Reminder Reply",
      description: "Sent when the AI introduces itself after the office sends an appointment reminder.",
      value: reminderGreeting,
      onChange: setReminderGreeting,
      placeholder: DEFAULTS.reminderGreeting,
    },
    {
      key: "newPatient" as const,
      icon: <UserPlus className="h-4 w-4 text-primary" />,
      label: "New Patient Greeting",
      description: "Sent when a new patient texts in for the first time.",
      value: newPatientGreeting,
      onChange: setNewPatientGreeting,
      placeholder: DEFAULTS.newPatientGreeting,
    },
    {
      key: "general" as const,
      icon: <MessageCircle className="h-4 w-4 text-primary" />,
      label: "General Fallback",
      description: "Used when the AI cannot determine the context of the patient's message.",
      value: generalFallback,
      onChange: setGeneralFallback,
      placeholder: DEFAULTS.generalFallback,
    },
  ];

  return (
    <Card>
      <CardContent className="py-6 space-y-6">
        {/* Header */}
        <div className="flex items-center gap-2">
          <Bot className="h-5 w-5 text-primary" />
          <h3 className="text-lg font-semibold">AI Chat Templates</h3>
        </div>
        <p className="text-sm text-muted-foreground">
          Customize how your AI assistant introduces itself and responds to patients. Use{" "}
          <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{"{officeName}"}</code>{" "}
          as a placeholder — it will be replaced automatically with your dental office name.
        </p>

        {/* Office name hint */}
        {officeName && (
          <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 rounded px-3 py-2">
            <Info className="h-3.5 w-3.5 flex-shrink-0" />
            <span>
              <span className="font-medium">{"{officeName}"}</span> will display as{" "}
              <span className="font-medium text-foreground">"{officeName}"</span>
            </span>
          </div>
        )}

        {isLoading ? (
          <p className="text-sm text-muted-foreground">Loading templates...</p>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-6">
            {templates_list.map((t) => (
              <div key={t.key} className="space-y-2">
                <div className="flex items-center gap-2">
                  {t.icon}
                  <span className="text-sm font-medium">{t.label}</span>
                </div>
                <p className="text-xs text-muted-foreground">{t.description}</p>
                <Textarea
                  value={t.value}
                  onChange={(e) => t.onChange(e.target.value)}
                  placeholder={t.placeholder}
                  rows={3}
                  className="text-sm resize-none"
                />
                {/* Live preview */}
                {officeName && t.value.includes("{officeName}") && (
                  <p className="text-xs text-muted-foreground italic pl-1">
                    Preview: {preview(t.value, officeName)}
                  </p>
                )}
              </div>
            ))}

            <div className="flex items-center gap-3 pt-2">
              <Button
                type="submit"
                disabled={saveMutation.isPending}
                className="bg-teal-600 hover:bg-teal-700 text-white"
              >
                {saveMutation.isPending ? "Saving..." : "Save Templates"}
              </Button>
              <Button
                type="button"
                variant="ghost"
                className="text-xs text-muted-foreground"
                onClick={() => {
                  setReminderGreeting(DEFAULTS.reminderGreeting);
                  setNewPatientGreeting(DEFAULTS.newPatientGreeting);
                  setGeneralFallback(DEFAULTS.generalFallback);
                }}
              >
                Reset to defaults
              </Button>
            </div>
          </form>
        )}
      </CardContent>
    </Card>
  );
}