{% extends "layouts/app.twig" %}

{% block content %}
<div class="p-6">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Edit Actor</h1>
                <p class="text-gray-600 mt-1">Update actor information and metadata</p>
            </div>
            <a href="{{ path_for('actors.show', {'id': actor.id}) }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                Cancel
            </a>
        </div>
    </div>

    {% if error %}
    <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">Error</h3>
                <div class="mt-2 text-sm text-red-700">
                    {{ error }}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Edit Form -->
    <form method="POST" enctype="multipart/form-data" class="bg-white rounded-lg shadow-md border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Basic Information</h2>
        </div>

        <div class="p-6 space-y-6">
            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name *</label>
                <input type="text" name="name" id="name" value="{{ actor.name }}" required
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
            </div>

            <!-- Current Image -->
            {% if actor.thumbnail_path %}
            <div>
                <label class="block text-sm font-medium text-gray-700">Current Image</label>
                <div class="mt-1 flex items-center space-x-4">
                    <img src="{{ actor.thumbnail_path }}" alt="{{ actor.name }}" class="w-24 h-32 object-cover rounded border">
                    <div class="text-sm text-gray-500">
                        Current actor image. Upload a new image below to replace it.
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Image Upload -->
            <div>
                <label for="thumbnail" class="block text-sm font-medium text-gray-700">Upload New Image</label>
                <input type="file" name="thumbnail" id="thumbnail" accept="image/*"
                       class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                <p class="mt-1 text-sm text-gray-500">Supported formats: JPEG, PNG, GIF, WebP. Maximum file size: 5MB.</p>
            </div>

            <!-- Biography -->
            <div>
                <label for="biography" class="block text-sm font-medium text-gray-700">Biography</label>
                <textarea name="biography" id="biography" rows="4"
                          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2"
                          placeholder="Enter actor biography...">{{ metadata.biography ?? '' }}</textarea>
            </div>

            <!-- Personal Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label for="birth_date" class="block text-sm font-medium text-gray-700">Birth Date</label>
                    <input type="date" name="birth_date" id="birth_date" value="{{ metadata.birth_date ?? '' }}"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                </div>
                <div>
                    <label for="death_date" class="block text-sm font-medium text-gray-700">Death Date</label>
                    <input type="date" name="death_date" id="death_date" value="{{ metadata.death_date ?? '' }}"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                </div>
                <div>
                    <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
                    <select name="gender" id="gender"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                        <option value="">Select Gender</option>
                        <option value="FEMALE" {{ (metadata.gender ?? '') == 'FEMALE' ? 'selected' : '' }}>Female</option>
                        <option value="MALE" {{ (metadata.gender ?? '') == 'MALE' ? 'selected' : '' }}>Male</option>
                        <option value="TRANSGENDER_FEMALE" {{ (metadata.gender ?? '') == 'TRANSGENDER_FEMALE' ? 'selected' : '' }}>Transgender Female</option>
                        <option value="TRANSGENDER_MALE" {{ (metadata.gender ?? '') == 'TRANSGENDER_MALE' ? 'selected' : '' }}>Transgender Male</option>
                        <option value="INTERSEX" {{ (metadata.gender ?? '') == 'INTERSEX' ? 'selected' : '' }}>Intersex</option>
                        <option value="NON_BINARY" {{ (metadata.gender ?? '') == 'NON_BINARY' ? 'selected' : '' }}>Non-binary</option>
                    </select>
                </div>
                <div>
                    <label for="birth_place" class="block text-sm font-medium text-gray-700">Birth Place</label>
                    <input type="text" name="birth_place" id="birth_place" value="{{ metadata.birth_place ?? '' }}"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                </div>
                <div>
                    <label for="nationality" class="block text-sm font-medium text-gray-700">Nationality</label>
                    <input type="text" name="nationality" id="nationality" value="{{ metadata.nationality ?? '' }}"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                </div>
                <div>
                    <label for="ethnicity" class="block text-sm font-medium text-gray-700">Ethnicity</label>
                    <input type="text" name="ethnicity" id="ethnicity" value="{{ metadata.ethnicity ?? '' }}"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                </div>
            </div>

            <!-- Physical Attributes -->
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Physical Attributes</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label for="height" class="block text-sm font-medium text-gray-700">Height</label>
                        <input type="text" name="height" id="height" value="{{ metadata.height ?? '' }}"
                               placeholder="e.g., 5'6" or 168cm"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="measurements" class="block text-sm font-medium text-gray-700">Measurements</label>
                        <input type="text" name="measurements" id="measurements" value="{{ metadata.measurements ?? '' }}"
                               placeholder="e.g., 34-24-34"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="cup_size" class="block text-sm font-medium text-gray-700">Cup Size</label>
                        <input type="text" name="cup_size" id="cup_size" value="{{ metadata.cup_size ?? '' }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="ethnicity" class="block text-sm font-medium text-gray-700">Ethnicity</label>
                        <input type="text" name="ethnicity" id="ethnicity" value="{{ metadata.ethnicity ?? '' }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="hair_color" class="block text-sm font-medium text-gray-700">Hair Color</label>
                        <input type="text" name="hair_color" id="hair_color" value="{{ metadata.hair_color ?? '' }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="eye_color" class="block text-sm font-medium text-gray-700">Eye Color</label>
                        <input type="text" name="eye_color" id="eye_color" value="{{ metadata.eye_color ?? '' }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                </div>
            </div>

            <!-- Body Modifications -->
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Body Modifications</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="piercings" class="block text-sm font-medium text-gray-700">Piercings</label>
                        <input type="text" name="piercings" id="piercings" value="{{ metadata.piercings ?? '' }}"
                               placeholder="e.g., navel, nipples"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="tattoos" class="block text-sm font-medium text-gray-700">Tattoos</label>
                        <input type="text" name="tattoos" id="tattoos" value="{{ metadata.tattoos ?? '' }}"
                               placeholder="e.g., lower back, ankle"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                </div>
            </div>

            <!-- Aliases -->
            <div class="border-t border-gray-200 pt-6">
                <div>
                    <label for="aliases" class="block text-sm font-medium text-gray-700">Aliases</label>
                    <input type="text" name="aliases" id="aliases" value="{{ (metadata.aliases ?? [])|join(', ') }}"
                           placeholder="e.g., Stage Name, Other Names (comma-separated)"
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    <p class="mt-1 text-sm text-gray-500">Separate multiple aliases with commas</p>
                </div>
            </div>

            <!-- Social Media -->
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Social Media</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="twitter" class="block text-sm font-medium text-gray-700">Twitter</label>
                        <input type="url" name="twitter" id="twitter" value="{{ metadata.social_media.twitter ?? '' }}"
                               placeholder="https://twitter.com/username"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="instagram" class="block text-sm font-medium text-gray-700">Instagram</label>
                        <input type="url" name="instagram" id="instagram" value="{{ metadata.social_media.instagram ?? '' }}"
                               placeholder="https://instagram.com/username"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="onlyfans" class="block text-sm font-medium text-gray-700">OnlyFans</label>
                        <input type="url" name="onlyfans" id="onlyfans" value="{{ metadata.social_media.onlyfans ?? '' }}"
                               placeholder="https://onlyfans.com/username"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="website" class="block text-sm font-medium text-gray-700">Website</label>
                        <input type="url" name="website" id="website" value="{{ metadata.social_media.website ?? '' }}"
                               placeholder="https://example.com"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                </div>
            </div>

            <!-- Adult-Specific Information -->
            <div class="border-t border-gray-200 pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Adult Industry Information</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="debut_year" class="block text-sm font-medium text-gray-700">Debut Year</label>
                        <input type="number" name="debut_year" id="debut_year" value="{{ metadata.adult_specific.debut_year ?? '' }}"
                               min="1900" max="{{ 'now'|date('Y') + 5 }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                    <div>
                        <label for="retirement_year" class="block text-sm font-medium text-gray-700">Retirement Year</label>
                        <input type="number" name="retirement_year" id="retirement_year" value="{{ metadata.adult_specific.retirement_year ?? '' }}"
                               min="1900" max="{{ 'now'|date('Y') + 10 }}"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                    </div>
                </div>

                <div class="mb-6">
                    <div class="flex items-center">
                        <input type="checkbox" name="active" id="active" value="1" {{ (metadata.adult_specific.active ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="active" class="ml-2 block text-sm text-gray-900">
                            Currently Active in Adult Industry
                        </label>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="adult_genres" class="block text-sm font-medium text-gray-700">Adult Genres</label>
                        <input type="text" name="adult_genres" id="adult_genres" value="{{ (metadata.adult_specific.genres ?? [])|join(', ') }}"
                               placeholder="e.g., MILF, Anal, POV (comma-separated)"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                        <p class="mt-1 text-sm text-gray-500">Genres this performer specializes in</p>
                    </div>
                    <div>
                        <label for="specialties" class="block text-sm font-medium text-gray-700">Specialties</label>
                        <input type="text" name="specialties" id="specialties" value="{{ (metadata.adult_specific.specialties ?? [])|join(', ') }}"
                               placeholder="e.g., Deep Throat, Squirt, Roleplay (comma-separated)"
                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm px-3 py-2">
                        <p class="mt-1 text-sm text-gray-500">Specific skills or specialties</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end space-x-3">
            <a href="{{ path_for('actors.show', {'id': actor.id}) }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                Cancel
            </a>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                Save Changes
            </button>
        </div>
    </form>
</div>
{% endblock %}