import { formatEUR } from "@/lib/orderConstants";

export function RevenueTrendChart({ data }: { data: { month: string; amount: number }[] }) {
  if (data.length === 0) return null;
  const max = Math.max(1, ...data.map((d) => d.amount));
  const last = data[data.length - 1];
  const prev = data.length > 1 ? data[data.length - 2] : null;
  const delta = prev && prev.amount > 0 ? ((last.amount - prev.amount) / prev.amount) * 100 : null;

  return (
    <div>
      {delta !== null && (
        <p className="text-xs text-[var(--rk-ink-muted)] mb-3">
          Letzter Monat vs. Vormonat:{" "}
          <span className={delta >= 0 ? "text-emerald-400" : "text-red-400"}>
            {delta >= 0 ? "↑" : "↓"} {Math.abs(Math.round(delta))}%
          </span>
        </p>
      )}
      <div className="flex items-end gap-1.5 h-32">
        {data.map((d) => (
          <div key={d.month} className="flex-1 flex flex-col items-center justify-end gap-1 group relative">
            <div
              className="w-full rounded-t bg-emerald-400/70 group-hover:bg-emerald-400 transition-colors min-h-[2px]"
              style={{ height: `${Math.max(2, (d.amount / max) * 100)}%` }}
            />
            <div className="absolute -top-6 opacity-0 group-hover:opacity-100 transition-opacity text-[0.6rem] bg-[var(--rk-bg)] border border-white/15 rounded px-1.5 py-0.5 whitespace-nowrap pointer-events-none">
              {formatEUR(d.amount)}
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-1.5 mt-1.5">
        {data.map((d) => (
          <span key={d.month} className="flex-1 text-center text-[0.55rem] text-[var(--rk-ink-muted)] truncate">
            {d.month.slice(2)}
          </span>
        ))}
      </div>
    </div>
  );
}