import { useEffect, useState } from 'react';
import type { ExitPolicy } from '../../lib/types';
import { useExitPolicy, useUpdateExitPolicy } from '../../hooks/usePaperTrades';
import { SkeletonCard } from '../ui/Skeleton';

export function ExitPolicySettings() {
  const { data, isLoading } = useExitPolicy();
  const update = useUpdateExitPolicy();
  const [mode, setMode] = useState<ExitPolicy['mode']>('atr_trailing');
  const [pct, setPct] = useState(12);
  const [atrMultiplier, setAtrMultiplier] = useState(3);
  const [holdDays, setHoldDays] = useState(30);

  useEffect(() => {
    if (data) {
      setMode(data.mode);
      setPct(data.trailing_pct);
      setAtrMultiplier(data.atr_multiplier ?? 3);
      setHoldDays(data.hold_days ?? 30);
    }
  }, [data]);

  if (isLoading) return <SkeletonCard />;

  return (
    <div className="glass p-5 space-y-4">
      <div>
        <h3 className="text-sm font-semibold text-gray-200">Paper-Trade Exit</h3>
        <p className="mt-1 text-xs text-gray-500">
          How open paper trades auto-close (in the nightly/intraday outcome job).{' '}
          <span className="text-gray-300">ATR trail</span> is the promoted production exit: initial stop,
          ATR trailing stop, and a max N-trading-day hold;{' '}
          <span className="text-gray-300">Hold</span> keeps only the initial stop until the Nth trading
          day's close; <span className="text-gray-300">Percent trail</span> is the older trailing mode;{' '}
          <span className="text-gray-300">Target / stop</span> closes at the setup's target or stop.
          The setup's initial stop is always the floor.
        </p>
      </div>
      <div className="grid gap-4 md:grid-cols-4">
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Exit mode</span>
          <select
            value={mode}
            onChange={(e) => setMode(e.target.value as ExitPolicy['mode'])}
            className="w-full input-glass px-3 py-2 text-sm"
          >
            <option value="atr_trailing">ATR trail + max hold</option>
            <option value="time">Hold N days + stop</option>
            <option value="trailing">Percent trailing stop</option>
            <option value="target">Target / stop</option>
          </select>
        </label>
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Hold (trading days)</span>
          <input
            type="number"
            min={2}
            max={250}
            step={1}
            value={holdDays}
            onChange={(e) => setHoldDays(Number(e.target.value))}
            disabled={mode !== 'time' && mode !== 'atr_trailing'}
            className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
          />
          <span className="text-[11px] text-gray-600">Production max hold: 30 trading days.</span>
        </label>
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">ATR multiplier</span>
          <input
            type="number"
            min={0.5}
            max={10}
            step={0.25}
            value={atrMultiplier}
            onChange={(e) => setAtrMultiplier(Number(e.target.value))}
            disabled={mode !== 'atr_trailing'}
            className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
          />
          <span className="text-[11px] text-gray-600">Promoted strategy: 3x ATR.</span>
        </label>
        <label className="block space-y-1">
          <span className="text-xs text-gray-400">Trailing width (%)</span>
          <input
            type="number"
            min={0.5}
            max={90}
            step={0.5}
            value={pct}
            onChange={(e) => setPct(Number(e.target.value))}
            disabled={mode !== 'trailing'}
            className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
          />
          <span className="text-[11px] text-gray-600">Legacy percent trail from the peak.</span>
        </label>
      </div>
      <button
        className="btn-primary px-4 py-2 text-sm disabled:opacity-50"
        disabled={update.isPending}
        onClick={() => update.mutate({
          mode,
          trailing_pct: pct,
          atr_multiplier: atrMultiplier,
          hold_days: holdDays,
        })}
      >
        {update.isPending ? 'Saving…' : 'Save Exit Policy'}
      </button>
    </div>
  );
}
