headquarter/apps/web/src/pages/sessions.tsx

import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

import { listProjects } from "../api/projects";
import type { Project } from "../types";
import { listRepositories, type GitRepository } from "../api/git_repositories";
import {
  getUserSessions,
  type Session,
  deleteInstance,
  stopInstance,
  checkInstanceHealth,
  recreateInstanceTunnel,
} from "../api/sessions";
import { listToolTypes, type ToolType } from "../api/tool_types";
import { getUserConfig, updateUserConfig } from "../api/settings";
import { Icon } from "../components/icon";
import { CreateSessionForm } from "../components/create-session-form";

type SessionsStatus = "loading" | "ready" | "error";

export const SessionsPage = () => {
  const navigate = useNavigate();
  const [status, setStatus] = useState<SessionsStatus>("loading");
  const [sessions, setSessions] = useState<Session[]>([]);
  const [lastSessionId, setLastSessionId] = useState<string | null>(null);

  const [projects, setProjects] = useState<Project[]>([]);
  const [repositories, setRepositories] = useState<GitRepository[]>([]);
  const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
  const [selectedProject, setSelectedProject] = useState<string>("");

  const [dirtyDeleteSession, setDirtyDeleteSession] = useState<Session | null>(null);
  const [dirtyDeleteFiles, setDirtyDeleteFiles] = useState<string[]>([]);

  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
  const [stopConfirmId, setStopConfirmId] = useState<string | null>(null);
  const [tunnelHealth, setTunnelHealth] = useState<Record<string, {
    healthy: boolean;
    container_status: string;
    container_health: string | null;
    tunnel_status: string;
    tunnel_status_code: number | null;
    probe_status: string;
    last_probe_output: string | null;
    error: string | null;
  }>>({});
  const [recreatingId, setRecreatingId] = useState<string | null>(null);
  const [expandedProbeId, setExpandedProbeId] = useState<string | null>(null);
  const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);
  const [loadingAction, setLoadingAction] = useState<string>("");

  const loadSessions = useCallback(async () => {
    setStatus("loading");
    try {
      const [sessionsData, config] = await Promise.all([
        getUserSessions(),
        getUserConfig(),
      ]);
      setSessions(sessionsData);
      setLastSessionId(config.last_session_id ?? null);
      setStatus("ready");
    } catch {
      setStatus("error");
    }
  }, []);

  useEffect(() => {
    void loadSessions();
  }, [loadSessions]);

  useEffect(() => {
    const loadProjects = async () => {
      try {
        const data = await listProjects();
        setProjects(data);
      } catch {
        // ignore
      }
    };
    void loadProjects();
  }, []);

  useEffect(() => {
    const loadToolTypes = async () => {
      try {
        const data = await listToolTypes();
        setToolTypes(data);
      } catch {
        // ignore
      }
    };
    void loadToolTypes();
  }, []);



  // Poll health every 30 seconds for active web-enabled instances
  useEffect(() => {
    const checkHealth = async () => {
      const activeSessions = sessions.filter(
        (s) => ["running", "starting", "unhealthy", "probing"].includes(s.status)
          && s.tool_type_interfaces?.includes("web")
      );
      for (const session of activeSessions) {
        try {
          const health = await checkInstanceHealth(
            session.project_id,
            session.repository_id,
            session.id
          );
          setTunnelHealth((prev) => ({
            ...prev,
            [session.id]: health,
          }));
        } catch {
          setTunnelHealth((prev) => ({
            ...prev,
            [session.id]: {
              healthy: false,
              container_status: "unknown",
              container_health: null,
              tunnel_status: "unreachable",
              tunnel_status_code: null,
              probe_status: "unknown",
              last_probe_output: null,
              error: "check failed",
            },
          }));
        }
      }
    };

    // Check immediately and then every 30 seconds
    void checkHealth();
    const interval = setInterval(() => void checkHealth(), 30000);
    return () => clearInterval(interval);
  }, [sessions]);

  useEffect(() => {
    if (!selectedProject) {
      setRepositories([]);
      return;
    }
    const loadRepos = async () => {
      try {
        const data = await listRepositories(selectedProject);
        setRepositories(data);
      } catch {
        setRepositories([]);
      }
    };
    void loadRepos();
  }, [selectedProject]);

  const activeSessions = useMemo(
    () => sessions.filter((s) => ["running", "building", "pending", "starting", "probing", "unhealthy"].includes(s.status)),
    [sessions]
  );

  const recentSessions = useMemo(
    () => sessions.filter((s) => ["stopped", "error"].includes(s.status)).slice(0, 5),
    [sessions]
  );

  const lastSession = useMemo(
    () => sessions.find((s) => s.id === lastSessionId) ?? null,
    [sessions, lastSessionId]
  );

  const handleCreateSuccess = async (instance: { id: string }) => {
    await updateUserConfig({ last_session_id: instance.id });
    setSelectedProject("");
    await loadSessions();
  };

  const handleStop = async (sessionId: string, projectId: string, repoId: string) => {
    setLoadingSessionId(sessionId);
    setLoadingAction("Stopping...");
    try {
      await stopInstance(projectId, repoId, sessionId);
      setStopConfirmId(null);
      await loadSessions();
    } catch {
      setStopConfirmId(null);
    } finally {
      setLoadingSessionId(null);
      setLoadingAction("");
    }
  };

  const handleDelete = async (sessionId: string, projectId: string, repoId: string, force = false) => {
    setLoadingSessionId(sessionId);
    setLoadingAction("Deleting...");
    try {
      await deleteInstance(projectId, repoId, sessionId, force);
      setDeleteConfirmId(null);
      setDirtyDeleteSession(null);
      setDirtyDeleteFiles([]);
      // Remove from local state immediately
      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
    } catch (error) {
      const axiosError = error as { response?: { status?: number; data?: { detail?: { changed_files?: string[] } } } };
      if (axiosError.response?.status === 409) {
        const detail = axiosError.response.data?.detail;
        if (detail?.changed_files) {
          setDirtyDeleteSession(sessions.find((s) => s.id === sessionId) ?? null);
          setDirtyDeleteFiles(detail.changed_files);
          setDeleteConfirmId(null);
          return;
        }
      }
      setDeleteConfirmId(null);
    } finally {
      setLoadingSessionId(null);
      setLoadingAction("");
    }
  };

  const handleRecreateTunnel = async (session: Session) => {
    setLoadingSessionId(session.id);
    setLoadingAction("Recreating tunnel...");
    try {
      await recreateInstanceTunnel(
        session.project_id,
        session.repository_id,
        session.id
      );
      // Refresh sessions to get new URL
      await loadSessions();
    } catch {
      // ignore
    } finally {
      setLoadingSessionId(null);
      setLoadingAction("");
    }
  };

  const handleOpen = (session: Session) => {
    if (session.url) {
      window.open(session.url, '_blank', 'noopener,noreferrer');
    } else if (session.tool_type_interfaces?.includes("terminal")) {
      navigate(`/instances/${session.id}/terminal`);
    } else {
      navigate(`/projects/${session.project_id}`);
    }
  };

  const handleResumeLast = async () => {
    if (!lastSession) return;
    // Find the project and repo IDs
    const project = projects.find((p) => p.name === lastSession.project_name);
    if (project) {
      navigate(`/projects/${project.id}`);
    }
  };

  return (
    <section className="stack sessions-page">
      <div className="page-header">
        <h1>Sessions</h1>
      </div>

      {status === "loading" && <p className="muted">Loading sessions...</p>}

      {status === "error" && (
        <div className="card stack">
          <p>Failed to load sessions</p>
          <button className="secondary-button" onClick={() => void loadSessions()} type="button">
            <Icon name="refresh" size="sm" />
            Retry
          </button>
        </div>
      )}

      {status === "ready" && (
        <>
          {/* Last Session */}
          {lastSession && (
            <div className="last-session-section">
              <h2>Last Session</h2>
              <div className="card last-session-card">
                <div className="last-session-info">
                  <h3>{lastSession.display_name}</h3>
                  <p className="muted">
                    {lastSession.tool_type_name} · {lastSession.project_name} · {lastSession.repository_name}
                  </p>
                  {lastSession.url && (
                    <p className="session-url">
                      <a href={lastSession.url} target="_blank" rel="noopener noreferrer">
                        {lastSession.url}
                      </a>
                    </p>
                  )}
                  <span className={`status-badge ${lastSession.status}`}>{lastSession.status}</span>
                </div>
                <div className="last-session-actions">
                  {lastSession.url ? (
                    <a
                      href={lastSession.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="primary-button"
                    >
                      <Icon name="external" size="sm" />
                      Open
                    </a>
                  ) : (
                    <button className="primary-button" onClick={handleResumeLast} type="button">
                      <Icon name="play" size="sm" />
                      Resume
                    </button>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Active Sessions */}
          <div className={`active-sessions-section ${loadingSessionId ? "dimmed" : ""}`}>
            {loadingSessionId && (
              <div className="loading-overlay">
                <div className="loading-content">
                  <Icon name="loading" size="lg" />
                  <p>{loadingAction}</p>
                </div>
              </div>
            )}
            <h2>
              Active Sessions
              {activeSessions.length > 0 && (
                <span className="badge">{activeSessions.length}</span>
              )}
            </h2>
            {activeSessions.length === 0 ? (
              <p className="muted">No active sessions</p>
            ) : (
              <div className="sessions-grid">
                {activeSessions.map((session) => {
                  const isTerminalOnly = session.tool_type_interfaces?.includes("terminal") && !session.tool_type_interfaces?.includes("web");
                  return (
                  <div className="card session-card" key={session.id}>
                    <div className="session-info">
                      <h4>{session.display_name}</h4>
                      <p className="muted">
                        {session.tool_type_name} · {session.project_name}
                      </p>
                      {session.created_at && (
                        <p className="session-meta">
                          Started: {new Date(session.created_at).toLocaleString()}
                        </p>
                      )}
                      {session.clone_mode && (
                        <p className="session-meta">
                          Repo: {session.clone_mode === "clone" ? `clone (${session.branch || "main"})` : "mount"}
                        </p>
                      )}
                      {session.url && (
                        <p className="session-url">
                          <a href={session.url} target="_blank" rel="noopener noreferrer">
                            {session.url}
                          </a>
                        </p>
                      )}
                      <span className={`status-badge ${session.status}`}>{session.status}</span>
                      {session.status === "starting" && (
                        <span className="status-badge starting">starting...</span>
                      )}
                      {session.status === "probing" && (
                        <span className="status-badge probing">checking...</span>
                      )}
                      {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
                        <span className="status-badge error">tunnel error</span>
                      )}
                      {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "error_response" && (
                        <span className="status-badge warning">app error ({tunnelHealth[session.id].tunnel_status_code})</span>
                      )}
                      {!isTerminalOnly && tunnelHealth[session.id]?.probe_status && tunnelHealth[session.id]?.probe_status !== "not_applicable" && (
                        <div className="probe-output-section">
                          <button
                            className={`probe-toggle probe-${tunnelHealth[session.id].probe_status}`}
                            onClick={() => setExpandedProbeId(expandedProbeId === session.id ? null : session.id)}
                            type="button"
                          >
                            <Icon name="info" size="sm" />
                            Probe: {tunnelHealth[session.id].probe_status}
                            {expandedProbeId === session.id ? " (hide)" : " (show)"}
                          </button>
                          {expandedProbeId === session.id && tunnelHealth[session.id]?.last_probe_output && (
                            <pre className="probe-output">
                              {tunnelHealth[session.id].last_probe_output}
                            </pre>
                          )}
                        </div>
                      )}
                    </div>
                    <div className="session-actions">
                      {session.url ? (
                        <a
                          href={session.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="secondary-button small"
                        >
                          <Icon name="external" size="sm" />
                          Open
                        </a>
                      ) : (
                        <button
                          className="secondary-button small"
                          onClick={() => handleOpen(session)}
                          type="button"
                        >
                          <Icon name="external" size="sm" />
                          Open
                        </button>
                      )}
                      {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
                        <button
                          className="secondary-button small"
                          onClick={() => void handleRecreateTunnel(session)}
                          type="button"
                          disabled={recreatingId === session.id}
                        >
                          <Icon name="refresh" size="sm" />
                          {recreatingId === session.id ? "Recreating..." : "Recreate Tunnel"}
                        </button>
                      )}
                      {stopConfirmId === session.id ? (
                        <div className="stop-confirm-inline">
                          <span className="confirm-text">Stop?</span>
                          <button
                            className="danger-button small"
                            onClick={() =>
                              void handleStop(
                                session.id,
                                session.project_id,
                                session.repository_id
                              )
                            }
                            type="button"
                          >
                            Stop
                          </button>
                          <button
                            className="ghost-button small"
                            onClick={() => setStopConfirmId(null)}
                            type="button"
                          >
                            Cancel
                          </button>
                        </div>
                      ) : (
                        <button
                          className="secondary-button small"
                          onClick={() => setStopConfirmId(session.id)}
                          type="button"
                        >
                          <Icon name="stop" size="sm" />
                          Stop
                        </button>
                      )}
                      {deleteConfirmId === session.id ? (
                        <div className="delete-confirm-inline">
                          <button
                            className="danger-button small"
                            onClick={() =>
                              void handleDelete(
                                session.id,
                                session.project_id,
                                session.repository_id
                              )
                            }
                            type="button"
                          >
                            Delete
                          </button>
                          <button
                            className="ghost-button small"
                            onClick={() => setDeleteConfirmId(null)}
                            type="button"
                          >
                            Cancel
                          </button>
                        </div>
                      ) : (
                        <button
                          className="ghost-button small danger-text"
                          onClick={() => setDeleteConfirmId(session.id)}
                          type="button"
                        >
                          <Icon name="delete" size="sm" />
                        </button>
                      )}
                    </div>
                  </div>
                )})}
              </div>
            )}
          </div>

          {/* Recent Sessions */}
          {recentSessions.length > 0 && (
            <div className="recent-sessions-section">
              <h2>Recent Sessions</h2>
              <div className="recent-sessions-list">
                {recentSessions.map((session) => (
                  <div className="recent-session-item" key={session.id}>
                    <div className="recent-session-info">
                      <span className="recent-session-name">{session.display_name}</span>
                      <span className="muted">
                        {session.tool_type_name} · {session.project_name}
                      </span>
                    </div>
                    <div className="recent-session-actions">
                      {session.url ? (
                        <a
                          href={session.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="ghost-button small"
                        >
                          Open
                        </a>
                      ) : (
                        <button
                          className="ghost-button small"
                          onClick={() => handleOpen(session)}
                          type="button"
                        >
                          Open
                        </button>
                      )}
                      {deleteConfirmId === session.id ? (
                        <div className="delete-confirm-inline">
                          <button
                            className="danger-button small"
                            onClick={() =>
                              void handleDelete(
                                session.id,
                                session.project_id,
                                session.repository_id
                              )
                            }
                            type="button"
                          >
                            Delete
                          </button>
                          <button
                            className="ghost-button small"
                            onClick={() => setDeleteConfirmId(null)}
                            type="button"
                          >
                            Cancel
                          </button>
                        </div>
                      ) : (
                        <button
                          className="ghost-button small danger-text"
                          onClick={() => setDeleteConfirmId(session.id)}
                          type="button"
                        >
                          <Icon name="delete" size="sm" />
                        </button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Create Session */}
          <div className="create-session-section">
            <h2>Create New Session</h2>
            <CreateSessionForm
              projects={projects}
              repositories={repositories}
              toolTypes={toolTypes}
              onProjectChange={(projectId) => {
                setSelectedProject(projectId);
              }}
              onSuccess={handleCreateSuccess}
            />
          </div>

          {/* Dirty Delete Confirmation Modal */}
          {dirtyDeleteSession && (
            <div className="modal-overlay" onClick={() => setDirtyDeleteSession(null)}>
              <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <h3>Uncommitted Changes</h3>
                <p>
                  The repository <strong>{dirtyDeleteSession.repository_name}</strong> has
                  uncommitted changes. Deleting this session will permanently lose these
                  changes.
                </p>
                <div className="changed-files-list">
                  <h4>Changed files:</h4>
                  <ul>
                    {dirtyDeleteFiles.map((file, idx) => (
                      <li key={idx}>{file}</li>
                    ))}
                  </ul>
                </div>
                <div className="modal-actions">
                  <button
                    className="secondary-button"
                    onClick={() => setDirtyDeleteSession(null)}
                    type="button"
                  >
                    Cancel
                  </button>
                  <button
                    className="danger-button"
                    onClick={() =>
                      void handleDelete(
                        dirtyDeleteSession.id,
                        dirtyDeleteSession.project_id,
                        dirtyDeleteSession.repository_id,
                        true
                      )
                    }
                    type="button"
                  >
                    Force Delete
                  </button>
                </div>
              </div>
            </div>
          )}
        </>
      )}
    </section>
  );
};