encoach_backend_new_v2/frontend/src/components/ai/AiAssistantDrawer.tsx

import { useMemo, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sparkles, Send, Loader2 } from "lucide-react";
import { coachingService } from "@/services/coaching.service";
import { useToast } from "@/hooks/use-toast";

export default function AiAssistantDrawer() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<{ role: "user" | "ai"; text: string }[]>([]);
  const [input, setInput] = useState("");
  const location = useLocation();
  const { toast } = useToast();
  const { t } = useTranslation();

  // Re-compute when language switches so quick-action chips show translated
  // labels immediately. Chips are stored by label (what we send to the
  // backend), so localizing the label is safe here — the backend treats
  // them as free-form prompts.
  const quickActions = useMemo(
    () => [
      t("ai.quickHealth"),
      t("ai.quickDropouts"),
      t("ai.quickCompare"),
      t("ai.quickBatch"),
    ],
    [t],
  );

  const chatMutation = useMutation({
    mutationFn: (message: string) =>
      coachingService.chat({ message, context: { page: location.pathname } }),
    onSuccess: (data) => {
      setMessages((prev) => [...prev, { role: "ai", text: data.reply }]);
    },
    onError: (err: Error) => {
      toast({
        variant: "destructive",
        title: t("ai.replyErrorTitle"),
        description: err.message || t("ai.replyErrorDesc"),
      });
      setMessages((prev) => [
        ...prev,
        { role: "ai", text: t("ai.fallbackReply") },
      ]);
    },
  });

  const handleSend = (text: string) => {
    if (!text.trim() || chatMutation.isPending) return;
    const userMsg = text.trim();
    setMessages((prev) => [...prev, { role: "user", text: userMsg }]);
    setInput("");
    chatMutation.mutate(userMsg);
  };

  return (
    <>
      <button
        onClick={() => setOpen(true)}
        className="fixed bottom-20 end-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
        aria-label={t("ai.assistantLabel")}
        title={t("ai.assistantLabel")}
      >
        <Sparkles className="h-5 w-5" />
      </button>

      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent className="w-[400px] sm:w-[440px] flex flex-col">
          <SheetHeader>
            <SheetTitle className="flex items-center gap-2">
              <Sparkles className="h-5 w-5 text-primary" />
              {t("ai.assistantTitle")}
            </SheetTitle>
          </SheetHeader>

          <div className="flex flex-wrap gap-2 mt-4">
            {quickActions.map((action) => (
              <Button
                key={action}
                variant="outline"
                size="sm"
                className="text-xs"
                disabled={chatMutation.isPending}
                onClick={() => handleSend(action)}
              >
                {action}
              </Button>
            ))}
          </div>

          <div className="flex-1 overflow-y-auto mt-4 space-y-3 min-h-0">
            {messages.length === 0 && (
              <div className="text-center text-muted-foreground text-sm py-8">
                <Sparkles className="h-8 w-8 mx-auto mb-3 text-primary/40" />
                <p>{t("ai.emptyLine1")}</p>
                <p>{t("ai.emptyLine2")}</p>
              </div>
            )}
            {messages.map((msg, i) => (
              <div
                key={i}
                className={`rounded-lg p-3 text-sm ${
                  msg.role === "user"
                    ? "bg-primary text-primary-foreground ms-8"
                    : "bg-muted me-8"
                }`}
              >
                {msg.role === "ai" && (
                  <Sparkles className="h-3 w-3 text-primary inline me-1.5 -mt-0.5" />
                )}
                {msg.text}
              </div>
            ))}
            {chatMutation.isPending && (
              <div className="bg-muted rounded-lg p-3 text-sm me-8 flex items-center gap-2">
                <Loader2 className="h-4 w-4 animate-spin text-primary" />
                <span className="text-muted-foreground">{t("ai.thinking")}</span>
              </div>
            )}
          </div>

          <div className="flex gap-2 pt-3 border-t mt-auto">
            <Input
              placeholder={t("ai.placeholder")}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSend(input)}
            />
            <Button
              size="icon"
              onClick={() => handleSend(input)}
              disabled={!input.trim() || chatMutation.isPending}
              aria-label={t("ai.send")}
              title={t("ai.send")}
            >
              <Send className="h-4 w-4" />
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </>
  );
}