{% 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);
    }
{% 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 || [];
            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] : '';
                
                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 isFullWidth = name.includes('description') || name.includes('content');
                const isRequired = field.required;
                
                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('');
        } 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');
        }
    };

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