'use client';

import { calculateCareerAnchorsResults, CareerAnchor } from '../../test/private/CareerAnchorsCalculator';

interface CareerAnchorsResultProps {
  answers: string[];
}

const descriptions: Record<CareerAnchor, string> = {
  technical: "适合持续积累专业深度，通过专业能力获得成就和认可。",
  managerial: "适合整合资源、带团队、处理复杂组织目标和责任。",
  autonomy: "适合自由度较高、能自主安排方法和节奏的工作模式。",
  security: "适合稳定、规则明确、风险可控且保障清晰的环境。",
  entrepreneurial: "适合从零创造、开拓机会、主导项目或业务方向。",
  service: "适合使命驱动、对他人或社会有明确贡献感的工作。",
  challenge: "适合高难度、高竞争、需要突破限制的问题场景。",
  lifestyle: "适合能与健康、家庭、自由时间和整体生活协调的职业路径。",
};

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

export function CareerAnchorsResult({ answers }: CareerAnchorsResultProps) {
  const results = calculateCareerAnchorsResults(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">Career Anchors 职业锚结果</h3>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <MetricCard title="主要职业锚" value={results.primary.name} score={results.primary.score.toFixed(2)} />
          <MetricCard title="辅助职业锚" value={results.secondary.name} score={results.secondary.score.toFixed(2)} />
        </div>
      </div>

      <div className="border bg-blue-50 p-6 text-blue-900 shadow-sm">
        <h3 className="text-lg font-semibold mb-3">
          核心职业取向：{results.primary.name} + {results.secondary.name}
        </h3>
        <p className="text-sm">
          职业锚代表你在职业选择中最不愿长期牺牲的价值和动机。高分职业锚之间如有冲突，应结合现实岗位、行业阶段和个人生活目标做取舍。
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {results.ranked.map((item) => (
          <div key={item.id} className="border bg-white p-5 shadow-sm">
            <div className="mb-3 flex items-center justify-between gap-3">
              <h4 className="font-semibold">{item.name}</h4>
              <span className="text-sm text-muted-foreground">{item.score.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(item.score) }} />
            </div>
            <p className="mt-3 text-sm text-gray-700">{descriptions[item.id]}</p>
          </div>
        ))}
      </div>

      <div className="border bg-gray-50 p-4 text-sm text-gray-700">
        注：职业锚不是职业能力测验。它更适合帮助你判断什么工作条件和发展路径最可能让你长期投入。
      </div>
    </div>
  );
}

function MetricCard({ title, value, score }: { title: string; value: string; score: 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 className="text-xs text-muted-foreground">{score} / 5</div>
    </div>
  );
}