#app.py
import gradio as gr
import os
import tempfile
from datetime import datetime
from PIL import Image
import random

# 🔑 허깅페이스 Secrets에서 API 키들 가져와서 랜덤 선택
def get_random_gemini_api_key():
    """허깅페이스 Secrets에서 API 키 리스트를 가져와 랜덤 선택 (디버깅 강화)"""
    try:
        print("🔍 API 키 로딩 시작...")
        
        # Secrets에서 API 키 리스트 가져오기 (콤마로 구분된 문자열)
        api_keys_string = os.environ.get('GEMINI_API_KEYS')
        print(f"🔍 GEMINI_API_KEYS 원본: {api_keys_string[:50] if api_keys_string else 'None'}...")
        
        if api_keys_string:
            # 콤마로 분리하고 공백 제거
            api_keys = [key.strip() for key in api_keys_string.split(',') if key.strip()]
            print(f"🔍 파싱된 키 개수: {len(api_keys)}")
            
            for i, key in enumerate(api_keys):
                print(f"   키 {i+1}: {key[:8]}***{key[-4:] if len(key) > 12 else '***'} (길이: {len(key)})")
            
            if api_keys:
                # 랜덤하게 하나 선택
                selected_key = random.choice(api_keys)
                print(f"🎲 랜덤 API 키 선택: {selected_key[:8]}***{selected_key[-4:]}")
                return selected_key
            else:
                print("❌ 파싱된 키가 없음")
        else:
            print("❌ GEMINI_API_KEYS 환경변수가 없음")
        
        # 폴백: 단일 키
        fallback_key = os.environ.get('GEMINI_API_KEY')
        if fallback_key:
            print(f"🔑 폴백 API 키 사용: {fallback_key[:8]}***{fallback_key[-4:]}")
            return fallback_key
        
        print("❌ 모든 API 키를 찾을 수 없습니다")
        return None
        
    except Exception as e:
        print(f"❌ API 키 선택 실패: {e}")
        return os.environ.get('GEMINI_API_KEY')

# 허깅페이스 Secrets에서 모듈 코드 불러와서 실행
def load_module_from_env(env_var_name):
    """환경변수에서 코드를 불러와서 모듈로 실행"""
    try:
        code = os.environ.get(env_var_name)
        if not code:
            raise ImportError(f"Environment variable '{env_var_name}' not found")
        
        # 모듈 namespace 생성하고 코드 실행
        module_globals = {}
        exec(code, module_globals)
        
        print(f"✅ {env_var_name} 모듈 로드 성공")
        return module_globals
        
    except Exception as e:
        print(f"❌ {env_var_name} 모듈 로드 실패: {e}")
        return None

# 이미지 처리 모듈 임포트
try:
    image_processor_module = load_module_from_env('IMAGE_PROCESSOR_CODE')
    if image_processor_module:
        create_uhp_image = image_processor_module['create_uhp_image']
        save_image_to_downloads = image_processor_module['save_image_to_downloads']
        print("✅ image_processor 모듈 임포트 성공")
    else:
        raise ImportError("IMAGE_PROCESSOR_CODE not found")
except ImportError as e:
    print(f"❌ image_processor 임포트 오류: {e}")
    
    def create_uhp_image(*args, **kwargs):
        return None, "추천배경", "#FFFFFF", "#000000", "#000000", 100, 55, {}
    
    def save_image_to_downloads(*args, **kwargs):
        return None, "image_processor 모듈을 찾을 수 없습니다."

# 카피 생성 모듈 임포트
try:
    copy_generator_module = load_module_from_env('COPY_GENERATOR_CODE')
    if copy_generator_module:
        generate_copy_suggestions = copy_generator_module['generate_copy_suggestions']
        print("✅ copy_generator 모듈 임포트 성공")
    else:
        raise ImportError("COPY_GENERATOR_CODE not found")
except ImportError as e:
    print(f"⚠️ copy_generator 임포트 오류: {e}")
    
    def generate_copy_suggestions(keyword, api_key, selected_type):
        return {
            "error": "copy_generator 모듈을 찾을 수 없습니다. 카피 생성 기능이 비활성화됩니다."
        }, ""

