<!--
  Mudabbir Dashboard - Identity Modal

  Tabbed editor for agent identity files:
  - Identity (IDENTITY.md) — primary directive / personality
  - Soul (SOUL.md) — core philosophy & values
  - Style (STYLE.md) — communication style guidelines
  - User Profile (USER.md) — owner profile injected into every prompt
-->
<!-- Identity Modal -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4" x-show="showIdentity" x-transition.opacity @click.self="showIdentity = false">
    <div class="w-full max-w-[800px] max-h-[85vh] flex flex-col bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] overflow-hidden" @click.stop>
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-5 border-b border-[var(--glass-border)] shrink-0">
            <div class="flex items-center gap-3">
                <i data-lucide="fingerprint" class="w-5 h-5 text-[var(--accent-color)]"></i>
                <h2 class="text-[17px] font-semibold">Agent Identity</h2>
            </div>
            <div class="flex items-center gap-2">
                <!-- Edit / Save toggle -->
                <template x-if="!identityEditing">
                    <button
                        class="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-lg bg-white/10 hover:bg-white/15 text-white/70 hover:text-white transition-colors"
                        @click="startIdentityEdit()"
                    >
                        <i data-lucide="pencil" class="w-3.5 h-3.5"></i> Edit
                    </button>
                </template>
                <template x-if="identityEditing">
                    <div class="flex items-center gap-2">
                        <button
                            class="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-lg bg-white/10 hover:bg-white/15 text-white/50 hover:text-white transition-colors"
                            @click="cancelIdentityEdit()"
                        >Cancel</button>
                        <button
                            class="flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-lg bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white transition-colors"
                            :disabled="identitySaving"
                            @click="saveIdentity()"
                        >
                            <template x-if="!identitySaving">
                                <span class="flex items-center gap-1.5"><i data-lucide="save" class="w-3.5 h-3.5"></i> Save</span>
                            </template>
                            <template x-if="identitySaving">
                                <span class="flex items-center gap-1.5"><i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i> Saving...</span>
                            </template>
                        </button>
                    </div>
                </template>
                <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showIdentity = false">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
        </div>

        <!-- Tab Bar -->
        <div class="flex items-center gap-1 px-6 pt-4 pb-2 shrink-0">
            <template x-for="tab in identityTabs" :key="tab.key">
                <button
                    class="px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors"
                    :class="identityTab === tab.key ? 'bg-[var(--accent-color)] text-white' : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
                    @click="identityTab = tab.key"
                    x-text="tab.label"
                ></button>
            </template>
        </div>

        <!-- Content -->
        <div class="p-6 overflow-y-auto flex-1">
            <!-- Loading -->
            <div x-show="identityLoading" class="p-12 text-center text-white/50 flex flex-col items-center gap-3">
                <i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i>
                <span>Loading identity...</span>
            </div>

            <!-- Tab content -->
            <div x-show="!identityLoading">
                <template x-for="tab in identityTabs" :key="tab.key">
                    <div x-show="identityTab === tab.key">
                        <div class="bg-black/30 p-5 rounded-xl border border-[var(--glass-border)] group hover:border-white/20 transition-colors">
                            <h3 class="font-semibold mb-1 flex items-center gap-2 text-[var(--accent-color)]">
                                <i :data-lucide="tab.icon" class="w-4 h-4"></i>
                                <span x-text="tab.label"></span>
                                <span class="text-white/30 text-xs font-normal font-mono" x-text="'(' + tab.file + ')'"></span>
                            </h3>
                            <p class="text-[11px] text-white/40 mb-3" x-text="tab.hint"></p>

                            <!-- Read-only view -->
                            <template x-if="!identityEditing">
                                <div class="bg-black/50 p-4 rounded-lg border border-white/5">
                                    <pre class="text-[11px] md:text-[12px] text-white/70 whitespace-pre-wrap font-mono leading-relaxed" x-text="identityData[tab.key]"></pre>
                                </div>
                            </template>

                            <!-- Editable view -->
                            <template x-if="identityEditing">
                                <textarea
                                    class="w-full min-h-[260px] bg-black/50 p-4 rounded-lg border border-white/10 focus:border-[var(--accent-color)]/50 focus:outline-none text-[12px] text-white/80 font-mono leading-relaxed resize-y transition-colors"
                                    x-model="identityDraft[tab.key]"
                                    :placeholder="'Enter ' + tab.label.toLowerCase() + '...'"
                                    spellcheck="false"
                                ></textarea>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- Footer hint -->
        <div class="px-6 py-3 border-t border-[var(--glass-border)] shrink-0">
            <p class="text-[11px] text-white/30">
                <i data-lucide="info" class="w-3 h-3 inline-block mr-1 -mt-0.5"></i>
                Identity files shape how the agent thinks and communicates. Changes take effect on the next message.
            </p>
        </div>
    </div>
</div>
