import React, { useState, useEffect, useMemo } from 'react';

// Tailwind CSS is assumed to be available in the environment

const chapter7Questions = [
    {
        "question": "以下有关分部报告的叙述中,错误的是()。",
        "hint": "分部报告是财务报告的组成部分，但其披露基础可能不同。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "分部报告通常是作为财务报告的组成部分予以披露的", "rationale": "分部报告通常作为财务报表附注的一部分进行披露。", "isCorrect": false },
            { "text": "在企业财务报告仅披露个别报表的情况下,其分部报告的披露以个别财务报表为基础列报", "rationale": "如果企业仅披露个别报表，则分部报告以个别财务报表为基础列报。", "isCorrect": false },
            { "text": "在企业财务报告披露合并报表的情况下,其分部报告的披露仍以个别财务报表为基础列报", "rationale": "在披露合并报表的情况下，分部报告应以合并财务报表为基础列报，而非个别报表。", "isCorrect": true },
            { "text": "主要分部报告可以采用业务分部报告或地区分部报告的形式", "rationale": "主要分部报告的形式取决于企业风险和报酬的主要来源。", "isCorrect": false }
        ]
    },
    {
        "question": "下列各项中,不属于企业一般确定单独的经营分部的依据的( )。",
        "hint": "经营分部的确定依据与企业内部管理结构和报告体系相关。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "内部组织结构", "rationale": "内部组织结构是确定经营分部的重要依据。", "isCorrect": false },
            { "text": "管理要求", "rationale": "管理要求是确定经营分部的重要依据。", "isCorrect": false },
            { "text": "业务部门", "rationale": "业务部门通常是经营分部的一种表现形式，但不是确定经营分部的根本依据，经营分部是根据风险和报酬特征以及内部管理报告结构来确定的。", "isCorrect": true },
            { "text": "内部报告制度", "rationale": "内部报告制度是确定经营分部的重要依据。", "isCorrect": false }
        ]
    },
    {
        "question": "报告分部是指在分部报告中单独披露其( )的经营分部。",
        "hint": "报告分部的核心是其财务信息需要对外单独披露。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "财务信息", "rationale": "报告分部是指在分部报告中单独披露其财务信息的经营分部，包括收入、费用、利润、资产、负债等。", "isCorrect": true },
            { "text": "风险和报酬", "rationale": "风险和报酬是识别经营分部的依据，而非报告分部披露的内容。", "isCorrect": false },
            { "text": "会计信息", "rationale": "财务信息是会计信息的一部分，但“财务信息”更具体。", "isCorrect": false },
            { "text": "分部信息", "rationale": "分部信息是广义概念，财务信息是其核心。", "isCorrect": false }
        ]
    },
    {
        "question": "分部报告准则规定,在分部报告中,报告分部的数量不应超过( )个。",
        "hint": "报告分部的数量应以确保信息有用性和可管理性为目标。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "10", "rationale": "分部报告准则规定，报告分部的数量通常不应超过10个，以避免信息过于零散，失去有用性。", "isCorrect": true },
            { "text": "7", "rationale": "此数字不符合准则规定。", "isCorrect": false },
            { "text": "15", "rationale": "此数字超过了准则的建议上限。", "isCorrect": false },
            { "text": "12", "rationale": "此数字超过了准则的建议上限。", "isCorrect": false }
        ]
    },
    {
        "question": "企业编制分部报表时,不需要在其分部报表中披露的项目是()。",
        "hint": "分部报告通常会披露分部的收入、成本、利润、资产和负债等，但某些内部抵销项目可能不单独披露。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "分部间营业收入", "rationale": "分部间营业收入需要披露，以说明分部收入的来源。", "isCorrect": false },
            { "text": "分部间营业成本", "rationale": "分部间营业成本需要披露，以说明分部成本的来源。", "isCorrect": false },
            { "text": "分部间营业利润", "rationale": "分部间营业利润是内部抵销事项，不作为分部层面的披露项目，而是通过调节进行合并。", "isCorrect": true },
            { "text": "资产总额", "rationale": "分部资产总额需要披露。", "isCorrect": false }
        ]
    },
    {
        "question": "下列收入中,应作为分部收入的是()。",
        "hint": "分部收入通常包括对外销售和内部销售的收入。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "对外营业收入", "rationale": "对外营业收入是分部收入的主要组成部分。", "isCorrect": true },
            { "text": "从企业外部取得的利息收入", "rationale": "如果经营分部是非金融性质的，则从外部取得的利息收入不计入分部收入。", "isCorrect": false },
            { "text": "非金融机构对其他分部预付款或贷款所发生的利息收入", "rationale": "非金融机构的内部利息收入通常不作为分部收入，而是作为分部间交易进行抵销。", "isCorrect": false },
            { "text": "分部内部发生的应收款项取得的利息收入", "rationale": "分部内部的利息收入是内部交易，在合并时需抵销，不作为分部收入。", "isCorrect": false }
        ]
    },
    {
        "question": "下列各项费用中,应作为分部费用的是( )。",
        "hint": "分部费用是指与经营分部直接相关或可合理分配的费用。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "经营分部的日常活动是非金融性质的,因预收或向其他分部借款而确认的利息费用", "rationale": "非金融性质的经营分部发生的利息费用通常不计入分部费用，而是作为集团层面的财务费用。", "isCorrect": false },
            { "text": "营业外支出", "rationale": "营业外支出通常是企业整体的非日常活动支出，不属于分部费用。", "isCorrect": false },
            { "text": "经营分部的日常活动是金融性质的,处置投资发生的净损失", "rationale": "如果经营分部的日常活动是金融性质的，其处置投资发生的净损失应计入分部费用。", "isCorrect": true },
            { "text": "与企业整体相关的管理费用和其他费用", "rationale": "与企业整体相关的管理费用通常不分配给分部。", "isCorrect": false }
        ]
    },
    {
        "question": "下列各项中,适合合并的经营分部包括( )。",
        "hint": "当多个经营分部具有相似的经济特征和业务特点时，可以合并为一个报告分部。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "单项产品或劳务的性质相同或相似的经营分部", "rationale": "产品或劳务性质相似是合并的条件之一。", "isCorrect": true },
            { "text": "生产过程的性质相同或相似的经营分部", "rationale": "生产过程相似是合并的条件之一。", "isCorrect": true },
            { "text": "产品或劳务的客户类型相同或相似的经营分部", "rationale": "客户类型相似是合并的条件之一。", "isCorrect": true },
            { "text": "销售产品或提供劳务的方式相同或相似的经营分部", "rationale": "销售方式相似是合并的条件之一。", "isCorrect": true },
            { "text": "生产产品或提供劳务受法律、行政法规的影响相同或相似的经营分部", "rationale": "受法律法规影响相似是合并的条件之一。", "isCorrect": true }
        ]
    },
    {
        "question": "关于报告分部的确定,下列说法中正确的有( )。",
        "hint": "报告分部的确定需要满足一定的定量门槛和定性判断。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "企业应以经营分部确定报告分部", "rationale": "报告分部是在经营分部的基础上确定的。", "isCorrect": true },
            { "text": "企业应以业务分部或地区分部确定报告分部", "rationale": "业务分部和地区分部是报告分部的两种主要形式。", "isCorrect": true },
            { "text": "分部收入占所有分部收入合计的10%或者以上的经营分部,应将其确定为报告分部", "rationale": "这是判断报告分部的一个重要量化标准。", "isCorrect": true },
            { "text": "分部利润(亏损)的绝对额占所有盈利分部利润合计额或者所有亏损分部亏损合计额的绝对额两者中较大者的10%或者以上的经营分部,应将其确定为报告分部", "rationale": "这是判断报告分部的另一个重要量化标准。", "isCorrect": true },
            { "text": "分部资产占所有分部资产合计额的10%或者以上的经营分部,应将其确定为报告分部", "rationale": "这是判断报告分部的第三个重要量化标准。", "isCorrect": true }
        ]
    },
    {
        "question": "分部报告中的可比性原则是指,企业在确定报告分部时,除应遵循相应的确定标准及约束条件外,还应当考虑不同会计期间分部信息的( )。",
        "hint": "可比性原则强调财务信息在时间和空间上的可比较性。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "相关性", "rationale": "相关性是会计信息质量要求，但不是可比性原则的具体体现。", "isCorrect": false },
            { "text": "可比性", "rationale": "在不同会计期间保持一致性，是可比性原则的体现。", "isCorrect": true },
            { "text": "及时性", "rationale": "及时性是会计信息质量要求，但不是可比性原则的具体体现。", "isCorrect": false },
            { "text": "一致性", "rationale": "一致性是可比性原则的内在要求，指会计政策和方法在不同期间保持一致。", "isCorrect": true },
            { "text": "可靠性", "rationale": "可靠性是会计信息质量要求，但不是可比性原则的具体体现。", "isCorrect": false }
        ]
    },
    {
        "question": "无论哪类分部作为主要报告形式,均要披露的信息有( )。",
        "hint": "无论主要报告形式如何，某些分部信息是强制披露的。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "分部营业收入和营业成本", "rationale": "分部营业收入和营业成本是核心披露内容。", "isCorrect": true },
            { "text": "分部期间费用", "rationale": "分部期间费用（如销售费用、管理费用）也通常需要披露。", "isCorrect": true },
            { "text": "分部营业利润", "rationale": "分部营业利润是核心披露内容。", "isCorrect": true },
            { "text": "分部资产和负债", "rationale": "分部资产和负债是核心披露内容。", "isCorrect": true },
            { "text": "分部信息与在合并会计报表和个别报表中总额信息之间的调节情况", "rationale": "调节情况是分部报告的重要组成部分，用以衔接分部信息与企业整体信息。", "isCorrect": true }
        ]
    },
    {
        "question": "下列有关分部报告的表述中,符合现行会计准则规定的有( )。",
        "hint": "分部报告的披露应遵循准则的详细要求。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "分部报告应当披露每个报告分部的净利润", "rationale": "准则要求披露分部利润（亏损），而非强制净利润。", "isCorrect": false },
            { "text": "分部收入应当区分对外交易收入和对其他分部收入予以披露", "rationale": "分部收入需要区分对外交易收入和内部交易收入。", "isCorrect": true },
            { "text": "在分部报告中应将递延所得税资产作为分部资产单独予以披露", "rationale": "递延所得税资产通常不作为分部资产单独披露，而是作为未分配资产进行调节。", "isCorrect": false },
            { "text": "应根据企业风险和报酬的主要来源和性质确定分部的主要报告形式", "rationale": "主要报告形式的确定依据是企业风险和报酬的主要来源。", "isCorrect": true },
            { "text": "在编制合并会计报表的情况下应当以合并会计报表为基础披露分部信息", "rationale": "如果编制合并报表，分部信息应以合并报表为基础披露。", "isCorrect": true }
        ]
    },
    {
        "question": "下列表述中正确的有( )。",
        "hint": "分部报告的性质和披露基础。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "分部报告是企业财务报告的一个组成部分", "rationale": "分部报告通常作为财务报表附注的一部分。", "isCorrect": true },
            { "text": "个别报表和合并会计报表一并提供时,分部报告的披露以合并会计报表为基础", "rationale": "同时提供合并报表和个别报表时，分部报告以合并报表为基础。", "isCorrect": true },
            { "text": "企业仅披露个别报表时,分部报告的披露以个别报表为基础", "rationale": "企业仅披露个别报表时，分部报告以个别报表为基础。", "isCorrect": true },
            { "text": "无论是否同时提供合并会计报表,分部报告的披露均以个别报表为基础", "rationale": "如果提供合并报表，则以合并报表为基础，而非始终以个别报表为基础。", "isCorrect": false },
            { "text": "分部报告通常作为会计报表附注的组成部分", "rationale": "分部报告通常是附注的重要组成部分。", "isCorrect": true }
        ]
    },
    {
        "question": "下列各项中,属于分部费用的有( )。",
        "hint": "分部费用是可归属于分部的、日常经营活动中发生的费用。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "利息费用", "rationale": "非金融性质分部的利息费用通常不计入分部费用。", "isCorrect": false },
            { "text": "营业成本", "rationale": "营业成本是分部日常经营活动的主要费用。", "isCorrect": true },
            { "text": "税金及附加", "rationale": "与分部营业活动直接相关的税金及附加应计入分部费用。", "isCorrect": true },
            { "text": "营业外支出", "rationale": "营业外支出是非经常性、与日常活动无关的支出，通常不计入分部费用。", "isCorrect": false },
            { "text": "所得税费用", "rationale": "所得税费用通常不分配给各个经营分部，而是作为企业整体的费用。", "isCorrect": false }
        ]
    },
    {
        "question": "满足下述条件之一的分部即可确定为报告分部,这些条件包括()。",
        "hint": "报告分部的定量确定标准。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "该分部负债总额占所有分部负债总额的10%或以上", "rationale": "负债总额通常不是确定报告分部的直接定量标准。", "isCorrect": false },
            { "text": "该分部费用总额占所有分部费用总额的10%或以上", "rationale": "费用总额不是确定报告分部的直接定量标准。", "isCorrect": false },
            { "text": "该分部资产总额占所有分部资产总额的10%或以上", "rationale": "分部资产总额达到10%或以上是标准之一。", "isCorrect": true },
            { "text": "该分部的营业收入占各分部营业收入总额的10%或以上", "rationale": "分部营业收入达到10%或以上是标准之一。", "isCorrect": true },
            { "text": "该分部的营业利润占各分部营业利润总额或营业亏损总额两者绝对值中较大者的10%或以上", "rationale": "分部利润（亏损）达到10%或以上是标准之一。", "isCorrect": true }
        ]
    },
    {
        "question": "企业应当在附注中披露的会计政策有( )。",
        "hint": "附注中的会计政策披露应帮助理解分部信息的编制基础。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "与报告分部利润(亏损)计量相关的,分部间转移价格的确定基础", "rationale": "内部转移价格的确定基础是重要披露信息。", "isCorrect": true },
            { "text": "与报告分部利润(亏损)计量相关的,相关收入和费用分配给报告分部的基础", "rationale": "收入和费用分配的基础是重要披露信息。", "isCorrect": true },
            { "text": "与报告分部利润(亏损)计量相关的,确定报告分部利润(亏损)使用的计量方法的变更和变更的性质及影响等", "rationale": "计量方法的变更及其影响是重要披露信息。", "isCorrect": true },
            { "text": "与分部资产、负债计量相关的,分部间转移价格的确定基础", "rationale": "内部转移价格的确定基础是重要披露信息。", "isCorrect": true },
            { "text": "与分部资产、负债计量相关的,相关资产或负债分配给报告分部的基础", "rationale": "资产和负债分配的基础是重要披露信息。", "isCorrect": true }
        ]
    },
    {
        "question": "企业应当区分主要报告形式和次要报告形式披露分部信息,以下表述中正确的有( )。",
        "hint": "主要报告形式的确定依据是风险和报酬的主要来源。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "风险和报酬主要受企业在不同国家或地区经营活动影响的,披露分部信息的主要形式是地区分部,次要报告形式是业务分部", "rationale": "如果风险和报酬主要受地区影响，则地区分部是主要形式。", "isCorrect": true },
            { "text": "风险和报酬主要受企业在不同国家或地区经营活动影响的,披露分部信息的主要形式是业务分部,次要报告形式是地区分部", "rationale": "此表述与上一个选项矛盾。", "isCorrect": false },
            { "text": "风险和报酬主要受企业的产品和劳务差异影响的,披露分部信息的主要形式是业务分部,次要报告形式是地区分部", "rationale": "如果风险和报酬主要受产品和劳务影响，则业务分部是主要形式。", "isCorrect": true },
            { "text": "风险和报酬同时受企业的产品和劳务差异影响以及经营活动所在国家或地区的差异影响的,披露分部信息的主要形式是地区分部,次要报告形式是业务分部", "rationale": "如果风险和报酬同时受多种因素影响，则应根据管理层视角确定主要形式。", "isCorrect": false },
            { "text": "风险和报酬同时受企业的产品和劳务差异影响以及经营活动所在国家或地区的差异影响的,披露分部信息的主要形式是业务分部,次要报告形式是地区分部", "rationale": "如果风险和报酬同时受多种因素影响，则应根据管理层视角确定主要形式。", "isCorrect": true }
        ]
    },
    {
        "question": "企业的每个组成部分都是经营分部或经营分部的一个组成部分。",
        "hint": "经营分部的定义是企业可识别的组成部分。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "经营分部是指企业可以被识别的组成部分。", "isCorrect": false },
            { "text": "错误", "rationale": "并非企业的每个组成部分都构成经营分部或其组成部分。经营分部的识别需要满足特定条件，例如有单独的财务信息、定期向最高管理决策者汇报等。", "isCorrect": true }
        ]
    },
    {
        "question": "在实务中,所有的经营分部都适合作为独立的经营分部来考虑。",
        "hint": "经营分部是否都需要单独报告？",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "根据重要性原则和定量标准，并非所有经营分部都需要作为独立的报告分部。", "isCorrect": false },
            { "text": "错误", "rationale": "在实务中，并非所有的经营分部都必须作为独立的报告分部来考虑。企业可以根据重要性原则和定量标准（如10%门槛）将多个经营分部合并，或者不满足定量标准的可以不单独披露。", "isCorrect": true }
        ]
    },
    {
        "question": "只要两个业务分部或地区分部具有相近的长期财务业绩,便可以予以合并。",
        "hint": "经营分部合并的条件是多方面的。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "经营分部合并的条件除了长期财务业绩相似外，还需要产品性质、生产过程、客户类型、销售方式和受法律法规影响等方面的相似。", "isCorrect": false },
            { "text": "错误", "rationale": "合并经营分部不仅要考虑长期财务业绩相近，还需要考虑产品和劳务性质、生产过程、客户类型、销售方式以及受法律法规影响等多个方面的相似性。", "isCorrect": true }
        ]
    },
    {
        "question": "如果某一特定地区在生产经营上存在特定的风险,则不能将其与其他地区分部合并。",
        "hint": "风险特征是划分和合并分部的重要考量。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "如果某一特定地区存在独特的风险特征，即使在其他方面相似，也可能不适合与其他地区分部合并，以确保信息的相关性和可靠性。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合分部合并的原则，即在存在特定风险时，通常不予合并。", "isCorrect": false }
        ]
    },
    {
        "question": "采用权益法核算的长期股权投资在被投资单位实现的净利润中应享有的份额属于分部收入。",
        "hint": "分部收入通常指来自主要经营活动的收入。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "采用权益法核算的投资收益通常不作为经营分部收入，而是作为非分部收入或在调节中处理，因为其不是分部的日常经营活动所产生。", "isCorrect": false },
            { "text": "错误", "rationale": "采用权益法核算的长期股权投资在被投资单位实现的净利润中应享有的份额属于投资收益，通常不计入分部收入，而是在调节至企业总额时单独列示。", "isCorrect": true }
        ]
    },
    {
        "question": "分部费用包括与企业整体相关的管理费用和其他费用。",
        "hint": "分部费用是可直接归属于分部的费用。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "分部费用通常不包括与企业整体相关、无法合理分配给各分部的管理费用和其他费用（如企业总部费用）。", "isCorrect": false },
            { "text": "错误", "rationale": "分部费用通常不包括与企业整体相关的管理费用和其他费用，这些费用通常作为未分配费用在调节时处理。", "isCorrect": true }
        ]
    },
    {
        "question": "如果分部费用包括某项无形资产或商誉的摊销额或减值额,则分部资产中就应当包括该项无形资产或商誉。",
        "hint": "费用与资产之间的对应关系。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "如果无形资产或商誉的摊销或减值被计入分部费用，那么相应的无形资产或商誉也应归属于该分部的资产。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合分部费用与分部资产的对应关系。", "isCorrect": false }
        ]
    },
    {
        "question": "提供合并财务报表的企业,分部利润应当在调整少数股东损益前确定。",
        "hint": "少数股东损益是在合并层面调整的。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "分部利润应在扣除分部费用之后确定，不考虑少数股东损益，少数股东损益是在合并利润表中调整的。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合分部利润的确定原则。", "isCorrect": false }
        ]
    },
    {
        "question": "分部负债包括递延所得税负债。",
        "hint": "递延所得税负债的性质以及其是否通常分配到分部。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "递延所得税负债通常作为企业整体的负债，不分配给各个经营分部。", "isCorrect": false },
            { "text": "错误", "rationale": "递延所得税负债通常不分配到各个经营分部，而是在企业整体层面列示。", "isCorrect": true }
        ]
    },
    {
        "question": "分部资产的披露按照分部资产的账面价值来确定,即应当扣除相关累计折旧或摊销额以及减值准备后的金额确定。",
        "hint": "资产的账面价值就是其净值。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "分部资产的披露应按照其账面价值，即扣除累计折旧、摊销和减值准备后的净值。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合分部资产的披露原则。", "isCorrect": false }
        ]
    }
];

