import { useBetslip } from '#/components/providers/BetslipProvider'

export function BetslipSidecar() {
  const { selections, removeSelection, clearAll, updateStake } = useBetslip()

  const totalStake = selections.reduce((sum, s) => sum + (s.stake || 0), 0)
  const totalReturn = selections.reduce(
    (sum, s) => sum + (s.stake || 0) * s.price,
    0,
  )

  return (
    <div className="space-y-4 font-mono select-none text-xs text-slate-400">
      <div className="flex justify-between items-center text-slate-500 font-bold border-b border-slate-900 pb-2">
        <span>SELECTIONS ({selections.length})</span>
        {selections.length > 0 && (
          <button
            onClick={clearAll}
            className="text-[10px] text-rose-500 hover:text-rose-400 cursor-pointer border-none bg-transparent"
          >
            [CLEAR ALL]
          </button>
        )}
      </div>

      {selections.length === 0 ? (
        <div className="p-4 border border-dashed border-slate-900 text-center italic text-slate-600">
          Wager slip standby. Choose active odds matrices to link a prediction.
        </div>
      ) : (
        <div className="space-y-2 max-h-[300px] overflow-y-auto">
          {selections.map((sel) => (
            <div
              key={sel.marketId}
              className="border border-slate-900 p-2 bg-slate-950/40 space-y-1.5"
            >
              <div className="flex justify-between items-center text-[10px]">
                <span className="font-bold truncate max-w-[150px]">
                  {sel.matchName}
                </span>
                <button
                  onClick={() => removeSelection(sel.marketId)}
                  className="text-rose-500 hover:text-rose-400 font-bold border-none bg-transparent cursor-pointer"
                >
                  [×]
                </button>
              </div>
              <div className="flex justify-between items-center text-slate-300">
                <span className="flex items-center gap-1 font-bold">
                  <span className="text-slate-500">{sel.factionGlyph}</span>
                  {sel.selectionName}
                </span>
                <span className="bg-slate-900 px-1 border border-slate-800 text-amber-400 font-bold">
                  {sel.price.toFixed(2)}
                </span>
              </div>
              <div className="flex items-center justify-between gap-2 border-t border-slate-950 pt-1.5 mt-1">
                <span>STAKE:</span>
                <div className="flex items-center gap-1">
                  <input
                    type="number"
                    min="0"
                    step="5"
                    value={sel.stake || ''}
                    onChange={(e) =>
                      updateStake(sel.marketId, parseFloat(e.target.value) || 0)
                    }
                    className="w-16 bg-slate-950 border border-slate-800 text-right px-1 text-slate-300 font-mono text-[10px] outline-none"
                    placeholder="0.00"
                  />
                  <span>GPL</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {selections.length > 0 && (
        <div className="border-t border-slate-900 pt-3 space-y-2">
          <div className="flex justify-between text-slate-500 font-bold">
            <span>TOTAL STAKE:</span>
            <span className="text-slate-300">{totalStake.toFixed(2)} GPL</span>
          </div>
          <div className="flex justify-between text-slate-500 font-bold">
            <span>EST. RETURN:</span>
            <span className="text-emerald-400 font-bold">
              {totalReturn.toFixed(2)} GPL
            </span>
          </div>

          <button className="w-full mt-2 p-2 border border-amber-500/50 bg-amber-950/20 text-amber-400 font-bold text-center uppercase hover:bg-amber-950/40 hover:border-amber-500 cursor-pointer transition-all">
            ▶ TRANSMIT WAGER ◀
          </button>
          <div className="text-[10px] text-slate-600 italic text-center leading-normal">
            "The riskier the road, the greater the profit."
            <br />— Rule of Acquisition #62
          </div>
        </div>
      )}
    </div>
  )
}
