import { useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import CreditList from './CreditList'
import CreditDetail from './CreditDetail'

/**
 * Gutschriften: Liste und Antrag (Adresse ?antrag=<id>, andere Parameter wie ?tab= bleiben). Sammelliste unter
 * Kunden -> Gutschriften und Reiter "Gutschriften" auf der Kundenseite (mit customerId).
 */
export default function CreditsView({ customerId }) {
  const [params, setParams] = useSearchParams()
  const selected = params.get('antrag') || ''
  const [reloadKey, setReloadKey] = useState(0)

  const select = (id) =>
    setParams((prev) => {
      const next = new URLSearchParams(prev)
      if (id) next.set('antrag', id)
      else next.delete('antrag')
      return next
    })

  return (
    <div className="credits-view">
      {selected && (
        <div style={{ marginBottom: 16 }}>
          <CreditDetail key={selected} id={selected} onClose={() => select('')} onOpen={select} onChanged={() => setReloadKey((k) => k + 1)} />
        </div>
      )}
      <CreditList customerId={customerId} selectedId={selected} onSelect={select} reloadKey={reloadKey} />
    </div>
  )
}