const defaultEntries = [
  {
    task: 'JWT Authentication Implementation',
    error: 'Token expiration not validated on server side',
    root_cause: 'Missing expiration check in middleware',
    fix: 'Added exp claim validation in auth middleware',
    prevention_rule: 'IF using JWT THEN validate expiration config BECAUSE misconfiguration causes auth issues',
    success_score: 0.85,
    tags: ['auth', 'jwt', 'security'],
  },
  {
    task: 'Database Migration',
    error: 'Data loss during column rename',
    root_cause: 'Direct column rename without backup',
    fix: 'Added backup step and incremental migration',
    prevention_rule: 'IF modifying schema THEN create backup first BECAUSE direct changes can cause data loss',
    success_score: 0.72,
    tags: ['database', 'migration', 'data'],
  },
  {
    task: 'API Rate Limiting',
    error: 'Legitimate users blocked',
    root_cause: 'Rate limit too aggressive for normal usage',
    fix: 'Adjusted limits based on traffic analysis',
    prevention_rule: 'IF implementing rate limits THEN analyze traffic patterns first BECAUSE aggressive limits block valid users',
    success_score: 0.91,
    tags: ['api', 'rate-limiting', 'performance'],
  },
];

function ScoreBar({ score }) {
  const percentage = Math.round(score * 100);
  const color = score >= 0.8 ? 'bg-green-500' : score >= 0.6 ? 'bg-yellow-500' : 'bg-red-500';

  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 bg-gray-800 rounded-full h-1.5">
        <div className={`${color} h-1.5 rounded-full transition-all duration-500`} style={{ width: `${percentage}%` }} />
      </div>
      <span className="text-xs text-gray-400 w-8 text-right">{percentage}%</span>
    </div>
  );
}

export default function KnowledgeBase({ simulation }) {
  const entries = simulation?.knowledge ? [...defaultEntries, ...simulation.knowledge] : defaultEntries;

  return (
    <div className="space-y-6">
      {/* Knowledge Base Header */}
      <div className="glass-card p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h2 className="text-lg font-bold text-gray-100">Knowledge Base</h2>
            <p className="text-xs text-gray-500 mt-1">Self-learning system with past experiences and extracted rules</p>
          </div>
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-violet-500/10 border border-violet-500/20">
            <span className="text-xs text-violet-400 font-medium">{entries.length} entries</span>
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-3 gap-3">
          <div className="bg-gray-800/30 rounded-lg p-3 text-center">
            <div className="text-lg font-bold text-indigo-400">{entries.length}</div>
            <div className="text-xs