import { useCallback, useEffect, useRef, useState } from 'react'
import { FaSpinner, FaArrowUpRightFromSquare } from 'react-icons/fa6'
import { Card, Badge, Button } from '../ui'
import KundenansichtButton from '../customer/KundenansichtButton'
import { applyCredit, calcCredit, decideCredit, getCredit } from '../../lib/teamApi'
import { applyMessage, BILLING_MONTHS, calcLine, creditStatus, decisionConfirm, decisionError, decisionMessage, fmtBytes, historyLabel } from '../../lib/creditFormat'
import { fmtDate, fmtDateTime, formatCents, productLabelOf } from '../../lib/format'
import { storageLabel } from '../../lib/storageFormat'
import '../../styles/admin-areas.css'

const CHECK_TONE = { ok: 'ok', warn: 'warn', info: 'info' }
const staffOf = (by) => (by && by !== 'customer' && by !== 'system' ? ` · ${by}` : '')
const toCents = (value) => Math.round(Number(value) * 100)

/**
 * Antrag auf Uebernahmegutschrift: Pruefung und Entscheidung wie im frueheren Admin-Panel.
 * Waehrend einer Entscheidung sind alle Knoepfe gesperrt (busyRef verhindert auch Doppelklicks vor dem Neuzeichnen).
 */
