import React, { useState } from "react";
import type { CalcStepData } from "../scenarios/types";
import { MathFormula } from "./MathFormula";

interface StepBreakdownProps {
  steps?: CalcStepData[];
}

export const StepBreakdown: React.FC<StepBreakdownProps> = ({ steps }) => {
  const [isOpen, setIsOpen] = useState(true);

  if (!steps || steps.length === 0) return null;

  return (
    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-slate-50/70"
      >
        <div className="flex items-center gap-2">
          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700">
            ∑
          </span>
          <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700">
            Các bước tính toán chi tiết
          </h4>
          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600">
            {steps.length} bước
          </span>
        </div>
        <span className="text-xs font-semibold text-slate-400">
          {isOpen ? "Thu gọn ▲" : "Mở rộng ▼"}
        </span>
      </button>

      {isOpen && (
        <div className="border-t border-slate-100 px-4 py-3 space-y-3">
          {steps.map((st) => (
            <div
              key={st.stepNumber}
              className="rounded-lg border border-slate-150 bg-slate-50/50 p-3 space-y-1.5"
            >
              <div className="flex items-center gap-2">
                <span className="rounded bg-indigo-600 px-1.5 py-0.5 text-[11px] font-bold text-white">
                  Bước {st.stepNumber}:
                </span>
                <span className="text-xs font-bold text-slate-800">
                  {st.title}
                </span>
              </div>

              {st.latexFormula && (
                <div className="rounded bg-white p-2 border border-slate-200/80">
                  <MathFormula math={st.latexFormula} block />
                </div>
              )}

              <p className="text-xs text-slate-600 leading-relaxed">
                {st.explanation}
              </p>

              {st.resultText && (
                <div className="flex items-center gap-1.5 rounded-md bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-900 border border-emerald-200/60">
                  <span className="font-semibold text-emerald-800">Kết quả:</span>
                  <span className="font-mono font-bold">{st.resultText}</span>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};