import { useState } from 'react';
import { extractApiError } from '@/api/client';
import { useC2Callbacks, useExecuteC2 } from '@/hooks/useC2';
import { C2CallbackPicker } from './C2CallbackPicker';
import { useToast } from '@/hooks/useToast';

interface ExecuteViaC2ModalProps {
  simulationId: number;
  engagementId: number;
  initialCommands: string;
  onClose: () => void;
}

export function ExecuteViaC2Modal({
  simulationId,
  engagementId,
  initialCommands,
  onClose,
}: ExecuteViaC2ModalProps): JSX.Element {
  const { push } = useToast();

  const callbacksQuery = useC2Callbacks(engagementId, { enabled: true });
  const executeMutation = useExecuteC2(simulationId, engagementId);

  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [commands, setCommands] = useState(initialCommands);
  const [submitError, setSubmitError] = useState<string | null>(null);

  const callbacks = callbacksQuery.data?.callbacks ?? [];

  const commandLines = commands
    .split('\n')
    .map((l) => l.trim())
    .filter(Boolean);

  const canLaunch = selectedId !== null && commandLines.length > 0;

  const onLaunch = async () => {
    if (!canLaunch) return;
    setSubmitError(null);
    try {
      const result = await executeMutation.mutateAsync({
        callback_display_id: selectedId,
        commands: commandLines,
      });
      push(`${result.tasks.length} task(s) submitted`, 'success');
      onClose();
    } catch (err) {
      setSubmitError(extractApiError(err, 'Could not execute via C2'));
    }
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="c2-modal-title"
      data-testid="c2-modal"
      className="fixed inset-0 z-50 flex items-center justify-center"
    >
      <div className="modal-backdrop absolute inset-0" onClick={onClose} aria-hidden="true" />

      <div className="relative card-product w-full max-w-3xl mx-md flex flex-col gap-md max-h-[90vh] overflow-y-auto">
        <h2 id="c2-modal-title" className="text-[20px] font-medium text-ink">
          Execute via C2
        </h2>

        {/* Callback picker */}
        <div className="flex flex-col gap-xs">
          <span className="text-[14px] font-medium text-ink">Select callback</span>
          <C2CallbackPicker
            callbacks={callbacks}
            isLoading={callbacksQuery.isLoading}
            isError={callbacksQuery.isError}
            error={callbacksQuery.error}
            selectedId={selectedId}
            onSelect={setSelectedId}
            rowTestId="c2-callback-row"
          />
        </div>

        {/* Commands */}
        <div className="flex flex-col gap-xs">
          <label htmlFor="c2-commands" className="text-[14px] font-medium text-ink">
            Commands
          </label>
          <textarea
            id="c2-commands"
            data-testid="c2-commands-textarea"
            value={commands}
            onChange={(e) => setCommands(e.target.value)}
            className="text-input min-h-[112px] py-sm font-mono text-[14px]"
            placeholder="One command per line"
          />
          <span className="text-[12px] text-graphite">
            {commandLines.length} command{commandLines.length !== 1 ? 's' : ''} — one task per line
          </span>
        </div>

        {submitError && (
          <p role="alert" className="text-[14px] text-bloom-deep">
            {submitError}
          </p>
        )}

        {/* Footer */}
        <div className="flex items-center gap-md pt-xs">
          <button
            type="button"
            data-testid="c2-launch-btn"
            className="btn-primary"
            onClick={onLaunch}
            disabled={!canLaunch || executeMutation.isPending}
          >
            {executeMutation.isPending ? 'Launching…' : 'Launch'}
          </button>
          <button
            type="button"
            className="btn-outline-ink"
            onClick={onClose}
            disabled={executeMutation.isPending}
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}
