<script lang="ts">
  import * as Card from '$lib/components/ui/card'
  import * as Tabs from '$lib/components/ui/tabs'
  import { Input } from '$lib/components/ui/input'
  import { Label } from '$lib/components/ui/label'
  import { Button } from '$lib/components/ui/button'
  import { fetchWithAuth, setConfig, initConfig, getConfig, clearConfig } from '$lib/config'

  let { onConnected, onCancel }: { onConnected: () => void; onCancel?: () => void } = $props()

  const existing = getConfig()
  let apiUrl = $state(existing.apiUrl ?? '')
  let token = $state(existing.token ?? '')
  let connecting = $state(false)
  let error = $state('')

  function disconnect() {
    clearConfig()
    apiUrl = ''
    token = ''
    error = ''
  }

  async function connect() {
    error = ''
    if (!token.trim()) {
      error = 'Token is required'
      return
    }
    connecting = true
    setConfig({ apiUrl: apiUrl.trim(), token: token.trim() })
    initConfig({ apiUrl: apiUrl.trim(), token: token.trim() })
    try {
      const res = await fetchWithAuth('/api/v1/dashboard/summary')
      if (!res.ok) {
        error = res.status === 401 ? 'Invalid token' : `Server responded ${res.status}`
        return
      }
      onConnected()
    } catch (e) {
      error = 'Could not reach server — check the URL'
    } finally {
      connecting = false
    }
  }
</script>

<div class="flex h-svh items-center justify-center p-6">
  <Card.Root class="w-full max-w-md">
    <Card.Header>
      <Card.Title>Connect to Oikos</Card.Title>
      <Card.Description>Enter the server URL and your access token.</Card.Description>
    </Card.Header>
    <Card.Content>
      <Tabs.Root value="token">
        <Tabs.List class="mb-4 grid w-full grid-cols-2">
          <Tabs.Trigger value="token">Token</Tabs.Trigger>
          <Tabs.Trigger value="oidc" disabled>Login with Authentik (coming soon)</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="token">
          <form class="flex flex-col gap-4" onsubmit={(e) => { e.preventDefault(); connect() }}>
            <div class="flex flex-col gap-1.5">
              <Label for="server-url">Server URL</Label>
              <Input
                id="server-url"
                type="url"
                placeholder="https://oikos.hubris.network (leave blank if same-origin)"
                bind:value={apiUrl}
              />
            </div>
            <div class="flex flex-col gap-1.5">
              <Label for="token">Token</Label>
              <Input id="token" type="password" placeholder="bearer token" bind:value={token} />
            </div>
            {#if error}
              <p class="text-sm text-destructive">{error}</p>
            {/if}
            <div class="flex gap-2">
              <Button type="submit" disabled={connecting} class="flex-1">
                {connecting ? 'Connecting…' : 'Connect'}
              </Button>
              {#if onCancel}
                <Button type="button" variant="outline" onclick={onCancel}>Cancel</Button>
              {/if}
            </div>
            {#if existing.token}
              <Button type="button" variant="ghost" size="sm" onclick={disconnect}>
                Forget saved connection
              </Button>
            {/if}
          </form>
        </Tabs.Content>
      </Tabs.Root>
    </Card.Content>
  </Card.Root>
</div>
