import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BudgetProgress } from '@/components/budgets/BudgetProgress'
import { formatCents } from '@/lib/utils/currency'
import { ArrowRight } from 'lucide-react'

interface BudgetItem {
  id: string
  name: string
  limitCents: number | null
  color: string | null
  spendCents: number
}

export function BudgetSummary({ budgets }: { budgets: BudgetItem[] }) {
  return (
    <Card>
      <CardHeader className="pb-2 flex flex-row items-center justify-between space-y-0">
        <CardTitle className="text-sm font-medium text-muted-foreground">Budgets</CardTitle>
        <Link
          href="/budgets"
          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          Manage <ArrowRight className="h-3 w-3" />
        </Link>
      </CardHeader>
      <CardContent>
        {budgets.length === 0 ? (
          <p className="text-sm text-muted-foreground py-4 text-center">No active budgets.</p>
        ) : (
          <div className="space-y-4">
            {budgets.map((b) => (
              <div key={b.id} className="space-y-1">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 min-w-0">
                    {b.color && (
                      <span
                        className="h-2.5 w-2.5 rounded-full shrink-0"
                        style={{ backgroundColor: b.color }}
                      />
                    )}
                    <span className="text-sm font-medium truncate">{b.name}</span>
                  </div>
                  <span className="text-sm tabular-nums text-muted-foreground shrink-0 ml-2">
                    {formatCents(b.spendCents)}
                    {b.limitCents ? ` / ${formatCents(b.limitCents)}` : ''}
                  </span>
                </div>
                {b.limitCents ? (
                  <BudgetProgress spendCents={b.spendCents} limitCents={b.limitCents} />
                ) : (
                  <div className="h-1.5 rounded-full bg-muted" />
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}