import { useState } from "react";
import {
  Button,
  Card,
  Center,
  PasswordInput,
  Stack,
  Text,
  TextInput,
  ThemeIcon,
  Title,
} from "@mantine/core";
import { IconShieldLock, IconKey } from "@tabler/icons-react";
import { api, ApiError } from "./api";
import type { User } from "./types";

export function Login({ onLogin }: { onLogin: (u: User) => void }) {
  const [handle, setHandle] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const ready = handle.trim().length > 0 && password.length > 0;
  const connect = async () => {
    if (!ready || busy) return;
    setBusy(true);
    setError(null);
    try {
      // La contraseña desbloquea la sesión del gateway (passphrase del operador).
      // El handle es solo el nombre a mostrar en esta iteración (wallet = fase 2).
      const me = await api.login(password);
      const h = handle.trim() || me.endpoint.slice(0, 8);
      onLogin({ id: me.endpoint, handle: h });
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "No se pudo conectar al gateway");
      setBusy(false);
    }
  };

  return (
    <Center h="100vh" bg="dark.9">
      <Card w={380} p="xl" radius="lg" withBorder bg="dark.7">
        <Stack align="center" gap="lg">
          <ThemeIcon size={60} radius="xl" variant="light" color="brand">
            <IconShieldLock size={32} />
          </ThemeIcon>
          <Stack gap={2} align="center">
            <Title order={2}>unibus</Title>
            <Text c="dimmed" size="sm">
              Mensajería cifrada de extremo a extremo
            </Text>
          </Stack>
          <TextInput
            w="100%"
            label="Identidad"
            placeholder="tu-handle"
            value={handle}
            onChange={(e) => setHandle(e.currentTarget.value)}
            onKeyDown={(e) => e.key === "Enter" && connect()}
            data-autofocus
          />
          <PasswordInput
            w="100%"
            label="Contraseña"
            description="Desbloquea tu identidad cifrada en este dispositivo"
            placeholder="••••••••"
            leftSection={<IconKey size={16} />}
            value={password}
            onChange={(e) => setPassword(e.currentTarget.value)}
            onKeyDown={(e) => e.key === "Enter" && void connect()}
          />
          {error && (
            <Text c="red" size="sm" ta="center">
              {error}
            </Text>
          )}
          <Button
            w="100%"
            size="md"
            onClick={() => void connect()}
            disabled={!ready}
            loading={busy}
          >
            Conectar
          </Button>
        </Stack>
      </Card>
    </Center>
  );
}