/**
 * UsageProgress Component
 * Displays usage limits and progress bars
 */

import React from 'react';
import { Activity, BookOpen, TrendingUp, Eye, AlertTriangle } from 'lucide-react';
import type { UsageStats, UsageStat } from '../../types/payment.types';

interface UsageProgressProps {
  usage: UsageStats;
  showLabels?: boolean;
  compact?: boolean;
}

interface UsageItemProps {
  label: string;
  stat: UsageStat;
  icon: React.ReactNode;
  compact?: boolean;
}

const getProgressColor = (percentage: number) => {
  if (percentage >= 90) return 'bg-red-500';
  if (percentage >= 75) return 'bg-yellow-500';
  return 'bg-blue-500';
};

const UsageItem: React.FC<UsageItemProps> = ({ label, stat, icon, compact = false }) => {
  const percentage = Math.min(stat.percentage, 100);
  const isUnlimited = stat.limit === -1;
  const isNearLimit = percentage >= 80;
  const progressColor = getProgressColor(percentage);

  if (compact) {
    return (
      <div className="flex items-center gap-3">
        <div className="text-gray-400">{icon}</div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between text-xs mb-1">
            <span className="text-gray-400 truncate">{label}</span>
            <span className={isNearLimit && !isUnlimited ? 'text-yellow-400' : 'text-gray-300'}>
              {stat.used.toLocaleString()}
              {!isUnlimited && ` / ${stat.limit.toLocaleString()}`}
            </span>
          </div>
          {!isUnlimited && (
            <div className="h-1.5 bg-gray-700 rounded-full overflow-hidden">
              <div
                className={`h-full ${progressColor} rounded-full transition-all`}
                style={{ width: `${percentage}%` }}
              />
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 bg-gray-800 rounded-xl border border-gray-700">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="p-2 bg-gray-700 rounded-lg text-gray-300">{icon}</div>
          <span className="font-medium text-white">{label}</span>
        </div>
        {isNearLimit && !isUnlimited && (
          <AlertTriangle className="w-5 h-5 text-yellow-400" />
        )}
      </div>

      {isUnlimited ? (
        <div className="text-center py-2">
          <span className="text-2xl font-bold text-green-400">Ilimitado</span>
        </div>
      ) : (
        <>
          <div className="flex items-baseline justify-between mb-2">
            <span className="text-2xl font-bold text-white">
              {stat.used.toLocaleString()}
            </span>
            <span className="text-gray-400">
              de {stat.limit.toLocaleString()}
            </span>
          </div>

          <div className="h-3 bg-gray-700 rounded-full overflow-hidden mb-2">
            <div
              className={`h-full ${progressColor} rounded-full transition-all`}
              style={{ width: `${percentage}%` }}
            />
          </div>

          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500">{percentage.toFixed(0)}% usado</span>
            <span className="text-gray-500">
              {(stat.limit - stat.used).toLocaleString()} restantes
            </span>
          </div>
        </>
      )}
    </div>
  );
};

export const UsageProgress: React.FC<UsageProgressProps> = ({
  usage,
  showLabels = true,
  compact = false,
}) => {
  const items = [
    {
      key: 'apiCalls',
      label: 'API Calls',
      stat: usage.apiCalls,
      icon: <Activity className="w-5 h-5" />,
    },
    {
      key: 'paperTrades',
      label: 'Paper Trades',
      stat: usage.paperTrades,
      icon: <TrendingUp className="w-5 h-5" />,
    },
    {
      key: 'coursesEnrolled',
      label: 'Cursos Inscritos',
      stat: usage.coursesEnrolled,
      icon: <BookOpen className="w-5 h-5" />,
    },
    {
      key: 'watchlistSymbols',
      label: 'Símbolos en Watchlist',
      stat: usage.watchlistSymbols,
      icon: <Eye className="w-5 h-5" />,
    },
  ];

  if (compact) {
    return (
      <div className="bg-gray-800 rounded-xl border border-gray-700 p-4">
        {showLabels && (
          <h3 className="font-medium text-white mb-4">Uso del Plan</h3>
        )}
        <div className="space-y-4">
          {items.map((item) => (
            <UsageItem
              key={item.key}
              label={item.label}
              stat={item.stat}
              icon={item.icon}
              compact
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div>
      {showLabels && (
        <h3 className="font-semibold text-white mb-4">Uso del Plan</h3>
      )}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {items.map((item) => (
          <UsageItem
            key={item.key}
            label={item.label}
            stat={item.stat}
            icon={item.icon}
          />
        ))}
      </div>
    </div>
  );
};

export default UsageProgress;
