{% extends "base.html" %}

{% block title %}上传猫咪 - 猫猫天堂{% endblock %}

{% block content %}
<div class="upload-page">
    <div class="page-header">
        <h2>🐱 送猫咪去天堂</h2>
        <p class="subtitle">每只猫咪都值得一个美好的归宿</p>
        <div class="cat-count">你已创建 {{ cat_count }}/20 只猫咪</div>
    </div>
    
    {% if error %}
    <div class="error-message">{{ error }}</div>
    {% endif %}
    
    {% if cat_count < 20 %}
    <form method="POST" enctype="multipart/form-data" class="cat-form">
        <div class="form-section">
            <h3>基本信息</h3>
            
            <div class="form-group">
                <label for="name">猫咪名字 *</label>
                <input type="text" id="name" name="name" required placeholder="给你的猫咪起个名字">
            </div>
            
            <div class="form-group">
                <label for="photo">猫咪照片 *</label>
                <div class="photo-upload" onclick="document.getElementById('photo').click()">
                    <input type="file" id="photo" name="photo" accept="image/*" required style="display: none;" onchange="previewPhoto(this)">
                    <div class="upload-placeholder" id="upload-placeholder">
                        <span class="upload-icon">📷</span>
                        <p>点击上传照片</p>
                    </div>
                    <img id="photo-preview" class="photo-preview" style="display: none;">
                </div>
                <p class="help-text">照片仅作纪念展示，不会用于生成卡通形象</p>
            </div>
        </div>
        
        <div class="form-section">
            <h3>外观特征</h3>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="coat_color">花色 *</label>
                    <select id="coat_color" name="coat_color" required>
                        <option value="">请选择花色</option>
                        <option value="orange">🟠 橘猫</option>
                        <option value="black">⚫ 黑猫</option>
                        <option value="white">⚪ 白猫</option>
                        <option value="gray">🔘 灰猫</option>
                        <option value="calico">🟡⚫⚪ 三花</option>
                        <option value="cow">⚪⚫ 奶牛</option>
                        <option value="tabby">🟤 狸花</option>
                        <option value="ragdoll">🐱 布偶</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="body_type">体型 *</label>
                    <select id="body_type" name="body_type" required>
                        <option value="">请选择体型</option>
                        <option value="slim">小巧</option>
                        <option value="normal">正常</option>
                        <option value="chubby">微胖</option>
                        <option value="round">圆滚滚</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="form-section">
            <h3>详细信息</h3>
            
            <div class="form-group">
                <label for="personality">性格描述</label>
                <textarea id="personality" name="personality" rows="3" placeholder="描述一下猫咪的性格特点..."></textarea>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="birth_date">出生日期</label>
                    <input type="date" id="birth_date" name="birth_date">
                </div>
                
                <div class="form-group">
                    <label for="death_date">离世日期</label>
                    <input type="date" id="death_date" name="death_date">
                </div>
            </div>
        </div>
        
        <div class="form-section">
            <div class="form-group checkbox-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_private">
                    <span class="checkmark"></span>
                    <span class="label-text">不公开（设为私密后，这只猫咪不会出现在公共天堂场景中，仅自己可见）</span>
                </label>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-large">
                🌈 送入天堂
            </button>
        </div>
    </form>
    {% endif %}
    
    {% if my_cats %}
    <div class="my-cats-section">
        <h3>我的猫咪</h3>
        <div class="cats-list">
            {% for cat in my_cats %}
            <div class="cat-item" data-cat-id="{{ cat.id }}">
                <div class="cat-info">
                    <span class="cat-name">{{ cat.name }}</span>
                    <span class="cat-coat">{{ cat.coat_color }}</span>
                    <span class="cat-body">{{ cat.body_type }}</span>
                    {% if cat.is_private %}
                    <span class="privacy-badge">私密</span>
                    {% endif %}
                </div>
                <button type="button" class="btn btn-danger btn-small" onclick="deleteCat({{ cat.id }})">删除</button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<script>
function previewPhoto(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('photo-preview').src = e.target.result;
            document.getElementById('photo-preview').style.display = 'block';
            document.getElementById('upload-placeholder').style.display = 'none';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function deleteCat(catId) {
    if (confirm('确定要删除这只猫咪吗？此操作不可恢复。')) {
        fetch('/delete_cat/' + catId, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.querySelector('[data-cat-id="' + catId + '"]').remove();
                alert('猫咪已删除');
            } else {
                alert('删除失败：' + data.error);
            }
        })
        .catch(error => {
            alert('删除失败，请重试');
        });
    }
}
</script>
{% endblock %}