import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Sparkles, X, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { coachingService } from "@/services/coaching.service";

interface Props {
  context?: string;
  variant?: "tip" | "insight" | "recommendation";
  dismissible?: boolean;
}

export default function AiTipBanner({ context = "dashboard", variant = "tip", dismissible = true }: Props) {
  const [dismissed, setDismissed] = useState(false);
  const { t } = useTranslation();

  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["ai", "tip", context],
    queryFn: () => coachingService.getTip(context),
  });

  if (dismissed) return null;

  const bgClass = variant === "recommendation" ? "bg-accent/50 border-accent" : variant === "insight" ? "bg-primary/5 border-primary/20" : "bg-muted/50 border-muted-foreground/10";

  const variantLabel =
    variant === "insight"
      ? t("ai.insightLabel")
      : variant === "recommendation"
      ? t("ai.recommendationLabel")
      : t("ai.tipLabel");

  if (isLoading) {
    return (
      <div className={`rounded-lg border ${bgClass} p-3 flex items-center gap-3`}>
        <Loader2 className="h-4 w-4 animate-spin text-primary shrink-0" />
        <span className="text-sm text-muted-foreground">{t("ai.loadingTip")}</span>
      </div>
    );
  }

  if (isError || !data) {
    return (
      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`} dir="auto">
        <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
        <div className="flex-1 min-w-0">
          <span className="block text-xs font-semibold text-primary">{t("ai.tipLabel")}</span>
          <p className="text-sm text-muted-foreground mt-0.5">
            {isError ? (error instanceof Error ? error.message : t("ai.couldNotLoadTip")) : t("ai.noTipAvailable")}
          </p>
        </div>
        {dismissible && (
          <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => setDismissed(true)}>
            <X className="h-3 w-3" />
          </Button>
        )}
      </div>
    );
  }

  if (!data.tip?.trim()) {
    return (
      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`} dir="auto">
        <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
        <div className="flex-1 min-w-0">
          <span className="block text-xs font-semibold text-primary">{variantLabel}</span>
          <p className="text-sm text-muted-foreground mt-0.5">{t("ai.noTipForContext")}</p>
        </div>
      </div>
    );
  }

  const label = data.category && data.category !== "general"
    ? t("ai.categoryTipLabel", { category: data.category.charAt(0).toUpperCase() + data.category.slice(1) })
    : variantLabel;

  return (
    <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3 animate-in fade-in slide-in-from-top-2 duration-300`} dir="auto">
      <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
      <div className="flex-1 min-w-0">
        <span className="block text-xs font-semibold text-primary">{label}</span>
        <p className="text-sm text-muted-foreground mt-0.5">{data.tip}</p>
      </div>
      {dismissible && (
        <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => setDismissed(true)}>
          <X className="h-3 w-3" />
        </Button>
      )}
    </div>
  );
}
