import { useMemo } from "react";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMoney } from "@/hooks/useMoney";
import { cn } from "@/lib/utils";
import { Progress } from "@/components/ui/progress";
import { TrendingUp, ArrowRight } from "lucide-react";
import { Link } from "react-router-dom";
import { monthKey } from "@/lib/format";
import { projectMonthEnd } from "@/lib/budgets";

/**
 * Projected end-of-month balance.
 *
 * The previous version fetched budgets once on mount (so it never reflected an
 * edit), ignored income entirely, and used `max(totalBudget, actualSpend)` with
 * no sense of how far through the month it was, on the 2nd it projected a full
 * month of spending, on the 28th almost none. It now extrapolates real spend at
 * the current daily rate and counts income still expected.
 */
export function ForecastWidget() {
  const { accounts, transactions } = useFinanceData({ summary: true });
  const { money } = useMoney();

  const currentBalance = useMemo(
    () =>
      accounts
        .filter((a) => a.type === "checking" || a.type === "savings")
        .reduce((s, a) => s + a.balance, 0),
    [accounts]
  );

  const p = useMemo(
    () => projectMonthEnd(transactions, currentBalance, monthKey(new Date())),
    [transactions, currentBalance]
  );

  const isPositive = p.projectedBalance >= 0;
  const hasData = currentBalance !== 0 || p.spentToDate > 0;
  const spendRatio =
    currentBalance > 0 ? Math.min((p.projectedSpend / currentBalance) * 100, 100) : 0;
  const daysLeft = p.daysInMonth - p.daysElapsed;

  if (!hasData) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-2 text-center">
        <TrendingUp size={18} className="text-muted-foreground/40" />
        <p className="text-[10px] text-muted-foreground">Connect your bank to see a forecast</p>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col justify-between gap-3">
      <div className="space-y-1">
        <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
          Projected end of month
        </p>
        <p
          className={cn(
            "text-2xl font-bold tabular-nums tracking-tight",
            isPositive ? "text-series-income" : "text-series-expense"
          )}
        >
          {money(p.projectedBalance)}
        </p>
        <p className="text-[10px] text-muted-foreground tabular-nums">
          {daysLeft > 0 ? `${daysLeft} days left · ` : ""}
          {money(p.spentToDate)} spent so far
        </p>
      </div>

      <div className="space-y-1.5">
        <Progress
          value={spendRatio}
          className={cn(
            "h-2 bg-muted/50 [&>div]:transition-all [&>div]:duration-700 [&>div]:ease-out",
            spendRatio > 85
              ? "[&>div]:bg-chart-red"
              : spendRatio > 60
                ? "[&>div]:bg-chart-yellow"
                : "[&>div]:bg-chart-green"
          )}
        />
        <div className="flex justify-between text-[10px] text-muted-foreground tabular-nums">
          <span>Balance {money(currentBalance)}</span>
          <span>Projected spend {money(p.projectedSpend)}</span>
        </div>
      </div>

      <Link
        to="/planning"
        className="flex items-center gap-1 text-[10px] text-primary hover:text-primary/80 font-medium self-start"
      >
        View forecast <ArrowRight size={10} />
      </Link>
    </div>
  );
}