export type APIState =
  | { status: "connecting"; api: null; error: null }
  | { status: "connected"; api: APIClient; error: null }
  | { status: "reconnecting"; api: null; error: null; attempt: number }  // NEW
  | { status: "auth_required"; api: null; error: string | null }
  | { status: "error"; api: null; error: string };

const hasConnectedRef = useRef(false);

const reconnectAttemptRef = useRef(0);
const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const MAX_RECONNECT_ATTEMPTS = 10;
const BASE_DELAY_MS = 100;
const MAX_DELAY_MS = 10000;

const scheduleReconnect = useCallback(() => {
  const attempt = reconnectAttemptRef.current;
  if (attempt >= MAX_RECONNECT_ATTEMPTS) {
    setState({ status: "error", error: "Connection lost. Please refresh the page." });
    return;
  }

  const delay = Math.min(BASE_DELAY_MS * Math.pow(2, attempt), MAX_DELAY_MS);
  reconnectAttemptRef.current = attempt + 1;
  setState({ status: "reconnecting", api: null, error: null, attempt: attempt + 1 });

  reconnectTimeoutRef.current = setTimeout(() => {
    connect(authToken);
  }, delay);
}, [authToken, connect]);

ws.addEventListener("error", () => {
  cleanup();
  if (hasConnectedRef.current) {
    // Was connected before - try to reconnect
    scheduleReconnect();
  } else if (token) {
    // First connection failed with token - might be invalid
    clearStoredAuthToken();
    setState({ status: "auth_required", error: "Connection failed - invalid token?" });
  } else {
    // First connection failed without token - server might require auth
    setState({ status: "auth_required" });
  }
});

ws.addEventListener("close", (event) => {
  // Auth-specific close codes
  if (event.code === 1008 || event.code === 4401) {
    cleanup();
    clearStoredAuthToken();
    hasConnectedRef.current = false;  // Reset - need fresh auth
    setState({ status: "auth_required", error: "Authentication required" });
    return;
  }

  // Normal disconnection (server restart, network issue)
  if (hasConnectedRef.current) {
    cleanup();
    scheduleReconnect();
  }
});

.then(() => {
  hasConnectedRef.current = true;
  reconnectAttemptRef.current = 0;  // Reset backoff
  // ... existing code
})

useEffect(() => {
  connect(authToken);
  return () => {
    cleanupRef.current?.();
    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current);
    }
  };
}, []);

// Show auth modal if authentication is required
if (status === "auth_required") {
  return <AuthTokenModal isOpen={true} onSubmit={authenticate} error={error} />;
}

// Reconnecting is handled gracefully - app stays visible
// Optional: could add a subtle toast/indicator later

import { act, cleanup, render, waitFor } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
import { GlobalWindow } from "happy-dom";
import { APIProvider, useAPI } from "./API";

// Mock WebSocket that we can control
class MockWebSocket {
  static instances: MockWebSocket[] = [];
  url: string;
  readyState = 0; // CONNECTING
  onopen: (() => void) | null = null;
  onclose: ((event: { code: number }) => void) | null = null;
  onerror: (() => void) | null = null;
  eventListeners: Map<string, Function[]> = new Map();

  constructor(url: string) {
    this.url = url;
    MockWebSocket.instances.push(this);
  }

  addEventListener(event: string, handler: Function) {
    const handlers = this.eventListeners.get(event) || [];
    handlers.push(handler);
    this.eventListeners.set(event, handlers);
  }

  close() {
    this.readyState = 3; // CLOSED
  }

  // Test helpers
  simulateOpen() {
    this.readyState = 1; // OPEN
    this.eventListeners.get("open")?.forEach((h) => h());
  }

  simulateClose(code: number) {
    this.readyState = 3;
    this.eventListeners.get("close")?.forEach((h) => h({ code }));
  }

  simulateError() {
    this.eventListeners.get("error")?.forEach((h) => h());
  }

  static reset() {
    MockWebSocket.instances = [];
  }

  static lastInstance() {
    return MockWebSocket.instances[MockWebSocket.instances.length - 1];
  }
}

// Test component to observe API state
function APIStateObserver({ onState }: { onState: (state: ReturnType<typeof useAPI>) => void }) {
  const apiState = useAPI();
  onState(apiState);
  return null;
}

describe("API reconnection", () => {
  beforeEach(() => {
    const window = new GlobalWindow();
    globalThis.window = window as unknown as Window & typeof globalThis;
    globalThis.document = window.document;
    globalThis.WebSocket = MockWebSocket as unknown as typeof WebSocket;
    MockWebSocket.reset();
  });

  afterEach(() => {
    cleanup();
    MockWebSocket.reset();
  });

  test("reconnects on close without showing auth_required when previously connected", async () => {
    const states: string[] = [];
    
    render(
      <APIProvider>
        <APIStateObserver onState={(s) => states.push(s.status)} />
      </APIProvider>
    );

    // Initial connection
    const ws1 = MockWebSocket.lastInstance();
    expect(ws1).toBeDefined();
    
    // Simulate successful connection
    await act(async () => {
      ws1.simulateOpen();
      // Mock the ping succeeding (need to mock orpc client)
    });

    // Simulate server restart (close code 1006 = abnormal closure)
    await act(async () => {
      ws1.simulateClose(1006);
    });

    // Should be "reconnecting", NOT "auth_required"
    await waitFor(() => {
      expect(states).toContain("reconnecting");
      expect(states.filter((s) => s === "auth_required")).toHaveLength(0);
    });

    // New WebSocket should be created for reconnect attempt
    expect(MockWebSocket.instances.length).toBeGreaterThan(1);
  });

  test("shows auth_required on close with auth error codes (1008, 4401)", async () => {
    const states: string[] = [];
    
    render(
      <APIProvider>
        <APIStateObserver onState={(s) => states.push(s.status)} />
      </APIProvider>
    );

    const ws1 = MockWebSocket.lastInstance();
    
    // Simulate successful connection then auth rejection
    await act(async () => {
      ws1.simulateOpen();
      ws1.simulateClose(4401); // Auth required code
    });

    await waitFor(() => {
      expect(states).toContain("auth_required");
    });
  });

  test("shows error after max reconnect attempts exhausted", async () => {
    // Fast-forward timers for this test
    const states: string[] = [];
    
    render(
      <APIProvider>
        <APIStateObserver onState={(s) => states.push(s.status)} />
      </APIProvider>
    );

    // Simulate 10 failed reconnection attempts
    for (let i = 0; i < 11; i++) {
      const ws = MockWebSocket.lastInstance();
      await act(async () => {
        ws.simulateError();
      });
      // Advance timers for backoff delay
    }

    await waitFor(() => {
      expect(states).toContain("error");
    });
  });
});