import { useEffect, useMemo, useRef, useState } from 'react'
import IconAddPhotoOutlined from '@material-symbols/svg-400/outlined/add_photo_alternate.svg?react'
import IconAutorenewOutlined from '@material-symbols/svg-400/outlined/autorenew.svg?react'
import IconDownloadOutlined from '@material-symbols/svg-400/outlined/download.svg?react'
import IconHighQualityOutlined from '@material-symbols/svg-400/outlined/high_quality.svg?react'
import IconUploadOutlined from '@material-symbols/svg-400/outlined/upload.svg?react'
import Sparkles from '@/assets/icon-sparkles-soft.svg?react'
import { Button } from '@higgsfield/quanta/button'
import { Card } from '@higgsfield/quanta/card'
import { Checkbox } from '@higgsfield/quanta/checkbox'
import { Grid } from '@higgsfield/quanta/grid'
import { Icon } from '@higgsfield/quanta/icon'
import { Media } from '@higgsfield/quanta/media'
import { Typography } from '@higgsfield/quanta/typography'
import { cn } from '@/lib/utils'
import { AssetLibraryModal } from '@/components/asset-library'
import type { AssetSelection } from '@/components/asset-library'
import { BeforeAfterCompare } from '@/components/before-after-compare'
import { GenerationCard } from '@/components/generation-card'
import { GenerationDetailModal } from '@/components/generation-detail'
import { StepRail } from '@/components/step-rail'
/**
* Shots app screen template — a faithful rebuild of the live Higgsfield "Shots"
* app (https://higgsfield.ai/apps/shots) in our design system. The real page is
* a compact, centered 3-step wizard — `Upload → Grid → Upscale` — that takes ONE
* source image, generates 9 cinematic camera angles, lets the user favorite the
* best ones, and upscales them to 4K ("Upload one image, get 9 cinematic angles.
* Select your favorites and upscale to 4K.").
*
* Structure + flow are mapped onto Quanta components + our shared `@/components`:
* • The numbered wizard header → `StepRail` (a new shared component).
* • Step 1 (Upload) → a centered `Card` hero: a `Media` preview whose click
* (and the white "Upload image" button) open `AssetLibraryModal`, then a
* costed marketing Generate CTA.
* • Step 2 (Grid) → a `Grid` of `GenerationCard`s (`state="generating"` while
* the angles render, then selectable result tiles that open
* `GenerationDetailModal`).
* • Step 3 (Upscale) → a `BeforeAfterCompare` original↔4K hero over a grid of
* the upscaled favorites.
*
* Permanently dark, no app header (the host owns chrome), `q-` tokens only.
*/
/* ── Content ──────────────────────────────────────────────────────────────── */
type Step = 'upload' | 'grid' | 'upscale'
const STEPS = [
{ id: 'upload', label: 'Upload' },
{ id: 'grid', label: 'Grid' },
{ id: 'upscale', label: 'Upscale' },
] as const
/** The example source shown before the user uploads their own image. */
const HERO_EXAMPLE = '/presets/cover.png'
const PREVIEWS = [
'/presets/cover.png',
'/presets/how-product-works.png',
'/presets/explain.png',
'/presets/hyper-motion.png',
] as const
/**
* The 9 cinematic camera angles Shots derives from one image. Each cycles a
* local preview asset — the shape (title + prompt) is what matters for the flow.
*/
const ANGLES: { label: string, prompt: string }[] = [
{ label: 'Wide shot', prompt: 'Full-body wide establishing shot, subject centered, cinematic depth.' },
{ label: 'Medium shot', prompt: 'Waist-up medium shot, shallow depth of field, editorial lighting.' },
{ label: 'Close-up', prompt: 'Tight close-up on the face, soft key light, filmic contrast.' },
{ label: 'Extreme close-up', prompt: 'Extreme close-up on the eyes, macro detail, dramatic mood.' },
{ label: 'Over-the-shoulder', prompt: 'Over-the-shoulder framing, foreground bokeh, narrative depth.' },
{ label: 'Low angle', prompt: 'Low-angle hero shot looking up, powerful and imposing.' },
{ label: 'High angle', prompt: 'High-angle shot looking down, vulnerable, wide context.' },
{ label: 'Dutch angle', prompt: 'Tilted Dutch angle, tension and unease, dynamic composition.' },
{ label: "Bird's-eye", prompt: "Top-down bird's-eye view, graphic and geometric staging." },
]
const ANGLE_TILES = ANGLES.map((angle, index) => ({
...angle,
id: `${angle.label}-${index}`,
src: PREVIEWS[index % PREVIEWS.length],
}))
/** Simulated backend costs, shown inside the marketing CTAs. */
const GRID_COST = 18
const UPSCALE_COST = 12
/** ~2s simulated backend delay for the generate / upscale transitions. */
const SIMULATED_DELAY = 2000
type RenderStage = 'idle' | 'generating' | 'ready'
/* ── Shared CTA slot ──────────────────────────────────────────────────────── */
/** The branded `{sparkles} {credits}` cost slot for a marketing Generate CTA. */
function CostSlot({ credits }: { credits: number }) {
return (
{credits}
)
}
/* ── Step 1 — Upload ──────────────────────────────────────────────────────── */
interface UploadStepProps {
source: string | null
onUpload: (item: AssetSelection) => void
onGenerate: () => void
}
function UploadStep({ source, onUpload, onGenerate }: UploadStepProps) {
const previewSrc = source ?? HERO_EXAMPLE
return (
{/* The hero preview doubles as an upload trigger — clicking it (or the
button below) opens the shared AssetLibraryModal. */}
{source != null ? 'Change image' : 'Upload image'}
)}
/>
Shots
Upload one image, get 9 cinematic angles. Select your favorites and upscale to 4K.
{source == null
? (
}
>
Upload image
)}
/>
)
: (
}
>
Generate 9 angles
)}
)
}
/* ── Step 2 — Grid ────────────────────────────────────────────────────────── */
interface AngleTileProps {
tile: (typeof ANGLE_TILES)[number]
selected: boolean
onToggle: () => void
}
/** A single result tile — a selectable `GenerationCard` that opens the detail modal. */
function AngleTile({ tile, selected, onToggle }: AngleTileProps) {
// Download is a template stub — no real asset export is wired here.
const handleDownload = () => {}
return (
{/* The tile body opens the shared detail lightbox — a full-bleed trigger
UNDER the checkbox (they are siblings, never nested, so a click on the
checkbox toggles selection and never opens the modal). */}
)}
/>
{/* Favorite/selection control — the Quanta Checkbox (brand, md), matching
the Figma checkbox states (unchecked 1442:137 / checked 1442:125).
`checked` mirrors the tile's selected state; the subtle drop shadow
keeps the unchecked box legible over bright media. The arbitrary
property recolors the checkbox's own UNCHECKED-hover border token to
full white — the checked (lime fill) state uses a different rule, so
it is unaffected. */}
{/* Round glass Download button (top-right, mirrors the checkbox) — a real
accessible button, sibling of the modal trigger and above it (z-20), so
clicking it downloads without opening the detail modal. Reveals on
hover/focus like the other tile hover controls. */}
)
}
interface GridStepProps {
source: string | null
stage: RenderStage
selected: Set
onToggle: (id: string) => void
onRegenerate: () => void
onUpscale: () => void
}
function GridStep({ source, stage, selected, onToggle, onRegenerate, onUpscale }: GridStepProps) {
const generating = stage === 'generating'
const selectedCount = selected.size
return (
9 cinematic angles
{generating ? 'Rendering your angles…' : 'Select your favorites, then upscale to 4K.'}
Upscale to 4K
{generating
? 'Upscaling your favorites…'
: ready
? 'Your shots are ready in 4K. Download the ones you love.'
: `${tiles.length} favorite${tiles.length === 1 ? '' : 's'} ready to upscale.`}
{!ready
? (
}
>
Upscale to 4K
)
: (
}>
Download all
)}
{/* Original ↔ 4K comparison hero for the top favorite. */}
{hero != null
? (
)
: null}
{tiles.map(tile => (
generating
?
: (
4K
)
))}
)
}
/* ── Template ─────────────────────────────────────────────────────────────── */
export interface ShotsTemplateProps {
/**
* Optional seed to deep-link the wizard into a given state (also used by the
* isolated previews). Every field is optional and defaults to the fresh
* `upload` flow, so `` is unchanged.
*/
preview?: {
step?: Step
source?: string
gridStage?: RenderStage
upscaleStage?: RenderStage
/** Preselect the first N angle tiles as favorites. */
selectedCount?: number
}
}
export function ShotsTemplate({ preview }: ShotsTemplateProps = {}) {
const [step, setStep] = useState(preview?.step ?? 'upload')
const [source, setSource] = useState(preview?.source ?? null)
const [gridStage, setGridStage] = useState(preview?.gridStage ?? 'idle')
const [upscaleStage, setUpscaleStage] = useState(preview?.upscaleStage ?? 'idle')
const [selected, setSelected] = useState>(
() => new Set(ANGLE_TILES.slice(0, preview?.selectedCount ?? 0).map(tile => tile.id)),
)
// Simulated-backend timers, created in handlers and cleared on unmount so
// nothing touches `window` during SSR (same pattern as the app-detail hero).
const gridTimer = useRef | null>(null)
const upscaleTimer = useRef | null>(null)
useEffect(() => () => {
if (gridTimer.current != null) clearTimeout(gridTimer.current)
if (upscaleTimer.current != null) clearTimeout(upscaleTimer.current)
}, [])
const handleUpload = (item: AssetSelection) => setSource(item.src)
const startGrid = () => {
setStep('grid')
setGridStage('generating')
if (gridTimer.current != null) clearTimeout(gridTimer.current)
gridTimer.current = setTimeout(() => setGridStage('ready'), SIMULATED_DELAY)
}
const regenerate = () => {
setSelected(new Set())
setGridStage('generating')
if (gridTimer.current != null) clearTimeout(gridTimer.current)
gridTimer.current = setTimeout(() => setGridStage('ready'), SIMULATED_DELAY)
}
const toggleSelect = (id: string) => {
setSelected((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}
const goToUpscale = () => {
setStep('upscale')
setUpscaleStage('idle')
}
const startUpscale = () => {
setUpscaleStage('generating')
if (upscaleTimer.current != null) clearTimeout(upscaleTimer.current)
upscaleTimer.current = setTimeout(() => setUpscaleStage('ready'), SIMULATED_DELAY)
}
// Steps the user has unlocked — drives which StepRail markers are clickable.
const reachable = useMemo(() => {
const ids: string[] = ['upload']
if (source != null) ids.push('grid')
if (gridStage === 'ready' && selected.size > 0) ids.push('upscale')
return ids
}, [source, gridStage, selected])
const selectedTiles = useMemo(
() => ANGLE_TILES.filter(tile => selected.has(tile.id)),
[selected],
)
const handleStepChange = (id: string) => {
const next = id as Step
setStep(next)
// Entering the grid with no render yet kicks off generation.
if (next === 'grid' && gridStage === 'idle')
startGrid()
}
return (