'use client';

import { calculateEmpathyResults } from '../../test/private/EmpathyCalculator';

interface EmpathyResultProps {
  answers: string[];
}

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

export function EmpathyResult({ answers }: EmpathyResultProps) {
  const results = calculateEmpathyResults(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">人际反应指数结果</h3>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <BarCard title="观点采择" value={results.perspectiveTaking} />
          <BarCard title="共情关怀" value={results.empathicConcern} />
          <BarCard title="个人痛苦" value={results.personalDistress} />
          <BarCard title="想象代入" value={results.fantasy} />
        </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">
          观点采择和共情关怀更接近成熟的理解与关心；个人痛苦代表在他人痛苦面前自己的不安程度，过高时可能需要边界和情绪调节；想象代入代表对故事和角色的情绪进入能力。
        </p>
      </div>

      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
        注：IRI更适合看四个分项组合，不建议只用一个总分判断“共情高低”。
      </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>
  );
}