import { useState } from "react";
import { GatewayClient } from "./api";
import type { Peer } from "./types";
import { ConnectScreen } from "./components/ConnectScreen";
import { ChatLayout } from "./components/ChatLayout";

// Connection holds the live gateway client plus the identity it connected as.
interface Connection {
  client: GatewayClient;
  peer: Peer;
}

// App is the root: it shows the connect screen until the user picks a gateway
// URL and a peer name, then swaps to the full chat layout. Disconnecting drops
// back to the connect screen.
export function App() {
  const [conn, setConn] = useState<Connection | null>(null);

  if (!conn) {
    return <ConnectScreen onConnect={(client, peer) => setConn({ client, peer })} />;
  }
  return (
    <ChatLayout
      client={conn.client}
      peer={conn.peer}
      onDisconnect={() => setConn(null)}
    />
  );
}