'use client'

import { Button } from '@/components/ui/button'

/**
 * Progressive OAuth scope upgrade prompt.
 *
 * Login grants base scopes only (blocking + FlockOff event records). List
 * features (share-as-list, List Editor, subscriptions) need three additional
 * scopes. Gated API routes return a structured 403 — detect it with
 * isInsufficientScope() and render this prompt, which sends the user through
 * /api/oauth/upgrade and back to the current page.
 */

export function isInsufficientScope(data: unknown): boolean {
  return (
    !!data &&
    typeof data === 'object' &&
    (data as { error?: string }).error === 'insufficient_scope'
  )
}

export function scopeUpgradeUrl(): string {
  const returnTo = `${window.location.pathname}${window.location.search}`
  return `/api/oauth/upgrade?return_to=${encodeURIComponent(returnTo)}`
}

interface ScopeUpgradePromptProps {
  /** What the user was trying to do, e.g. "share this block event as a list" */
  action: string
  onCancel: () => void
}

export function ScopeUpgradePrompt({ action, onCancel }: ScopeUpgradePromptProps) {
  return (
    <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4 flex flex-col gap-3">
      <div>
        <p className="text-sm font-medium text-amber-300">Additional permission needed</p>
        <p className="text-xs text-amber-400/70 mt-1">
          To {action}, FlockOff needs permission to manage block lists on your account.
          You&apos;ll be sent to your account provider to approve, then brought right back here.
          After you return, repeat this action to finish it.
        </p>
      </div>
      <div className="flex gap-2">
        <Button variant="outline" size="sm" onClick={onCancel}>
          Cancel
        </Button>
        <Button
          size="sm"
          onClick={() => {
            window.location.href = scopeUpgradeUrl()
          }}
        >
          Continue to approval
        </Button>
      </div>
    </div>
  )
}