import { useState } from 'react';
import { useEmergencyStop } from '../../hooks/useApi';

export function EmergencyControls() {
  const [confirmText, setConfirmText] = useState('');
  const [showConfirm, setShowConfirm] = useState(false);

  const emergencyStop = useEmergencyStop();

  function handleEmergencyStop() {
    if (confirmText === 'STOP') {
      emergencyStop.mutate({ reason: 'Manual emergency stop from dashboard' });
      setShowConfirm(false);
      setConfirmText('');
      emergencyStop.reset();
    }
  }

  return (
    <div>
      <div className="px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">Emergency Controls</span>
      </div>

      <div className="p-3 space-y-3">
        {!showConfirm ? (
          <button
            onClick={() => setShowConfirm(true)}
            aria-label="Trigger emergency stop -- cancels all orders and closes all positions"
            className="w-full py-3 text-sm font-bold rounded bg-[var(--color-red)] text-white hover:bg-red-600 transition-colors"
          >
            EMERGENCY STOP
          </button>
        ) : (
          <div className="space-y-2">
            <p className="text-xs text-[var(--color-red)]">
              Type STOP to confirm emergency shutdown of all positions.
            </p>
            <input
              type="text"
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              placeholder="Type STOP"
              aria-label="Type STOP to confirm emergency shutdown"
              className="w-full px-2 py-1.5 text-sm rounded border border-[var(--color-red)] bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] outline-none"
              autoFocus
            />
            <div className="grid grid-cols-2 gap-2">
              <button
                onClick={() => {
                  setShowConfirm(false);
                  setConfirmText('');
                }}
                aria-label="Cancel emergency stop"
                className="py-1.5 text-xs rounded border border-[var(--color-border)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
              >
                Cancel
              </button>
              <button
                onClick={handleEmergencyStop}
                disabled={confirmText !== 'STOP' || emergencyStop.isPending}
                aria-label="Confirm emergency stop"
                className="py-1.5 text-xs rounded bg-[var(--color-red)] text-white disabled:opacity-50"
              >
                {emergencyStop.isPending ? 'Stopping...' : 'Confirm STOP'}
              </button>
            </div>
          </div>
        )}

        {emergencyStop.isSuccess && (
          <p className="text-xs text-[var(--color-green)]">
            Emergency stop executed successfully.
          </p>
        )}
        {emergencyStop.isError && (
          <p className="text-xs text-[var(--color-red)]">
            {emergencyStop.error.message}
          </p>
        )}

        <div className="pt-2 border-t border-[var(--color-border)]">
          <div className="text-xs text-[var(--color-text-secondary)] space-y-1">
            <p>Emergency stop will:</p>
            <ul className="list-disc list-inside space-y-0.5">
              <li>Cancel all pending orders</li>
              <li>Close all open positions at market</li>
              <li>Disable new order submission</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
