unibus/web/src/components/ConnectScreen.tsx

import { useState } from "react";
import {
  Button,
  Card,
  Center,
  Group,
  Stack,
  Text,
  TextInput,
  Title,
  Alert,
  ThemeIcon,
} from "@mantine/core";
import { IconBolt, IconPlugConnected, IconAlertTriangle } from "@tabler/icons-react";
import { GatewayClient } from "../api";
import type { Peer } from "../types";

const LS_GATEWAY = "unibus.gateway";
const LS_PEER = "unibus.peer";

interface Props {
  onConnect: (client: GatewayClient, peer: Peer) => void;
}

// ConnectScreen asks for the gateway URL and the identity (peer name) to connect
// as. Both persist in localStorage so a reload reconnects with one click. The
// gateway hosts the real Go bus peer; the browser only drives it.
export function ConnectScreen({ onConnect }: Props) {
  const [gateway, setGateway] = useState(
    () => localStorage.getItem(LS_GATEWAY) ?? "http://localhost:7700",
  );
  const [name, setName] = useState(() => localStorage.getItem(LS_PEER) ?? "");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const connect = async () => {
    const trimmed = name.trim();
    if (!trimmed) {
      setError("Elige un nombre de identidad");
      return;
    }
    setBusy(true);
    setError(null);
    try {
      const client = new GatewayClient(gateway.trim());
      const peer = await client.connect(trimmed);
      localStorage.setItem(LS_GATEWAY, client.baseURL);
      localStorage.setItem(LS_PEER, trimmed);
      onConnect(client, peer);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <Center h="100vh" p="md">
      <Card withBorder shadow="md" radius="lg" p="xl" w={420} maw="100%">
        <Stack gap="lg">
          <Group gap="sm">
            <ThemeIcon size="xl" radius="md" variant="light" color="violet">
              <IconBolt size={26} />
            </ThemeIcon>
            <div>
              <Title order={3}>unibus</Title>
              <Text size="sm" c="dimmed">
                chat cifrado extremo a extremo sobre NATS
              </Text>
            </div>
          </Group>

          <TextInput
            label="Gateway"
            description="URL del gateway web de unibus"
            placeholder="http://localhost:7700"
            value={gateway}
            onChange={(e) => setGateway(e.currentTarget.value)}
            disabled={busy}
          />
          <TextInput
            label="Identidad"
            description="Tu nombre de peer en el bus (persistente)"
            placeholder="ana"
            value={name}
            onChange={(e) => setName(e.currentTarget.value)}
            onKeyDown={(e) => e.key === "Enter" && connect()}
            disabled={busy}
            data-autofocus
          />

          {error && (
            <Alert
              color="red"
              variant="light"
              icon={<IconAlertTriangle size={18} />}
              title="No se pudo conectar"
            >
              {error}
            </Alert>
          )}

          <Button
            leftSection={<IconPlugConnected size={18} />}
            onClick={connect}
            loading={busy}
            fullWidth
            size="md"
          >
            Conectar
          </Button>
        </Stack>
      </Card>
    </Center>
  );
}