whyrating-engine-legacy/web/components/taxonomy/MetadataSection.tsx

'use client';

import { taxonomy } from '@/lib/taxonomy/data';

const DIMENSION_COLORS: Record<string, { bg: string; border: string; text: string }> = {
  valence: { bg: 'bg-green-500/10', border: 'border-green-500/30', text: 'text-green-400' },
  intensity: { bg: 'bg-orange-500/10', border: 'border-orange-500/30', text: 'text-orange-400' },
  specificity: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400' },
  actionability: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400' },
  temporal: { bg: 'bg-cyan-500/10', border: 'border-cyan-500/30', text: 'text-cyan-400' },
  evidence: { bg: 'bg-pink-500/10', border: 'border-pink-500/30', text: 'text-pink-400' },
  comparative: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400' },
};

export default function MetadataSection() {
  const dimensions = Object.entries(taxonomy.metadata_dimensions);

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-xl font-bold text-gray-100">Metadata Dimensions</h2>
        <p className="text-gray-400 mt-1">
          7 dimensions with 24 values for enriching classifications
        </p>
      </div>

      {/* Dimension Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {dimensions.map(([dimKey, dimension]) => {
          const colors = DIMENSION_COLORS[dimKey] || {
            bg: 'bg-gray-500/10',
            border: 'border-gray-500/30',
            text: 'text-gray-400',
          };
          const valueCount = Object.keys(dimension.values).length;

          return (
            <div
              key={dimKey}
              className={`rounded-lg border ${colors.border} ${colors.bg} p-4`}
            >
              {/* Dimension Header */}
              <div className="flex items-center justify-between mb-2">
                <h3 className={`font-semibold ${colors.text}`}>{dimension.name}</h3>
                <span className="font-mono text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">
                  {dimension.code}
                </span>
              </div>

              <p className="text-sm text-gray-400 mb-4">{dimension.description}</p>

              {/* Values */}
              <div className="space-y-2">
                {Object.entries(dimension.values).map(([valueKey, value]) => (
                  <div
                    key={valueKey}
                    className="flex items-start gap-2 text-sm"
                  >
                    <span className={`font-mono ${colors.text} flex-shrink-0`}>
                      {valueKey}
                    </span>
                    <div className="flex-1">
                      <span className="text-gray-300">{value.label}</span>
                      {value.markers && value.markers.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {value.markers.slice(0, 3).map((marker, idx) => (
                            <span
                              key={idx}
                              className="text-xs text-gray-500 bg-gray-800/50 px-1.5 py-0.5 rounded"
                            >
                              &quot;{marker}&quot;
                            </span>
                          ))}
                        </div>
                      )}
                      {value.example && (
                        <p className="text-xs text-gray-500 mt-1 italic">
                          e.g., {value.example}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>

              {/* Default indicator */}
              {dimension.default && (
                <div className="mt-3 pt-2 border-t border-gray-700/50">
                  <span className="text-xs text-gray-500">
                    Default: <span className="font-mono">{dimension.default}</span>
                  </span>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Usage note */}
      <div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4">
        <h4 className="font-semibold text-gray-200 mb-2">Usage</h4>
        <p className="text-sm text-gray-400">
          Metadata dimensions enrich each classification span. Required dimensions vary by profile:
          URT-Lite requires only Valence, while URT-Full requires all 7 dimensions.
          Dimensions like Comparative (CR) and Evidence (E) have defaults when not applicable.
        </p>
      </div>
    </div>
  );
}