import { useEffect, useRef, useState } from 'react'
import { Button } from '../ui'
import { statusItems } from '../../lib/financeView'
import { noticeProps } from '../../lib/financeUi'

/**
 * Block 0: Stand von Bank und Stripe in einer Zeile und der Knopf „Aktualisieren“.
 * onRefresh() ruft den Bankabruf und lädt die Übersicht neu; wirft er (z. B. 429 „Bitte in N Minuten erneut
 * versuchen.“), erscheint die Meldung des Servers als Hinweis unter der Zeile.
 */
export default function StatusLine({ stand, onRefresh, refreshing = false }) {
  const [hint, setHint] = useState(null) // { text, limited }
  const aliveRef = useRef(true)
  useEffect(() => {
    aliveRef.current = true
    return () => {
      aliveRef.current = false
    }
  }, [])

  const items = statusItems(stand)

  async function handleRefresh() {
    setHint(null)
    try {
      await onRefresh()
    } catch (err) {
      if (aliveRef.current) {
        setHint({ text: err?.message || 'Der Abruf ist fehlgeschlagen.', limited: err?.status === 429 })
      }
    }
  }

  return (
    <div className="fin-status-wrap">
      <div className="fin-status">
        <div className="fin-status-items">
          {items.map((item) => (
            <span key={item.key} className={`fin-status-item${item.ok ? '' : ' fin-status-warn'}`}>
              {item.text}
            </span>
          ))}
        </div>
        <Button onClick={handleRefresh} disabled={refreshing}>
          {refreshing ? 'Aktualisiere …' : 'Aktualisieren'}
        </Button>
      </div>
      {hint && <p {...noticeProps(hint.limited ? 'info' : 'warn', 'fin-notice')}>{hint.text}</p>}
    </div>
  )
}