import { Badge, Card, EmptyState, Stat } from '../ui'
import { aboView } from '../../lib/financeView'
import { isNegText } from '../../lib/financeUi'

/**
 * Block 5: „Abos“. Einnahmen pro Monat (aktiv und Zahlung fehlgeschlagen), zahlende Kunden, gefährdete Einnahmen
 * (nur wenn > 0) und die Liste Kunde · Produkt · Status · Betrag · nächste Abbuchung. Konnten die Abos nicht
 * geladen werden, steht stattdessen die Meldung des Servers da (keine Zahlen).
 */
export default function AboCard({ abos }) {
  const v = aboView(abos)

  if (v.error) {
    return (
      <Card title="Abos">
        <div className="fin-body">
          <p className="msg warn" role="alert">
            {v.error}
          </p>
        </div>
      </Card>
    )
  }

  return (
    <Card title="Abos">
      <div className="fin-body">
        <div className="stats fin-abo-stats">
          <Stat label="Abo-Einnahmen pro Monat" value={v.monthlyText} tone={isNegText(v.monthlyText) ? 'neg' : ''} />
          <Stat label="zahlende Kunden" value={v.payingText} />
          {v.atRiskText && <Stat label="gefährdet" value={v.atRiskText} tone="neg" />}
        </div>

        {v.rows.length === 0 ? (
          <EmptyState title="Noch keine Abos." />
        ) : (
          <ul className="fin-abos">
            {v.rows.map((row) => (
              <li key={row.key} className="fin-abo">
                <div className="fin-abo-main">
                  <span className="fin-abo-customer">{row.customer}</span>
                  <span className="fin-abo-product muted"> · {row.product}</span>
                </div>
                <div className={`fin-amount fin-abo-amount${isNegText(row.amountText) ? ' fin-neg' : ''}`}>{row.amountText}</div>
                <div className="fin-abo-meta">
                  <Badge tone={row.tone}>{row.statusLabel}</Badge>
                  <span className="fin-abo-next muted">nächste Abbuchung: {row.nextText}</span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </Card>
  )
}