import { useState } from 'react' import { Button } from '../ui/Button' import { Modal } from '../ui/Modal' import { ImageGalleryModal } from './ImageGalleryModal' import { useI18n } from '../../i18n/useI18n' interface ImageAsset { id: string asset_type: string entity_id: string | null still_id: string | null episode_id: string | null file_path: string prompt_used: string | null status: string is_primary: boolean prompt_type: string | null created_at: string variant_type?: string | null is_recommended?: boolean recommendation_reason?: string | null angle_horizontal?: number | null angle_vertical?: number | null angle_zoom?: number | null color_prompt?: string | null selected_for_pdf?: boolean parent_image_id?: string | null theme_label?: string | null source_image_id?: string | null generation_model?: string | null } interface ResolvedEntity { entity_id: string entity_name: string entity_type: string t2i_prompt: string has_reference_image: boolean reference_image_id: string | null } interface SceneStill { id: string episode_id: string still_index: number screenplay_scene_heading: string | null beat_title: string | null still_frame_prompt: string | null camera_json: string lighting_json: string visible_entities_json: string t2i_prompt_cinematic: string | null t2i_prompt_closeup: string | null t2i_variations_json: string | null t2i_composer_version: string | null variations?: Array<{ label: string type: string angle: string | null color: string | null reason: string | null }> resolved_entities?: ResolvedEntity[] dependent_scenes?: Array<{ still_id: string still_index: number beat_title: string has_image: boolean image_id: string | null }> start_char?: number | null end_char?: number | null segment_start_char?: number | null segment_end_char?: number | null status: string created_at: string } interface SceneVariationCardProps { still: SceneStill projectId: string images: Record allImages: ImageAsset[] // ALL images for this scene (for dynamic gallery) screenplayText?: string | null // Full screenplay text for segment display segmentContextChars?: number // Context chars before/after segment (default 100) onRecommend: () => void onGenerate: () => void onEditAngle: (imageId: string, h: number, v: number, z: number) => void onEditColor: (imageId: string, prompt: string) => void onApplyAngleColor: (imageId: string, h: number, v: number, z: number, colorPrompt: string) => void onSelectVariant: (variant: string) => void onSelectOriginal: (imageId: string) => void onEditPrompt: (prompt: string) => void onRegenerate?: (imageId: string) => void onRemoveEntity?: (entityId: string) => void onAddEntity?: (entityId: string) => void allEntities?: Array<{ id: string; name: string; entity_type: string }> onRemoveDependentScene?: () => void onSetDependentScene?: (sceneId: string) => void allScenes?: Array<{ id: string; still_index: number; beat_title: string }> onSaveT2i?: (promptA: string, promptB: string) => void onSetRepresentative?: (imageId: string) => void onRegenerateWithPrompt?: (stillId: string, customPrompt: string) => void recommendLoading?: boolean generateLoading?: boolean angleLoading?: boolean colorLoading?: boolean isGenerating?: boolean hasEntityRefs?: boolean i2iLoading?: boolean // loading state for combined angle+color I2I } export function SceneVariationCard({ still, projectId, images: _images, allImages, screenplayText, segmentContextChars = 100, onRecommend: _onRecommend, onGenerate, onEditAngle: _onEditAngle, onEditColor: _onEditColor, onApplyAngleColor, onSelectVariant: _onSelectVariant, onSelectOriginal: _onSelectOriginal, onEditPrompt, onRegenerate: _onRegenerate, onRemoveEntity, onAddEntity, allEntities = [], onRemoveDependentScene, onSetDependentScene, allScenes = [], onSaveT2i, onSetRepresentative, onRegenerateWithPrompt, recommendLoading: _recommendLoading = false, generateLoading = false, angleLoading = false, colorLoading = false, isGenerating = false, hasEntityRefs = false, i2iLoading = false, }: SceneVariationCardProps) { const { t } = useI18n() // Accordion sections — images always expanded by default const [openSections, setOpenSections] = useState>(new Set(['images'])) const toggleSection = (s: string) => setOpenSections(prev => { const next = new Set(prev) if (next.has(s)) next.delete(s); else next.add(s) return next }) // Combined gallery modal const [modalImage, setModalImage] = useState(null) // Reference entity image zoom modal const [refZoomImageId, setRefZoomImageId] = useState(null) // Screenplay segment collapsed state const [segmentExpanded, setSegmentExpanded] = useState(false) // Prompt editing const [editingPrompt, setEditingPrompt] = useState(false) const [promptText, setPromptText] = useState(still.still_frame_prompt || '') // Entity add popup const [showAddEntity, setShowAddEntity] = useState(false) // Dependent scene picker const [showDepPicker, setShowDepPicker] = useState(false) // T2I prompt editing const [editingT2i, setEditingT2i] = useState(false) const [t2iA, setT2iA] = useState(still.t2i_prompt_cinematic || '') // Sort images: representative (is_primary) first, then by created_at const sortedImages = [...allImages].sort((a, b) => { if (a.is_primary && !b.is_primary) return -1 if (!a.is_primary && b.is_primary) return 1 return a.created_at.localeCompare(b.created_at) }) // Parse prompt markers // Supports: [[name]], [[char]+[outlook]] const parsePromptMarkers = (prompt: string) => { const linked: string[] = [] const unlinked: Array<{name: string; desc: string}> = [] // Match [[...]] allowing ]+[ inside for composite markers const linkedRegex = /\[\[((?:[^\]]|\](?!\]))+)\]\]/g let m: RegExpExecArray | null while ((m = linkedRegex.exec(prompt)) !== null) { const raw = m[1] // Check if it's a composite [[char]+[outlook]] format if (raw.includes(']+[')) { const parts = raw.split(']+[') const charName = parts[0].trim() const outlookName = parts[1].trim() const composite = `${charName}]+[${outlookName}` if (!linked.includes(composite)) linked.push(composite) } else { if (!linked.includes(raw)) linked.push(raw) } } const unlinkedRegex = /(? u.name === match[1])) { unlinked.push({ name: match[1].trim(), desc: match[2].trim() }) } } return { linked, unlinked } } const handleSavePrompt = () => { onEditPrompt(promptText) setEditingPrompt(false) } // Extract screenplay segment with configurable context chars const getScreenplaySegment = () => { const startChar = still.segment_start_char ?? still.start_char const endChar = still.segment_end_char ?? still.end_char if (!screenplayText || startChar == null || endChar == null) return null const ctxBefore = segmentContextChars const ctxAfter = segmentContextChars const start = Math.max(0, startChar - ctxBefore) const end = Math.min(screenplayText.length, endChar + ctxAfter) const before = screenplayText.slice(start, startChar) const segment = screenplayText.slice(startChar, endChar) const after = screenplayText.slice(endChar, end) return { before, segment, after } } const screenplaySegment = getScreenplaySegment() return (
{/* Still header */}
{still.still_index}
{still.screenplay_scene_heading && (
{still.screenplay_scene_heading}
)} {still.beat_title && (
{still.beat_title}
)}
{/* Action buttons — v5: 변형 추천 제거, 생성 버튼만 유지 */}
{/* === Accordion: Content section === */}
toggleSection('content')} style={{ cursor: 'pointer', padding: '8px 0', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--text-muted)', borderTop: '1px solid var(--border)', marginTop: '4px', }}> {openSections.has('content') ? '\u25BC' : '\u25B6'} {t('still.scene_description') || '\uCF58\uD150\uCE20'}
{openSections.has('content') && ( <> {/* Screenplay segment (collapsible) */} {screenplaySegment && (
setSegmentExpanded(!segmentExpanded)} > {t('gallery.screenplay_segment')} {segmentExpanded ? '[-]' : '[+]'}
{segmentExpanded && (
{screenplaySegment.before} {screenplaySegment.segment} {screenplaySegment.after}
)}
)} {/* Scene description (editable) */} {still.still_frame_prompt && !editingPrompt && (
{ setEditingPrompt(true); setPromptText(still.still_frame_prompt || '') }} onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)' }} onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'transparent' }} > {t('still.scene_description')}
{still.still_frame_prompt}
)} {editingPrompt && (