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

69 lines
import React, { useState } from 'react';
import { post } from '../../api';

const PROFILES = [
  { name: 'Conservative', maxContracts: 5, maxDollars: 25, dailyLoss: 10, color: 'blue',
    desc: 'Like your bubbe taught you — small bets, tight grip on the purse strings.' },
  { name: 'Moderate', maxContracts: 20, maxDollars: 100, dailyLoss: 50, color: 'amber',
    desc: 'Not too much, not too little. Like Goldilocks, but with money.', recommended: true },
  { name: 'Aggressive', maxContracts: 50, maxDollars: 500, dailyLoss: 200, color: 'red',
    desc: 'What are you, a big shot? Don\'t come crying to me when it goes sideways.' },
];

export default function RiskProfile({ data, update, next, back }) {
  const [selected, setSelected] = useState(data.riskProfile || 'Moderate');
  const [saving, setSaving] = useState(false);

  async function save() {
    setSaving(true);
    const p = PROFILES.find(x => x.name === selected);
    try {
      await post('/risk', {
        action: 'update_config',
        max_contracts_per_market: p.maxContracts,
        max_dollars_at_risk: p.maxDollars,
        daily_loss_cap: p.dailyLoss,
        risk_profile: p.name,
      });
      update({ riskProfile: selected });
      next();
    } catch {}
    setSaving(false);
  }

  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold mb-2">How Much Are You Willing to Lose?</h2>
        <p className="text-gray-400 text-sm">Pick one. And no, "all of it" is not an option.</p>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {PROFILES.map(p => {
          const colors = { blue: { ring: '#3b82f6', text: 'text-blue-400' }, amber: { ring: '#f59e0b', text: 'text-amber-400' }, red: { ring: '#ef4444', text: 'text-red-400' } };
          const c = colors[p.color];
          return (
            <button key={p.name} onClick={() => setSelected(p.name)}
              className="card text-left transition-all relative"
              style={selected === p.name ? { boxShadow: `0 0 0 2px ${c.ring}` } : {}}>
              {p.recommended && <span className="absolute -top-2 right-3 text-[9px] font-bold uppercase px-2 py-0.5 rounded-full bg-amber-500 text-black">Recommended</span>}
              <h3 className={`font-bold text-lg mb-1 ${c.text}`}>{p.name}</h3>
              <p className="text-xs text-gray-500 mb-3">{p.desc}</p>
              <div className="space-y-1.5 text-xs">
                <div className="flex justify-between"><span className="text-gray-500">Max Contracts</span><span className="font-mono text-gray-300">{p.maxContracts}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Max $ at Risk</span><span className="font-mono text-gray-300">${p.maxDollars}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Daily Loss Cap</span><span className="font-mono text-gray-300">${p.dailyLoss}</span></div>
              </div>
            </button>
          );
        })}
      </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={save} disabled={saving} className="btn btn-p">{saving ? 'Saving...' : 'Save & Continue'}</button>
      </div>
    </div>
  );
}