# 커스텀 CSS 스타일 (다크모드 적용 버전)
custom_css = """
/* ============================================
   다크모드 자동 변경 템플릿 CSS
   ============================================ */
/* 1. CSS 변수 정의 (라이트모드 - 기본값) */
:root {
    /* 메인 컬러 */
    --primary-color: #FB7F0D;
    --secondary-color: #ff9a8b;
    --accent-color: #FF6B6B;
    
    /* 배경 컬러 */
    --background-color: #FFFFFF;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    
    /* 텍스트 컬러 */
    --text-color: #334155;
    --text-secondary: #64748b;
    
    /* 보더 및 구분선 */
    --border-color: #dddddd;
    --border-light: #e5e5e5;
    
    /* 테이블 컬러 */
    --table-even-bg: #f3f3f3;
    --table-hover-bg: #f0f0f0;
    
    /* 그림자 */
    --shadow: 0 8px 30px rgba(251, 127, 13, 0.08);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* 기타 */
    --border-radius: 18px;
}
/* 2. 다크모드 색상 변수 (자동 감지) */
@media (prefers-color-scheme: dark) {
    :root {
        /* 배경 컬러 */
        --background-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --input-bg: #2d2d2d;
        
        /* 텍스트 컬러 */
        --text-color: #e5e5e5;
        --text-secondary: #a1a1aa;
        
        /* 보더 및 구분선 */
        --border-color: #404040;
        --border-light: #525252;
        
        /* 테이블 컬러 */
        --table-even-bg: #333333;
        --table-hover-bg: #404040;
        
        /* 그림자 */
        --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}
/* 3. 수동 다크모드 클래스 (Gradio 토글용) */
[data-theme="dark"], 
.dark,
.gr-theme-dark {
    /* 배경 컬러 */
    --background-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    
    /* 텍스트 컬러 */
    --text-color: #e5e5e5;
    --text-secondary: #a1a1aa;
    
    /* 보더 및 구분선 */
    --border-color: #404040;
    --border-light: #525252;
    
    /* 테이블 컬러 */
    --table-even-bg: #333333;
    --table-hover-bg: #404040;
    
    /* 그림자 */
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* 4. 기본 요소 다크모드 적용 */
body {
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* 5. Gradio 컨테이너 강제 적용 */
.gradio-container,
.gradio-container *,
.gr-app,
.gr-app *,
.gr-interface {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}
/* 푸터 숨김 설정 추가 */
footer {
    visibility: hidden;
}
.gradio-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--background-color);
}
/* ── 그룹 래퍼 배경 완전 제거 ── */
.custom-section-group,
.gr-block.gr-group {
    background-color: var(--background-color) !important;
    box-shadow: none !important;
}
.custom-section-group::before,
.custom-section-group::after,
.gr-block.gr-group::before,
.gr-block.gr-group::after {
    display: none !important;
    content: none !important;
}
/* 그룹 컨테이너 배경을 아이보리로, 그림자 제거 */
.custom-section-group {
    background-color: var(--background-color) !important;
    box-shadow: none !important;
}
/* 6. 카드 및 패널 스타일 */
.custom-frame,
.gr-form,
.gr-box,
.gr-panel,
[class*="frame"],
[class*="card"],
[class*="panel"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 10px 0;
    box-shadow: var(--shadow) !important;
    color: var(--text-color) !important;
}
/* 섹션 그룹 스타일 - 회색 배경 완전 제거 */
.custom-section-group {
    margin-top: 20px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: var(--background-color);
    box-shadow: none !important;
}
/* 버튼 스타일 - 글자 크기 18px */
.custom-button {
    border-radius: 30px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    font-size: 18px !important;
    padding: 10px 20px !important;
    border: none;
    box-shadow: 0 4px 8px rgba(251, 127, 13, 0.25);
    transition: transform 0.3s ease;
}
.custom-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(251, 127, 13, 0.3);
}
/* 제목 스타일 (모든 항목명이 동일하게 custom-title 클래스로) */
.custom-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}
/* 이미지 컨테이너 - 크기 고정 */
.image-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px dashed var(--border-color);
    transition: all 0.3s ease;
    background-color: var(--card-bg);
}
/* 이미지 업로드 영역 개선 */
.gradio-container .gr-image {
    border: 2px dashed var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background-color: var(--card-bg) !important;
    transition: all 0.3s ease !important;
}
.gradio-container .gr-image:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(251, 127, 13, 0.15) !important;
}
/* 업로드 영역 내부 텍스트 */
.gradio-container .gr-image .upload-container,
.gradio-container .gr-image [data-testid="upload-container"] {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: none !important;
}
/* 업로드 영역 드래그 안내 텍스트 */
.gradio-container .gr-image .upload-container p,
.gradio-container .gr-image [data-testid="upload-container"] p {
    color: var(--text-color) !important;
    font-size: 14px !important;
}
/* 업로드 버튼 스타일 개선 */
.gradio-container .gr-image .upload-container button,
.gradio-container .gr-image [data-testid="upload-container"] button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.gradio-container .gr-image .upload-container button:hover,
.gradio-container .gr-image [data-testid="upload-container"] button:hover {
    background-color: var(--secondary-color) !important;
    transform: translateY(-1px) !important;
}
/* 업로드 영역 아이콘 */
.gradio-container .gr-image .upload-container svg,
.gradio-container .gr-image [data-testid="upload-container"] svg {
    color: var(--primary-color) !important;
    width: 32px !important;
    height: 32px !important;
}
/* 이미지가 업로드된 후 표시 영역 */
.gradio-container .gr-image img {
    background-color: var(--card-bg) !important;
    border-radius: var(--border-radius) !important;
}
/* 이미지 제거 버튼 */
.gradio-container .gr-image .image-container button,
.gradio-container .gr-image [data-testid="image"] button {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.gradio-container .gr-image .image-container button:hover,
.gradio-container .gr-image [data-testid="image"] button:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}
/* 업로드 이미지 컨테이너 (600x600) */
.upload-image-container {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}
/* 출력 이미지 컨테이너 (700x600) */
.output-image-container {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}
.image-container:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
/* Gradio 업로드 이미지 컴포넌트 크기 고정 (600x600) */
.gradio-container .gr-image.upload-image {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}
/* Gradio 출력 이미지 컴포넌트 크기 고정 (700x600) */
.gradio-container .gr-image.output-image {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}
/* 이미지 업로드 영역 크기 고정 */
.gradio-container .gr-image.upload-image > div {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}
/* 이미지 출력 영역 크기 고정 */
.gradio-container .gr-image.output-image > div {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}
/* 이미지 업로드 드래그 영역 크기 고정 */
.gradio-container .gr-image.upload-image .image-container,
.gradio-container .gr-image.upload-image [data-testid="image"],
.gradio-container .gr-image.upload-image .upload-container {
    width: 600px !important;
    height: 600px !important;
    min-width: 600px !important;
    min-height: 600px !important;
    max-width: 600px !important;
    max-height: 600px !important;
}
/* 이미지 출력 드래그 영역 크기 고정 */
.gradio-container .gr-image.output-image .image-container,
.gradio-container .gr-image.output-image [data-testid="image"],
.gradio-container .gr-image.output-image .upload-container {
    width: 700px !important;
    height: 600px !important;
    min-width: 700px !important;
    min-height: 600px !important;
    max-width: 700px !important;
    max-height: 600px !important;
}
/* 7. 입력 필드 스타일 */
.gr-input, .gr-text-input, .gr-sample-inputs,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
.gr-textarea,
.gr-dropdown {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-color) !important;
    padding: 14px !important;
    font-size: 15px !important;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}
.gr-input:focus, .gr-text-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.gr-textarea:focus,
.gr-dropdown:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(251, 127, 13, 0.2) !important;
}
/* 8. 라벨 및 텍스트 요소 */
.gradio-container label,
label,
.gr-label,
.gr-checkbox label,
.gr-radio label,
p, span, div {
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
/* 드롭다운 및 라디오 버튼 폰트 크기 */
.gr-radio label, .gr-dropdown label, .gr-checkbox label {
    font-size: 15px !important;
}
/* 라디오 버튼 선택지 볼드 처리 제거 */
.gr-radio .gr-radio-option label,
.gr-radio input[type="radio"] + label,
.gr-radio .gr-form label {
    font-weight: normal !important;
    font-size: 15px !important;
}
/* 라디오 버튼 그룹 내 모든 라벨 일반 폰트로 설정 */
.gr-radio fieldset label {
    font-weight: normal !important;
}
/* 마크다운 텍스트 크기 증가 */
.gradio-container .gr-markdown {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-color) !important;
}
/* 텍스트박스 내용 폰트 크기 */
.gr-textbox textarea, .gr-textbox input {
    font-size: 15px !important;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
}
/* 아코디언 제목 폰트 크기 */
.gr-accordion summary {
    font-size: 17px !important;
    font-weight: 600 !important;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}
/* 메인 컨텐츠 스크롤바 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}
/* 애니메이션 스타일 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.5s ease-out;
}
/* 반응형 */
@media (max-width: 768px) {
    .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 섹션 제목 스타일 */
.section-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}
.section-title img {
    margin-right: 12px;
    width: 28px;
    height: 28px;
    /* 다크모드에서 아이콘 필터 적용 */
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
/* 라이트모드에서는 원래 아이콘 색상 유지 */
@media (prefers-color-scheme: light) {
    .section-title img {
        filter: none;
    }
}
/* 수동 다크모드 클래스에서도 아이콘 색상 적용 */
[data-theme="dark"] .section-title img, 
.dark .section-title img,
.gr-theme-dark .section-title img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
/* 10. 아코디언 및 드롭다운 - 수동설정 영역 회색 배경 제거 */
details,
.gr-accordion,
.gr-accordion details {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius) !important;
    margin: 10px 0 !important;
}
details summary,
.gr-accordion summary,
.gr-accordion details summary {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    padding: 12px 16px !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
details summary:hover,
.gr-accordion summary:hover,
.gr-accordion details summary:hover {
    background-color: var(--table-hover-bg) !important;
}
/* 아코디언 내부 콘텐츠 */
details[open],
.gr-accordion[open],
.gr-accordion details[open] {
    background-color: var(--background-color) !important;
}
details[open] > *:not(summary),
.gr-accordion[open] > *:not(summary),
.gr-accordion details[open] > *:not(summary) {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    padding: 16px !important;
    border-top: 1px solid var(--border-color) !important;
}
/* 그룹 내부 스타일 - 수동설정 내부 그룹들 */
.gr-group,
details .gr-group,
.gr-accordion .gr-group {
    background-color: var(--background-color) !important;
    border: none !important;
    padding: 12px 0 !important;
    margin: 8px 0 !important;
    border-radius: var(--border-radius) !important;
}
/* 그룹 내부 제목 */
.gr-group .gr-markdown h3,
.gr-group h3 {
    color: var(--text-color) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-color) !important;
}
/* 11. 추가 Gradio 컴포넌트들 */
.gr-block,
.gr-group,
.gr-row,
.gr-column {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}
/* 12. 버튼은 기존 스타일 유지 (primary-color 사용) */
button:not([class*="custom"]):not([class*="primary"]):not([class*="secondary"]) {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
/* 14. 전환 애니메이션 */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}
"""

