`kalshi-dash/src/setup/steps/GoLive.jsx`

107 lines
import React, { useState } from 'react';

const CHECKS = [
  { key: 'keys', label: 'Gave me the API keys (good)', check: d => !!d.keys },
  { key: 'conn', label: 'Connection actually works (miracle)', check: d => !!d.connectionOk },
  { key: 'markets', label: 'Found some markets to bet on', check: d => d.marketsLoaded > 0 },
  { key: 'weather', label: 'Got the weather data (finally)', check: d => !!d.weatherFetched },
  { key: 'preds', label: 'The machine made its predictions', check: d => !!d.predictionsRun },
  { key: 'risk', label: 'Set some limits (smart)', check: d => !!d.riskProfile },
];

export default function GoLive({ data, complete, back }) {
  const [safeMode, setSafeMode] = useState(true);
  const [launching, setLaunching] = useState(false);

  const done = CHECKS.filter(c => c.check(data)).length;
  const skipped = data.skippedConnect;

  async function launch() {
    setLaunching(true);
    await complete();
  }

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">Alright, Mazel Tov</h2>
        <p className="text-gray-400 text-sm">Let's see if you actually did everything right. I have my doubts.</p>
      </div>

      <div className="card">
        <h3 className="font-semibold text-sm mb-3">Your Report Card</h3>
        <div className="space-y-2">
          {CHECKS.map(c => {
            const ok = c.check(data);
            const skip = c.key === 'keys' && skipped;
            return (
              <div key={c.key} className="flex items-center gap-3">
                {ok ? (
                  <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0">
                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /></svg>
                  </div>
                ) : skip ? (
                  <div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center flex-shrink-0"><span className="text-white text-[10px] font-bold">—</span></div>
                ) : (
                  <div className="w-5 h-5 rounded-full bg-gray-700 flex-shrink-0" />
                )}
                <span className={`text-sm ${ok ? 'text-gray-200' : skip ? 'text-yellow-400' : 'text-gray-500'}`}>
                  {c.label}{skip ? ' (skipped)' : ''}
                </span>
              </div>
            );
          })}
        </div>
        <p className="text-xs text-gray-500 mt-3 pt-3 border-t border-gray-800">{done}/{CHECKS.length} steps completed</p>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <div className="card text-center">
          <p className="stat-v text-amber-400">{data.marketsLoaded || 0}</p>
          <p className="text-xs text-gray-500 mt-1">Markets</p>
        </div>
        <div className="card text-center">
          <p className="stat-v text-blue-400">{data.riskProfile || '—'}</p>
          <p className="text-xs text-gray-500 mt-1">Risk Profile</p>
        </div>
        <div className="card text-center">
          <p className="stat-v text-green-400">{data.keys ? (data.keys.env || 'demo').toUpperCase() : 'PAPER'}</p>
          <p className="text-xs text-gray-500 mt-1">Mode</p>
        </div>
      </div>

      {/* Safe Mode Toggle */}
      <div className="card">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-semibold text-sm">Safe Mode (I Recommend It)</h3>
            <p className="text-xs text-gray-500 mt-0.5">
              {safeMode ? 'Paper trading — playing pretend, like a sensible person' : 'Live orders! With real money! Oy gevalt.'}
            </p>
          </div>
          <div className="flex items-center gap-3">
            <span className={`text-xs font-medium ${safeMode ? 'text-yellow-400' : 'text-gray-500'}`}>Safe</span>
            <button onClick={() => setSafeMode(!safeMode)} disabled={!data.keys}
              className={`w-11 h-6 rounded-full transition-colors relative ${safeMode ? 'bg-yellow-500/30' : 'bg-green-500/30'} ${!data.keys ? 'opacity-50 cursor-not-allowed' : ''}`}>
              <div className={`w-4 h-4 rounded-full absolute top-1 transition-all ${safeMode ? 'left-1 bg-yellow-400' : 'left-6 bg-green-400'}`} />
            </button>
            <span className={`text-xs font-medium ${!safeMode ? 'text-green-400' : 'text-gray-500'}`}>Live</span>
          </div>
        </div>
        {!safeMode && (
          <div className="mt-3 p-2 bg-red-500/10 border border-red-500/20 rounded-lg">
            <p className="text-xs text-red-400">Live mode means real money, bubeleh. Real. Money. Don't say I didn't warn you. Make sure you've got funds and your limits are set, or so help me.</p>
          </div>
        )}
      </div>

      <div className="flex items-center justify-between">
        <button onClick={back} className="text-sm text-gray-500 hover:text-gray-300">Back</button>
        <button onClick={launch} disabled={launching} className="btn btn-p text-lg px-8 py-3 rounded-xl font-bold">
          {launching ? 'Starting up, hold your horses...' : 'Go Make Some Gelt Already'}
        </button>
      </div>
    </div>
  );
}