import React from "react";
import type { RationingResult, RationingParams } from "./index";

interface ExplainProps {
  result: RationingResult;
  params: RationingParams;
}

export const RationingExplain: React.FC<ExplainProps> = ({ result, params }) => {
  const { optA, optB, isBinding, deltaU } = result;
  const quota = params.quotaX;

  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 Phân phối Định lượng (Rationing)
        </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 10a, 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. Tập ngân sách bị gãy khúc tại hạn mức định lượng
        </h4>
        <p>
          Khi chưa có chính sách kiểm soát, phương trình ngân sách là 10X + 10Y = 200, tương đương X + Y = 20. Người tiêu dùng tự do lựa chọn điểm tối ưu tiếp xúc tại A({optA.x.toFixed(0)}, {optA.y.toFixed(0)}) và đạt mức thỏa dụng U = {optA.utility.toFixed(0)}.
        </p>
        <p>
          Khi chính phủ áp đặt hạn mức tiêu dùng tối đa X̄ = {quota.toFixed(1)} đơn vị, toàn bộ phần diện tích có X &gt; {quota.toFixed(1)} trên đồ thị bị loại bỏ khỏi tập khả thi. Đường ngân sách trở thành đường gãy khúc: dốc dọc theo đường ngân sách gốc từ điểm (0, 20) đến điểm đỉnh gãy ({optB.x.toFixed(1)}, {optB.y.toFixed(1)}), sau đó hạ thẳng đứng xuống trục hoành.
        </p>
      </div>

      <div
        className={`rounded-lg p-3 border ${
          isBinding
            ? "bg-rose-50/70 border-rose-200 text-rose-950"
            : "bg-emerald-50/70 border-emerald-200 text-emerald-950"
        } space-y-2`}
      >
        <h4 className="font-bold">
          2. Đánh giá trạng thái cân bằng và tổn thất phúc lợi
        </h4>

        {isBinding ? (
          <>
            <p>
              • Hạn mức định lượng X̄ = {quota.toFixed(1)} nhỏ hơn lượng cầu tự nguyện 10 đơn vị. Do đó, người tiêu dùng buộc phải chuyển dịch từ điểm A({optA.x.toFixed(0)}, {optA.y.toFixed(0)}) sang điểm gãy B({optB.x.toFixed(1)}, {optB.y.toFixed(1)}).
            </p>
            <p>
              • Mức thỏa dụng giảm từ {optA.utility.toFixed(1)} xuống {optB.utility.toFixed(1)} (tổn thất {Math.abs(deltaU).toFixed(1)} đơn vị thỏa dụng).
            </p>
            <p>
              • Tỷ lệ thay thế biên tại B là MRS = {optB.mrs.toFixed(2)}, cao hơn tỷ số giá Px/Py = 1.00. Điều này phản ánh người tiêu dùng sẵn sàng hy sinh {optB.mrs.toFixed(2)} đơn vị Y để đổi lấy thêm 1 đơn vị X, nhưng rào cản hành chính ngăn cấm họ thực hiện giao dịch này. Chênh lệch này tạo ra động lực kinh tế hình thành thị trường chợ đen.
            </p>
          </>
        ) : (
          <>
            <p>
              • Hạn mức định lượng X̄ = {quota.toFixed(1)} lớn hơn hoặc bằng lượng cầu tự nguyện 10 đơn vị.
            </p>
            <p>
              • Ràng buộc định mức không phát huy hiệu lực; điểm lựa chọn B trùng khít với điểm tối ưu tự do A({optA.x.toFixed(0)}, {optA.y.toFixed(0)}).
            </p>
            <p>
              • Phúc lợi được bảo toàn trọn vẹn ở mức U = {optB.utility.toFixed(1)} với MRS = {optB.mrs.toFixed(2)} đúng bằng tỷ số giá tương đối 1.00.
            </p>
          </>
        )}
      </div>

      <div className="rounded-lg bg-indigo-50/60 p-3 border border-indigo-150 text-indigo-950 space-y-1">
        <h4 className="font-bold">3. Hàm ý chính sách công (FSPPM Policy Memo)</h4>
        <p>
          Phân phối định lượng là công cụ phi thị trường thường dùng trong thời chiến hoặc khủng hoảng thiên tai để chia sẻ công bằng nguồn hàng thiết yếu. Tuy nhiên, nếu hạn ngạch được cấp phát đồng đều mà không tính tới sở thích dị biệt giữa các cá nhân, tổn thất phúc lợi xã hội sẽ xuất hiện dưới dạng thặng dư tiêu dùng bị mất và hiện tượng chuyển nhượng tem phiếu bất hợp pháp.
        </p>
      </div>
    </div>
  );
};