// Helper function to check if a question is multi-choice
const isMultiChoiceQuestion = (question) => {
    return question.type === 'multi-choice';
};

// Helper function to compare two arrays for equality (order-agnostic)
const arraysEqual = (a, b) => {
    if (a === null || b === null) return false; // Handle nulls for selectedAnswers
    if (a.length !== b.length) return false;
    const sortedA = [...a].sort();
    const sortedB = [...b].sort();
    for (let i = 0; i < sortedA.length; i++) {
        if (sortedA[i] !== sortedB[i]) return false;
    }
    return true;
};

const QuestionCard = ({ questionData, onAnswerSelected, onConfirmAnswer, selectedAnswers, showRationale, isAnswerChecked }) => {
    const isMulti = isMultiChoiceQuestion(questionData);

    const handleOptionChange = (optionText, checked) => {
        if (isMulti) {
            onAnswerSelected(prev => {
                if (checked) {
                    return [...prev, optionText];
                } else {
                    return prev.filter(item => item !== optionText);
                }
            });
        } else {
            onAnswerSelected(optionText);
        }
    };

    return (
        <div className="bg-white p-6 rounded-xl shadow-lg w-full max-w-xl mx-auto mb-6 border border-gray-200">
            <h2 className="text-xl font-semibold mb-4 text-gray-800">{questionData.question}</h2>
            <p className="text-sm text-gray-500 mb-4 italic">提示: {questionData.hint}</p>
            <div className="space-y-3">
                {questionData.answerOptions.map((option, index) => {
                    // Determine if this option is selected by the user
                    const isSelectedByUser = isMulti ? selectedAnswers.includes(option.text) : selectedAnswers === option.text;
                    const isCorrectOption = option.isCorrect;

                    let buttonClass = 'bg-blue-50 hover:bg-blue-100 border-blue-200 text-blue-900';

                    if (isAnswerChecked) {
                        if (isCorrectOption) {
                            // Correct option, always green when checked
                            buttonClass = 'bg-green-100 border-green-500 text-green-800 shadow-md';
                        } else if (isSelectedByUser && !isCorrectOption) {
                            // User selected this option AND it's incorrect, mark red
                            buttonClass = 'bg-red-100 border-red-500 text-red-800 shadow-md';
                        } else {
                            // Unselected option that is either incorrect or correct (but user didn't pick it)
                            buttonClass = 'bg-gray-50 border-gray-200 text-gray-700';
                        }
                    } else if (isSelectedByUser) {
                        // User has selected this but answer not checked yet (pre-submission state)
                        buttonClass = 'bg-blue-200 border-blue-400 text-blue-900 shadow-md';
                    }

                    return (
                        <label
                            key={index}
                            className={`
                                w-full flex items-center p-3 rounded-lg border cursor-pointer
                                ${buttonClass}
                                transition-all duration-200 ease-in-out
                            `}
                        >
                            <input
                                type={isMulti ? "checkbox" : "radio"}
                                name="answer"
                                value={option.text}
                                checked={isSelectedByUser}
                                onChange={(e) => handleOptionChange(option.text, e.target.checked)}
                                disabled={isAnswerChecked && !isMulti} // Disable for single choice after selection, and all after multi-choice confirm
                                className="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <span className="font-medium flex-grow">{String.fromCharCode(65 + index)}. {option.text}</span>
                            {/* Rationale displayed below option text, only when isAnswerChecked is true */}
                            {showRationale && isAnswerChecked && (isCorrectOption || (isSelectedByUser && !isCorrectOption)) && (
                                <p className="mt-2 text-sm italic font-normal text-gray-700 w-full ml-7">
                                    解析: {option.rationale}
                                </p>
                            )}
                        </label>
                    );
                })}
            </div>
            {isMulti && !isAnswerChecked && (
                <div className="mt-6 text-center">
                    <button
                        onClick={onConfirmAnswer}
                        disabled={selectedAnswers.length === 0}
                        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300"
                    >
                        确认答案
                    </button>
                </div>
            )}
        </div>
    );
};

