import React from "react";
import type { PriceCeilingResult, PriceCeilingParams } from "./index";

interface ExplainProps {
  result: PriceCeilingResult;
  params: PriceCeilingParams;
}

export const PriceCeilingExplain: React.FC<ExplainProps> = ({
  result,
  params,
}) => {
  const {
    optA,
    optB,
    desiredX,
    breakevenX,
    deltaU,
    isBetterOff,
    isBreakeven,
  } = result;

  return (
    <div className="space-y-4 text-xs leading-relaxed text-slate-700">
      <div>
        <h3 className="text-sm font-bold text-slate-900">
          Cơ chế kinh tế của Giá trần và Thiếu hụt Nguồn cung
        </h3>
        <p className="mt-1 text-slate-500">
          Trích dẫn: Pindyck &amp; Rubinfeld (2015), Kinh tế học vi mô, Chương 3, Câu hỏi ôn tập 10b, trang 107.
        </p>
      </div>

      <div className="rounded-lg bg-slate-50 p-3 border border-slate-200 space-y-2">
        <h4 className="font-bold text-slate-800">
          1. Cuộc xung đột giữa hai hiệu ứng ngược chiều
        </h4>
        <p>
          Khi chính phủ áp đặt mức giá trần Px&apos; = {params.pFixed.toFixed(1)} USD (thấp hơn giá thị trường 10 USD), hai hiệu ứng đối lập xuất hiện đồng thời:
        </p>
        <p>
          • <strong>Hiệu ứng giá rẻ (Tích cực):</strong> Người tiêu dùng tiết kiệm được {(10 - params.pFixed).toFixed(1)} USD trên mỗi đơn vị hàng hóa X mua được, giúp dôi dư ngân sách để mua thêm hàng hóa khác Y.
        </p>
        <p>
          • <strong>Hiệu ứng khan hiếm lượng (Tiêu cực):</strong> Do giá trần làm giảm lượng cung, người tiêu dùng chỉ mua được tối đa X = {params.xCap.toFixed(2)} đơn vị, thấp hơn nhiều so với lượng mong muốn {desiredX.toFixed(1)} đơn vị.
        </p>
      </div>

      <div
        className={`rounded-lg p-3 border ${
          isBetterOff
            ? "bg-emerald-50/70 border-emerald-200 text-emerald-950"
            : isBreakeven
            ? "bg-amber-50/70 border-amber-200 text-amber-950"
            : "bg-rose-50/70 border-rose-200 text-rose-950"
        } space-y-2`}
      >
        <h4 className="font-bold">
          2. Đánh giá phúc lợi tại điểm lựa chọn thực tế B
        </h4>
        <p>
          Tại điểm lựa chọn thực tế B({optB.x.toFixed(2)}, {optB.y.toFixed(2)}), mức thỏa dụng đạt U = {optB.utility.toFixed(1)}, so với mức gốc A({optA.x.toFixed(0)}, {optA.y.toFixed(0)}) có UA = {optA.utility.toFixed(0)}.
        </p>

        {isBetterOff && (
          <p>
            • Kết luận: Người tiêu dùng <strong>khấm khá hơn</strong> (thỏa dụng tăng {deltaU.toFixed(1)} đơn vị). Do lượng hàng hóa mua được X = {params.xCap.toFixed(2)} vượt trên ngưỡng hòa vốn X* = {breakevenX.toFixed(2)}, lợi ích tiết kiệm tiền để mua {optB.y.toFixed(2)} đơn vị Y đã bù đắp vượt trội sự sụt giảm của lượng X.
          </p>
        )}

        {isBreakeven && (
          <p>
            • Kết luận: Người tiêu dùng <strong>hòa vốn phúc lợi</strong> (UB xấp xỉ 100). Lượng hàng hóa mua được X = {params.xCap.toFixed(2)} trùng khít với ngưỡng hòa vốn giải tích X* = {breakevenX.toFixed(2)}. Lợi ích giảm giá vừa đủ bù đắp thiệt hại do khan hiếm.
          </p>
        )}

        {!isBetterOff && !isBreakeven && (
          <p>
            • Kết luận: Người tiêu dùng <strong>thiệt thòi hơn</strong> (thỏa dụng giảm {Math.abs(deltaU).toFixed(1)} đơn vị). Do nguồn cung quá khan hiếm (X = {params.xCap.toFixed(2)} &lt; {breakevenX.toFixed(2)}), khoản tiết kiệm chi phí không đủ bù đắp sự thiếu hụt nghiêm trọng của hàng hóa thiết yếu.
          </p>
        )}

        <p>
          • Tỷ lệ thay thế biên tại B: MRS = {optB.mrs.toFixed(2)}, lớn hơn tỷ giá mới Px&apos;/Py = {(params.pFixed / 10).toFixed(2)}. Người tiêu dùng vẫn bị kẹt tại đỉnh gãy của đường ngân sách thực tế.
        </p>
      </div>

      <div className="rounded-lg bg-amber-50/60 p-3 border border-amber-200 text-amber-950 space-y-1">
        <h4 className="font-bold">
          3. Ý nghĩa của Ngưỡng hòa vốn X* = {breakevenX.toFixed(2)} đơn vị
        </h4>
        <p>
          Ngưỡng hòa vốn là nghiệm giải tích của phương trình thỏa dụng U(X, (200 - {params.pFixed.toFixed(1)}X)/10) = 100. Bất kỳ chính sách giá trần nào làm lượng cung rơi xuống dưới {breakevenX.toFixed(2)} đơn vị đều chắc chắn khiến người tiêu dùng chịu tổn thất phúc lợi ròng, dù trên danh nghĩa họ được mua hàng với giá rẻ.
        </p>
      </div>
    </div>
  );
};