/**
 * Credit Costs Reference Panel
 * Shows credit cost for each operation type
 */

import { Card } from '../ui/card';
import Badge from '../ui/badge/Badge';

// Credit costs per operation
const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: 'brand' | 'success' | 'info' | 'warning' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' }> = {
  clustering: { 
    cost: 10, 
    description: 'Per clustering request',
    color: 'brand'
  },
  idea_generation: { 
    cost: 15, 
    description: 'Per cluster → ideas request',
    color: 'success'
  },
  content_generation: { 
    cost: '1 per 100 words', 
    description: 'Per 100 words generated',
    color: 'purple'
  },
  image_prompt_extraction: { 
    cost: 2, 
    description: 'Per content piece',
    color: 'info'
  },
  image_generation: { 
    cost: 5, 
    description: 'Per image generated',
    color: 'indigo'
  },
  linking: { 
    cost: 8, 
    description: 'Per content piece',
    color: 'teal'
  },
  optimization: { 
    cost: '1 per 200 words', 
    description: 'Per 200 words optimized',
    color: 'warning'
  },
  site_structure_generation: { 
    cost: 50, 
    description: 'Per site blueprint',
    color: 'pink'
  },
  site_page_generation: { 
    cost: 20, 
    description: 'Per page generated',
    color: 'cyan'
  },
};

export default function CreditCostsPanel() {
  return (
    <Card className="p-6">
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Costs per Operation</h2>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
          Understanding how credits are consumed for each operation type
        </p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
          <div 
            key={operation} 
            className="flex items-start justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-[var(--color-brand-300)] dark:hover:border-[var(--color-brand-600)] transition-colors"
          >
            <div className="flex-1">
              <div className="font-medium text-gray-900 dark:text-white capitalize mb-1">
                {operation.replace(/_/g, ' ')}
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">
                {info.description}
              </div>
            </div>
            <div className="ml-4 text-right flex-shrink-0">
              <Badge variant="soft" tone={info.color} className="font-semibold">
                {typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
              </Badge>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}
