'use client';

import { calculateOEPSResults } from '../../test/private/OEPSCalculator';

interface OEPSResultProps {
  answers: string[];
}

function barWidth(value: number) {
  return `${Math.max(0, Math.min(100, (value / 5) * 100))}%`;
}

export function OEPSResult({ answers }: OEPSResultProps) {
  const result = calculateOEPSResults(answers);

  return (
    <div className="mt-6 space-y-6">
      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <h3 className="text-lg font-semibold mb-2">九型人格结果</h3>
        <p className="text-sm text-muted-foreground">
          你的最高候选类型是：
        </p>
        <div className="mt-4 rounded-lg border bg-indigo-50 border-indigo-200 p-4">
          <div className="text-2xl font-semibold text-indigo-700">
            {result.top.name}
          </div>
          <p className="text-sm text-indigo-900 mt-2">{result.top.description}</p>
          <p className="text-sm text-indigo-900 mt-2">
            平均分：{result.top.average.toFixed(2)} / 5
          </p>
        </div>
      </div>

      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <h4 className="font-semibold mb-4">九型分数排序</h4>
        <div className="space-y-3">
          {result.ranked.map((item) => (
            <div key={item.type} className="rounded border p-4">
              <div className="flex items-start justify-between gap-4 mb-2">
                <div>
                  <div className="font-medium">{item.name}</div>
                  <div className="text-sm text-muted-foreground">
                    {item.description}
                  </div>
                </div>
                <div className="text-right font-semibold text-indigo-600">
                  {item.average.toFixed(2)}
                </div>
              </div>
              <div className="h-2 rounded-full bg-gray-100 overflow-hidden">
                <div
                  className="h-full rounded-full bg-indigo-500"
                  style={{ width: barWidth(item.average) }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gray-50 border rounded-lg p-4 text-sm text-gray-700">
        OEPS 和九型人格适合作为自我探索材料。若前几名分数接近，建议把它们都作为候选类型继续阅读和核对，不要只看最高分。
      </div>
    </div>
  );
}