{% extends "base.html" %}
{% set active_nav = "admin" %}

{% block title %}{{ 'Edit' if organization else 'Create' }} Organization - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">{{ 'Edit' if organization else 'Create' }} Organization</h1>
        <p class="page-subtitle">
            {% if organization %}
            {{ revision.name if revision else organization.euid }}
            {% else %}
            Add a new organization/tenant
            {% endif %}
        </p>
    </div>
    <a href="/admin/organizations" class="btn btn-ghost">← Back to Organizations</a>
</div>

{% if error %}
<div class="alert alert-error mb-lg">{{ error }}</div>
{% endif %}

<form method="POST" action="{{ '/admin/organizations/' ~ organization.euid ~ '/edit' if organization else '/admin/organizations/create' }}" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <h3 class="mb-lg">Organization Details</h3>
    
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Name *</label>
            <input type="text" name="name" class="form-input" required
                   value="{{ revision.name if revision else '' }}"
                   placeholder="Organization name">
            <p class="form-hint">Internal identifier (unique)</p>
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Display Name</label>
            <input type="text" name="display_name" class="form-input"
                   value="{{ revision.display_name if revision else '' }}"
                   placeholder="Display name (optional)">
            <p class="form-hint">Shown in UI if different from name</p>
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Type</label>
            <select name="org_type" class="form-select">
                <option value="clinic" {{ 'selected' if (revision and revision.org_type == 'clinic') or not revision else '' }}>Clinic</option>
                <option value="hospital" {{ 'selected' if revision and revision.org_type == 'hospital' else '' }}>Hospital</option>
                <option value="lab" {{ 'selected' if revision and revision.org_type == 'lab' else '' }}>Lab</option>
                <option value="research" {{ 'selected' if revision and revision.org_type == 'research' else '' }}>Research</option>
                <option value="other" {{ 'selected' if revision and revision.org_type == 'other' else '' }}>Other</option>
            </select>
        </div>
        {% if organization %}
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Status</label>
            <select name="is_active" class="form-select">
                <option value="true" {{ 'selected' if revision and revision.is_active else '' }}>Active</option>
                <option value="false" {{ 'selected' if revision and not revision.is_active else '' }}>Inactive</option>
            </select>
        </div>
        {% endif %}
    </div>

    <div class="form-group mb-lg">
        <label class="form-label">Organization Owner</label>
        <input type="text" name="owner_user_id" class="form-input"
               value="{{ owner_user_display_input if owner_user_display_input is defined else (owner_user_id_input if owner_user_id_input is defined else (revision.owner_user_id if revision and revision.owner_user_id else '')) }}"
               placeholder="User EUID, email, or name (optional)"
               list="owner-user-candidates">
        <datalist id="owner-user-candidates">
            {% for candidate in owner_candidates or [] %}
            <option value="{{ candidate.display }}" label="{{ candidate.display }}"></option>
            {% endfor %}
        </datalist>
        <p class="form-hint">Optional. Owner is shown as <code>EUID | email | name</code> and must belong to this organization.</p>
    </div>

    <h3 class="mb-lg">Contact Information</h3>
    
    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Contact Email</label>
            <input type="email" name="contact_email" class="form-input"
                   value="{{ contact_email_input if contact_email_input is defined else ((revision.contact_email if revision else '') or '') }}"
                   placeholder="contact@example.com">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Contact Phone</label>
            <input type="tel" name="contact_phone" class="form-input"
                   value="{{ contact_phone_input if contact_phone_input is defined else ((revision.contact_phone if revision else '') or '') }}"
                   placeholder="+1 (555) 123-4567">
        </div>
    </div>

    <script>
    (() => {
        const ownerInput = document.querySelector('input[name="owner_user_id"]');
        const emailInput = document.querySelector('input[name="contact_email"]');
        const phoneInput = document.querySelector('input[name="contact_phone"]');
        const ownerCandidates = {{ (owner_candidates or []) | tojson }};

        if (!ownerInput || !emailInput || !phoneInput || !ownerCandidates.length) {
            return;
        }

        const normalize = (value) => (value || "").trim().toLowerCase();

        const findOwner = (rawValue) => {
            const needle = normalize(rawValue);
            if (!needle) {
                return null;
            }
            return ownerCandidates.find((candidate) => {
                return [
                    normalize(candidate.id),
                    normalize(candidate.email),
                    normalize(candidate.name),
                    normalize(candidate.display),
                ].includes(needle);
            });
        };

        const applyOwnerDetails = () => {
            const owner = findOwner(ownerInput.value);
            if (!owner) {
                return;
            }
            ownerInput.value = owner.display;
            emailInput.value = owner.email || "";
            if (normalize(phoneInput.value) === "none") {
                phoneInput.value = "";
            }
        };

        ownerInput.addEventListener("change", applyOwnerDetails);
        ownerInput.addEventListener("blur", applyOwnerDetails);
        ownerInput.addEventListener("focus", applyOwnerDetails);
        applyOwnerDetails();
    })();
    </script>

    {% if not organization %}
    <h3 class="mb-lg">Initial Site</h3>
    <p class="form-hint mb-lg">Organizations must have at least one active site. Create the first site now.</p>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Site Name *</label>
            <input type="text" name="initial_site_name" class="form-input" required
                   value="{{ initial_site_name if initial_site_name is defined else '' }}"
                   placeholder="Primary Site">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Site Code</label>
            <input type="text" name="initial_site_code" class="form-input"
                   value="{{ initial_site_code if initial_site_code is defined else '' }}"
                   placeholder="SITE-001">
        </div>
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Site Contact Email</label>
            <input type="email" name="initial_site_contact_email" class="form-input"
                   value="{{ initial_site_contact_email if initial_site_contact_email is defined else '' }}"
                   placeholder="site@example.com">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Site Contact Phone</label>
            <input type="tel" name="initial_site_contact_phone" class="form-input"
                   value="{{ initial_site_contact_phone if initial_site_contact_phone is defined else '' }}"
                   placeholder="+1 (555) 123-4567">
        </div>
    </div>

    <div class="form-group mb-lg">
        <label class="form-label">Address Line 1</label>
        <input type="text" name="initial_site_address_line1" class="form-input"
               value="{{ initial_site_address_line1 if initial_site_address_line1 is defined else '' }}"
               placeholder="123 Main St">
    </div>

    <div class="form-group mb-lg">
        <label class="form-label">Address Line 2</label>
        <input type="text" name="initial_site_address_line2" class="form-input"
               value="{{ initial_site_address_line2 if initial_site_address_line2 is defined else '' }}"
               placeholder="Suite 100">
    </div>

    <div class="flex gap-lg mb-lg">
        <div class="form-group" style="flex: 2;">
            <label class="form-label">City</label>
            <input type="text" name="initial_site_city" class="form-input"
                   value="{{ initial_site_city if initial_site_city is defined else '' }}"
                   placeholder="Los Angeles">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">State</label>
            <input type="text" name="initial_site_state" class="form-input"
                   value="{{ initial_site_state if initial_site_state is defined else '' }}"
                   placeholder="CA">
        </div>
        <div class="form-group" style="flex: 1;">
            <label class="form-label">Postal Code</label>
            <input type="text" name="initial_site_postal_code" class="form-input"
                   value="{{ initial_site_postal_code if initial_site_postal_code is defined else '' }}"
                   placeholder="90001">
        </div>
    </div>
    {% endif %}

    {% if organization %}
    <div class="form-group">
        <label class="form-label">Revision Note</label>
        <textarea name="note" class="form-textarea" rows="2" 
                  placeholder="Reason for this update (optional)..."></textarea>
        <p class="form-hint">This note will be recorded in the revision history</p>
    </div>
    {% endif %}

    <div class="flex gap-md justify-between mt-lg" style="border-top: 1px solid var(--border-color); padding-top: var(--space-lg);">
        <a href="/admin/organizations" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">
            {{ 'Save Changes' if organization else 'Create Organization' }}
        </button>
    </div>
</form>

{% if organization %}
<div class="card mt-lg">
    <h3 class="mb-md">Organization Info</h3>
    <div class="flex gap-lg">
        <div>
            <div class="text-sm text-muted">Organization ID</div>
            <div class="text-mono">{{ organization.euid }}</div>
        </div>
        <div>
            <div class="text-sm text-muted">Created</div>
            <div>{{ organization.created_at | format_dt(user_preferences) if organization.created_at else '—' }}</div>
        </div>
        <div>
            <div class="text-sm text-muted">Revision</div>
            <div>{{ revision.revision_no if revision else '—' }}</div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}