supervisor-ui/components/process/StdinInput.tsx

'use client';

import { useState } from 'react';
import { useSendProcessStdin } from '@/lib/hooks/useSupervisor';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { X, Terminal, Info } from 'lucide-react';

interface StdinInputProps {
  processName: string;
  onClose: () => void;
}

export function StdinInput({ processName, onClose }: StdinInputProps) {
  const [input, setInput] = useState('');
  const [appendNewline, setAppendNewline] = useState(true);

  const stdinMutation = useSendProcessStdin();

  const handleSend = () => {
    if (!input) return;

    const chars = appendNewline ? input + '\n' : input;

    stdinMutation.mutate(
      { name: processName, chars },
      {
        onSuccess: () => {
          setInput('');
          onClose();
        },
      }
    );
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    // Allow Ctrl+Enter to send
    if (e.ctrlKey && e.key === 'Enter') {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
      <Card className="w-full max-w-2xl shadow-2xl">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Terminal className="h-5 w-5" />
                Send Input to Process
              </CardTitle>
              <CardDescription className="mt-1">
                Send text to stdin of <span className="font-mono text-foreground">{processName}</span>
              </CardDescription>
            </div>
            <Button variant="ghost" size="icon" onClick={onClose}>
              <X className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>

        <CardContent className="space-y-4">
          {/* Info Banner */}
          <div className="flex gap-3 p-3 rounded-md bg-accent/10 border border-accent/20">
            <Info className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
            <div className="text-sm text-muted-foreground">
              <p>
                This sends input directly to the process's standard input stream.
                The process must be configured to read from stdin.
              </p>
            </div>
          </div>

          {/* Textarea */}
          <div>
            <label className="text-sm font-medium mb-2 block">Input Text</label>
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Type your input here... (Ctrl+Enter to send)"
              rows={8}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"
            />
            <p className="text-xs text-muted-foreground mt-1">
              Press Ctrl+Enter to send, or use the button below
            </p>
          </div>

          {/* Options */}
          <div className="flex items-center gap-2">
            <input
              type="checkbox"
              id="appendNewline"
              checked={appendNewline}
              onChange={(e) => setAppendNewline(e.target.checked)}
              className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
            />
            <label htmlFor="appendNewline" className="text-sm cursor-pointer">
              Append newline character (\\n) at the end
            </label>
          </div>

          {/* Character Count */}
          {input && (
            <p className="text-xs text-muted-foreground">
              {input.length} character{input.length !== 1 ? 's' : ''}
              {appendNewline && ' + newline'}
            </p>
          )}

          {/* Actions */}
          <div className="flex gap-2 justify-end pt-2">
            <Button variant="outline" onClick={onClose} disabled={stdinMutation.isPending}>
              Cancel
            </Button>
            <Button
              onClick={handleSend}
              disabled={!input || stdinMutation.isPending}
              className="gap-2"
            >
              <Terminal className="h-4 w-4" />
              {stdinMutation.isPending ? 'Sending...' : 'Send Input'}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}