{% extends "layout.html" %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Edit Profile: {{ character.name }}</h1>
        <a href="{{ url_for('detail', slug=character.slug) }}" class="btn btn-outline-secondary">Cancel</a>
    </div>

    <form action="{{ url_for('edit_character', slug=character.slug) }}" method="post" id="main-form">
        <div class="row">
            <div class="col-md-8">
                <!-- Basic Info -->
                <div class="card mb-4">
                    <div class="card-header bg-dark text-white">Basic Information</div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="character_name" class="form-label">Display Name</label>
                            <input type="text" class="form-control" id="character_name" name="character_name" value="{{ character.name }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="tags" class="form-label">Tags (comma separated)</label>
                            <input type="text" class="form-control" id="tags" name="tags" value="{{ character.data.tags | join(', ') }}">
                        </div>
                    </div>
                </div>

                <!-- LoRA -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">LoRA Settings</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <label for="lora_lora_name" class="form-label">LoRA Name</label>
                                <select class="form-select" id="lora_lora_name" name="lora_lora_name">
                                    <option value="">None</option>
                                    {% if char_looks %}
                                    <optgroup label="— Looks ({{ character.name }}) —">
                                        {% for look in char_looks %}
                                        {% set look_lora = look.data.lora.lora_name if look.data.lora else '' %}
                                        {% if look_lora %}
                                        <option value="{{ look_lora }}" {% if character.data.lora.lora_name == look_lora %}selected{% endif %}>{{ look.name }} ({{ look_lora.split('/')[-1].replace('.safetensors','') }})</option>
                                        {% endif %}
                                        {% endfor %}
                                    </optgroup>
                                    <optgroup label="— All Looks LoRAs —">
                                    {% else %}
                                    <optgroup label="— Looks LoRAs —">
                                    {% endif %}
                                        {% for lora in loras %}
                                        <option value="{{ lora }}" {% if character.data.lora.lora_name == lora %}selected{% endif %}>{{ lora }}</option>
                                        {% endfor %}
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="lora_lora_weight" class="form-label">Weight</label>
                                <input type="number" step="0.01" class="form-control" id="lora_lora_weight" name="lora_lora_weight" value="{{ character.data.lora.lora_weight }}">
                            </div>
                        </div>
                        <div class="mt-3">
                            <label for="lora_lora_triggers" class="form-label">Triggers</label>
                            <input type="text" class="form-control" id="lora_lora_triggers" name="lora_lora_triggers" value="{{ character.data.lora.lora_triggers }}">
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="lora_lora_weight_min" class="form-label small text-muted">Min Weight <span class="text-warning">(randomised)</span></label>
                                <input type="number" step="0.05" min="-5" max="5" class="form-control form-control-sm"
                                       id="lora_lora_weight_min" name="lora_lora_weight_min"
                                       value="{{ character.data.lora.get('lora_weight_min', '') if character.data.lora else '' }}"
                                       placeholder="e.g. 0.7">
                            </div>
                            <div class="col-md-6">
                                <label for="lora_lora_weight_max" class="form-label small text-muted">Max Weight <span class="text-warning">(randomised)</span></label>
                                <input type="number" step="0.05" min="-5" max="5" class="form-control form-control-sm"
                                       id="lora_lora_weight_max" name="lora_lora_weight_max"
                                       value="{{ character.data.lora.get('lora_weight_max', '') if character.data.lora else '' }}"
                                       placeholder="e.g. 1.0">
                            </div>
                        </div>
                        <p class="text-muted small mt-1 mb-0">When Min ≠ Max, weight is randomised between them each generation.</p>
                    </div>
                </div>

                <!-- Identity Section -->
                {% if character.data.identity %}
                <div class="card mb-4">
                    <div class="card-header bg-light"><strong>Identity</strong></div>
                    <div class="card-body">
                        {% for key, value in character.data.identity.items() %}
                        <div class="mb-3">
                            <label for="identity_{{ key }}" class="form-label text-capitalize">{{ key.replace('_', ' ') }}</label>
                            <input type="text" class="form-control" id="identity_{{ key }}" name="identity_{{ key }}" value="{{ value }}">
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Defaults Section -->
                {% if character.data.defaults %}
                <div class="card mb-4">
                    <div class="card-header bg-light"><strong>Defaults</strong></div>
                    <div class="card-body">
                        {% for key, value in character.data.defaults.items() %}
                        <div class="mb-3">
                            <label for="defaults_{{ key }}" class="form-label text-capitalize">{{ key.replace('_', ' ') }}</label>
                            <input type="text" class="form-control" id="defaults_{{ key }}" name="defaults_{{ key }}" value="{{ value }}">
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Wardrobe Section - Show all outfits with tabs -->
                <div class="card mb-4">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <strong>Wardrobe</strong>
                        <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addOutfitModal">
                            <i class="bi bi-plus-lg"></i> Add Outfit
                        </button>
                    </div>
                    <div class="card-body">
                        {% set wardrobe_data = character.data.wardrobe %}
                        {% set outfits = character.get_available_outfits() %}
                        {% if wardrobe_data.default is defined and wardrobe_data.default is mapping %}
                            {# New nested format - show tabs for each outfit #}
                            <ul class="nav nav-tabs mb-3" id="wardrobeTabs" role="tablist">
                                {% for outfit_name in outfits %}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {% if loop.first %}active{% endif %}" id="outfit-{{ outfit_name }}-tab" data-bs-toggle="tab" data-bs-target="#outfit-{{ outfit_name }}" type="button" role="tab">
                                        {{ outfit_name }}
                                        {% if outfit_name == character.active_outfit %}
                                        <span class="badge bg-primary ms-1">Active</span>
                                        {% endif %}
                                    </button>
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="tab-content" id="wardrobeTabContent">
                                {% for outfit_name in outfits %}
                                <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="outfit-{{ outfit_name }}" role="tabpanel">
                                    <div class="d-flex justify-content-end mb-2">
                                        {% if outfit_name != 'default' %}
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#renameOutfitModal" data-outfit="{{ outfit_name }}">Rename</button>
                                            <form action="{{ url_for('delete_outfit', slug=character.slug) }}" method="post" class="d-inline" onsubmit="return confirm('Delete outfit \'{{ outfit_name }}\'?');">
                                                <input type="hidden" name="outfit" value="{{ outfit_name }}">
                                                <button type="submit" class="btn btn-outline-danger">Delete</button>
                                            </form>
                                        </div>
                                        {% endif %}
                                    </div>
                                    {% for key, value in wardrobe_data[outfit_name].items() %}
                                    <div class="mb-3">
                                        <label for="wardrobe_{{ outfit_name }}_{{ key }}" class="form-label text-capitalize">{{ key.replace('_', ' ') }}</label>
                                        <input type="text" class="form-control" id="wardrobe_{{ outfit_name }}_{{ key }}" name="wardrobe_{{ outfit_name }}_{{ key }}" value="{{ value }}">
                                    </div>
                                    {% endfor %}
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            {# Legacy flat format #}
                            {% for key, value in wardrobe_data.items() %}
                            <div class="mb-3">
                                <label for="wardrobe_{{ key }}" class="form-label text-capitalize">{{ key.replace('_', ' ') }}</label>
                                <input type="text" class="form-control" id="wardrobe_{{ key }}" name="wardrobe_{{ key }}" value="{{ value }}">
                            </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>

                <!-- Styles Section -->
                {% if character.data.styles %}
                <div class="card mb-4">
                    <div class="card-header bg-light"><strong>Styles</strong></div>
                    <div class="card-body">
                        {% for key, value in character.data.styles.items() %}
                        <div class="mb-3">
                            <label for="styles_{{ key }}" class="form-label text-capitalize">{{ key.replace('_', ' ') }}</label>
                            <input type="text" class="form-control" id="styles_{{ key }}" name="styles_{{ key }}" value="{{ value }}">
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="mb-5">
                    <button type="submit" class="btn btn-primary btn-lg w-100">Save Changes to JSON</button>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="sticky-top" style="top: 20px;">
                    <div class="card">
                        <div class="card-header bg-warning text-dark">Notice</div>
                        <div class="card-body small">
                            <p>Saving changes here will overwrite the original JSON file in the <code>characters/</code> folder.</p>
                            <p>Character ID (<code>{{ character.character_id }}</code>) cannot be changed via the GUI to maintain file and URL consistency.</p>
                            <hr>
                            <p><strong>Outfits:</strong> Add multiple outfits using the "Add Outfit" button in the Wardrobe section. Switch between them on the character detail page.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Add Outfit Modal -->
<div class="modal fade" id="addOutfitModal" tabindex="-1" aria-labelledby="addOutfitModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ url_for('add_outfit', slug=character.slug) }}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOutfitModalLabel">Add New Outfit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newOutfitName" class="form-label">Outfit Name</label>
                        <input type="text" class="form-control" id="newOutfitName" name="outfit_name" placeholder="e.g., casual, formal, swimwear">
                        <div class="form-text">Name will be converted to lowercase with underscores.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Add Outfit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Rename Outfit Modal -->
<div class="modal fade" id="renameOutfitModal" tabindex="-1" aria-labelledby="renameOutfitModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ url_for('rename_outfit', slug=character.slug) }}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="renameOutfitModalLabel">Rename Outfit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="old_name" id="renameOldName">
                    <div class="mb-3">
                        <label for="renameNewName" class="form-label">New Name</label>
                        <input type="text" class="form-control" id="renameNewName" name="new_name" placeholder="Enter new outfit name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Rename</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Populate rename modal with current outfit name
document.getElementById('renameOutfitModal').addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var outfitName = button.getAttribute('data-outfit');
    document.getElementById('renameOldName').value = outfitName;
    document.getElementById('renameNewName').value = outfitName;
});
</script>
{% endblock %}