Reasoning Disclosure

import { ReasoningDisclosure } from '@/components/ui/reasoning-disclosure'

'use client'

import { useEffect, useMemo, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { ReasoningDisclosure } from '@/components/ui/reasoning-disclosure'

const FULL_REASONING = `Checking whether invoice inv_2026_03_8841 already has a matching credit note in Xero.

1. The Stripe charge at 14:22 UTC is $1,240.00 to Acme Logistics, same amount as the March close pack line.
2. Xero shows two sales invoices for that customer on the same day; only one has a payment applied.
3. The open invoice carries metadata.agent = meridian-ops from the prior run, which suggests a double post rather than a new bill.
4. Customer ops ticket #4412 confirms the duplicate and asks for a full refund to the original card.
5. Risk is medium: refund is reversible via Stripe, but the ledger will need a compensating journal if we deny.

Recommendation: propose stripe.refunds.create for $1,240 and pause for human approval before posting.`

/** Deterministic chunk schedule, no Math.random */
const CHUNK_ENDS = [80, 180, 320, 480, 640, 820, FULL_REASONING.length]

export default function ReasoningDisclosureDemo() {
  const reduced = useReducedMotion()
  const [charIndex, setCharIndex] = useState(0)
  const [streaming, setStreaming] = useState(true)
  const [step, setStep] = useState(0)

  const text = useMemo(
    () => FULL_REASONING.slice(0, charIndex),
    [charIndex]
  )

  useEffect(() => {
    if (reduced) {
      setCharIndex(FULL_REASONING.length)
      setStreaming(false)
      return
    }

    if (step >= CHUNK_ENDS.length) {
      setStreaming(false)
      return
    }

    const target = CHUNK_ENDS[step] ?? FULL_REASONING.length
    const id = window.setTimeout(() => {
      setCharIndex(target)
      setStep((s) => s + 1)
    }, step === 0 ? 400 : 700)

    return () => window.clearTimeout(id)
  }, [step, reduced])

  return (
    <div className="mx-auto flex min-h-[440px] w-full max-w-2xl flex-col justify-center px-4 py-12 sm:px-6 sm:py-16">
      <div className="rounded-2xl border border-border/60 bg-card p-4 sm:p-5">
        <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          meridian-ops · message
        </p>
        <ReasoningDisclosure
          text={text}
          streaming={streaming}
          defaultOpen
          label="Thinking"
          doneLabel="Thought process"
        />
        <div className="mt-4 border-t border-border/60 pt-4">
          <p className="text-sm leading-relaxed text-foreground">
            {streaming
              ? 'Working through the Acme Logistics duplicate charge…'
              : 'I recommend a $1,240 refund to Acme Logistics for invoice inv_2026_03_8841, pending your approval.'}
          </p>
        </div>
      </div>
    </div>
  )
}