edbridge-scholars/src/components/lessons/BoxPlotComparisonWidget.tsx

import React, { useState } from "react";

const BoxPlotComparisonWidget: React.FC = () => {
  // Box Plot A is fixed
  const statsA = { min: 10, q1: 18, med: 24, q3: 30, max: 42 };

  // Box Plot B is adjustable
  const [shift, setShift] = useState(0); // Shift median
  const [spread, setSpread] = useState(1); // Scale spread

  const statsB = {
    min: 10 + shift - 5 * (spread - 1), // Just approximating visual expansion
    q1: 16 + shift - 2 * (spread - 1),
    med: 26 + shift,
    q3: 34 + shift + 2 * (spread - 1),
    max: 38 + shift + 4 * (spread - 1),
  };

  const scaleX = (val: number) => (val / 60) * 100; // 0 to 60 range mapping to %

  const BoxPlot = ({
    stats,
    color,
    label,
  }: {
    stats: any;
    color: string;
    label: string;
  }) => {
    const leftW = scaleX(stats.min);
    const rightW = scaleX(stats.max);
    const boxL = scaleX(stats.q1);
    const boxR = scaleX(stats.q3);
    const med = scaleX(stats.med);

    return (
      <div className="relative h-16 w-full mb-8 group">
        <div className="absolute left-0 top-0 text-xs font-bold text-slate-400">
          {label}
        </div>

        {/* Main Line (Whisker to Whisker) */}
        <div
          className="absolute top-1/2 left-0 h-0.5 bg-slate-300 -translate-y-1/2"
          style={{ left: `${leftW}%`, width: `${rightW - leftW}%` }}
        />

        {/* Whiskers */}
        <div
          className="absolute top-1/2 h-3 w-0.5 bg-slate-400 -translate-y-1/2"
          style={{ left: `${leftW}%` }}
        />
        <div
          className="absolute top-1/2 h-3 w-0.5 bg-slate-400 -translate-y-1/2"
          style={{ left: `${rightW}%` }}
        />

        {/* Box */}
        <div
          className={`absolute top-1/2 -translate-y-1/2 h-8 border-2 ${color} bg-white opacity-90`}
          style={{
            left: `${boxL}%`,
            width: `${boxR - boxL}%`,
            borderColor: "currentColor",
          }}
        ></div>

        {/* Median Line */}
        <div
          className="absolute top-1/2 h-8 w-1 bg-slate-800 -translate-y-1/2"
          style={{ left: `${med}%` }}
        />

        {/* Labels on Hover */}
        <div className="opacity-0 group-hover:opacity-100 transition-opacity absolute top-10 left-0 w-full text-center text-xs font-mono text-slate-500 pointer-events-none">
          Min:{stats.min.toFixed(0)} Q1:{stats.q1.toFixed(0)} Med:
          {stats.med.toFixed(0)} Q3:{stats.q3.toFixed(0)} Max:
          {stats.max.toFixed(0)}
        </div>
      </div>
    );
  };

  const iqrA = statsA.q3 - statsA.q1;
  const iqrB = statsB.q3 - statsB.q1;

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
      <div className="mb-6 relative h-48 border-b border-slate-200">
        <BoxPlot
          stats={statsA}
          color="text-indigo-500"
          label="Dataset A (Fixed)"
        />
        <BoxPlot
          stats={statsB}
          color="text-rose-500"
          label="Dataset B (Adjustable)"
        />

        {/* Axis */}
        <div className="absolute bottom-0 w-full flex justify-between text-xs text-slate-400 font-mono px-2">
          <span>0</span>
          <span>10</span>
          <span>20</span>
          <span>30</span>
          <span>40</span>
          <span>50</span>
          <span>60</span>
        </div>
      </div>

      <div className="flex flex-col md:flex-row gap-8">
        <div className="w-full md:w-1/3 space-y-6">
          <div>
            <label className="text-xs font-bold text-slate-500 uppercase">
              Shift Center (Median B)
            </label>
            <input
              type="range"
              min="-15"
              max="15"
              value={shift}
              onChange={(e) => setShift(parseInt(e.target.value))}
              className="w-full h-2 bg-rose-100 rounded-lg appearance-none cursor-pointer accent-rose-600"
            />
          </div>
          <div>
            <label className="text-xs font-bold text-slate-500 uppercase">
              Adjust Spread (IQR B)
            </label>
            <input
              type="range"
              min="0.5"
              max="2"
              step="0.1"
              value={spread}
              onChange={(e) => setSpread(parseFloat(e.target.value))}
              className="w-full h-2 bg-rose-100 rounded-lg appearance-none cursor-pointer accent-rose-600"
            />
          </div>
        </div>

        <div className="flex-1 grid grid-cols-2 gap-4">
          <div className="bg-slate-50 p-3 rounded border border-slate-200">
            <div className="text-xs font-bold text-slate-400 uppercase">
              Median Comparison
            </div>
            <div className="flex justify-between items-center mt-1">
              <span className="text-indigo-600 font-bold">{statsA.med}</span>
              <span className="text-slate-400">
                {statsA.med > statsB.med
                  ? ">"
                  : statsA.med < statsB.med
                    ? "<"
                    : "="}
              </span>
              <span className="text-rose-600 font-bold">{statsB.med}</span>
            </div>
          </div>
          <div className="bg-slate-50 p-3 rounded border border-slate-200">
            <div className="text-xs font-bold text-slate-400 uppercase">
              IQR Comparison
            </div>
            <div className="flex justify-between items-center mt-1">
              <span className="text-indigo-600 font-bold">
                {iqrA.toFixed(0)}
              </span>
              <span className="text-slate-400">
                {iqrA > iqrB ? ">" : iqrA < iqrB ? "<" : "="}
              </span>
              <span className="text-rose-600 font-bold">{iqrB.toFixed(0)}</span>
            </div>
          </div>
          <div className="col-span-2 text-xs text-slate-500 text-center">
            The box length represents the IQR (Middle 50%). The whiskers
            represent the full Range.
          </div>
        </div>
      </div>
    </div>
  );
};

export default BoxPlotComparisonWidget;