# FontAwesome 아이콘 포함
fontawesome_link = """
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
"""

def create_download_filename(keyword):
    """한국시간 기준으로 다운로드 파일명 생성"""
    from datetime import datetime, timezone, timedelta
    
    # 한국 시간대 설정 (UTC+9)
    kst = timezone(timedelta(hours=9))
    now = datetime.now(kst)
    
    # 파일명에 사용할 수 없는 문자 제거
    import re
    safe_keyword = re.sub(r'[<>:"/\\|?*]', '_', keyword) if keyword else "상품"
    safe_keyword = safe_keyword[:30]  # 길이 제한 30자로 변경
    
    # YYMMDD_시간분 형식
    time_str = now.strftime("%y%m%d_%H%M")
    filename = f"{safe_keyword}_{time_str}.jpg"
    
    return filename

def prepare_download_file(image, keyword):
    """다운로드용 임시 파일 생성 (올바른 파일명 포함)"""
    if image is None:
        return None
    
    try:
        # 한국시간 기준 파일명 생성
        filename = create_download_filename(keyword)
        
        # 임시 디렉토리에 원하는 파일명으로 저장
        import tempfile
        import os
        
        # 임시 디렉토리 생성
        temp_dir = tempfile.mkdtemp()
        file_path = os.path.join(temp_dir, filename)
        
        # PIL Image를 RGB로 변환 후 저장
        if isinstance(image, Image.Image):
            # RGBA를 RGB로 변환
            if image.mode == 'RGBA':
                background = Image.new('RGB', image.size, (255, 255, 255))
                background.paste(image, mask=image.split()[-1])
                image_to_save = background
            else:
                image_to_save = image.convert('RGB')
        else:
            image_to_save = image
        
        # JPG로 저장 (원하는 파일명으로)
        image_to_save.save(file_path, 'JPEG', quality=95)
        
        print(f"✅ 다운로드 파일 준비: {filename}")
        print(f"📁 파일 경로: {file_path}")
        return file_path
        
    except Exception as e:
        print(f"❌ 다운로드 파일 준비 실패: {e}")
        return None

