EvoBGP/apps/web/src/components/settings/connection-settings-tab.tsx

import { Link, useNavigate } from '@tanstack/react-router'
import { useQueryClient } from '@tanstack/react-query'
import { Save } from 'lucide-react'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'

import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
import { Badge } from '@/components/reui/badge'
import { LoadingButton } from '@/components/loading-button'
import {
  DEV_API_TOKEN,
  normalizeApiToken,
  setToken,
  TOKEN_STORAGE_KEY,
} from '@/lib/api-client'
import { authKeys } from '@/queries/auth'
import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
import { Button } from '@evobgp/ui/components/button'
import { Input } from '@evobgp/ui/components/input'

export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolean }) {
  const navigate = useNavigate()
  const qc = useQueryClient()
  const [token, setTokenValue] = useState('')

  useEffect(() => {
    const stored = window.localStorage.getItem(TOKEN_STORAGE_KEY) ?? ''
    setTokenValue(stored)
  }, [])

  async function applyToken(raw: string) {
    const normalized = normalizeApiToken(raw)
    setToken(normalized || null)
    setTokenValue(normalized)
    await qc.invalidateQueries({ queryKey: authKeys.all })
    toast.success('Токен сохранён')
    if (normalized && tokenRequired) {
      void navigate({ to: '/dashboard' })
    }
  }

  function saveToken() {
    void applyToken(token)
  }

  function useDevToken() {
    void applyToken(DEV_API_TOKEN)
  }

  return (
    <div className="space-y-6">
      {tokenRequired ? (
        <Alert>
          <AlertDescription>
            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
            dev».
          </AlertDescription>
        </Alert>
      ) : null}

      <SettingsCard
        title="Подключение к API"
        description="Токен хранится только в этом браузере (localStorage)"
        footer={
          <div className="flex w-full flex-wrap justify-end gap-2">
            <Button type="button" variant="outline" onClick={useDevToken}>
              Использовать dev
            </Button>
            <LoadingButton onClick={saveToken}>
              <Save />
              Сохранить токен
            </LoadingButton>
          </div>
        }
      >
        <SettingsFieldGroup
          legend="API-токен"
          description="Параметры подключения браузера к EvoBGP API."
        >
          <SettingRow
            title="Токен для запросов"
            description={
              <>
                Ключ для заголовка <code className="text-xs">Authorization</code>. Управление
                ключами tenant — в разделе{' '}
                <Link to="/access" className="text-primary underline-offset-4 hover:underline">
                  Права доступа
                </Link>
                .
              </>
            }
            titleAddon={
              <Badge variant="outline" size="sm">
                localStorage
              </Badge>
            }
            labelFor="settings-token"
            last
          >
            <Input
              id="settings-token"
              type="password"
              autoComplete="off"
              value={token}
              onChange={(e) => setTokenValue(e.target.value)}
              placeholder="dev или API-ключ"
            />
          </SettingRow>
        </SettingsFieldGroup>
      </SettingsCard>
    </div>
  )
}