import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
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 { 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";

  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">Loading AI tip…</span>
      </div>
    );
  }

  if (isError || !data) {
    return (
      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`}>
        <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
        <div className="flex-1">
          <span className="text-xs font-semibold text-primary">AI Tip</span>
          <p className="text-sm text-muted-foreground mt-0.5">
            {isError ? (error instanceof Error ? error.message : "Could not load tip.") : "No tip available."}
          </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`}>
        <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
        <div className="flex-1">
          <span className="text-xs font-semibold text-primary">AI {variant === "tip" ? "Tip" : variant === "insight" ? "Insight" : "Recommendation"}</span>
          <p className="text-sm text-muted-foreground mt-0.5">No tip for this context yet.</p>
        </div>
      </div>
    );
  }

  const label = data.category && data.category !== "general"
    ? `AI ${data.category.charAt(0).toUpperCase() + data.category.slice(1)} Tip`
    : `AI ${variant === "tip" ? "Tip" : variant === "insight" ? "Insight" : "Recommendation"}`;

  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`}>
      <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
      <div className="flex-1">
        <span className="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>
  );
}
