import * as React from 'react'
import { useState } from 'react'
import { Box, Link, Text } from '../ink.js'
import { saveNvidiaApiKey } from '../utils/auth.js'
import { Spinner } from './Spinner.js'
import TextInput from './TextInput.js'

type NvidiaLoginFlowProps = {
  onDone: () => void
  startingMessage?: string
}

export function NvidiaLoginFlow({
  onDone,
  startingMessage,
}: NvidiaLoginFlowProps): React.ReactNode {
  const [isBusy, setIsBusy] = useState(false)
  const [status, setStatus] = useState<string | null>(null)
  const [inputValue, setInputValue] = useState('')
  const [cursorOffset, setCursorOffset] = useState(0)

  async function handleSubmit(value: string): Promise<void> {
    const trimmed = value.trim()
    if (!trimmed) {
      return
    }

    setIsBusy(true)
    setStatus(null)
    try {
      await saveNvidiaApiKey(trimmed)
      onDone()
    } catch (error) {
      setStatus(error instanceof Error ? error.message : String(error))
    } finally {
      setIsBusy(false)
    }
  }

  if (isBusy) {
    return (
      <Box flexDirection="column" gap={1}>
        <Box>
          <Spinner />
          <Text>Configuring NVIDIA NIM for Mervelas...</Text>
        </Box>
        <Text dimColor={true}>
          Mervelas is connecting to NVIDIA inference microservices.
        </Text>
      </Box>
    )
  }

  return (
    <Box flexDirection="column" gap={1}>
      <Text>
        {startingMessage ??
          'Mervelas can use NVIDIA NIM with your NVIDIA API key.'}
      </Text>
      <Text dimColor={true}>
        NVIDIA NIM offers many free AI models. You need an NVIDIA Developer account to get started.
      </Text>
      <Text dimColor={true}>
        Create a key at <Link url="https://build.nvidia.com/">build.nvidia.com</Link> to use NVIDIA's endpoint.
      </Text>
      <Box>
        <Text>Paste your NVIDIA API key:</Text>
        <TextInput
          value={inputValue}
          onChange={setInputValue}
          onSubmit={handleSubmit}
          onExit={() => {
            setInputValue('')
            setCursorOffset(0)
          }}
          cursorOffset={cursorOffset}
          onChangeCursorOffset={setCursorOffset}
          columns={72}
          mask="*"
        />
      </Box>
      {status ? <Text color="error">{status}</Text> : null}
      <Text dimColor={true}>
        Press <Text bold={true}>Enter</Text> to save, or <Text bold={true}>Esc</Text>{' '}
        to cancel.
      </Text>
    </Box>
  )
}