'use client';

import { calculateHEXACOResults } from '../../test/private/HEXACOCalculator';

interface HEXACOResultProps {
  answers: string[];
}

const labels = [
  ['诚实谦逊', 'honestyHumility'],
  ['情绪性', 'emotionality'],
  ['外向性', 'extraversion'],
  ['宜人性', 'agreeableness'],
  ['尽责性', 'conscientiousness'],
  ['开放性', 'openness'],
] as const;

function width(value: number) {
  return `${Math.max(0, Math.min(100, ((value - 1) / 4) * 100))}%`;
}

export function HEXACOResult({ answers }: HEXACOResultProps) {
  const results = calculateHEXACOResults(answers);

  return (
    <div className="mt-6 space-y-6">
      <div className="border bg-white p-6 shadow-sm">
        <h3 className="text-lg font-semibold mb-4">HEXACO 六因素结果</h3>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {labels.map(([label, key]) => (
            <BarCard key={key} title={label} value={results[key]} />
          ))}
        </div>
      </div>

      <div className="border bg-blue-50 p-6 text-blue-900 shadow-sm">
        <h3 className="text-lg font-semibold mb-3">结果解释</h3>
        <p className="text-sm">
          HEXACO 结果应按六个维度分别理解。它和 Big Five 接近，但额外强调诚实谦逊，有助于观察公平、真诚、地位追求和自我中心相关倾向。
        </p>
      </div>

      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
        注：人格分数是长期倾向的近似画像，不是固定标签。建议结合 Big Five、RIASEC 和实际生活反馈综合理解。
      </div>
    </div>
  );
}

function BarCard({ title, value }: { title: string; value: number }) {
  return (
    <div className="rounded-lg border bg-white p-5 shadow-sm">
      <div className="mb-3 flex items-center justify-between">
        <h4 className="font-semibold">{title}</h4>
        <span className="text-sm text-muted-foreground">
          {value.toFixed(2)} / 5
        </span>
      </div>
      <div className="h-2 overflow-hidden rounded-full bg-gray-100">
        <div
          className="h-full rounded-full bg-emerald-500"
          style={{ width: width(value) }}
        />
      </div>
    </div>
  );
}