const ResultsSummary = ({ score, totalQuestions, questions, restartQuiz }) => {
    return (
        <div className="bg-white p-8 rounded-xl shadow-lg w-full max-w-2xl mx-auto border border-gray-200">
            <h2 className="text-3xl font-bold text-center mb-6 text-gray-800">测验结果</h2>
            <p className="text-xl text-center mb-8 text-gray-700">
                您的得分是: <span className="font-extrabold text-blue-600">{score}</span> / {totalQuestions}
            </p>

            <div className="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
                {questions.map((q, qIndex) => {
                    const isMulti = isMultiChoiceQuestion(q);
                    const userAnswer = isMulti ? (q.userSelectedOptions?.join(', ') || "未作答") : (q.userSelectedOptions || "未作答");
                    const correctOptions = q.answerOptions.filter(opt => opt.isCorrect).map(opt => opt.text);
                    const correctAnswerText = correctOptions.join(', ');
                    const isCorrect = q.isAnsweredCorrectly; // Use the stored correctness

                    return (
                        <div key={qIndex} className="p-4 rounded-lg border border-gray-300 bg-gray-50 shadow-sm">
                            <h3 className="font-semibold text-lg mb-2 text-gray-700">问题 {qIndex + 1}: {q.question}</h3>
                            <p className="text-gray-600">
                                您的回答: <span className={`font-medium ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>{userAnswer}</span>
                                {!isCorrect && userAnswer !== "未作答" && (
                                    <span className="ml-2 text-red-500 text-sm">(错误)</span>
                                )}
                            </p>
                            <p className="text-gray-600">
                                正确答案: <span className="font-medium text-green-600">{correctAnswerText}</span>
                            </p>
                            <p className="mt-2 text-sm italic text-gray-500">
                                解析: {q.answerOptions.find(opt => opt.isCorrect)?.rationale || "无解析"}
                            </p>
                        </div>
                    );
                })}
            </div>

            <div className="flex justify-center mt-8">
                <button
                    onClick={restartQuiz}
                    className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300"
                >
                    重新开始测验
                </button>
            </div>
        </div>
    );
};

const App = () => {
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [score, setScore] = useState(0);
    const [showResults, setShowResults] = useState(false);
    const [questions, setQuestions] = useState([]);
    const [selectedAnswers, setSelectedAnswers] = useState([]); // Stores selected answers for current question
    const [isAnswerChecked, setIsAnswerChecked] = useState(false); // True if answer submitted/evaluated

    const [isShuffled, setIsShuffled] = useState(false);

    // Memoize the initial questions to avoid re-shuffling on re-renders
    const initialQuestions = useMemo(() => {
        return chapter7Questions.map(q => ({
            ...q,
            // We want options to be consistently shuffled for a given question across resets,
            // but reshuflled when 'resetQuiz' is specifically called for a new quiz instance.
            // So, shuffle them once here, and then again in resetQuiz if needed.
            answerOptions: [...q.answerOptions].sort(() => Math.random() - 0.5),
            userSelectedOptions: null, // Initialize user selected options (null for single, [] for multi)
            isAnsweredCorrectly: false, // Initialize correctness for each question
        }));
    }, []);

    useEffect(() => {
        resetQuiz(isShuffled);
    }, [isShuffled, initialQuestions]); // Depend on isShuffled and initialQuestions

    const resetQuiz = (shuffle) => {
        let newQuestions = [...initialQuestions];
        if (shuffle) {
            newQuestions = newQuestions.sort(() => Math.random() - 0.5);
        }
        newQuestions = newQuestions.map(q => ({
            ...q,
            userSelectedOptions: isMultiChoiceQuestion(q) ? [] : null, // Reset answers based on type
            isAnsweredCorrectly: false,
            answerOptions: [...q.answerOptions].sort(() => Math.random() - 0.5) // Re-shuffle options for a new quiz instance
        }));
        setQuestions(newQuestions);
        setCurrentQuestionIndex(0);
        setScore(0);
        setShowResults(false);
        // Reset selected answers and checked status for the very first question when resetting
        setSelectedAnswers(isMultiChoiceQuestion(newQuestions[0]) ? [] : null);
        setIsAnswerChecked(false); 
    };

    const currentQuestion = questions[currentQuestionIndex];
    const isMulti = currentQuestion ? isMultiChoiceQuestion(currentQuestion) : false;

    // Handles selection for both single and multi-choice, but does not submit for multi-choice
    const handleAnswerSelected = (selectedOptionText) => {
        if (!isMulti) {
            // For single-choice, this immediately evaluates
            const isCorrect = currentQuestion.answerOptions.find(opt => opt.text === selectedOptionText)?.isCorrect;
            const updatedQuestions = [...questions];
            updatedQuestions[currentQuestionIndex].userSelectedOptions = selectedOptionText;
            updatedQuestions[currentQuestionIndex].isAnsweredCorrectly = isCorrect;
            setQuestions(updatedQuestions);
            setIsAnswerChecked(true); // Mark as checked

            if (isCorrect) {
                setScore(prevScore => prevScore + 1);
                // Auto-advance if correct
                setTimeout(() => {
                    handleNextClick(true); // Pass true to force advance
                }, 1500);
            }
        } else {
            // For multi-choice, just update the selectedAnswers array
            setSelectedAnswers(selectedOptionText);
        }
    };

    // Only called by the "确认答案" button for multi-choice questions
    const handleConfirmMultiChoiceAnswer = () => {
        if (!currentQuestion) return;

        const correctOptions = currentQuestion.answerOptions.filter(opt => opt.isCorrect).map(opt => opt.text);
        const userCorrect = arraysEqual(selectedAnswers, correctOptions);

        const updatedQuestions = [...questions];
        updatedQuestion[currentQuestionIndex].userSelectedOptions = selectedAnswers; // Store array
        updatedQuestions[currentQuestionIndex].isAnsweredCorrectly = userCorrect;
        setQuestions(updatedQuestions);
        setIsAnswerChecked(true); // Mark as checked

        if (userCorrect) {
            setScore(prevScore => prevScore + 1);
            setTimeout(() => {
                handleNextClick(true); // Pass true to force advance
            }, 1500);
        }
    };

    // Navigates to the previous question
    const handlePrevClick = () => {
        if (currentQuestionIndex > 0) {
            const prevIndex = currentQuestionIndex - 1;
            setCurrentQuestionIndex(prevIndex);
            const prevQ = questions[prevIndex];

            // Restore selection for the previous question
            setSelectedAnswers(prevQ.userSelectedOptions || (isMultiChoiceQuestion(prevQ) ? [] : null));
            // Show rationale if the previous question was answered
            const wasPreviouslyAnswered = (Array.isArray(prevQ.userSelectedOptions) && prevQ.userSelectedOptions.length > 0) ||
                                           (!Array.isArray(prevQ.userSelectedOptions) && prevQ.userSelectedOptions !== undefined && prevQ.userSelectedOptions !== null);
            setIsAnswerChecked(wasPreviouslyAnswered);
        }
    };

    // Navigates to the next question
    const handleNextClick = (forceAdvance = false) => {
        // Condition to allow moving forward from the *current* question:
        // - `forceAdvance` is true when auto-advancing after a correct answer (single-choice or multi-choice).
        // - `isAnswerChecked` is true when the current question's answer has been submitted (incorrect, or multi-choice manual confirm).
        if (forceAdvance || isAnswerChecked) {
            const nextIndex = currentQuestionIndex + 1;
            if (nextIndex < questions.length) {
                setCurrentQuestionIndex(nextIndex);
                const nextQ = questions[nextIndex];

                // Determine if the *new* question has a stored answer (meaning it was visited before)
                const hasStoredAnswer = (Array.isArray(nextQ.userSelectedOptions) && nextQ.userSelectedOptions.length > 0) ||
                                       (!Array.isArray(nextQ.userSelectedOptions) && nextQ.userSelectedOptions !== undefined && nextQ.userSelectedOptions !== null);

                // Set selection for the new question: restore if answered, otherwise clear
                if (hasStoredAnswer) {
                    setSelectedAnswers(nextQ.userSelectedOptions);
                } else {
                    setSelectedAnswers(isMultiChoiceQuestion(nextQ) ? [] : null); // Clear for new, unvisited questions
                }

                // Set isAnswerChecked for the new question: true if previously answered, false otherwise
                setIsAnswerChecked(hasStoredAnswer);

            } else {
                setShowResults(true); // All questions completed
            }
        }
    };

    const toggleShuffle = () => {
        setIsShuffled(prev => !prev);
    };

    if (questions.length === 0) {
        return <div className="flex items-center justify-center min-h-screen bg-gray-100 font-inter text-lg text-gray-700">加载中...</div>;
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 font-sans text-gray-900">
            {showResults ? (
                <ResultsSummary
                    score={score}
                    totalQuestions={questions.length}
                    questions={questions}
                    restartQuiz={() => resetQuiz(isShuffled)}
                />
            ) : (
                <div className="flex flex-col items-center w-full max-w-2xl">
                    <div className="text-center mb-6">
                        <h1 className="text-3xl font-bold text-blue-800 drop-shadow-sm">第七章 分部报告刷题</h1>
                        <p className="text-lg text-gray-600 mt-2">
                            问题 {currentQuestionIndex + 1} / {questions.length}
                        </p>
                    </div>
                    <div className="mb-4 flex space-x-4">
                        <button
                            onClick={toggleShuffle}
                            className={`
                                py-2 px-5 rounded-full text-white font-semibold shadow-md transition-all duration-300 ease-in-out
                                ${isShuffled ? 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-300' : 'bg-gray-500 hover:bg-gray-600 focus:ring-gray-300'}
                                focus:outline-none focus:ring-2
                            `}
                        >
                            {isShuffled ? '当前: 乱序练习' : '当前: 顺序练习'}
                        </button>
                         <button
                            onClick={() => resetQuiz(isShuffled)}
                            className="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-5 rounded-full shadow-md transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300"
                        >
                            重新开始本章
                        </button>
                    </div>
                    <QuestionCard
                        questionData={currentQuestion}
                        onAnswerSelected={handleAnswerSelected}
                        onConfirmAnswer={handleConfirmMultiChoiceAnswer}
                        selectedAnswers={selectedAnswers}
                        showRationale={isAnswerChecked}
                        isAnswerChecked={isAnswerChecked}
                    />
                    <div className="mt-4 flex justify-between w-full max-w-xl">
                        <button
                            onClick={handlePrevClick}
                            disabled={currentQuestionIndex === 0}
                            className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            上一题
                        </button>
                        <button
                            onClick={() => handleNextClick()}
                            // Enable Next only if current answer is checked/submitted OR if it's the last question already answered
                            disabled={!isAnswerChecked && currentQuestionIndex < questions.length -1}
                            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            下一题
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default App;