9router/src/app/(dashboard)/dashboard/cli-tools/components/AntigravityToolCard.js

"use client";

import { useState, useEffect } from "react";
import { Card, Button, Badge, Modal, Input, ModelSelectModal } from "@/shared/components";
import Image from "next/image";

export default function AntigravityToolCard({
  tool,
  isExpanded,
  onToggle,
  baseUrl,
  apiKeys,
  activeProviders,
  hasActiveProviders,
  cloudEnabled,
  initialStatus,
}) {
  const [status, setStatus] = useState(initialStatus || null);
  const [loading, setLoading] = useState(false);
  const [startingStep, setStartingStep] = useState(null); // "cert" | "server" | "dns" | null
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [sudoPassword, setSudoPassword] = useState("");
  const [selectedApiKey, setSelectedApiKey] = useState("");
  const [message, setMessage] = useState(null);
  const [modelMappings, setModelMappings] = useState({});
  const [modalOpen, setModalOpen] = useState(false);
  const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
  const [modelAliases, setModelAliases] = useState({});

  useEffect(() => {
    if (apiKeys?.length > 0 && !selectedApiKey) {
      setSelectedApiKey(apiKeys[0].key);
    }
  }, [apiKeys, selectedApiKey]);

  useEffect(() => {
    if (initialStatus) setStatus(initialStatus);
  }, [initialStatus]);

  useEffect(() => {
    if (isExpanded && !status) {
      fetchStatus();
      loadSavedMappings();
      fetchModelAliases();
    }
    if (isExpanded) {
      loadSavedMappings();
      fetchModelAliases();
    }
  }, [isExpanded]);

  const loadSavedMappings = async () => {
    try {
      const res = await fetch("/api/cli-tools/antigravity-mitm/alias?tool=antigravity");
      if (res.ok) {
        const data = await res.json();
        const aliases = data.aliases || {};

        if (Object.keys(aliases).length > 0) {
          setModelMappings(aliases);
        }
      }
    } catch (error) {
      console.log("Error loading saved mappings:", error);
    }
  };

  const fetchModelAliases = async () => {
    try {
      const res = await fetch("/api/models/alias");
      const data = await res.json();
      if (res.ok) setModelAliases(data.aliases || {});
    } catch (error) {
      console.log("Error fetching model aliases:", error);
    }
  };

  const fetchStatus = async () => {
    try {
      const res = await fetch("/api/cli-tools/antigravity-mitm");
      if (res.ok) {
        const data = await res.json();
        setStatus(data);
      }
    } catch (error) {
      console.log("Error fetching status:", error);
      setStatus({ running: false });
    }
  };

  // Windows uses UAC dialog, no sudo needed
  const isWindows = typeof navigator !== "undefined" && navigator.userAgent?.includes("Windows");

  const handleStart = () => {
    if (isWindows || status?.hasCachedPassword) {
      doStart("");
    } else {
      setShowPasswordModal(true);
      setMessage(null);
    }
  };

  const handleStop = () => {
    if (isWindows || status?.hasCachedPassword) {
      doStop("");
    } else {
      setShowPasswordModal(true);
      setMessage(null);
    }
  };

  const doStart = async (password) => {
    setLoading(true);
    setMessage(null);
    // Show steps progressing in order
    setStartingStep("cert");
    try {
      const keyToUse = selectedApiKey?.trim()
        || (apiKeys?.length > 0 ? apiKeys[0].key : null)
        || (!cloudEnabled ? "sk_9router" : null);

      const res = await fetch("/api/cli-tools/antigravity-mitm", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ apiKey: keyToUse, sudoPassword: password }),
      });

      const data = await res.json();
      if (res.ok) {
        setStartingStep(null);
        setMessage({ type: "success", text: "MITM started" });
        setShowPasswordModal(false);
        setSudoPassword("");
        fetchStatus();
      } else {
        setStartingStep(null);
        setMessage({ type: "error", text: data.error || "Failed to start" });
      }
    } catch (error) {
      setStartingStep(null);
      setMessage({ type: "error", text: error.message });
    } finally {
      setLoading(false);
    }
  };

  const doStop = async (password) => {
    setLoading(true);
    setMessage(null);
    try {
      const res = await fetch("/api/cli-tools/antigravity-mitm", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sudoPassword: password }),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage({ type: "success", text: "MITM stopped" });
        setShowPasswordModal(false);
        setSudoPassword("");
        fetchStatus();
      } else {
        setMessage({ type: "error", text: data.error || "Failed to stop" });
      }
    } catch (error) {
      setMessage({ type: "error", text: error.message });
    } finally {
      setLoading(false);
    }
  };

  const handleConfirmPassword = () => {
    if (!sudoPassword.trim()) {
      setMessage({ type: "error", text: "Sudo password is required" });
      return;
    }
    if (status?.running) {
      doStop(sudoPassword);
    } else {
      doStart(sudoPassword);
    }
  };

  const openModelSelector = (alias) => {
    setCurrentEditingAlias(alias);
    setModalOpen(true);
  };

  const handleModelSelect = (model) => {
    if (currentEditingAlias) {
      setModelMappings(prev => ({
        ...prev,
        [currentEditingAlias]: model.value,
      }));
    }
  };

  const handleModelMappingChange = (alias, value) => {
    setModelMappings(prev => ({
      ...prev,
      [alias]: value,
    }));
  };

  const handleSaveMappings = async () => {
    setLoading(true);
    setMessage(null);

    try {
      const res = await fetch("/api/cli-tools/antigravity-mitm/alias", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tool: "antigravity", mappings: modelMappings }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to save mappings");
      }

      setMessage({ type: "success", text: "Mappings saved!" });
    } catch (error) {
      setMessage({ type: "error", text: error.message });
    } finally {
      setLoading(false);
    }
  };

  const isRunning = status?.running;

  return (
    <Card padding="xs" className="overflow-hidden">
      <div className="flex items-start justify-between gap-3 hover:cursor-pointer sm:items-center" onClick={onToggle}>
        <div className="flex min-w-0 items-center gap-3">
          <div className="size-8 flex items-center justify-center shrink-0">
            <Image
              src="/providers/antigravity.png"
              alt={tool.name}
              width={32}
              height={32}
              className="size-8 object-contain rounded-lg"
              sizes="32px"
              onError={(e) => { e.target.style.display = "none"; }}
            />
          </div>
          <div className="min-w-0">
            <div className="flex min-w-0 flex-wrap items-center gap-2">
              <h3 className="font-medium text-sm">{tool.name}</h3>
              {isRunning ? (
                <Badge variant="success" size="sm">Active</Badge>
              ) : (
                <Badge variant="default" size="sm">Inactive</Badge>
              )}
            </div>
            <p className="text-xs text-text-muted truncate">{tool.description}</p>
          </div>
        </div>
        <span className={`material-symbols-outlined text-text-muted text-[20px] transition-transform ${isExpanded ? "rotate-180" : ""}`}>expand_more</span>
      </div>

      {isExpanded && (
        <div className="mt-4 pt-4 border-t border-border flex flex-col gap-4">
          {/* Status indicators — ordered: Cert → Server → DNS */}
          <div className="flex items-center gap-1">
            {[
              { key: "cert", label: "Cert", ok: status?.certExists },
              { key: "server", label: "Server", ok: status?.running },
              { key: "dns", label: "DNS", ok: status?.dnsConfigured },
            ].map(({ key, label, ok }, i) => {
              const isLoading = startingStep === key;
              return (
                <div key={key} className="flex items-center">
                  <div className="flex items-center gap-1 px-2 py-1 rounded-md">
                    {isLoading ? (
                      <span className="material-symbols-outlined text-[14px] text-primary animate-spin">progress_activity</span>
                    ) : (
                      <span className={`material-symbols-outlined text-[14px] ${ok ? "text-green-500" : "text-text-muted"}`}>
                        {ok ? "check_circle" : "radio_button_unchecked"}
                      </span>
                    )}
                    <span className={`text-xs font-medium ${isLoading ? "text-primary" : ok ? "text-green-500" : "text-text-muted"}`}>
                      {label}
                    </span>
                  </div>
                  {i < 2 && <span className="material-symbols-outlined text-[12px] text-text-muted">arrow_forward</span>}
                </div>
              );
            })}
          </div>

          {/* Start/Stop Button */}
          <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
            {isRunning ? (
              <button
                onClick={handleStop}
                disabled={loading}
                className="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-sm flex items-center gap-2 hover:bg-red-500/20 transition-colors disabled:opacity-50"
              >
                <span className="material-symbols-outlined text-[18px]">stop_circle</span>
                Stop MITM
              </button>
            ) : (
              <button
                onClick={handleStart}
                disabled={loading || !hasActiveProviders}
                className="px-4 py-2 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-sm flex items-center gap-2 hover:bg-primary/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <span className="material-symbols-outlined text-[18px]">play_circle</span>
                Start MITM
              </button>
            )}
          </div>

          {message?.type === "error" && (
            <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-red-500/10 text-red-600">
              <span className="material-symbols-outlined text-[14px]">error</span>
              <span>{message.text}</span>
            </div>
          )}

          {/* When running: API Key + Model Mappings */}
          {isRunning && (
            <>
              <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
                <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">API Key</span>
                <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
                {apiKeys.length > 0 ? (
                  <select
                    value={selectedApiKey}
                    onChange={(e) => setSelectedApiKey(e.target.value)}
                    className="w-full min-w-0 px-2 py-2 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
                  >
                    {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
                  </select>
                ) : (
                  <span className="min-w-0 rounded bg-surface/40 px-2 py-2 text-xs text-text-muted sm:py-1.5">
                    {cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
                  </span>
                )}
              </div>

              {tool.defaultModels.map((model) => (
                <div key={model.alias} className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
                  <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">{model.name}</span>
                  <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
                  <input
                    type="text"
                    value={modelMappings[model.alias] || ""}
                    onChange={(e) => handleModelMappingChange(model.alias, e.target.value)}
                    placeholder="provider/model-id"
                    className="w-full min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
                  />
                  <button
                    onClick={() => openModelSelector(model.alias)}
                    disabled={!hasActiveProviders}
                    className={`w-full sm:w-auto rounded border px-2 py-2 text-xs transition-colors sm:py-1.5 whitespace-nowrap sm:shrink-0 ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}
                  >
                    Select
                  </button>
                  {modelMappings[model.alias] && (
                    <button
                      onClick={() => handleModelMappingChange(model.alias, "")}
                      className="p-1 text-text-muted hover:text-red-500 rounded transition-colors"
                      title="Clear"
                    >
                      <span className="material-symbols-outlined text-[14px]">close</span>
                    </button>
                  )}
                </div>
              ))}

              <div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
                <Button
                  variant="primary"
                  size="sm"
                  onClick={handleSaveMappings}
                  disabled={loading || Object.keys(modelMappings).length === 0}
                >
                  <span className="material-symbols-outlined text-[14px] mr-1">save</span>
                  Save Mappings
                </Button>
              </div>
            </>
          )}

          {/* Windows admin warning */}
          {!isRunning && isWindows && (
            <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-yellow-500/10 text-yellow-600 border border-yellow-500/20">
              <span className="material-symbols-outlined text-[14px]">warning</span>
              <span>Windows: Run terminal (9Router) as Administrator to enable MITM</span>
            </div>
          )}

          {/* When stopped: how it works */}
          {!isRunning && (
            <div className="flex flex-col gap-1.5 px-1">
              <p className="text-xs text-text-muted">
                <span className="font-medium text-text-main">How it works:</span> Intercepts Antigravity traffic via DNS redirect, letting you reroute models through 9Router.
              </p>
              <div className="flex flex-col gap-0.5 text-[11px] text-text-muted">
                <span>1. Generates SSL cert & adds to system keychain</span>
                <span>2. Redirects <code className="text-[10px] bg-surface px-1 rounded">daily-cloudcode-pa.googleapis.com</code> → localhost</span>
                <span>3. Maps Antigravity models to any provider via 9Router</span>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Password Modal */}
      <Modal
        isOpen={showPasswordModal}
        onClose={() => {
          setShowPasswordModal(false);
          setSudoPassword("");
          setMessage(null);
        }}
        title="Sudo Password Required"
        size="sm"
      >
        <div className="flex flex-col gap-4">
          <div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
            <span className="material-symbols-outlined text-yellow-500 text-[20px]">warning</span>
            <p className="text-xs text-text-muted">Required for SSL certificate and DNS configuration</p>
          </div>

          <Input
            type="password"
            placeholder="Enter sudo password"
            value={sudoPassword}
            onChange={(e) => setSudoPassword(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !loading) handleConfirmPassword();
            }}
          />

          {message && (
            <div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
              <span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
              <span>{message.text}</span>
            </div>
          )}

          <div className="flex items-center justify-end gap-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }}
              disabled={loading}
            >
              Cancel
            </Button>
            <Button
              variant="primary"
              size="sm"
              onClick={handleConfirmPassword}
              loading={loading}
            >
              Confirm
            </Button>
          </div>
        </div>
      </Modal>

      {/* Model Select Modal */}
      <ModelSelectModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        onSelect={handleModelSelect}
        selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
        activeProviders={activeProviders}
        modelAliases={modelAliases}
        title={`Select model for ${currentEditingAlias}`}
      />
    </Card>
  );
}