File Card

"use client"

import * as React from "react"
import { FileCard } from "@/components/ui/file-card"

const CSV = `region,q2_revenue,q3_revenue,change
North America,4.81,5.32,+10.6%
Europe,3.12,3.29,+5.4%
Asia Pacific,2.07,2.61,+26.1%
Latin America,0.64,0.71,+10.9%`

const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches

const TICK_MS = 100

/** The finished reply holds first, so the cover shows it; then the three files write again. */
const HOLD_MS = 4200

const LOOP_MS = HOLD_MS + 4600

const PDF = { from: 300, done: 2700 }

const DECK = { from: 600, done: 4000 }

const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"

/**
 * 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
 * phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
 * render white on dark pages. FitFrame fills the frame exactly instead.
 *
 * - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
 * - "crop": the content stays at full size from the top and fades out at the bottom. For text
 *   that streams in, where a changing scale would make the page breathe.
 *
 * `minWidth` lays out a wide demo (a table, a two column panel) at that width and scales it down
 * to the frame, instead of letting it collapse to a narrow layout. The frame centers it, so it
 * shrinks evenly on both sides.
 *
 * Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
 * shorter than `hideBelow`, so a profile card shows the visual alone.
 */
function FitFrame({
  children,
  mode = "scale",
  hideBelow = 360,
  minWidth,
}: {
  children: React.ReactNode
  mode?: "scale" | "crop"
  hideBelow?: number
  minWidth?: string
}) {
  const content = React.useRef<HTMLDivElement>(null)
  const [cropped, setCropped] = React.useState(false)

  React.useLayoutEffect(() => {
    const el = content.current
    if (!el) return
    const measure = () => {
      const vw = window.innerWidth
      const vh = window.innerHeight
      el.toggleAttribute("data-fit-small", vh < hideBelow)
      // Layout sizes ignore the transform, so measuring never feeds back.
      const w = Math.max(el.offsetWidth, el.scrollWidth)
      const h = Math.max(el.offsetHeight, el.scrollHeight)
      const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
      el.style.transform = scale < 1 ? `scale(${scale})` : ""
      setCropped(mode === "crop" && h > vh + 1)
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    // Content that changes inside a fixed width box (a headline that cycles words) never resizes
    // the box itself, so changes below it measure again on the next frame.
    let frame = 0
    const mutations = new MutationObserver(() => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(measure)
    })
    mutations.observe(el, { subtree: true, childList: true, characterData: true })
    window.addEventListener("resize", measure)
    return () => {
      observer.disconnect()
      mutations.disconnect()
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", measure)
    }
  }, [mode, hideBelow])

  const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
  return (
    <div
      className="flex w-full justify-center overflow-hidden"
      style={{
        height: "100dvh",
        alignItems: mode === "crop" ? "flex-start" : "center",
        maskImage: cropped ? fade : undefined,
        WebkitMaskImage: cropped ? fade : undefined,
      }}
    >
      <style>{FIT_CSS}</style>
      <div
        ref={content}
        className="w-full shrink-0"
        style={{ transformOrigin: mode === "crop" ? "top center" : "center", minWidth }}
      >
        {children}
      </div>
    </div>
  )
}

/** When each file finishes, in ms after the rewrite starts, and when its progress begins. */
const CSV_DONE = 900

function CsvPreview() {
  const [head = [], ...rows] = CSV.split("\n").map((line) => line.split(","))
  return (
    <div className="chatcn-scroll overflow-auto p-5">
      <table className="text-[0.8125rem]/[1.25rem] w-full border-collapse tabular-nums">
        <thead>
          <tr>
            {head.map((cell) => (
              <th
                key={cell}
                className="border-(color:--chatcn-border) text-(color:--chatcn-fg-subtle) border-b px-3 py-2 text-start font-medium"
              >
                {cell}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row[0]}>
              {row.map((cell, i) => (
                <td key={`${row[0]}-${head[i]}`} className="border-(color:--chatcn-border) border-b px-3 py-2">
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/**
 * Files an agent writes into a reply: a CSV, a PDF report and a slide deck. The tour shows them
 * finished, then writes them again: the CSV lands first, the report and the deck fill their
 * progress bars and finish in turn. Open the CSV to preview it.
 */
export default function FileCardPreview() {
  const [t, setT] = React.useState(0)
  const blob = React.useMemo(
    () => (typeof window === "undefined" ? undefined : URL.createObjectURL(new Blob([CSV]))),
    [],
  )

  React.useEffect(() => {
    if (reducedMotion()) return
    const id = window.setInterval(() => setT((n) => (n + TICK_MS) % LOOP_MS), TICK_MS)
    return () => window.clearInterval(id)
  }, [])

  /** Ms into the rewrite, or Infinity while the finished reply holds. */
  const w = t < HOLD_MS ? Number.POSITIVE_INFINITY : t - HOLD_MS
  const track = (f: { from: number; done: number }) =>
    w >= f.done
      ? ({ state: "ready", progress: undefined } as const)
      : ({ state: "generating", progress: Math.max(0.04, (w - f.from) / (f.done - f.from)) } as const)
  const pdf = track(PDF)
  const deck = track(DECK)
  const allReady = w >= DECK.done

  return (
    <FitFrame minWidth="34rem">
      <div className="flex w-full flex-col items-center justify-center gap-4 p-6">
        <div className="flex w-full max-w-md flex-col gap-3">
          <div className="flex flex-col items-end gap-1.5">
            <FileCard variant="compact" name="q3-raw-export.xlsx" size={612_400} href={blob} />
            <p className="bg-(color:--chatcn-fill) text-[0.875rem]/[1.25rem] tracking-[-0.003em] text-(color:--chatcn-fg) rounded-(--chatcn-radius-xl) px-3.5 py-2">
              Turn this into a CSV, a short report and a board deck
            </p>
          </div>
          <p className="text-[0.875rem]/[1.25rem] tracking-[-0.003em] text-(color:--chatcn-fg)">
            {allReady ? "Here are the three files." : "Writing the three files."}
          </p>
          <div className="flex flex-col gap-2">
            <FileCard
              name="q3-revenue-by-region.csv"
              type="text/csv"
              size={2_184}
              state={w >= CSV_DONE ? "ready" : "generating"}
              href={blob}
              renderPreview={() => <CsvPreview />}
            />
            <FileCard
              name="quarterly-business-review-q3.pdf"
              size={4_404_019}
              detail="14 pages"
              state={pdf.state}
              progress={pdf.progress}
              href={blob}
            />
            <FileCard
              name="board-deck-q3.pptx"
              size={8_912_000}
              detail="18 slides"
              state={deck.state}
              progress={deck.progress}
              href={blob}
            />
          </div>
        </div>
        <MoreOn slug="file-card">Files an agent writes, with type, size, progress and preview. On</MoreOn>
      </div>
    </FitFrame>
  )
}