def main():
    with gr.Blocks(
        css=custom_css, 
        theme=gr.themes.Default(
            primary_hue="orange",
            secondary_hue="orange",
            font=[gr.themes.GoogleFont("Noto Sans KR"), "ui-sans-serif", "system-ui"]
        ),
        title="UHP 이미지생성기"
    ) as app:
        
        # FontAwesome 링크 추가
        gr.HTML(fontawesome_link)
        
        # 상태 관리
        copy_suggestions_state = gr.State({})
        current_keyword_state = gr.State("")
        
        with gr.Row():
            # 왼쪽: 1단계 AI 카피 생성
            with gr.Column(scale=1):
                # AI 카피 생성 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/3097/3097412.png"> 1단계: AI 카피 생성</div>')
                    
                    product_keyword = gr.Textbox(
                        label="상품 키워드", 
                        placeholder="예: 바나바잎 추출물, 프리미엄 텀블러, 천연 스킨케어"
                    )
                    
                    copy_type_selection = gr.Radio(
                        choices=[
                            "장점요약형", "문제제시형", "사회적증거형", "긴급성유도형",
                            "가격경쟁력형", "매인변화형", "충동구매유도형", "공포소구형"
                        ],
                        label="📋 1. 카피 타입 선택",
                        value="장점요약형",
                        visible=True
                    )
                    
                    copy_type_description = gr.Markdown(
                        "**장점요약형**: 제품의 장점을 한눈에 강조 - 핵심 기능과 혜택을 간결하게 요약하여 제시",
                        visible=True
                    )
                    
                    generate_copy_btn = gr.Button("메인카피 생성", elem_classes="custom-button")
                    
                    # 카피 출력 영역
                    copy1_display = gr.Textbox(label="추천1", interactive=False, show_label=True)
                    copy2_display = gr.Textbox(label="추천2", interactive=False, show_label=True)
                    copy3_display = gr.Textbox(label="추천3", interactive=False, show_label=True)
                    copy4_display = gr.Textbox(label="추천4", interactive=False, show_label=True)
                    copy5_display = gr.Textbox(label="추천5", interactive=False, show_label=True)
                    
                    copy_selection = gr.Radio(
                        choices=["추천 1", "추천 2", "추천 3", "추천 4", "추천 5"],
                        label="📝 2. 카피 선택",
                        value="추천 1",
                        visible=True
                    )
                    
                    with gr.Row():
                        main_text = gr.Textbox(
                            label="메인카피", 
                            placeholder="위에서 카피를 선택하면 자동으로 입력됩니다",
                            interactive=True
                        )
                        sub_text = gr.Textbox(
                            label="서브카피", 
                            placeholder="위에서 카피를 선택하면 자동으로 입력됩니다",
                            interactive=True
                        )
                    
                    # 예시
                    gr.Examples(
                        examples=[
                            ["통굽슬리퍼"], ["바나바잎 추출물"], ["프리미엄 텀블러"],
                            ["천연 스킨케어"], ["유기농 원두"], ["무선 이어폰"]
                        ],
                        inputs=[product_keyword]
                    )

            # 오른쪽: 2단계 이미지생성
            with gr.Column(scale=1):
                # 이미지 업로드 및 설정 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/4297/4297825.png"> 2단계: 이미지생성</div>')
                    
                    input_image = gr.Image(
                        type="filepath", 
                        label="상품 이미지 업로드",
                        elem_classes="image-container upload-image-container"
                    )
                    
                    color_mode = gr.Radio(
                        choices=["추천배경", "흰색배경", "수동 설정배경"],
                        value="추천배경",
                        label="배경색 설정"
                    )
                    
                    generate_image_btn = gr.Button("이미지생성", elem_classes="custom-button")
                    
                    # 수동설정 아코디언
                    with gr.Accordion("수동설정", open=False):
                        with gr.Group():
                            gr.Markdown("### 폰트 선택")
                            with gr.Row():
                                main_font_choice = gr.Dropdown(
                                    choices=[
                                        "프리텐다드-Bold", "에스코어드림-Bold", "노토산스-Bold",
                                        "배달의민족 도현체", "배달의민족 주아체", "여기어때 잘난체",
                                        "온글잎 콘콘체", "온글잎 박다현체", "이사만루-Bold",
                                        "카페24 아네모네-Bold", "어그로체-Bold", "SF함박눈", "페이퍼로지-Bold"
                                    ],
                                    value="프리텐다드-Bold",
                                    label="메인 카피 폰트"
                                )
                                sub_font_choice = gr.Dropdown(
                                    choices=[
                                        "프리텐다드-Regular", "에스코어드림-Regular", "노토산스-Regular",
                                        "배달의민족 도현체", "배달의민족 주아체", "여기어때 잘난체",
                                        "온글잎 콘콘체", "온글잎 박다현체", "이사만루-Light",
                                        "카페24 아네모네-Regular", "어그로체-Light", "SF함박눈", "페이퍼로지-Regular"
                                    ],
                                    value="프리텐다드-Regular",
                                    label="서브 카피 폰트"
                                )
                        
                        with gr.Group():
                            gr.Markdown("### 수동 색상 설정")
                            with gr.Row():
                                manual_bg_color = gr.ColorPicker(label="배경색", value="#FFFFFF", interactive=True)
                            with gr.Row():
                                manual_main_text_color = gr.ColorPicker(label="메인 텍스트색", value="#000000", interactive=True)
                                manual_sub_text_color = gr.ColorPicker(label="서브 텍스트색", value="#000000", interactive=True)
                        
                        with gr.Group():
                            gr.Markdown("### 수동 폰트 크기 설정")
                            with gr.Row():
                                manual_main_font_size = gr.Slider(
                                    minimum=20, maximum=200, value=100, step=5,
                                    label="메인 폰트 크기 (px)", interactive=True
                                )
                                manual_sub_font_size = gr.Slider(
                                    minimum=15, maximum=120, value=55, step=5,
                                    label="서브 폰트 크기 (px)", interactive=True
                                )
                        
                        with gr.Group():
                            gr.Markdown("### 📏 여백 및 간격 조정")
                            with gr.Row():
                                top_bottom_margin = gr.Slider(
                                    minimum=50, maximum=800, value=450, step=10,
                                    label="상하 여백 (px)", 
                                    info="여백-카피-여백의 여백 크기",
                                    interactive=True
                                )
                            with gr.Row():
                                text_gap = gr.Slider(
                                    minimum=5, maximum=100, value=30, step=5,
                                    label="메인↔서브 간격 (px)", 
                                    info="메인카피와 서브카피 사이 간격",
                                    interactive=True
                                )
                            
                            # 현재 적용된 여백 정보 표시
                            margin_info = gr.Markdown(
                                "💡 **현재 여백 정보:** 이미지 생성 후 실제 적용된 수치가 표시됩니다.",
                                visible=True
                            )
                
                # 생성된 이미지 섹션
                with gr.Column(elem_classes="custom-frame"):
                    gr.HTML('<div class="section-title"><img src="https://cdn-icons-png.flaticon.com/512/1375/1375106.png"> 생성된 이미지</div>')
                    
                    # 🎯 핵심: Gradio 기본 이미지 출력 (다운로드 버튼 자동 포함)
                    output_image = gr.Image(
                        label="생성된 이미지",
                        show_download_button=True,  # 다운로드 버튼 표시
                        show_share_button=False,    # 공유 버튼 숨김
                        interactive=False,
                        type="pil",  # PIL Image 타입으로 설정
                        elem_classes="image-container output-image-container"
                    )
                    
                    # 🎯 핵심: Gradio 기본 파일 다운로드 컴포넌트
                    download_file = gr.File(
                        label="📥 이미지 다운로드",
                        visible=True,
                        interactive=False
                    )
        
        # 이벤트 핸들러들
        
        def handle_copy_generation(keyword, selected_type):
            """카피 생성 처리 (랜덤 API 키 사용)"""
            # 🎲 랜덤 API 키 선택
            api_key = get_random_gemini_api_key()
            print(f"🔑 카피 생성용 API 키: {api_key[:8] if api_key else 'None'}***")
            
            if not keyword.strip():
                return ("⚠️ 상품 키워드를 입력해주세요.", {}, "", "", "", "", "", "", "", keyword.strip())
            
            if not api_key:
                return ("⚠️ API 키가 설정되지 않았습니다.", {}, "", "", "", "", "", "", "", keyword.strip())
            
            if not selected_type:
                return ("⚠️ 카피 타입을 먼저 선택해주세요.", {}, "", "", "", "", "", "", "", keyword.strip())
            
            print(f"🚀 카피 생성 프로세스 시작: {keyword} - {selected_type}")
            suggestions, analysis = generate_copy_suggestions(keyword, api_key, selected_type)
            
            print(f"🔍 AI 응답 타입: {type(suggestions)}")
            print(f"🔍 AI 응답 키들: {list(suggestions.keys()) if isinstance(suggestions, dict) else 'Not dict'}")
            
            if "error" not in suggestions:
                print("✅ 카피 생성 성공!")
                
                # 선택된 타입의 카피 리스트 가져오기
                copy_list = suggestions.get(selected_type, [])
                print(f"📋 {selected_type} 카피 개수: {len(copy_list)}")
                
                # 각 카피 아이템 검증
                for i, item in enumerate(copy_list):
                    if isinstance(item, dict):
                        main = item.get("main", "")
                        sub = item.get("sub", "")
                        print(f"   추천{i+1}: 메인='{main}', 서브='{sub}'")
                    else:
                        print(f"   추천{i+1}: 잘못된 형식 {type(item)}")
                
                # 표시용 카피 문자열 생성 (추천1~5 텍스트박스용)
                copy_values = []
                for i in range(5):
                    if i < len(copy_list) and isinstance(copy_list[i], dict):
                        main = copy_list[i].get("main", "")
                        sub = copy_list[i].get("sub", "")
                        combined = f"{main} / {sub}"
                        copy_values.append(combined)
                        print(f"📝 추천{i+1} 표시: {combined}")
                    else:
                        copy_values.append("")
                        print(f"📝 추천{i+1} 표시: (비어있음)")
                
                # 첫 번째 카피를 메인/서브 텍스트박스에 자동 입력
                first_main = ""
                first_sub = ""
                if copy_list and isinstance(copy_list[0], dict):
                    first_main = copy_list[0].get("main", "")
                    first_sub = copy_list[0].get("sub", "")
                    print(f"🎯 자동 선택: 메인='{first_main}', 서브='{first_sub}'")
                
                return (f"✅ {selected_type} 카피 생성 완료!", suggestions, *copy_values, first_main, first_sub, keyword.strip())
            else:
                print(f"❌ 카피 생성 실패: {suggestions['error']}")
                error_msg = f"❌ 오류: {suggestions['error']}"
                return (error_msg, {}, "", "", "", "", "", "", "", keyword.strip())
        
        def update_copy_type_description(selected_type):
            """카피 타입 선택시 설명 업데이트"""
            descriptions = {
                "장점요약형": "**장점요약형**: 제품의 장점을 한눈에 강조 - 핵심 기능과 혜택을 간결하게 요약하여 제시",
                "문제제시형": "**문제제시형**: 문제를 제시 후 해결책 제안 - 고객의 불편함을 먼저 언급하고 해결방안 제시",
                "사회적증거형": "**사회적증거형**: 신뢰와 인기를 강조 - 타인의 사용후기와 검증된 실적으로 신뢰성 어필",
                "긴급성유도형": "**긴급성유도형**: 즉시 구매를 유도 - 한정수량, 시간제한 등으로 긴급감 조성",
                "가격경쟁력형": "**가격경쟁력형**: 합리적 가격을 강조해 성취 - 가성비, 할인혜택 등 경제적 이득 강조",
                "매인변화형": "**매인변화형**: 강한 비교를 시선 집중 - 사용 전후 변화나 극적인 개선 효과 부각",
                "충동구매유도형": "**충동구매유도형**: 특정 구매욕구를 자극 - 특별함과 프리미엄 가치로 소유욕 자극",
                "공포소구형": "**공포소구형**: 불안 위험을 강조해 감정 유발 - 놓치면 후회할 기회나 위험성을 경고"
            }
            
            if selected_type and selected_type in descriptions:
                return descriptions[selected_type]
            else:
                return "### 카피 타입을 선택하면 설명이 표시됩니다."
        
        def handle_copy_selection(suggestions, selected_type, selected_copy):
            """카피 선택시 메인/서브 텍스트박스 업데이트 (개선된 버전)"""
            print(f"🔘 라디오 선택: {selected_copy}, 타입: {selected_type}")
            print(f"🔍 suggestions 상태: {type(suggestions)}, 키: {list(suggestions.keys()) if suggestions else 'None'}")
            
            if not suggestions or "error" in suggestions:
                print("❌ suggestions 데이터가 없거나 에러 상태")
                return "", ""
            
            if not selected_type or not selected_copy:
                print("❌ 타입이나 선택된 카피가 없음")
                return "", ""
            
            if selected_type not in suggestions:
                print(f"❌ {selected_type} 타입을 suggestions에서 찾을 수 없음")
                print(f"📋 사용 가능한 타입들: {list(suggestions.keys())}")
                return "", ""
            
            copy_list = suggestions[selected_type]
            if not isinstance(copy_list, list):
                print(f"❌ {selected_type} 데이터가 리스트가 아님: {type(copy_list)}")
                return "", ""
            
            print(f"📝 {selected_type} 카피 리스트: {len(copy_list)}개")
            
            # 라디오 버튼 선택값에서 번호 추출 (더 안전한 방법)
            try:
                if "추천 1" in selected_copy:
                    option_number = 0
                elif "추천 2" in selected_copy:
                    option_number = 1
                elif "추천 3" in selected_copy:
                    option_number = 2
                elif "추천 4" in selected_copy:
                    option_number = 3
                elif "추천 5" in selected_copy:
                    option_number = 4
                else:
                    # 백업 방법: 숫자 추출
                    import re
                    numbers = re.findall(r'\d+', selected_copy)
                    option_number = int(numbers[0]) - 1 if numbers else 0
                
                print(f"🔢 추출된 옵션 번호: {option_number}")
                
            except Exception as e:
                print(f"❌ 옵션 번호 추출 실패: {e}, 기본값 0 사용")
                option_number = 0
            
            # 범위 체크
            if 0 <= option_number < len(copy_list):
                selected_copy_item = copy_list[option_number]
                
                if not isinstance(selected_copy_item, dict):
                    print(f"❌ 선택된 카피 아이템이 딕셔너리가 아님: {type(selected_copy_item)}")
                    return "", ""
                
                main_text = selected_copy_item.get("main", "")
                sub_text = selected_copy_item.get("sub", "")
                
                print(f"✅ 선택된 카피 - 메인: '{main_text}', 서브: '{sub_text}'")
                
                # 빈 문자열 체크
                if not main_text and not sub_text:
                    print("⚠️ 메인카피와 서브카피가 모두 비어있음")
                
                return main_text, sub_text
            else:
                print(f"❌ 잘못된 옵션 번호: {option_number} (범위: 0~{len(copy_list)-1})")
                return "", ""
        
        def handle_image_generation(input_image, main_text, sub_text, color_mode, 
                                  main_font_choice, sub_font_choice, manual_bg_color, manual_main_text_color, 
                                  manual_sub_text_color, manual_main_font_size, manual_sub_font_size, 
                                  top_bottom_margin, text_gap, current_keyword):
            """이미지 생성 처리 (여백 조정 기능 포함)"""
            # 🎲 랜덤 API 키 선택
            api_key = get_random_gemini_api_key()
            print(f"🔑 이미지 생성용 API 키: {api_key[:8] if api_key else 'None'}***")
            
            # 🎯 NEW: 여백 설정을 create_uhp_image 함수에 전달
            image_result, color_mode_result, new_bg_color, new_main_text_color, new_sub_text_color, new_main_font_size, new_sub_font_size, applied_margin_info = create_uhp_image(
                input_image, main_text, sub_text, color_mode,
                main_font_choice, sub_font_choice, manual_bg_color, manual_main_text_color, manual_sub_text_color,
                manual_main_font_size, manual_sub_font_size, api_key,
                top_bottom_margin, text_gap  # 새로운 여백 파라미터 추가
            )
            
            # 🎯 핵심: 다운로드 파일 준비
            download_file_path = None
            if image_result is not None:
                download_file_path = prepare_download_file(image_result, current_keyword)
            
            # 🎯 NEW: 적용된 여백 정보 생성
            margin_info_text = f"""📏 **적용된 여백 정보:**
• 상하 여백: {applied_margin_info.get('top_bottom_margin', 0)}px
• 메인↔서브 간격: {applied_margin_info.get('text_gap', 0)}px
• 이미지 크기: {applied_margin_info.get('canvas_width', 0)} × {applied_margin_info.get('canvas_height', 0)}px
• 원본 크기: {applied_margin_info.get('original_width', 0)} × {applied_margin_info.get('original_height', 0)}px"""
            
            return (image_result, color_mode_result, new_bg_color, new_main_text_color, new_sub_text_color,
                    new_main_font_size, new_sub_font_size, download_file_path, margin_info_text)
        
        # 이벤트 연결
        copy_type_selection.change(
            fn=update_copy_type_description,
            inputs=[copy_type_selection],
            outputs=[copy_type_description]
        )
        
        generate_copy_btn.click(
            fn=handle_copy_generation,
            inputs=[product_keyword, copy_type_selection],
            outputs=[copy_type_description, copy_suggestions_state,
                    copy1_display, copy2_display, copy3_display, copy4_display, copy5_display,
                    main_text, sub_text, current_keyword_state]
        )
        
        copy_selection.change(
            fn=handle_copy_selection,
            inputs=[copy_suggestions_state, copy_type_selection, copy_selection],
            outputs=[main_text, sub_text]
        )
        
        generate_image_btn.click(
            fn=handle_image_generation,
            inputs=[input_image, main_text, sub_text, color_mode, 
                   main_font_choice, sub_font_choice, manual_bg_color, manual_main_text_color, manual_sub_text_color,
                   manual_main_font_size, manual_sub_font_size, top_bottom_margin, text_gap, current_keyword_state],
            outputs=[output_image, color_mode, manual_bg_color, manual_main_text_color, manual_sub_text_color,
                    manual_main_font_size, manual_sub_font_size, download_file, margin_info]
        )
    
    return app

if __name__ == "__main__":
    app = main()
    app.launch(share=False, inbrowser=True)