MindScope/components/questionnaire/QuestionnaireDetailsPage.tsx

'use client';

import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { ArrowLeft, ArrowRight, Clock, FileText } from 'lucide-react';
import { useScopedI18n } from '@/locales/client';
import { Questionnaire } from '@/types';

interface QuestionnaireDetailsPageProps {
  questionnaire: Questionnaire;
}

export default function QuestionnaireDetailsPage({
  questionnaire,
}: QuestionnaireDetailsPageProps) {
  const t = useScopedI18n('app.questionnaire.page');
  const { title, details, evaluation, id } = questionnaire;

  return (
    <div className="container px-4 py-8 max-w-6xl mx-auto">
      <nav className="mb-6">
        <Link
          href="/questionnaire"
          className="inline-flex items-center text-sm text-muted-foreground hover:text-primary"
        >
          <ArrowLeft className="w-4 h-4 mr-1" />
          返回量表列表
        </Link>
      </nav>

      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-4">{title}</h1>

        <div className="flex flex-wrap gap-6 text-sm text-muted-foreground mb-6">
          <div className="flex items-center gap-2">
            <FileText className="w-4 h-4" />
            <span>{details.questionCount}</span>
          </div>
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4" />
            <span>{details.evaluationTime}</span>
          </div>
        </div>

        {evaluation && (
          <dl className="mb-6 grid max-w-2xl grid-cols-1 border sm:grid-cols-3">
            <div className="p-3">
              <dt className="text-xs text-muted-foreground">学术认可度</dt>
              <dd className="mt-1 font-medium">{evaluation.academicRecognition}</dd>
            </div>
            <div className="border-t p-3 sm:border-l sm:border-t-0">
              <dt className="text-xs text-muted-foreground">适合重测</dt>
              <dd className="mt-1 font-medium">
                {evaluation.retestSuitable ? '是' : '否'}
              </dd>
            </div>
            <div className="border-t p-3 sm:border-l sm:border-t-0">
              <dt className="text-xs text-muted-foreground">推荐周期</dt>
              <dd className="mt-1 font-medium">{evaluation.recommendedInterval}</dd>
            </div>
          </dl>
        )}

        <Link href={`/questionnaire/${id}`}>
          <Button size="lg" className="px-8 py-6 text-lg gap-2">
            开始测评 <ArrowRight className="w-5 h-5" />
          </Button>
        </Link>
      </div>

      <div className="prose prose-gray max-w-none">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-4">{t('introduction')}</h2>
          <p className="text-gray-700 leading-relaxed">
            {details.introduction}
          </p>
        </section>

        {details.instructions && (
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">{t('instructions')}</h2>
            <p className="text-gray-700 leading-relaxed">
              {details.instructions}
            </p>
          </section>
        )}

        {details.scoringMethod && details.scoringMethod.length > 0 && (
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">
              {t('scoringMethod')}
            </h2>
            <ul className="list-disc pl-6 space-y-2 text-gray-700">
              {details.scoringMethod.map((method) => (
                <li key={method} className="leading-relaxed">
                  {method}
                </li>
              ))}
            </ul>
          </section>
        )}

        {details.dimensions && details.dimensions.length > 0 && (
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">{t('dimensions')}</h2>
            <ol className="list-decimal pl-6 space-y-3 text-gray-700">
              {details.dimensions.map((dim) => (
                <li key={dim.name} className="leading-relaxed">
                  <strong className="text-gray-900">{dim.name}</strong>：
                  {dim.description}
                </li>
              ))}
            </ol>
          </section>
        )}

        {details.notes && details.notes.length > 0 && (
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">{t('notes')}</h2>
            <ol className="list-decimal pl-6 space-y-2 text-gray-700">
              {details.notes.map((note) => (
                <li key={note} className="leading-relaxed">
                  {note}
                </li>
              ))}
            </ol>
          </section>
        )}

        {details.references && details.references.length > 0 && (
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">{t('references')}</h2>
            <ul className="list-disc pl-6 space-y-2">
              {details.references.map((ref) => (
                <li key={ref.text}>
                  <a
                    href={ref.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:text-blue-800 hover:underline"
                  >
                    {ref.text}
                  </a>
                </li>
              ))}
            </ul>
          </section>
        )}
      </div>

      <div className="mt-12 pt-8 border-t">
        <div className="text-center">
          <p className="text-gray-600 mb-4">准备好开始测评了吗？</p>
          <Link href={`/questionnaire/${id}`}>
            <Button size="lg" className="px-8 py-6 text-lg gap-2">
              开始测评 <ArrowRight className="w-5 h-5" />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}