'use client';

import { calculateMaximizerResults } from '../../test/private/MaximizerCalculator';

interface MaximizerResultProps {
  answers: string[];
}

const levelText = {
  satisficer: '满意型选择风格',
  balanced: '平衡型选择风格',
  maximizer: '最大化选择风格',
};

const levelDescription = {
  satisficer: '你更倾向于在达到标准后做决定，选择成本较低，也更容易保持行动效率。',
  balanced: '你会在重要选择中认真比较，但通常不会让比较无限扩大。这个区间相对灵活。',
  maximizer: '你更倾向于追求最优选择，会投入较多比较和信息搜集。优势是标准高，风险是决策成本和后悔感增加。',
};

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

export function MaximizerResult({ answers }: MaximizerResultProps) {
  const results = calculateMaximizerResults(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-3">
          <MetricCard title="平均分" value={`${results.average.toFixed(2)}/7`} />
          <MetricCard title="选择风格" value={levelText[results.level]} />
          <MetricCard title="题目数" value="13题" />
        </div>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <BarCard title="高标准" value={results.highStandards} />
        <BarCard title="选项搜索" value={results.search} />
        <BarCard title="决策困难" value={results.difficulty} />
      </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">{levelDescription[results.level]}</p>
      </div>

      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
        注：最大化倾向不是好坏判断。重要决策可以认真比较，日常低风险选择则适合设置停止规则。
      </div>
    </div>
  );
}

function MetricCard({ title, value }: { title: string; value: string }) {
  return (
    <div className="rounded-lg bg-gray-50 p-4 text-center">
      <div className="text-sm text-muted-foreground">{title}</div>
      <div className="mt-1 text-2xl font-semibold text-indigo-600">{value}</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)} / 7
        </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>
  );
}