kintex/mobile/components/AiImage.tsx

/*
 * AI 생성 이미지 — 워터마크 상시 오버레이 + "AI 생성 예상 이미지" 고지문(제거 불가).
 * 계약: 01_backend_contracts.md §0-3 (watermarkRequired/watermarkText/notice 항상 포함).
 * design.md §1-4: 생성 이미지는 카드 하단 고지문 항상 노출.
 */
import React from 'react';
import { Image, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
import { AI_IMAGE_NOTICE } from '../lib/config';
import { colors, radius, type } from '../theme';

interface Props {
  uri: string | null;
  /** 상태: 생성 중/실패 표시. */
  status?: 'DONE' | 'QUEUED' | 'RUNNING' | 'FAILED';
  watermarkText?: string;
  notice?: string;
  shotBadge?: string; // 예: "S2 야간"
  height?: number;
  style?: StyleProp<ViewStyle>;
}

export function AiImage({
  uri,
  status = 'DONE',
  watermarkText,
  notice,
  shotBadge,
  height = 200,
  style,
}: Props) {
  const wm = watermarkText ?? AI_IMAGE_NOTICE;
  const loading = status === 'QUEUED' || status === 'RUNNING';
  const failed = status === 'FAILED';

  return (
    <View style={[styles.wrap, style]}>
      <View style={[styles.frame, { height }]}>
        {uri && status === 'DONE' ? (
          <Image source={{ uri }} style={styles.img} resizeMode="cover" />
        ) : (
          <View style={[styles.img, styles.placeholder]}>
            <Text style={styles.placeholderText}>
              {loading ? '생성 중… 평균 40초' : failed ? '생성 실패 — 다시 생성' : '이미지 없음'}
            </Text>
          </View>
        )}

        {/* 워터마크 (상시, 제거 불가) */}
        <View pointerEvents="none" style={styles.watermarkLayer}>
          <Text style={styles.watermark}>{wm}</Text>
        </View>

        {/* AI 라벨 칩 */}
        <View style={styles.aiChip}>
          <Text style={styles.aiChipText}>AI 생성</Text>
        </View>

        {shotBadge ? (
          <View style={styles.shotBadge}>
            <Text style={styles.shotBadgeText}>{shotBadge}</Text>
          </View>
        ) : null}
      </View>

      {/* 하단 고지문 (제거 불가) */}
      <Text style={styles.notice}>{notice ?? wm}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: { gap: 6 },
  frame: {
    width: '100%',
    borderRadius: radius.md,
    overflow: 'hidden',
    backgroundColor: colors.neutral050,
    borderWidth: 1,
    borderColor: colors.neutral200,
  },
  img: { width: '100%', height: '100%' },
  placeholder: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.aiSurface,
  },
  placeholderText: { color: colors.neutral500, fontSize: type.body.fontSize },
  watermarkLayer: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
  watermark: {
    color: 'rgba(16,24,40,0.28)',
    fontSize: 13,
    fontWeight: '700',
    transform: [{ rotate: '-18deg' }],
    textAlign: 'center',
    paddingHorizontal: 12,
  },
  aiChip: {
    position: 'absolute',
    top: 8,
    left: 8,
    backgroundColor: colors.aiAccent,
    borderRadius: radius.pill,
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  aiChipText: { color: colors.white, fontSize: 11, fontWeight: '700' },
  shotBadge: {
    position: 'absolute',
    top: 8,
    right: 8,
    backgroundColor: 'rgba(28,37,54,0.8)',
    borderRadius: radius.sm,
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  shotBadgeText: { color: colors.white, fontSize: 11, fontWeight: '600' },
  notice: { color: colors.neutral500, fontSize: type.caption.fontSize },
});