import { useState } from 'react'
import { FaArrowUpRightFromSquare, FaSpinner } from 'react-icons/fa6'
import { Button } from '../ui'
import { createKundenansichtLink } from '../../lib/teamApi'
import { openInNewTab } from '../../lib/openInNewTab'

/**
 * Kundenansicht im Portal in einem neuen Tab öffnen (Einmal-Link). Ohne Portal-Zugang ausgegraut.
 * checkAccess=false: Kunden-Dokument liegt nicht vor (z. B. Gutschrift-Detail), den Zugang prüft dann der Server (409).
 */
export default function KundenansichtButton({ customer, variant = 'primary', checkAccess = true }) {
  const [busy, setBusy] = useState(false)
  const hasAccess = !checkAccess || Boolean(customer?.portalAccessEnabled && customer?.appwriteUserId)

  const open = async () => {
    setBusy(true)
    try {
      await openInNewTab(() => createKundenansichtLink(customer.$id))
    } catch (err) {
      window.alert(err.message || 'Die Kundenansicht konnte nicht geöffnet werden.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <Button
      variant={variant}
      onClick={open}
      disabled={!hasAccess || busy}
      title={hasAccess ? 'Portal so öffnen, wie der Kunde es sieht' : 'Kein Portal-Zugang'}
    >
      {busy ? <FaSpinner className="spinner" /> : <FaArrowUpRightFromSquare />} Kundenansicht öffnen
    </Button>
  )
}