"use client";

import React, { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";

export default function Result() {
  const searchParams = useSearchParams();

  const [result, setResult] = useState({});
  useEffect(() => {
    const getResult = async () => {
      const id = searchParams.get("id");
      const response = await fetch("/api/Raven_IQ_test/list", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: parseInt(id, 10),
        }),
      });
      const data = await response.json();
      console.log(data);
      if (data.ret === -1) {
        Toast.show({
          content: data.msg,
        });
        return;
      }
      setResult(data.data);
    };
    getResult();
  }, []);

  return (
    <section className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
      <div className="flex flex-col items-center bg-white rounded-2xl overflow-hidden px-4 py-8 gap-4">
        <div className="bg-purple-500 py-2 px-8 rounded-full">
          <p className="text-white text-2xl font-medium">您的综合智力得分</p>
        </div>
        <div className="flex flex-col items-center">
          <h1 className="text-black text-4xl font-bold">
            {result?.total_score}
            <span className="text-base font-normal">分</span>
          </h1>
          <svg viewBox="0 0 3099 1024" width="100" height="50">
            <path
              d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
              fill="#FF595B"
            ></path>
          </svg>
        </div>
        <div className="bg-blue-100 rounded-lg p-4">
          <p className="text-blue-900 text-base">{result?.description}</p>
        </div>
        <div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2">
          <h2 className="text-xl font-bold text-blue-900">综合建议</h2>
          {result?.suggestions?.map((item, index) => (
            <p className="text-blue-900 text-base" key={index}>
              <strong>{index + 1}、</strong>
              {item}
            </p>
          ))}
          <p className="text-blue-900 text-base mt-4">
            除了总体得分情况外，我们还考察了五个维度的能力水平：知觉辨别、类同比较、比较推理、系列关系推理、抽象思维。以下是您在这五个维度的分数分布情况，以及我们对您的提升建议。⬇️
            ⬇️ ⬇️
          </p>
        </div>
      </div>
      {result?.class_score_list?.map((item, index) => (
        <div
          key={index}
          className="flex flex-col items-center bg-white rounded-2xl overflow-hidden px-4 py-8 gap-4 mt-8"
        >
          <div className="bg-purple-500 py-2 px-8 rounded-full">
            <p className="text-white text-2xl font-medium">{item.class_name}</p>
          </div>
          <div className="flex flex-col items-center">
            <h1 className="text-black text-4xl font-bold">
              {item.score}
              <span className="text-base font-normal">分</span>
            </h1>
            <svg viewBox="0 0 3099 1024" width="100" height="50">
              <path
                d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
                fill="#FF595B"
              ></path>
            </svg>
          </div>
          <div className="bg-blue-100 rounded-lg p-4">
            <p className="text-blue-900 text-base">{item.description}</p>
          </div>
          <div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2">
            <h2 className="text-xl font-bold text-blue-900">提升建议</h2>
            {item.suggestions?.map((item, index) => (
              <div key={index} className="flex flex-col">
                <p className="text-blue-900 text-lg font-bold">
                  {index + 1 + "、" + item.title}
                </p>
                {item.tips.map((_item, _index) => (
                  <p className="text-blue-900 text-base" key={_index}>
                    <strong>•{_item.summary}：</strong>
                    {_item.content}
                  </p>
                ))}
              </div>
            ))}
          </div>
        </div>
      ))}
    </section>
  );
}
