Momento/memento-note/components/settings/usage-breakdown.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import { Loader2, BarChart2 } from 'lucide-react';
import { useLanguage } from '@/lib/i18n';
import { cn } from '@/lib/utils';

interface QuotaEntry {
  remaining: number;
  limit: number;
  used: number;
}

type Quotas = Record<string, QuotaEntry>;

const FEATURE_LABEL_KEYS: Record<string, string> = {
  aiSummary: 'sidebar.aiSummary',
  aiFlashcards: 'sidebar.aiFlashcards',
  aiMindmap: 'sidebar.aiMindmap',
  aiTranscribe: 'sidebar.aiTranscribe',
  aiDiagram: 'sidebar.aiDiagram',
  aiAgent: 'sidebar.aiAgent',
  publish_enhance: 'usageMeter.featurePublishEnhance',
};

function UsageBar({ used, limit, isUnlimited }: { used: number; limit: number; isUnlimited: boolean }) {
  const pct = isUnlimited ? 0 : Math.min(100, limit > 0 ? (used / limit) * 100 : 0);
  const color =
    pct >= 90 ? 'bg-rose-500' : pct >= 70 ? 'bg-amber-500' : 'bg-primary';

  return (
    <div className="h-1.5 w-full rounded-full bg-foreground/10 overflow-hidden">
      {!isUnlimited && (
        <div
          className={cn('h-full rounded-full transition-all', color)}
          style={{ width: `${pct}%` }}
        />
      )}
    </div>
  );
}

export function UsageBreakdown() {
  const { t } = useLanguage();

  const { data, isLoading } = useQuery<{ quotas: Quotas }>({
    queryKey: ['usage', 'current'],
    queryFn: async () => {
      const res = await fetch('/api/usage/current');
      if (!res.ok) throw new Error('Failed to fetch usage');
      return res.json();
    },
  });

  const quotas = data?.quotas ?? {};
  const entries = Object.entries(quotas);

  return (
    <div className="rounded-xl border border-border/40 bg-paper p-6 space-y-4">
      <div className="flex items-center gap-2">
        <BarChart2 className="h-4 w-4 text-muted-foreground" />
        <h3 className="text-sm font-semibold text-foreground">
          {t('billing.usageThisPeriod')}
        </h3>
      </div>

      {isLoading ? (
        <div className="flex justify-center py-4">
          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
        </div>
      ) : entries.length === 0 ? (
        <p className="text-xs text-muted-foreground py-2">{t('billing.noUsage')}</p>
      ) : (
        <div className="space-y-3">
          {entries.map(([feature, quota]) => {
            const isUnlimited = quota.limit === -1 || !isFinite(quota.limit);
            const labelKey = FEATURE_LABEL_KEYS[feature];
            const label = labelKey ? t(labelKey) : feature;

            return (
              <div key={feature} className="space-y-1">
                <div className="flex items-center justify-between">
                  <span className="text-xs text-muted-foreground">{label}</span>
                  <span className="text-xs font-medium text-foreground tabular-nums">
                    {isUnlimited ? (
                      <span className="text-primary/80 dark:text-primary">{t('billing.unlimited')}</span>
                    ) : (
                      `${quota.used} / ${quota.limit}`
                    )}
                  </span>
                </div>
                <UsageBar used={quota.used} limit={quota.limit} isUnlimited={isUnlimited} />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}