Generative Skeleton

import { GenerativeSkeleton } from '@/components/ui/generative-skeleton'

'use client'

import { useEffect, useMemo, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import {
  GenerativeSkeleton,
  type GenerativeSection,
} from '@/components/ui/generative-skeleton'

/** Meridian incident summary, content lands on a deterministic schedule. */
const FINAL: GenerativeSection[] = [
  {
    id: 'title',
    kind: 'heading',
    content: 'Incident INC-8841, duplicate Stripe charge',
  },
  {
    id: 'p1',
    kind: 'paragraph',
    lines: 3,
    content:
      'Acme Logistics was charged $1,240 twice on the March close pack. Xero shows one open invoice and one paid twin sharing the same Stripe payment intent.',
  },
  {
    id: 'p2',
    kind: 'paragraph',
    lines: 2,
    content:
      'Customer ops ticket #4412 confirms the duplicate. Finance asks for a full refund to the original card before the close window locks.',
  },
  {
    id: 'r1',
    kind: 'row',
    content: 'Stripe charge · $1,240.00',
  },
  {
    id: 'r2',
    kind: 'row',
    content: 'Xero open invoice · inv_2026_03_8841',
  },
  {
    id: 'r3',
    kind: 'row',
    content: 'Refund path · stripe.refunds.create',
  },
  {
    id: 'card',
    kind: 'card',
    content:
      'Totals: $1,240 proposed refund · medium risk · controller gate at $500 still applies if the agent auto-executes without HITL.',
  },
]

/** Staged land times (ms from mount) for each section index */
const LAND_AT = [400, 900, 1400, 1900, 2300, 2700, 3200]

export default function GenerativeSkeletonDemo() {
  const reduced = useReducedMotion()
  const [landed, setLanded] = useState<Record<string, boolean>>({})

  const sections = useMemo(
    () =>
      FINAL.map((s) =>
        landed[s.id] || reduced
          ? s
          : { id: s.id, kind: s.kind, lines: s.lines }
      ),
    [landed, reduced]
  )

  useEffect(() => {
    if (reduced) {
      const all: Record<string, boolean> = {}
      for (const s of FINAL) all[s.id] = true
      setLanded(all)
      return
    }

    const timers: number[] = []
    FINAL.forEach((s, i) => {
      const delay = LAND_AT[i] ?? 3000 + i * 400
      timers.push(
        window.setTimeout(() => {
          setLanded((prev) => ({ ...prev, [s.id]: true }))
        }, delay)
      )
    })

    return () => {
      for (const t of timers) window.clearTimeout(t)
    }
  }, [reduced])

  return (
    <div className="mx-auto flex min-h-[480px] w-full max-w-xl 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-5 sm:p-6">
        <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          meridian-ops · streaming draft
        </p>
        <GenerativeSkeleton
          sections={sections}
          label="Generating"
          doneLabel="Draft ready"
        />
      </div>
    </div>
  )
}