{% extends "layout.html" %}

{% set active_nav = model_name %}

{% block extra_css %}
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 24px;
    }

    .breadcrumb a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

    .form-header {
        margin-bottom: 32px;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        text-decoration: none;
        margin-bottom: 12px;
    }

    .form-container {
        max-width: 800px;
        margin-bottom: 32px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .form-group {
        margin-bottom: 24px;
    }

    .form-group.full-width {
        grid-column: span 2;
    }

    .form-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-main);
        margin-bottom: 8px;
        letter-spacing: 0.05em;
        opacity: 0.9;
    }

    .form-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: 8px;
        outline: none;
        font-size: 0.95rem;
        transition: all 0.2s;
        background-color: var(--bg-card);
        color: var(--text-main);
    }

    .form-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

    .form-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 20px 32px;
        background-color: var(--bg-surface);
        border-top: 1px solid var(--border);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    /* Toggle Switch */
    .toggle-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: var(--bg-card);
        border-radius: 12px;
        border: 1px solid var(--border);
    }

    .toggle-info .title {
        font-weight: 700;
        font-size: 0.95rem;
        display: block;
        color: var(--text-main);
    }

    .toggle-info .desc {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 26px;
    }

    .switch input { opacity: 0; width: 0; height: 0; }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--bg-surface);
        border: 1px solid var(--border);
        transition: .3s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px; width: 18px;
        left: 3px; bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    input:checked + .slider { 
        background-color: var(--primary); 
        border-color: var(--primary);
    }
    input:checked + .slider:before { transform: translateX(22px); }

    /* Metadata Cards */
    .meta-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .meta-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
    }

    .meta-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background-color: var(--bg-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
    }

    .meta-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--text-muted);
    }

    .meta-value {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-main);
    }

    /* File Upload Styling */
    .file-upload-wrapper {
        position: relative;
        width: 100%;
    }

    .file-upload-dragzone {
        border: 2px dashed var(--border);
        border-radius: 12px;
        padding: 32px 20px;
        text-align: center;
        background-color: var(--bg-card);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .file-upload-dragzone:hover {
        border-color: var(--primary);
        background-color: rgba(99, 102, 241, 0.02);
    }

    .file-upload-dragzone.dragover {
        border-color: var(--primary);
        background-color: rgba(99, 102, 241, 0.06);
        transform: scale(0.99);
    }

    .file-upload-dragzone.hidden {
        display: none;
    }

    .upload-zone-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .upload-icon {
        font-size: 2rem;
        color: var(--text-muted);
        transition: color 0.3s ease;
    }

    .file-upload-dragzone:hover .upload-icon {
        color: var(--primary);
        transform: translateY(-2px);
    }

    .upload-text {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-main);
    }

    .browse-text {
        color: var(--primary);
        font-weight: 600;
    }

    .upload-hint {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    /* File Indicator (No Preview) */
    .file-preview-container {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background-color: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        position: relative;
        margin-top: 8px;
    }

    .file-preview-icon {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background-color: var(--bg-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: var(--primary);
        border: 1px solid var(--border);
    }

    .file-preview-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .file-preview-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .file-preview-link {
        font-size: 0.75rem;
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

    .file-preview-link:hover {
        text-decoration: underline;
    }

    .btn-remove-file {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 8px;
        font-size: 1rem;
        transition: color 0.2s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-remove-file:hover {
        color: var(--error);
        background-color: rgba(239, 68, 68, 0.1);
    }
{% endblock %}

{% block content %}

<div class="breadcrumb">
    <a href="/admin">Dashboard</a>
    <i class="fas fa-chevron-right" style="font-size: 0.6rem;"></i>
    <a href="/admin/{{ model_name }}">{{ model_name|capitalize }}</a>
    <i class="fas fa-chevron-right" style="font-size: 0.6rem;"></i>
    <span>{% if id %}Edit{% else %}Create{% endif %} {{ model_name|capitalize }}</span>
</div>

<a href="/admin/{{ model_name }}" class="back-link">
    <i class="fas fa-arrow-left"></i> Back to List
</a>

<div class="form-header">
    <h1 class="page-title">{% if id %}Edit{% else %}Create{% endif %} {{ model_name|capitalize }}{% if id %}: <span id="record-title">Loading...</span>{% endif %}</h1>
    <p class="page-subtitle">{% if id %}Update the details and visibility of this record.{% else %}Define a new record for your database.{% endif %}</p>
</div>

<div class="card form-container" style="padding: 0;">
    <form id="record-form">
        <div style="padding: 32px;">
            <div class="form-grid" id="form-fields">
                <!-- Fields injected via JS -->
            </div>
        </div>
        
        <div class="form-footer">
            <button type="button" class="btn btn-secondary" onclick="location.href='/admin/{{ model_name }}'">Cancel</button>
            <button type="submit" class="btn btn-primary">{% if id %}Save Changes{% else %}Create Record{% endif %}</button>
        </div>
    </form>
</div>

{% if id %}
<div class="meta-cards">
    <div class="card meta-card">
        <div class="meta-icon">
            <i class="far fa-clock"></i>
        </div>
        <div>
            <div class="meta-label">Last Modified</div>
            <div class="meta-value">Oct 24, 2023 - 14:32 PM</div>
        </div>
    </div>
    <div class="card meta-card">
        <div class="meta-icon">
            <i class="far fa-user"></i>
        </div>
        <div>
            <div class="meta-label">Created By</div>
            <div class="meta-value">System Admin (ID: 021)</div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script>
    const modelName = "{{ model_name }}";
    const recordId = "{{ id or '' }}";
    const apiBaseUrl = "/admin/api";

    async function loadForm() {
        try {
            // Fetch schema
            const schemaResponse = await fetch(`${apiBaseUrl}/schema`);
            const schema = await schemaResponse.json();
            const modelSchema = schema.models.find(m => m.name === modelName);
            
            let initialData = {};
            if (recordId) {
                const response = await fetch(`${apiBaseUrl}/${modelName}/${recordId}`);
                initialData = await response.json();
                
                // Update title if possible
                const titleVal = initialData.name || initialData.email || initialData.id;
                document.getElementById('record-title').textContent = titleVal;
            }

            const container = document.getElementById('form-fields');
            const readonlyFields = modelSchema.config?.readonly_fields || [];
            const fileFields = modelSchema.config?.file_fields || {};
            
            container.innerHTML = modelSchema.fields.map(field => {
                const name = field.name;
                const type = field.type.toLowerCase();
                const isBoolean = type.includes('boolean');
                const isReadonly = readonlyFields.includes(name);
                const disabled = isReadonly ? 'disabled' : '';
                
                if (name === 'id' && !recordId) return '';
                if (name === 'id') return `<input type="hidden" name="id" value="${initialData[name]}">`;
                
                const val = initialData[name] !== undefined ? initialData[name] : '';
                const isRequired = field.required;
                
                if (isBoolean) {
                    const checked = val === true || val === 'true' ? 'checked' : '';
                    return `
                        <div class="form-group full-width">
                            <div class="toggle-group">
                                <div class="toggle-info">
                                    <span class="title">Active Status</span>
                                    <span class="desc">Toggle visibility of this record in the system.</span>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" name="${name}" ${checked} value="true" ${disabled}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    `;
                }

                const isFile = name in fileFields;
                if (isFile) {
                    const displayUrl = val ? (val.startsWith('http://') || val.startsWith('https://') ? val : `${apiBaseUrl}/media?path=${encodeURIComponent(val)}`) : '';
                    const previewHtml = val ? `
                        <div class="file-preview-container" id="preview-${name}">
                            <div class="file-preview-icon"><i class="fas fa-file-alt"></i></div>
                            <div class="file-preview-info">
                                <span class="file-preview-name">${val.split('/').pop()}</span>
                                <a href="${displayUrl}" target="_blank" class="file-preview-link">View file</a>
                            </div>
                            <button type="button" class="btn-remove-file" onclick="clearFile('${name}')">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    ` : '';
                    
                    return `
                        <div class="form-group full-width">
                            <label class="form-label">
                                ${name.replace('_', ' ')}
                                ${isRequired ? '<span style="color: var(--error); margin-left: 4px;">*</span>' : ''}
                            </label>
                            <div class="file-upload-wrapper">
                                <input type="hidden" id="input-hidden-${name}" name="${name}" value="${val}" ${isRequired ? 'required' : ''}>
                                <div class="file-upload-dragzone ${val ? 'hidden' : ''}" id="dragzone-${name}" onclick="document.getElementById('input-file-${name}').click()">
                                    <div class="upload-zone-content">
                                        <i class="fas fa-cloud-upload-alt upload-icon"></i>
                                        <div class="upload-text">Drag & drop a file here, or <span class="browse-text">browse</span></div>
                                        <div class="upload-hint">Supports any file type</div>
                                    </div>
                                </div>
                                <input type="file" id="input-file-${name}" class="hidden-file-input" style="display: none;" onchange="handleFileSelect(event, '${name}', '${fileFields[name] || ''}')" ${disabled}>
                                <div id="preview-wrapper-${name}">
                                    ${previewHtml}
                                </div>
                            </div>
                        </div>
                    `;
                }

                const isFullWidth = name.includes('description') || name.includes('content');
                
                return `
                    <div class="form-group ${isFullWidth ? 'full-width' : ''}">
                        <label class="form-label">
                            ${name.replace('_', ' ')}
                            ${isRequired ? '<span style="color: var(--error); margin-left: 4px;">*</span>' : ''}
                        </label>
                        ${isFullWidth ? 
                            `<textarea class="form-input" name="${name}" rows="4" ${isRequired ? 'required' : ''} ${disabled}>${val}</textarea>` : 
                            `<input type="text" class="form-input" name="${name}" value="${val}" placeholder="${field.type}" ${isRequired ? 'required' : ''} ${disabled}>`
                        }
                    </div>
                `;
            }).join('');

            // Setup drag & drop for file fields
            Object.keys(fileFields).forEach(name => {
                setupDragAndDrop(name, fileFields[name] || '');
            });
        } catch (error) {
            console.error('Error loading form:', error);
        }
    }

    document.getElementById('record-form').onsubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        
        // Handle checkboxes (ensure false is sent if unchecked)
        const data = Object.fromEntries(formData.entries());
        
        // We need to check the schema to see which fields are booleans and handle unchecked state
        const schemaResponse = await fetch(`${apiBaseUrl}/schema`);
        const schema = await schemaResponse.json();
        const modelSchema = schema.models.find(m => m.name === modelName);
        
        modelSchema.fields.forEach(field => {
            if (field.type.toLowerCase().includes('boolean') && !data[field.name]) {
                data[field.name] = "false";
            }
        });

        const method = recordId ? 'PUT' : 'POST';
        const url = recordId ? `${apiBaseUrl}/${modelName}/${recordId}` : `${apiBaseUrl}/${modelName}`;
        
        try {
            const response = await fetch(url, {
                method: method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                location.href = `/admin/${modelName}`;
            } else {
                const err = await response.json();
                alert('Error saving record: ' + (err.detail || 'Unknown error'));
            }
        } catch (error) {
            alert('Error saving record');
        }
    };

    async function handleFileSelect(event, fieldName, fieldPath) {
        const file = event.target.files[0];
        if (!file) return;
        await uploadFile(file, fieldName, fieldPath);
    }

    async function uploadFile(file, fieldName, fieldPath) {
        const dragzone = document.getElementById(`dragzone-${fieldName}`);
        const previewWrapper = document.getElementById(`preview-wrapper-${fieldName}`);
        const hiddenInput = document.getElementById(`input-hidden-${fieldName}`);
        
        // Show uploading state in the dragzone
        const originalContent = dragzone.innerHTML;
        dragzone.innerHTML = `
            <div class="upload-zone-content">
                <i class="fas fa-spinner fa-spin upload-icon" style="color: var(--primary);"></i>
                <div class="upload-text">Uploading ${file.name}...</div>
            </div>
        `;
        
        const formData = new FormData();
        formData.append('file', file);
        
        try {
            const uploadUrl = fieldPath
                ? `${apiBaseUrl}/upload?field_path=${encodeURIComponent(fieldPath)}`
                : `${apiBaseUrl}/upload`;
            const response = await fetch(uploadUrl, {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error('Upload failed');
            }
            
            const result = await response.json();
            const fileUrl = result.url;
            
            // Set value in hidden input
            hiddenInput.value = fileUrl;
            
            const displayUrl = fileUrl.startsWith('http://') || fileUrl.startsWith('https://') ? fileUrl : `${apiBaseUrl}/media?path=${encodeURIComponent(fileUrl)}`;
            
            // Update preview
            previewWrapper.innerHTML = `
                <div class="file-preview-container" id="preview-${fieldName}">
                    <div class="file-preview-icon"><i class="fas fa-file-alt"></i></div>
                    <div class="file-preview-info">
                        <span class="file-preview-name">${file.name}</span>
                        <a href="${displayUrl}" target="_blank" class="file-preview-link">View file</a>
                    </div>
                    <button type="button" class="btn-remove-file" onclick="clearFile('${fieldName}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;
            
            // Hide dragzone
            dragzone.classList.add('hidden');
        } catch (error) {
            console.error('Error uploading file:', error);
            alert('Failed to upload file: ' + error.message);
            // Restore dragzone
            dragzone.innerHTML = originalContent;
        }
    }

    function clearFile(fieldName) {
        const dragzone = document.getElementById(`dragzone-${fieldName}`);
        const previewWrapper = document.getElementById(`preview-wrapper-${fieldName}`);
        const hiddenInput = document.getElementById(`input-hidden-${fieldName}`);
        
        hiddenInput.value = '';
        previewWrapper.innerHTML = '';
        dragzone.classList.remove('hidden');
        
        // Reset file input value so same file can be selected again
        const fileInput = document.getElementById(`input-file-${fieldName}`);
        if (fileInput) {
            fileInput.value = '';
        }
    }

    // Setup drag and drop for a dragzone
    function setupDragAndDrop(fieldName, fieldPath) {
        const dragzone = document.getElementById(`dragzone-${fieldName}`);
        if (!dragzone) return;

        ['dragenter', 'dragover'].forEach(eventName => {
            dragzone.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
                dragzone.classList.add('dragover');
            }, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dragzone.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
                dragzone.classList.remove('dragover');
            }, false);
        });

        dragzone.addEventListener('drop', async (e) => {
            const dt = e.dataTransfer;
            const file = dt.files[0];
            if (file) {
                await uploadFile(file, fieldName, fieldPath);
            }
        }, false);
    }

    loadForm();
</script>
{% endblock %}