import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { api } from "@/lib/api";
import { Flag } from "lucide-react";

interface GoalDto {
  id: string;
  name: string;
  targetAmount: number;
  currentAmount: number;
  color: string;
}

const MAX_SHOWN = 3;

/**
 * Surfaces the user's existing goals (Goals Tracker) here too, so checking
 * progress doesn't mean leaving the investments view. This is not a "funded
 * by investments" computation, goals aren't linked to specific holdings or
 * accounts anywhere in this app, just each goal's own tracked progress.
 */
export function GoalsPanel() {
  const { data: goals, isLoading } = useQuery({
    queryKey: ["goals"],
    queryFn: () => api.get<GoalDto[]>("goals"),
  });

  const shown = (goals ?? []).slice(0, MAX_SHOWN);

  return (
    <Card className="border-border/50">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle className="text-base font-semibold">Goals</CardTitle>
            <CardDescription>Your active savings goals</CardDescription>
          </div>
          <Link to="/goals" className="text-xs text-primary hover:text-primary/80 font-medium shrink-0">
            View all
          </Link>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {isLoading ? (
          <p className="text-sm text-muted-foreground text-center py-4">Loading…</p>
        ) : shown.length === 0 ? (
          <div className="text-center py-4 space-y-2">
            <Flag size={20} strokeWidth={1.5} className="text-muted-foreground/40 mx-auto" />
            <Link to="/goals" className="text-sm text-primary hover:text-primary/80 font-medium">
              Create your first goal
            </Link>
          </div>
        ) : (
          shown.map((g) => {
            const pct = g.targetAmount > 0 ? Math.min(100, (g.currentAmount / g.targetAmount) * 100) : 0;
            return (
              <div key={g.id} className="space-y-1.5">
                <div className="flex items-baseline justify-between text-sm">
                  <span className="text-foreground font-medium truncate">{g.name}</span>
                  <span className="text-muted-foreground tabular-nums shrink-0 ml-2">{pct.toFixed(0)}%</span>
                </div>
                <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                  <div className="h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: g.color || "hsl(var(--primary))" }} />
                </div>
              </div>
            );
          })
        )}
      </CardContent>
    </Card>
  );
}