Momento/memento-note/components/ai/byok-settings-panel.tsx

'use client'

import { useCallback, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { KeyRound, Loader2, Shield, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { cn } from '@/lib/utils'

type PublicKey = {
  provider: string
  alias: string
  model: string | null
  isActive: boolean
  lastUsedAt: string | null
}

async function fetchByokKeys(): Promise<{
  keys: PublicKey[]
  allowedProviders: string[]
}> {
  const res = await fetch('/api/user/api-keys')
  if (!res.ok) {
    const body = await res.json().catch(() => ({}))
    throw new Error(body.message || body.error || 'Failed to load keys')
  }
  return res.json()
}

function providerLabel(t: (key: string) => string, provider: string): string {
  const key = `byokSettings.providers.${provider}`
  const translated = t(key)
  return translated === key ? provider : translated
}

export function ByokSettingsPanel() {
  const { t } = useLanguage()
  const queryClient = useQueryClient()
  const [provider, setProvider] = useState('')
  const [apiKey, setApiKey] = useState('')
  const [alias, setAlias] = useState('')

  const { data, isLoading, error } = useQuery({
    queryKey: ['user', 'api-keys'],
    queryFn: fetchByokKeys,
  })

  const invalidate = useCallback(() => {
    queryClient.invalidateQueries({ queryKey: ['user', 'api-keys'] })
    queryClient.invalidateQueries({ queryKey: ['usage', 'current'] })
  }, [queryClient])

  const saveMutation = useMutation({
    mutationFn: async () => {
      const res = await fetch('/api/user/api-keys', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ provider, apiKey, alias: alias || undefined }),
      })
      const body = await res.json().catch(() => ({}))
      if (!res.ok) {
        throw new Error(body.message || body.error || 'Save failed')
      }
      return body
    },
    onSuccess: () => {
      toast.success(t('byokSettings.saved'))
      setApiKey('')
      setAlias('')
      setProvider('')
      invalidate()
    },
    onError: (err: Error) => {
      toast.error(err.message || t('byokSettings.error'))
    },
  })

  const toggleMutation = useMutation({
    mutationFn: async ({
      provider: p,
      isActive,
    }: {
      provider: string
      isActive: boolean
    }) => {
      const res = await fetch(`/api/user/api-keys/${encodeURIComponent(p)}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive }),
      })
      if (!res.ok) throw new Error('Update failed')
    },
    onSuccess: invalidate,
    onError: () => toast.error(t('byokSettings.error')),
  })

  const deleteMutation = useMutation({
    mutationFn: async (p: string) => {
      const res = await fetch(`/api/user/api-keys/${encodeURIComponent(p)}`, {
        method: 'DELETE',
      })
      if (!res.ok) throw new Error('Delete failed')
    },
    onSuccess: () => {
      toast.success(t('byokSettings.deleted'))
      invalidate()
    },
    onError: () => toast.error(t('byokSettings.error')),
  })

  const allowed = data?.allowedProviders ?? []
  const keys = data?.keys ?? []
  const hasActiveByok = keys.some((k) => k.isActive)
  const tierBlocked = !isLoading && allowed.length === 0

  if (isLoading) {
    return (
      <div className="flex items-center gap-2 text-sm text-muted-foreground p-5">
        <Loader2 className="h-4 w-4 animate-spin" />
        {t('byokSettings.loading')}
      </div>
    )
  }

  if (error) {
    return (
      <p className="text-sm text-destructive p-5">{t('byokSettings.loadError')}</p>
    )
  }

  return (
    <div
      id="byok"
      className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 scroll-mt-6 space-y-6"
    >
      <div className="flex items-start gap-5">
        <div className="p-3 bg-violet-500/10 rounded-2xl text-violet-500 border border-violet-500/20">
          <KeyRound size={18} />
        </div>
        <div className="space-y-1">
          <h3 className="text-[13px] font-bold text-ink flex items-center gap-2 flex-wrap">
            {t('byokSettings.title')}
            {hasActiveByok && (
              <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 text-[10px] font-medium">
                <Shield size={10} />
                {t('byokSettings.badgeActive')}
              </span>
            )}
          </h3>
          <p className="text-[10px] text-concrete leading-relaxed">{t('byokSettings.description')}</p>
        </div>
      </div>

      {tierBlocked ? (
        <p className="text-[11px] text-amber-600 dark:text-amber-400 bg-amber-500/10 rounded-xl px-4 py-3">
          {t('byokSettings.tierRequired')}
        </p>
      ) : (
        <div className="space-y-4 border border-border/60 rounded-2xl p-6">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="byok-provider" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.provider')}</Label>
              <Select
                value={provider}
                onValueChange={setProvider}
                disabled={saveMutation.isPending}
              >
                <SelectTrigger id="byok-provider">
                  <SelectValue placeholder={t('byokSettings.providerPlaceholder')} />
                </SelectTrigger>
                <SelectContent>
                  {allowed.map((p) => (
                    <SelectItem key={p} value={p}>
                      {providerLabel(t, p)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="byok-alias" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.alias')}</Label>
              <Input
                id="byok-alias"
                value={alias}
                onChange={(e) => setAlias(e.target.value)}
                placeholder={t('byokSettings.aliasPlaceholder')}
                disabled={saveMutation.isPending}
              />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="byok-key" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.apiKey')}</Label>
            <Input
              id="byok-key"
              type="password"
              autoComplete="off"
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder={t('byokSettings.apiKeyPlaceholder')}
              disabled={saveMutation.isPending}
            />
          </div>
          <button
            type="button"
            disabled={!provider || apiKey.length < 8 || saveMutation.isPending}
            onClick={() => saveMutation.mutate()}
            className={cn(
              'px-6 py-3 rounded-2xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-300',
              'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
              'disabled:opacity-40 disabled:pointer-events-none disabled:shadow-none'
            )}
          >
            <div className="flex items-center justify-center gap-2">
              {saveMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
              {t('byokSettings.save')}
            </div>
          </button>
        </div>
      )}

      {keys.length > 0 && (
        <ul className="space-y-3">
          {keys.map((key) => (
            <li
              key={key.provider}
              className="flex items-center justify-between gap-3 rounded-2xl border border-border/60 px-4 py-3"
            >
              <div className="min-w-0">
                <div className="text-[13px] font-bold text-ink">{providerLabel(t, key.provider)}</div>
                {key.alias ? (
                  <p className="text-[10px] text-concrete truncate">{key.alias}</p>
                ) : null}
              </div>
              <div className="flex items-center gap-3 shrink-0">
                <label className="relative inline-flex items-center cursor-pointer">
                  <input
                    type="checkbox"
                    className="sr-only peer"
                    checked={key.isActive}
                    onChange={(e) => toggleMutation.mutate({ provider: key.provider, isActive: e.target.checked })}
                    disabled={toggleMutation.isPending}
                  />
                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-brand-accent" />
                </label>
                <button
                  type="button"
                  className="h-8 w-8 rounded-lg flex items-center justify-center text-destructive/60 hover:text-destructive hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors"
                  disabled={deleteMutation.isPending}
                  onClick={() => {
                    if (confirm(t('byokSettings.confirmDelete'))) {
                      deleteMutation.mutate(key.provider)
                    }
                  }}
                >
                  <Trash2 size={14} />
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}

      {!tierBlocked && keys.length === 0 && (
        <p className="text-[11px] text-concrete">{t('byokSettings.empty')}</p>
      )}
    </div>
  )
}