import type { RenderJobDto } from '../../api/types';
import { AiLabel } from './Badge';
import { IconSpark } from './icons';
import './ai-image.css';

/*
 * AI 생성 이미지 카드 — 워터마크·고지문 상시 노출(제거 불가).
 * 근거: design.md §1-4 + 계약 §0-3 (watermarkRequired/watermarkText/notice 항상 포함).
 */
interface AiImageProps {
  imageUrl: string | null;
  watermarkText: string;
  notice: string;
  shotLabel?: string;
  versionTag?: string;
  status?: RenderJobDto['status'];
  onRetry?: () => void;
  alt?: string;
  /** 번들 예시(사용자 부스 실 렌더 아님)임을 표시 — "예시" 칩 노출. */
  sample?: boolean;
  /** 예시 타일에서 "이 뷰 생성" 버튼 노출. */
  onGenerate?: () => void;
}

export function AiImage({
  imageUrl,
  watermarkText,
  notice,
  shotLabel,
  versionTag,
  status = 'DONE',
  onRetry,
  alt = 'AI 생성 예상 이미지',
  sample = false,
  onGenerate,
}: AiImageProps) {
  return (
    <figure className="kx-aiimg">
      <div className="kx-aiimg__frame">
        {status === 'DONE' && imageUrl ? (
          <img className="kx-aiimg__img" src={imageUrl} alt={alt} loading="lazy" />
        ) : status === 'FAILED' ? (
          <div className="kx-aiimg__state kx-aiimg__state--failed">
            <span>생성 실패</span>
            {onRetry && (
              <button type="button" className="kx-aiimg__retry" onClick={onRetry}>
                다시 생성
              </button>
            )}
          </div>
        ) : (
          <div className="kx-aiimg__state kx-aiimg__skeleton" aria-live="polite">
            <span className="kx-aiimg__spinner" aria-hidden="true" />
            생성 중… 평균 40초
          </div>
        )}

        {/* 상시 워터마크 (제거 불가) */}
        <div className="kx-aiimg__watermark" aria-hidden="true">
          {watermarkText}
        </div>

        <div className="kx-aiimg__topbar">
          <AiLabel>AI 생성 이미지</AiLabel>
          {sample && <span className="kx-aiimg__sample">예시</span>}
          {shotLabel && <span className="kx-aiimg__shot">{shotLabel}</span>}
          {versionTag && <span className="kx-aiimg__ver">{versionTag}</span>}
        </div>

        {sample && onGenerate && (
          <button type="button" className="kx-aiimg__gen" onClick={onGenerate}>
            <span aria-hidden="true"><IconSpark size={14} /></span> 이 뷰 생성
          </button>
        )}
      </div>
      {/* 고지문 — 항상 노출 */}
      <figcaption className="kx-aiimg__notice">{notice}</figcaption>
    </figure>
  );
}
