/**
 * ModuleMetricsFooter - Compact metrics footer for table pages
 * Shows module-specific metrics at the bottom of table pages
 * Uses standard EnhancedMetricCard and ProgressBar components
 * Follows standard app design system and color scheme
 */

import React from 'react';
import EnhancedMetricCard, { MetricCardProps } from './EnhancedMetricCard';
import { ProgressBar } from '../ui/progress';

export interface MetricItem {
  title: string;
  value: string | number;
  subtitle?: string;
  icon: React.ReactNode;
  accentColor: MetricCardProps['accentColor'];
  href?: string;
  onClick?: () => void;
}

export interface ProgressMetric {
  label: string;
  value: number; // 0-100
  color?: 'primary' | 'success' | 'warning' | 'purple';
}

interface ModuleMetricsFooterProps {
  metrics: MetricItem[];
  progress?: ProgressMetric;
  className?: string;
}

export default function ModuleMetricsFooter({ 
  metrics, 
  progress,
  className = '' 
}: ModuleMetricsFooterProps) {
  if (metrics.length === 0 && !progress) return null;

  const progressColors = {
    primary: 'bg-[var(--color-primary)]',
    success: 'bg-[var(--color-success)]',
    warning: 'bg-[var(--color-warning)]',
    purple: 'bg-[var(--color-purple)]',
  };

  return (
    <div className={`mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 ${className}`}>
      <div className="space-y-4">
        {/* Metrics Grid */}
        {metrics.length > 0 && (
          <div className={`grid grid-cols-1 sm:grid-cols-2 ${metrics.length > 2 ? 'lg:grid-cols-3' : 'lg:grid-cols-2'} ${metrics.length > 3 ? 'xl:grid-cols-4' : ''} gap-4`}>
            {metrics.map((metric, index) => (
              <EnhancedMetricCard
                key={index}
                title={metric.title}
                value={metric.value}
                subtitle={metric.subtitle}
                icon={metric.icon}
                accentColor={metric.accentColor}
                href={metric.href}
                onClick={metric.onClick}
              />
            ))}
          </div>
        )}

        {/* Progress Bar */}
        {progress && (
          <div className="space-y-2">
            <ProgressBar
              value={progress.value}
              color={progress.color === 'success' ? 'success' : progress.color === 'warning' ? 'warning' : 'primary'}
              size="md"
              showLabel={true}
              label={progress.label}
            />
          </div>
        )}
      </div>
    </div>
  );
}