export default function CreditDetail({ id, onClose, onChanged, onOpen }) {
  const [d, setD] = useState(null)
  const [error, setError] = useState(null)
  const [message, setMessage] = useState('')
  const [form, setForm] = useState(null)
  const [calcText, setCalcText] = useState('')
  const [actionError, setActionError] = useState('')
  const [busy, setBusy] = useState(false)
  const busyRef = useRef(false)
  const amountTouched = useRef(false)
  const calcTimer = useRef(null)

  const load = useCallback(async (msg = '') => {
    setError(null)
    try {
      const detail = await getCredit(id)
      const r = detail.request
      setD(detail)
      setMessage(msg)
      setActionError('')
      amountTouched.current = false
      setForm({
        checks: Object.fromEntries(detail.requiredChecks.map((k) => [k.key, false])),
        invoiceAmount: (r.invoiceAmountCents / 100).toFixed(2),
        billingMonths: r.billingMonths,
        paidUntil: r.paidUntilDate || '',
        takeoverFrom: r.takeoverFromDate || '',
        amount: ((detail.calc?.suggestedCents || 0) / 100).toFixed(2),
        note: '',
      })
      setCalcText(detail.calc ? calcLine(detail.calc) : 'Angaben unvollständig')
    } catch (err) {
      setError(err.message || 'Antrag konnte nicht geladen werden.')
    }
  }, [id])

  useEffect(() => {
    setD(null)
    load()
    return () => clearTimeout(calcTimer.current)
  }, [load])

  const figures = (f) => ({ invoiceAmountCents: toCents(f.invoiceAmount), billingMonths: Number(f.billingMonths), paidUntil: f.paidUntil, takeoverFrom: f.takeoverFrom })

  const setFigure = (key, value) => {
    const next = { ...form, [key]: value }
    setForm(next)
    clearTimeout(calcTimer.current)
    calcTimer.current = setTimeout(async () => {
      try {
        const { calc } = await calcCredit(figures(next))
        setCalcText(calcLine(calc))
        if (!amountTouched.current) setForm((f) => ({ ...f, amount: (calc.suggestedCents / 100).toFixed(2) }))
      } catch (err) {
        setCalcText(err.message)
      }
    }, 300)
  }

  const decide = async (action) => {
    if (busyRef.current) return
    setActionError('')
    const problem = decisionError(action, form.note)
    if (problem) { setActionError(problem); return }
    const amountCents = toCents(form.amount)
    if (!window.confirm(decisionConfirm(action, amountCents, d.customer?.name))) return
    if (busyRef.current) return
    busyRef.current = true
    setBusy(true)
    try {
      const result = await decideCredit(id, { action, note: form.note.trim(), amountCents, checks: form.checks, ...figures(form) })
      onChanged?.()
      await load(decisionMessage(action, result))
    } catch (err) {
      setActionError(err.message)
    } finally {
      busyRef.current = false
      setBusy(false)
    }
  }

  const apply = async () => {
    if (busyRef.current) return
    busyRef.current = true
    setBusy(true)
    try {
      const result = await applyCredit(id)
      onChanged?.()
      await load(applyMessage(result))
    } catch (err) {
      setActionError(err.message)
    } finally {
      busyRef.current = false
      setBusy(false)
    }
  }

  if (error) return <Card><div className="area-error">{error}</div><Button variant="ghost" onClick={onClose}>Schließen</Button></Card>
  if (!d || !form) return <Card><FaSpinner className="spinner" /></Card>

  const r = d.request
  const c = d.customer
  const s = d.subscription
  const st = creditStatus(r.status)
  const pending = r.status === 'offen' || r.status === 'rueckfrage'
  const fileNames = new Map(r.files.map((f) => [f.id, f.name]))
  const allChecked = Object.values(form.checks).every(Boolean)
  const canApprove = allChecked && Number(form.amount) > 0 && !busy

  return (
    <Card>
      <div className="area-inline" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
        <div>
          <h3 style={{ margin: 0 }}>Antrag {r.ref} · {c.name || c.companyName}</h3>
          <span className="area-muted">eingegangen {fmtDateTime(r.createdAt)}</span> <Badge tone={st.tone}>{st.label}</Badge>
        </div>
        <Button variant="ghost" onClick={onClose}>Schließen</Button>
      </div>
      {message && <div className="area-message">{message}</div>}
      <div className="credit-cols">
        <div>
          <h4>Antrag</h4>
          <dl className="area-kv">
            <dt>Leistung</dt><dd>{r.services}</dd>
            <dt>Bisher bei</dt><dd>{r.provider}</dd>
            <dt>Domain</dt><dd>{r.domain ? <a href={`https://${r.domain}`} target="_blank" rel="noreferrer">{r.domain}</a> : '–'}</dd>
            <dt>Rechnung</dt><dd>{formatCents(r.invoiceAmountCents)} für {r.billingMonths} Monat{r.billingMonths === 1 ? '' : 'e'}</dd>
            <dt>Bezahlt bis</dt><dd>{fmtDate(r.paidUntil)}</dd>
            <dt>Antwort an</dt><dd>{r.email}</dd>
            <dt>Bestätigt</dt><dd>Angaben und Bedingungen (Stand {r.conditionsVersion || '–'}) am {fmtDateTime(r.consentAt)}</dd>
          </dl>
          <h4>Grund / Nachricht</h4>
          <p style={{ whiteSpace: 'pre-wrap' }}>{r.message}</p>
          <h4>Nachweise</h4>
          {r.files.length ? (
            <ul className="credit-files">
              {r.files.map((f) => (
                <li key={f.id}>
                  <a href={f.url} target="_blank" rel="noreferrer">{f.name}</a> <span className="area-muted">({fmtBytes(f.size)}, {fmtDate(f.uploadedAt)})</span>
                </li>
              ))}
            </ul>
          ) : <p className="area-muted">Keine Nachweise (mehr) vorhanden.</p>}
          <h4>Verlauf</h4>
          {r.history.map((h, i) => (
            <div key={i} className="credit-history">
              <strong>{historyLabel(h.type)}</strong> <span className="area-muted">{fmtDateTime(h.at)}{staffOf(h.by)}</span>
              {h.text && <div style={{ whiteSpace: 'pre-wrap' }}>{h.text}</div>}
              {(h.files || []).length > 0 && <div className="area-muted">Dateien: {h.files.map((fid) => fileNames.get(fid) || 'gelöscht').join(', ')}</div>}
            </div>
          ))}
        </div>
        <div>
          <h4>Kunde &amp; Vertrag</h4>
          <dl className="area-kv">
            <dt>Kunde</dt><dd>{c.name || c.companyName}{c.code ? ` · Kd.-Nr. ${c.code}` : ''}</dd>
            <dt>E-Mail</dt><dd>{c.email || '–'}</dd>
            <dt>Abo</dt>
            <dd>
              {s ? <>{productLabelOf(s.productKey)} <Badge tone={s.active ? 'ok' : 'danger'}>{s.status}</Badge><br /><span className="area-muted">Zusatzspeicher: {storageLabel(s.storageUnits)}</span></> : <Badge tone="danger">kein Abo</Badge>}
            </dd>
            {s && (
              <>
                <dt>Leistungsbeginn</dt><dd>{fmtDate(s.serviceStart)}</dd>
                <dt>Nächste Abbuchung</dt><dd>{s.active ? fmtDate(s.currentPeriodEnd) : '–'}</dd>
                {s.cancelAt && <><dt>Gekündigt zum</dt><dd>{fmtDate(s.cancelAt)}</dd></>}
                <dt>Stripe-Guthaben</dt><dd>{s.creditBalanceCents == null ? '–' : formatCents(s.creditBalanceCents)}</dd>
              </>
            )}
          </dl>
          <div className="area-inline" style={{ margin: '12px 0' }}>
            <KundenansichtButton customer={{ $id: c.id }} checkAccess={false} variant="ghost" />
            {s?.stripeUrl && <Button as="a" href={s.stripeUrl} target="_blank" rel="noreferrer" variant="ghost"><FaArrowUpRightFromSquare /> In Stripe öffnen</Button>}
          </div>
          {d.otherRequests.length > 0 && (
            <>
              <h4>Weitere Anträge des Kunden</h4>
              <ul className="credit-files">
                {d.otherRequests.map((o) => {
                  const ost = creditStatus(o.status)
                  return (
                    <li key={o.id}>
                      <a href="#" onClick={(e) => { e.preventDefault(); onOpen?.(o.id) }}>{o.ref}</a> · {o.services} · {fmtDate(o.createdAt)} <Badge tone={ost.tone}>{ost.label}</Badge>{o.amountCents ? ` ${formatCents(o.amountCents)}` : ''}
                    </li>
                  )
                })}
              </ul>
            </>
          )}
          <h4>Automatische Prüfung</h4>
          <ul className="credit-checks">
            {d.autoChecks.map((k) => (
              <li key={k.key}><Badge tone={CHECK_TONE[k.status] || 'muted'}>{k.status === 'ok' ? '✓' : k.status === 'warn' ? '!' : 'i'}</Badge> {k.label}{k.detail && <><br /><small className="area-muted">{k.detail}</small></>}</li>
            ))}
          </ul>

          {pending ? (
            <>
              <h4>Prüfung durch dich</h4>
              <div className="credit-manual">
                {d.requiredChecks.map((k) => (
                  <label key={k.key}>
                    <input type="checkbox" checked={form.checks[k.key]} onChange={(e) => setForm({ ...form, checks: { ...form.checks, [k.key]: e.target.checked } })} /> {k.label}
                  </label>
                ))}
              </div>
              <h4>Berechnung</h4>
              <div className="credit-calc">
                <label>Rechnungsbetrag (€)<input id="calc-amount" className="form-control" type="number" step="0.01" min="0.01" value={form.invoiceAmount} onChange={(e) => setFigure('invoiceAmount', e.target.value)} /></label>
                <label>Rechnung gilt für
                  <select id="calc-months" className="form-control" value={form.billingMonths} onChange={(e) => setFigure('billingMonths', Number(e.target.value))}>
                    {BILLING_MONTHS.map((m) => <option key={m} value={m}>{m} Monat{m === 1 ? '' : 'e'}</option>)}
                  </select>
                </label>
                <label>Bezahlt bis<input id="calc-paid-until" className="form-control" type="date" value={form.paidUntil} onChange={(e) => setFigure('paidUntil', e.target.value)} /></label>
                <label>Übernahme ab<input id="calc-from" className="form-control" type="date" value={form.takeoverFrom} onChange={(e) => setFigure('takeoverFrom', e.target.value)} /></label>
              </div>
              <div className="area-summary">{calcText}</div>
              <p className="area-muted">Werte weichen von der Rechnung ab? Hier korrigieren – die Korrektur wird beim Genehmigen im Verlauf vermerkt. „Übernahme ab“ ist der Leistungsbeginn des Abos.</p>
              <label className="credit-field">Gutschrift (€)
                <input id="credit-amount" className="form-control" type="number" step="0.01" min="0.01" value={form.amount} style={{ maxWidth: 180 }}
                  onChange={(e) => { amountTouched.current = true; setForm({ ...form, amount: e.target.value }) }} />
              </label>
              <label className="credit-field">Nachricht an den Kunden (bei Rückfrage und Ablehnung Pflicht, beim Genehmigen optional)
                <textarea id="credit-note" className="form-control" maxLength={4000} rows={4} value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
              </label>
              <div className="area-inline">
                <Button variant="primary" onClick={() => decide('approve')} disabled={!canApprove}>Genehmigen &amp; gutschreiben</Button>
                <Button variant="ghost" onClick={() => decide('question')} disabled={busy}>Rückfrage senden</Button>
                <Button variant="danger" onClick={() => decide('reject')} disabled={busy}>Ablehnen</Button>
                {busy && <FaSpinner className="spinner" />}
              </div>
              <p className="area-muted">
                Genehmigen geht, sobald alle Punkte abgehakt sind. Der Kunde bekommt jede Entscheidung per E-Mail.
                {!s?.active && <strong> Achtung: Der Kunde hat kein laufendes Abo.</strong>}
              </p>
            </>
          ) : (
            <>
              <h4>Entscheidung</h4>
              {r.status === 'genehmigt' ? (
                <>
                  <dl className="area-kv">
                    <dt>Genehmigt</dt><dd>{fmtDateTime(r.decidedAt)} · {r.decidedBy}</dd>
                    <dt>Gutschrift</dt><dd><strong>{formatCents(r.amountCents)}</strong></dd>
                    <dt>Berechnung</dt><dd>{r.calculation}</dd>
                    <dt>Geprüft</dt><dd>{r.checks ? `alle Punkte abgehakt (${r.checks.by || ''})` : '–'}</dd>
                    {r.decisionNote && <><dt>Nachricht</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{r.decisionNote}</dd></>}
                    <dt>Verrechnung</dt>
                    <dd>{r.appliedAt ? <>Stripe-Guthaben gebucht am {fmtDateTime(r.appliedAt)} <span className="area-muted">({r.stripeBalanceTransactionId})</span></> : <Badge tone="warn">noch nicht in Stripe gebucht</Badge>}</dd>
                  </dl>
                  {!r.appliedAt && <div className="area-inline" style={{ marginTop: 12 }}><Button variant="primary" onClick={apply} disabled={busy}>Jetzt in Stripe gutschreiben</Button></div>}
                </>
              ) : (
                <dl className="area-kv">
                  <dt>Abgelehnt</dt><dd>{fmtDateTime(r.decidedAt)} · {r.decidedBy}</dd>
                  <dt>Begründung</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{r.decisionNote}</dd>
                </dl>
              )}
            </>
          )}
          {actionError && <div className="area-error">{actionError}</div>}
        </div>
      </div>
    </Card>
  )
}