'use client';

import { useState, useEffect } from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { formatCost } from '../lib/formatCost';

export default function AgentSpendCard({ agentId }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const params = new URLSearchParams({ period: '30d' });
    if (agentId) params.set('agent_id', agentId);

    fetch(`/api/actions/costs?${params}`)
      .then((res) => (res.ok ? res.json() : null))
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [agentId]);

  if (loading) {
    return (
      <div className="space-y-3">
        <div className="h-3 w-20 animate-pulse rounded bg-white/[0.04]" />
        <div className="h-8 w-24 animate-pulse rounded bg-white/[0.04]" />
        <div className="h-3 w-16 animate-pulse rounded bg-white/[0.04]" />
      </div>
    );
  }

  if (!data || data.total_cost_usd == null) return null;

  const totalCost = data.total_cost_usd;
  // Compare against 0 since we have a single period — trend improves once we have history
  const isPositiveTrend = totalCost > 0;

  // Build sparkline bars from by_day data
  const days = Array.isArray(data.by_day) ? data.by_day : [];
  const maxDayCost = days.reduce((m, d) => Math.max(m, d.cost_usd || 0), 0);

  // Top 3 agents by spend
  const byAgent = Array.isArray(data.by_agent) ? data.by_agent : [];
  const top3 = byAgent.slice(0, 3);

  return (
    <div className="space-y-3">
      <div className="text-[10px] font-semibold uppercase tracking-widest text-tertiary">
        Agent Spend (30d)
      </div>

      {/* Total spend */}
      <div className="flex items-baseline gap-2">
        <div className="text-3xl font-bold tabular-nums text-white">
          {formatCost(totalCost)}
        </div>
        <div
          className={`flex items-center gap-0.5 text-xs font-medium ${
            isPositiveTrend ? 'text-success' : 'text-tertiary'
          }`}
        >
          {isPositiveTrend ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
        </div>
      </div>

      {/* Sparkline */}
      {days.length > 0 && (
        <div className="flex items-end gap-0.5 h-8">
          {days.map((d, i) => {
            const height =
              maxDayCost > 0 ? Math.max(2, Math.round(((d.cost_usd || 0) / maxDayCost) * 32)) : 2;
            return (
              <div
                key={i}
                title={`${d.date}: ${formatCost(d.cost_usd)}`}
                className="flex-1 rounded-sm bg-brand/40 hover:bg-brand/70 transition-colors"
                style={{ height: `${height}px` }}
              />
            );
          })}
        </div>
      )}

      {/* Top agents */}
      {top3.length > 0 && (
        <div className="space-y-1 pt-1">
          {top3.map((a) => (
            <div key={a.agent_id} className="flex items-center justify-between text-xs">
              <span className="truncate max-w-[120px] text-secondary">
                {a.agent_name || a.agent_id}
              </span>
              <span className="font-mono text-white tabular-nums">{formatCost(a.cost_usd)}</span>
            </div>
          ))}
        </div>
      )}

      {totalCost === 0 && (
        <div className="text-xs text-disabled">No cost data yet</div>
      )}
    </div>
  );
}
