path: root/makima/frontend/src/components/mesh/BranchTaskModal.tsx

import { useState } from "react";
import type { TaskWithSubtasks } from "../../lib/api";

interface BranchTaskModalProps {
  task: TaskWithSubtasks;
  onBranch: (taskId: string, message: string, name?: string) => Promise<void>;
  onClose: () => void;
}

export function BranchTaskModal({
  task,
  onBranch,
  onClose,
}: BranchTaskModalProps) {
  const [name, setName] = useState(`Branch of ${task.name}`);
  const [message, setMessage] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    if (!message.trim()) {
      setError("Message is required");
      return;
    }

    setSubmitting(true);
    setError(null);

    try {
      await onBranch(task.id, message.trim(), name.trim() || undefined);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create branch");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
      <div className="w-full max-w-lg mx-4 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-[rgba(117,170,252,0.2)]">
          <div className="flex items-center gap-2">
            <span className="text-purple-400 text-lg">*</span>
            <h2 className="font-mono text-sm text-[#75aafc] uppercase tracking-wide">
              Branch Task
            </h2>
          </div>
          <button
            onClick={onClose}
            className="text-[#555] hover:text-[#9bc3ff] transition-colors"
            aria-label="Close"
          >
            <span className="text-xl">&times;</span>
          </button>
        </div>

        {/* Content */}
        <div className="p-4 space-y-4">
          {/* Source task info */}
          <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.15)] p-3">
            <p className="font-mono text-xs text-[#9bc3ff] mb-1 uppercase">
              Branching From
            </p>
            <p className="font-mono text-sm text-[#dbe7ff]">{task.name}</p>
            <p className="font-mono text-[10px] text-[#555] mt-1">
              Status: {task.status}
            </p>
          </div>

          {/* Name input */}
          <div className="space-y-2">
            <label className="block font-mono text-xs text-[#9bc3ff] uppercase">
              Branch Name
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Enter branch task name..."
              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
            />
          </div>

          {/* Message input */}
          <div className="space-y-2">
            <label className="block font-mono text-xs text-[#9bc3ff] uppercase">
              Message <span className="text-red-400">*</span>
            </label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Enter a message for the new task to continue with..."
              rows={4}
              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
              autoFocus
            />
            <p className="font-mono text-[10px] text-[#555]">
              This message will be sent to the branched task when it starts.
            </p>
          </div>

          {/* Error message */}
          {error && (
            <div className="bg-red-900/20 border border-red-500/30 p-3 text-red-400 font-mono text-sm">
              {error}
            </div>
          )}

          {/* Actions */}
          <div className="flex gap-3 pt-4 border-t border-[rgba(117,170,252,0.2)]">
            <button
              onClick={onClose}
              disabled={submitting}
              className="flex-1 px-4 py-2.5 font-mono text-sm text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
            >
              Cancel
            </button>
            <button
              onClick={handleSubmit}
              disabled={submitting || !message.trim()}
              className="flex-1 px-4 py-2.5 font-mono text-sm text-[#dbe7ff] bg-purple-700/30 border border-purple-400/50 hover:bg-purple-700/40 hover:border-purple-400/70 disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
            >
              {submitting ? "Creating..." : "Create Branch"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}