{# app/templates/admin/company-edit.html #}
{% extends "admin/base.html" %}

{% block title %}Edit Company{% endblock %}

{% block alpine_data %}adminCompanyEdit(){% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Edit Company
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="company">
            <span x-text="company?.name"></span>
        </p>
    </div>
    <a href="/admin/companies"
       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
        Back to Companies
    </a>
</div>

<!-- Loading State -->
<div x-show="loadingCompany" class="text-center py-12">
    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading company...</p>
</div>

<!-- Edit Form -->
<div x-show="!loadingCompany && company">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Quick Actions
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
                @click="toggleVerification()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="{ 'bg-orange-600 hover:bg-orange-700': company && company.is_verified, 'bg-green-600 hover:bg-green-700': company && !company.is_verified }">
                <span x-html="$icon(company?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
                <span x-text="company?.is_verified ? 'Unverify Company' : 'Verify Company'"></span>
            </button>

            <button
                @click="toggleActive()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="{ 'bg-red-600 hover:bg-red-700': company && company.is_active, 'bg-green-600 hover:bg-green-700': company && !company.is_active }">
                <span x-html="$icon(company?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
                <span x-text="company?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>

            <!-- Status Badges -->
            <div class="ml-auto flex items-center gap-2">
                <span
                    x-show="company?.is_verified"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    <span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
                    Verified
                </span>
                <span
                    x-show="!company?.is_verified"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
                    <span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
                    Pending
                </span>
                <span
                    x-show="company?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    Active
                </span>
                <span
                    x-show="!company?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                    Inactive
                </span>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <div class="grid gap-6 mb-8 md:grid-cols-2">
            <!-- Left Column: Basic Info -->
            <div>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Basic Information
                </h3>

                <!-- Company ID (readonly) -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Company ID
                    </span>
                    <input
                        type="text"
                        :value="company?.id"
                        disabled
                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        System-generated identifier
                    </span>
                </label>

                <!-- Name -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Company Name <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="text"
                        x-model="formData.name"
                        required
                        maxlength="255"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
                    >
                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
                </label>

                <!-- Description -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Description
                    </span>
                    <textarea
                        x-model="formData.description"
                        rows="3"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                    ></textarea>
                </label>
            </div>

            <!-- Right Column: Contact Info -->
            <div>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Contact Information
                </h3>

                <!-- Owner Info (readonly) -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Owner
                    </span>
                    <input
                        type="text"
                        :value="company?.owner_username ? company.owner_username + ' (' + company.owner_email + ')' : 'User ID: ' + company?.owner_user_id"
                        disabled
                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Use "Transfer Ownership" in More Actions to change
                    </span>
                </label>

                <!-- Contact Email -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Contact Email <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="email"
                        x-model="formData.contact_email"
                        required
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email }"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Public business contact email
                    </span>
                    <span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
                </label>

                <!-- Phone -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Phone
                    </span>
                    <input
                        type="tel"
                        x-model="formData.contact_phone"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>

                <!-- Website -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Website
                    </span>
                    <input
                        type="url"
                        x-model="formData.website"
                        :disabled="saving"
                        placeholder="https://example.com"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>
            </div>
        </div>

        <!-- Business Details -->
        <div class="mb-8">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Business Details
            </h3>

            <div class="grid gap-6 md:grid-cols-2">
                <!-- Business Address -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Business Address
                    </span>
                    <textarea
                        x-model="formData.business_address"
                        rows="3"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                    ></textarea>
                </label>

                <!-- Tax Number -->
                <label class="block text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Tax Number
                    </span>
                    <input
                        type="text"
                        x-model="formData.tax_number"
                        :disabled="saving"
                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                    >
                </label>
            </div>
        </div>

        <!-- Company Statistics (readonly) -->
        <template x-if="company?.vendor_count !== undefined">
            <div class="mb-8">
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Company Statistics
                </h3>
                <div class="grid gap-4 md:grid-cols-2">
                    <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Total Vendors</p>
                        <p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.vendor_count || 0"></p>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Active Vendors</p>
                        <p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.active_vendor_count || 0"></p>
                    </div>
                </div>
            </div>
        </template>

        <!-- Save Button -->
        <div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
            <a
                href="/admin/companies"
                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
                Cancel
            </a>
            <button
                type="submit"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                <span x-show="!saving">
                    <span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
                    Save Changes
                </span>
                <span x-show="saving" class="flex items-center">
                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    Saving...
                </span>
            </button>
        </div>
    </form>

    <!-- More Actions Section -->
    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            More Actions
        </h3>
        <div class="flex flex-wrap gap-3">
            <!-- Transfer Ownership Button -->
            <button
                @click="showTransferOwnershipModal = true"
                :disabled="saving"
                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50"
            >
                <span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2')"></span>
                Transfer Ownership
            </button>

            <!-- Delete Company Button -->
            <button
                @click="deleteCompany()"
                :disabled="saving || (company?.vendor_count > 0)"
                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
                :title="company?.vendor_count > 0 ? 'Cannot delete company with vendors' : 'Delete this company'"
            >
                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                Delete Company
            </button>
        </div>
        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
            <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
            Ownership transfer affects all vendors under this company.
            <span x-show="company?.vendor_count > 0" class="text-orange-600 dark:text-orange-400">
                Company cannot be deleted while it has vendors (<span x-text="company?.vendor_count"></span> vendors).
            </span>
        </p>
    </div>

    <!-- Transfer Ownership Modal -->
    <div
        x-show="showTransferOwnershipModal"
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
        @keydown.escape.window="showTransferOwnershipModal = false"
    >
        <div
            @click.away="showTransferOwnershipModal = false"
            class="w-full max-w-md bg-white rounded-lg shadow-lg dark:bg-gray-800"
        >
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Transfer Company Ownership
                </h3>
                <button
                    @click="showTransferOwnershipModal = false"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
                >
                    <span x-html="$icon('x', 'w-5 h-5')"></span>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="p-4">
                <div class="mb-4 p-3 bg-orange-100 border border-orange-300 text-orange-700 rounded-lg dark:bg-orange-900 dark:border-orange-700 dark:text-orange-300">
                    <p class="flex items-start text-sm">
                        <span x-html="$icon('exclamation', 'w-5 h-5 mr-2 flex-shrink-0')"></span>
                        <span>
                            <strong>Warning:</strong> This will transfer ownership of the company
                            "<span x-text="company?.name"></span>" and all its vendors to another user.
                        </span>
                    </p>
                </div>

                <form @submit.prevent="transferOwnership()">
                    <!-- New Owner Search -->
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">
                            New Owner <span class="text-red-600">*</span>
                        </span>
                        <div class="relative">
                            <input
                                type="text"
                                x-model="userSearchQuery"
                                @input="searchUsers()"
                                @focus="showUserDropdown = true"
                                :disabled="transferring"
                                placeholder="Search by name or email..."
                                class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
                            >
                            <!-- Search Results Dropdown -->
                            <div
                                x-show="showUserDropdown && userSearchResults.length > 0"
                                x-cloak
                                @click.away="showUserDropdown = false"
                                class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"
                            >
                                <template x-for="user in userSearchResults" :key="user.id">
                                    <button
                                        type="button"
                                        @click="selectUser(user)"
                                        class="w-full px-4 py-2 text-left text-sm hover:bg-purple-50 dark:hover:bg-gray-600 focus:outline-none"
                                        :class="{ 'bg-purple-50 dark:bg-gray-600': transferData.new_owner_user_id === user.id }"
                                    >
                                        <div class="font-medium text-gray-700 dark:text-gray-200" x-text="user.username"></div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400" x-text="user.email"></div>
                                    </button>
                                </template>
                            </div>
                            <!-- No Results -->
                            <div
                                x-show="showUserDropdown && userSearchQuery.length >= 2 && userSearchResults.length === 0 && !searchingUsers"
                                class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
                            >
                                No users found
                            </div>
                            <!-- Loading -->
                            <div
                                x-show="searchingUsers"
                                class="absolute z-10 w-full mt-1 px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg text-sm text-gray-500 dark:text-gray-400"
                            >
                                <span x-html="$icon('spinner', 'w-4 h-4 inline mr-2')"></span>
                                Searching...
                            </div>
                        </div>
                        <!-- Selected User Display -->
                        <div x-show="selectedUser" class="mt-2 p-2 bg-purple-50 dark:bg-purple-900 rounded-lg text-sm">
                            <span class="text-purple-700 dark:text-purple-300">
                                Selected: <strong x-text="selectedUser?.username"></strong> (<span x-text="selectedUser?.email"></span>)
                            </span>
                            <button type="button" @click="clearSelectedUser()" class="ml-2 text-purple-600 hover:text-purple-800 dark:text-purple-400">
                                <span x-html="$icon('x', 'w-4 h-4 inline')"></span>
                            </button>
                        </div>
                        <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            Current owner: <span x-text="company?.owner_username || 'User ID ' + company?.owner_user_id"></span>
                        </span>
                        <p x-show="showOwnerError && !transferData.new_owner_user_id" class="mt-1 text-xs text-red-600 dark:text-red-400">
                            <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
                            Please select a new owner
                        </p>
                    </label>

                    <!-- Transfer Reason -->
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">
                            Reason (optional)
                        </span>
                        <textarea
                            x-model="transferData.transfer_reason"
                            rows="2"
                            :disabled="transferring"
                            placeholder="Enter reason for transfer (for audit log)"
                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
                        ></textarea>
                    </label>

                    <!-- Confirmation Checkbox -->
                    <label class="flex items-center text-sm">
                        <input
                            type="checkbox"
                            x-model="transferData.confirm_transfer"
                            :disabled="transferring"
                            class="form-checkbox text-purple-600"
                        >
                        <span class="ml-2 text-gray-700 dark:text-gray-400">
                            I confirm I want to transfer ownership
                        </span>
                    </label>
                    <p x-show="showConfirmError && !transferData.confirm_transfer" class="mt-1 mb-4 text-xs text-red-600 dark:text-red-400">
                        <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
                        Please confirm the transfer by checking the box above
                    </p>
                    <div x-show="!showConfirmError || transferData.confirm_transfer" class="mb-4"></div>

                    <!-- Modal Actions -->
                    <div class="flex justify-end gap-3">
                        <button
                            type="button"
                            @click="showTransferOwnershipModal = false"
                            :disabled="transferring"
                            class="px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none disabled:opacity-50"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            :disabled="transferring"
                            class="flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <span x-show="!transferring">
                                <span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2 inline')"></span>
                                Transfer Ownership
                            </span>
                            <span x-show="transferring" class="flex items-center">
                                <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                                Transferring...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/company-edit.js') }}"></script>
{% endblock %}