'use client';

import React from 'react';
import { calculateWHO5Results } from '../../test/private/WHO5Calculator';

interface WHO5ResultProps {
  answers: string[];
}

const levelText = {
  high: '幸福感较好',
  moderate: '幸福感中等',
  low: '幸福感偏低',
  very_low: '幸福感明显偏低',
};

const levelDescription = {
  high: '最近两周的积极情绪、活力和生活兴趣整体较好，可以继续保持目前有帮助的生活节奏。',
  moderate: '整体幸福感处在中等区间，可以留意睡眠、压力、社交和日常恢复感的变化。',
  low: '幸福感偏低，建议结合PHQ-9、GAD-7或DASS-21进一步了解情绪状态。',
  very_low: '幸福感明显偏低，近期可能承受了较多压力或情绪困扰，建议尽快寻求可靠支持或专业评估。',
};

const questions = [
  '快乐、心情愉快',
  '平静和放松',
  '精力充沛、充满活力',
  '醒来时清新、休息充分',
  '日常生活中有感兴趣的事情',
];

export function WHO5Result({ answers }: WHO5ResultProps) {
  const answersMap: { [key: number]: string } = {};
  answers.forEach((answer, index) => {
    answersMap[index + 1] = answer;
  });

  const results = calculateWHO5Results({ answers: answersMap });

  const levelClass = results.level === 'high'
    ? 'border-green-200 bg-green-50 text-green-800'
    : results.level === 'moderate'
      ? 'border-blue-200 bg-blue-50 text-blue-800'
      : results.level === 'low'
        ? 'border-yellow-200 bg-yellow-50 text-yellow-800'
        : 'border-red-200 bg-red-50 text-red-800';

  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-4">WHO-5 幸福感结果</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <MetricCard title="原始总分" value={`${results.rawScore}/25`} />
          <MetricCard title="百分制得分" value={`${results.percentageScore}/100`} />
          <MetricCard title="结果水平" value={levelText[results.level]} />
        </div>
      </div>

      <div className={`border rounded-lg p-6 shadow-sm ${levelClass}`}>
        <h3 className="text-lg font-semibold mb-3">结果解释</h3>
        <p className="text-sm">{levelDescription[results.level]}</p>
        {results.needsAttention && (
          <p className="text-sm mt-3 font-medium">
            WHO-5通常建议：原始总分低于13分，或任一题为0-1分时，可以进一步做情绪筛查或寻求专业意见。
          </p>
        )}
      </div>

      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <h3 className="text-lg font-semibold mb-4">分项情况</h3>
        <div className="space-y-3">
          {results.itemScores.map((score, index) => (
            <div key={questions[index]} className="flex items-center justify-between gap-4 p-3 bg-gray-50 rounded-lg">
              <span className="text-sm font-medium">{index + 1}. {questions[index]}</span>
              <span className={`text-lg font-semibold ${score <= 1 ? 'text-red-600' : score <= 3 ? 'text-yellow-600' : 'text-green-600'}`}>
                {score}/5
              </span>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
        <p className="text-sm text-gray-700">
          注：WHO-5用于幸福感筛查和追踪，不等同于临床诊断。若结果偏低，请结合近期生活事件、睡眠、压力和其他量表综合判断。
        </p>
      </div>
    </div>
  );
}

interface MetricCardProps {
  title: string;
  value: React.ReactNode;
}

function MetricCard({ title, value }: MetricCardProps) {
  return (
    <div className="bg-gray-50 rounded-lg p-4 flex flex-col items-center">
      <span className="text-sm text-gray-500 mb-1">{title}</span>
      <span className="text-2xl font-semibold text-indigo-600 text-center">{value}</span>
    </div>
  );
}