frontend/src/components/showcase/SeedanceReplicateCostNote.tsx

import {
  estimateReplicateSeedance20Usd,
  isSeedanceSegmentModel,
  REPLICATE_SEEDANCE_20_URL,
  type SegmentVideoModel,
} from '@/api';

const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 2 });

type Props = {
  videoModel: SegmentVideoModel;
  resolution: '480p' | '720p' | '1080p';
  clipCount: number;
  totalOutputSeconds: number;
  /** When set, append one short caveat (e.g. direct vs segmented). */
  flow?: 'direct' | 'planned';
};

export function SeedanceReplicateCostNote({
  videoModel,
  resolution,
  clipCount,
  totalOutputSeconds,
  flow,
}: Props) {
  if (!isSeedanceSegmentModel(videoModel)) return null;

  const { usdPerSecond, estimatedUsd } = estimateReplicateSeedance20Usd({
    resolution,
    totalOutputSeconds,
  });

  const fast1080 =
    videoModel === 'seedance-2-fast' && resolution === '1080p' ? ' · Fast may omit 1080p' : '';

  const foot =
    flow === 'direct'
      ? 'Replicate image-in tiers; KIE may differ. Segmented fallback = more clips.'
      : 'Replicate image-in tiers; KIE may differ.';

  return (
    <div className="mt-3 max-w-2xl rounded-xl border border-slate-200/90 bg-slate-50 px-3 py-2.5 text-left">
      <p className="text-sm text-slate-800">
        <span className="font-semibold tabular-nums text-slate-900">~{money.format(estimatedUsd)}</span>
        <span className="text-slate-400"> · </span>
        <span className="text-slate-700">
          {clipCount} clip{clipCount === 1 ? '' : 's'} · {totalOutputSeconds}s @ {resolution}
        </span>
        <span className="text-slate-400"> · </span>
        <span className="tabular-nums text-slate-600">{money.format(usdPerSecond)}/s</span>
        <span className="text-slate-400"> · </span>
        <a
          href={REPLICATE_SEEDANCE_20_URL}
          target="_blank"
          rel="noreferrer"
          className="text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-accent hover:decoration-accent/50"
        >
          Replicate
        </a>
        {fast1080 ? <span className="text-slate-500">{fast1080}</span> : null}
      </p>
      <p className="mt-1 text-[0.65rem] leading-snug text-slate-500">{foot}</p>
    </div>
  );
}