import { useId, useState } from 'react'
import { Stat } from '../ui'
import { euroWhole } from '../../lib/financeFormat'
import { breakdownRows, lowPointLines } from '../../lib/financeView'
import { isNegText } from '../../lib/financeUi'

const isNum = (v) => typeof v === 'number' && Number.isFinite(v)

/** Block 1: Kontostand, „Verfügbar nach Rücklagen“ (mit Aufschlüsselung) und „Tiefster Stand in 30 Tagen“. */
export default function LiquidityHead({ kopf }) {
  const k = kopf && typeof kopf === 'object' ? kopf : {}
  const [open, setOpen] = useState(false)
  const listId = useId()

  const hasBalance = isNum(k.kontostandCents)
  const shortfall = isNum(k.verfuegbarCents) && k.verfuegbarCents < 0
  const lows = lowPointLines(k)
  const balanceText = euroWhole(k.kontostandCents)

  return (
    <div className="stats fin-head">
      <Stat
        label="Kontostand"
        value={balanceText}
        tone={isNegText(balanceText) ? 'neg' : ''}
        sub={hasBalance ? 'gebucht' : 'Noch kein Kontostand abgerufen'}
      />

      <Stat
        label="Verfügbar nach Rücklagen"
        value={euroWhole(k.verfuegbarCents)}
        tone={shortfall ? 'neg' : ''}
        sub={
          <>
            {shortfall && <div className="fin-flag">Rücklagen nicht gedeckt</div>}
            {isNum(k.verfuegbarCents) && (
              <>
                <button
                  type="button"
                  className="link"
                  aria-expanded={open}
                  aria-controls={listId}
                  onClick={() => setOpen((v) => !v)}
                >
                  Aufschlüsselung <span aria-hidden="true">{open ? '▴' : '▾'}</span>
                </button>
                {open && (
                  <ul id={listId} className="fin-breakdown">
                    {breakdownRows(k.aufschluesselung, k.verfuegbarCents).map((row) => (
                      <li key={row.key} className={row.total ? 'fin-breakdown-total' : undefined}>
                        <span>{row.label}</span>
                        <span className="fin-amount">{row.text}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </>
            )}
            {!isNum(k.verfuegbarCents) && <div>Ohne Kontostand nicht berechenbar</div>}
          </>
        }
      />

      <Stat
        label="Tiefster Stand in 30 Tagen"
        value={
          lows.some(Boolean) ? (
            <div className="fin-lows">
              {lows.map(
                (low) =>
                  low && (
                    <div key={low.key} className="fin-low">
                      <span className="fin-low-label">{low.label}:</span>
                      <span className={`fin-amount${low.negative ? ' fin-neg' : ''}`}>{low.amountText}</span>
                      <span className="fin-low-when">
                        am {low.dateText}
                        {low.negative && <span className="fin-flag"> · im Minus</span>}
                      </span>
                    </div>
                  )
              )}
            </div>
          ) : (
            '–'
          )
        }
        sub={lows.some(Boolean) ? '„erwartet“ zählt offene Rechnungen und Abos dazu' : 'Ohne Kontostand nicht berechenbar'}
      />
    </div>
  )
}