app/components/ClassificationResultDisplay.tsx

'use client';

// Color palette for labels
const LABEL_COLORS = [
  ['bg-green-100 text-green-800', 'bg-green-400'],
  ['bg-blue-100 text-blue-800', 'bg-blue-400'],
  ['bg-purple-100 text-purple-800', 'bg-purple-400'],
  ['bg-yellow-100 text-yellow-800', 'bg-yellow-400'],
  ['bg-pink-100 text-pink-800', 'bg-pink-400'],
  ['bg-indigo-100 text-indigo-800', 'bg-indigo-400'],
  ["bg-red-100 text-red-800", "bg-red-400"],
  ["bg-teal-100 text-teal-800", "bg-teal-400"],
  ["bg-orange-100 text-orange-800", "bg-orange-400"],
];

// Deterministically assign a color to each label
const labelColorMap: Record<string, number> = {};
let colorIndex = 0;
function getColorForLabel(label: string): string[] {
  if (!(label in labelColorMap)) {
    labelColorMap[label] = colorIndex % LABEL_COLORS.length;
    colorIndex++;
  }
  return LABEL_COLORS[labelColorMap[label]];
}

export function ClassificationResultDisplay({
  result,
  ready,
  task,
}: {
  result: any;
  ready: boolean | null;
  task: string;
  // getColorForLabel: (label: string) => string[];
}) {
  if (ready === null) {
    return null;
  }
  if (!ready || !result) {
    return (
      <div className="text-center text-gray-400 animate-pulse">
        Results will appear here
      </div>
    );
  }

  if (task === 'image-classification') {
    return (
      <div className="space-y-6 w-full">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-2">
            {result[0].label}
          </h2>
          <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
            <div
              className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
              style={{ width: `${result[0].score * 100}%` }}
            />
          </div>
          <div className="text-sm text-gray-500">
            Confidence: {(result[0].score * 100).toFixed(2)}%
          </div>
        </div>
        <div className="border-t border-gray-200 my-4"></div>
        <div className="space-y-3">
          {result.slice(1).map((item: any) => (
            <div key={item.label} className="space-y-1">
              <div className="flex justify-between items-center">
                <span className="text-gray-700 text-sm">{item.label}</span>
                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
                  {(item.score * 100).toFixed(2)}%
                </span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
                  style={{ width: `${item.score * 100}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // Default: text-classification
  return (
    <div className="space-y-6 w-full">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-gray-800 mb-2">
          {result[0].label}
        </h2>
        <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
          <div
            className={`h-3 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(result[0].label)[1]}`}
            style={{ width: `${result[0].score * 100}%` }}
          />
        </div>
        <div className="text-sm text-gray-500">
          Confidence: {(result[0].score * 100).toFixed(2)}%
        </div>
      </div>
      <div className="border-t border-gray-200 my-4"></div>
      <div className="space-y-3">
        {result.slice(1).map((item: any) => (
          <div key={item.label} className="space-y-1">
            <div className="flex justify-between items-center">
              <span className="text-gray-700 text-sm">{item.label}</span>
              <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getColorForLabel(item.label)[0]}`}>
                {(item.score * 100).toFixed(2)}%
              </span>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div
                className={`h-2 rounded-full transition-all duration-1000 ease-out ${getColorForLabel(item.label)[1]}`}
                style={{ width: `${item.score * 100}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}