{% extends "admin/base.html" %}
{% load static i18n %}

{% block title %}{% trans "AI Assistant" %}{% endblock %}
{% block breadcrumbs %}{% endblock %}

{% block content %}

<style>
/* ====== theme-aware colors ====== */
.dash-chat *{box-sizing:border-box}
body{background:var(--color-base-100)!important;overflow:hidden}
.breadcrumbs,.flex.items-center.max-md\:p-4{display:none!important}
#header{display:none!important}
#container{height:100vh!important;padding:0!important;overflow:hidden}
#content{margin:0!important;padding:0!important;background:var(--color-base-100)!important;border:none!important;height:100vh!important;min-height:0!important;max-height:100vh!important;overflow:hidden!important}
#content-main{margin:0!important;padding:0!important;height:100%!important;min-height:0!important;overflow:hidden}
.main-content{padding:0!important;flex:1!important;min-height:0!important;overflow:hidden!important}

/* ====== root: fill content area ====== */
.dash-chat{
  display:flex;flex-direction:column;
  height:100%;width:100%;
  background:var(--color-base-100);color:var(--color-base-content);
  overflow:hidden;
}

/* ====== top bar ====== */
.dash-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--color-base-300);
  background:var(--color-base-100);flex-shrink:0;
}
.dash-topbar-left{display:flex;align-items:center;gap:10px}
.dash-topbar-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dash-topbar-avatar svg{width:15px;height:15px;color:var(--color-primary-content)}
.dash-topbar-title{font-size:.88rem;font-weight:600;color:var(--color-base-content)}
.dash-topbar-sub{font-size:.62rem;color:var(--color-base-content);opacity:.4}
.dash-topbar-actions{display:flex;align-items:center;gap:4px;flex-direction:row-reverse}
.dash-topbar-btn{
  background:none;border:none;color:var(--color-base-content);
  cursor:pointer;padding:6px;border-radius:8px;transition:all .15s;line-height:0;
}
.dash-topbar-btn:hover{background:var(--color-base-content/10);opacity:.7}
/* sidebar direction icons */
.sidebar-icon-rtl,.sidebar-icon-ltr{display:none!important}
html[dir="rtl"] .sidebar-icon-rtl{display:inline!important}
html:not([dir="rtl"]) .sidebar-icon-ltr{display:inline!important}

/* ====== scrollable chat area ====== */
.dash-chat-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.dash-chat-scroll::-webkit-scrollbar{width:5px}
.dash-chat-scroll::-webkit-scrollbar-track{background:transparent}
.dash-chat-scroll::-webkit-scrollbar-thumb{background:var(--color-base-300);border-radius:3px}

/* ====== welcome screen ====== */
.dash-welcome{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:90%;padding:40px 24px;text-align:center;animation:fadeUp .5s ease;
}
.dash-welcome-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--color-primary/15);display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.dash-welcome-icon svg{width:24px;height:24px;color:var(--color-primary)}
.dash-welcome h2{font-size:1.35rem;font-weight:600;color:var(--color-base-content);margin:0 0 8px}
.dash-welcome p{font-size:.82rem;color:var(--color-base-content);opacity:.4;margin:0;max-width:360px;line-height:1.6}
.dash-welcome-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.dash-welcome-chip{
  background:var(--color-base-200);border:1px solid var(--color-base-300);
  border-radius:20px;padding:8px 16px;font-size:.78rem;color:var(--color-base-content);opacity:.6;
  cursor:pointer;transition:all .15s;
}
.dash-welcome-chip:hover{background:var(--color-base-300);opacity:1;border-color:var(--color-primary)}

/* ====== messages ====== */
.dash-msgs{width:65%;margin:0 auto;padding:24px 20px 20px;display:flex;flex-direction:column;gap:24px}
.dash-msg{animation:fadeUp .25s ease}
.dash-msg-row{display:flex;gap:12px;align-items:flex-start}
.dash-msg-user .dash-msg-row{flex-direction:row-reverse}
.dash-msg-ai .dash-msg-row{flex-direction:row}
.dash-msg-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.dash-msg-user .dash-msg-avatar{background:var(--color-primary)}
.dash-msg-ai .dash-msg-avatar{background:var(--color-base-200)}
.dash-msg-avatar svg{width:15px;height:15px}
.dash-msg-user .dash-msg-avatar svg{color:var(--color-primary-content)}
.dash-msg-ai .dash-msg-avatar svg{color:var(--color-base-content);opacity:.5}
.dash-msg-body{max-width:85%}
.dash-msg-text{font-size:.88rem;line-height:1.75;color:var(--color-base-content);word-break:break-word;white-space:pre-wrap;padding:12px 16px;border-radius:16px}
.dash-msg-user .dash-msg-text{background:var(--color-primary);color:var(--color-primary-content);border-bottom-end-radius:4px}
.dash-msg-ai .dash-msg-text{background:var(--color-base-200);color:var(--color-base-content);border-bottom-start-radius:4px}
.dash-msg-ai+.dash-msg-ai{padding-top:0}
/* copy btn */
.dash-msg-actions{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity .15s}
.dash-msg:hover .dash-msg-actions{opacity:1}
.dash-copy-btn{
  background:none;border:none;color:var(--color-base-content);opacity:.3;
  cursor:pointer;padding:4px 6px;border-radius:6px;font-size:.65rem;
  display:inline-flex;align-items:center;gap:4px;transition:all .15s;
}
.dash-copy-btn:hover{background:var(--color-base-200);opacity:.7}
.dash-copy-btn.copied{color:var(--color-success);opacity:1}

/* ====== typing ====== */
.dash-typing{display:inline-flex;align-items:center;gap:5px;padding:2px 0}
.dash-typing-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--color-base-content);opacity:.25;
  animation:pulse 1.4s infinite both;
}
.dash-typing-dot:nth-child(2){animation-delay:.15s}
.dash-typing-dot:nth-child(3){animation-delay:.3s}

/* ====== action card ====== */
.dash-action{
  margin-top:10px;padding:12px 14px;border-radius:12px;
  background:var(--color-base-200);border:1px solid var(--color-base-300);
}
.dash-action-badge{
  display:inline-block;font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:6px;
  background:var(--color-primary/15);color:var(--color-primary);margin-bottom:4px;
}
.dash-action pre{margin:6px 0 0;font-size:.7rem;color:var(--color-base-content);opacity:.45;white-space:pre-wrap}
.dash-action-btns{display:flex;gap:6px;margin-top:10px}
.dash-action-btns button{font-size:.72rem;padding:6px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:500;transition:all .15s}
.dash-action-do{background:var(--color-primary);color:var(--color-primary-content)}
.dash-action-do:hover{opacity:.85}
.dash-action-do:disabled{opacity:.4;cursor:not-allowed}
.dash-action-cancel{background:var(--color-base-300);color:var(--color-base-content);opacity:.6}
.dash-action-cancel:hover{opacity:.9}

/* ====== INPUT: fixed at bottom ====== */
.dash-input-wrap{
  flex-shrink:0;
  padding:14px 20px 18px;
  background:var(--color-base-100);
  border:none!important;
}
.dash-input-inner{width:60%;margin:0 auto}
.dash-input-box{
  display:flex;align-items:flex-end;gap:10px;
  background:var(--color-base-200);
  border-radius:16px;
  padding:12px 16px;
  transition:background .2s;
  width:100%;
}
.dash-input-box:focus-within{background:var(--color-base-300)}
.dash-input-box textarea{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--color-base-content);font-size:.92rem;line-height:1.6;
  resize:none;min-height:44px;max-height:200px;
  font-family:inherit;padding:0;width:100%;
}
.dash-input-box textarea::placeholder{color:var(--color-base-content);opacity:.3}
.dash-send-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--color-primary);color:var(--color-primary-content);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;opacity:.35;
}
.dash-send-btn:not(:disabled){opacity:1}
.dash-send-btn:not(:disabled):hover{opacity:.85;transform:scale(1.05)}
.dash-send-btn svg{width:16px;height:16px}
.dash-input-footer{text-align:center;margin-top:8px;font-size:.6rem;color:var(--color-base-content);opacity:.2}

/* ====== model selector (ChatGPT-style) ====== */
.dash-model-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;
  background:var(--color-base-200);border:1px solid transparent;
  color:var(--color-base-content);font-size:.78rem;font-weight:500;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  line-height:1.4;
}
.dash-model-trigger:hover{background:var(--color-base-300)}
.dash-model-trigger.is-open{border-color:var(--color-primary);background:var(--color-base-300)}
.dash-model-trigger-chevron{
  width:12px;height:12px;opacity:.4;transition:transform .2s;flex-shrink:0;
}
.dash-model-trigger.is-open .dash-model-trigger-chevron{transform:rotate(180deg)}

/* dropdown panel */
.dash-model-dropdown{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:280px;max-height:340px;
  background:var(--color-base-200);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  z-index:200;display:none;flex-direction:column;
  overflow:hidden;
}
html[dir="rtl"] .dash-model-dropdown{left:auto;right:0;transform:none}
html:not([dir="rtl"]) .dash-model-dropdown{left:0;right:auto;transform:none}
.dash-model-dropdown.is-open{display:flex}

/* search inside dropdown */
.dash-model-search{
  padding:8px;flex-shrink:0;
}
.dash-model-search input{
  width:100%;padding:8px 10px 8px 32px;
  background:var(--color-base-100);color:var(--color-base-content);
  border:1px solid var(--color-base-300);border-radius:8px;
  font-size:.78rem;outline:none;
}
.dash-model-search input:focus{border-color:var(--color-primary)}
.dash-model-search input::placeholder{color:var(--color-base-content);opacity:.35}
.dash-model-search-wrap{position:relative}
.dash-model-search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--color-base-content);opacity:.3;pointer-events:none;
}

/* model list */
.dash-model-list{
  flex:1;overflow-y:auto;padding:4px;
}
.dash-model-list::-webkit-scrollbar{width:4px}
.dash-model-list::-webkit-scrollbar-thumb{background:var(--color-base-300);border-radius:2px}

.dash-model-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  cursor:pointer;transition:background .1s;
}
.dash-model-item:hover{background:var(--color-base-300)}
.dash-model-item.is-focused{background:var(--color-base-300)}
.dash-model-item.is-active{background:var(--color-primary/12)}
.dash-model-item-icon{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.dash-model-item-info{flex:1;min-width:0}
.dash-model-item-name{font-size:.78rem;font-weight:500;color:var(--color-base-content);line-height:1.3}
.dash-model-item-desc{font-size:.65rem;color:var(--color-base-content);opacity:.4;line-height:1.3;margin-top:1px}
.dash-model-item-check{
  width:16px;height:16px;flex-shrink:0;opacity:0;color:var(--color-primary);transition:opacity .15s;
}
.dash-model-item.is-active .dash-model-item-check{opacity:1}

.dash-model-empty{
  padding:16px;text-align:center;font-size:.75rem;color:var(--color-base-content);opacity:.35;
}

/* ====== disabled state ====== */
.dash-disabled{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding:40px;text-align:center;
}
.dash-disabled-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--color-base-200);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.dash-disabled-icon svg{width:28px;height:28px;color:var(--color-base-content);opacity:.2}
.dash-disabled h2{font-size:1.1rem;color:var(--color-base-content);margin:0 0 8px}
.dash-disabled p{font-size:.8rem;color:var(--color-base-content);opacity:.35;margin:0 0 16px;max-width:300px;line-height:1.6}
.dash-disabled .btn{
  background:var(--color-primary);color:var(--color-primary-content);
  border:none;padding:8px 18px;border-radius:10px;font-size:.8rem;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s;
}
.dash-disabled .btn:hover{opacity:.85}

/* ====== animations ====== */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:.6;transform:scale(1)}}

/* ====== chat history sidebar ====== */
.dash-sidebar{
  position:fixed;top:0;bottom:0;
  width:280px;z-index:100;
  background:var(--color-base-100);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
/* RTL — sidebar on left */
.dash-sidebar.rtl{left:0;border-right:1px solid var(--color-base-300);box-shadow:4px 0 20px rgba(0,0,0,.08)}
.dash-sidebar.rtl{transform:translateX(-100%)}
.dash-sidebar.rtl.is-open{transform:translateX(0)}
/* LTR — sidebar on right */
.dash-sidebar.ltr{right:0;border-left:1px solid var(--color-base-300);box-shadow:-4px 0 20px rgba(0,0,0,.08)}
.dash-sidebar.ltr{transform:translateX(100%)}
.dash-sidebar.ltr.is-open{transform:translateX(0)}
.dash-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;border-bottom:1px solid var(--color-base-200);flex-shrink:0;
}
.dash-sidebar-title{font-size:.9rem;font-weight:600;color:var(--color-base-content)}
.dash-sidebar-close{
  background:none;border:none;color:var(--color-base-content);opacity:.4;
  cursor:pointer;padding:6px;border-radius:8px;transition:all .15s;line-height:0;
}
.dash-sidebar-close:hover{background:var(--color-base-200);opacity:.8}
.dash-sidebar-list{
  flex:1;overflow-y:auto;padding:8px 0;
}
.dash-sidebar-list::-webkit-scrollbar{width:4px}
.dash-sidebar-list::-webkit-scrollbar-thumb{background:var(--color-base-300);border-radius:2px}
.dash-sidebar-item-title{
  font-size:.8rem;font-weight:500;color:var(--color-base-content);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-sidebar-item-meta{
  display:flex;align-items:center;gap:8px;margin-top:4px;
  font-size:.65rem;color:var(--color-base-content);opacity:.4;
}
.dash-sidebar-item-count{
  background:var(--color-base-200);padding:2px 6px;border-radius:4px;font-size:.6rem;
}
.dash-sidebar-new{
  padding:12px 16px;border-top:1px solid var(--color-base-200);flex-shrink:0;
}
.dash-sidebar-new-btn{
  width:100%;padding:10px;border:1px dashed var(--color-base-300);
  border-radius:10px;background:transparent;color:var(--color-base-content);
  font-size:.8rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.dash-sidebar-new-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary/5)}
.dash-sidebar-overlay{
  position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.dash-sidebar-overlay.is-visible{opacity:1;pointer-events:auto}

@media(max-width:1024px){
  .dash-sidebar{width:260px}
}

/* ====== mobile ====== */
@media(max-width:1024px){
  .dash-msgs{width:100%;padding:20px 16px}
  .dash-input-inner{width:100%}
}
@media(max-width:640px){
  .dash-msgs{width:100%;padding:16px 12px}
  .dash-input-wrap{padding:10px 12px 14px}
  .dash-input-inner{width:100%}
  .dash-welcome h2{font-size:1.1rem}
}

/* ====== sidebar item layout ====== */
.dash-sidebar-item{
  display:flex;align-items:center;position:relative;gap:6px;
  padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--color-base-200);transition:background .15s;
}
.dash-sidebar-item:hover{background:var(--color-base-200)}
.dash-sidebar-item.is-active{background:var(--color-primary/10);border-right:3px solid var(--color-primary)}
.dash-sidebar-item-main{flex:1;min-width:0;overflow:hidden}
.dash-sidebar-item-main .dash-sidebar-item-meta{display:flex}
/* ====== three-dot menu ====== */
.dash-conv-dots{
  position:relative;background:none;border:none;flex-shrink:0;
  color:var(--color-base-content);opacity:0;cursor:pointer;
  padding:6px;border-radius:8px;transition:all .15s;line-height:0;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
}
.dash-sidebar-item:hover .dash-conv-dots{opacity:.4}
.dash-conv-dots:hover,.dash-conv-dots.is-open{opacity:1!important;background:var(--color-base-200)}
.dash-conv-menu{
  position:fixed;display:none;
  background:var(--color-base-100);border:1px solid var(--color-base-300);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);
  min-width:130px;z-index:200;padding:4px;overflow:hidden;
}
.dash-conv-menu.is-open{display:block}
.dash-conv-menu-item{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:none;padding:8px 12px;border-radius:8px;
  font-size:.78rem;color:var(--color-error);cursor:pointer;
  transition:background .1s;text-align:start;white-space:nowrap;
}
.dash-conv-menu-item:hover{background:var(--color-error/10)}

@media(max-width:768px){
  .dash-conv-dots{opacity:.4!important}
  .dash-sidebar-item:hover .dash-conv-dots{opacity:.4!important}
}

/* ====== delete all button ====== */
.dash-delete-all{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:10px;border:none;border-top:1px solid var(--color-base-200);
  background:none;color:var(--color-error);font-size:.78rem;font-weight:500;
  cursor:pointer;transition:background .15s;
}
.dash-delete-all:hover{background:var(--color-error/10)}

/* ====== custom confirm dialog ====== */
.dash-confirm-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.dash-confirm-overlay.is-visible{opacity:1;pointer-events:auto}
.dash-confirm-box{
  background:var(--color-base-100);border:1px solid var(--color-base-300);
  border-radius:16px;padding:24px 28px;min-width:300px;max-width:380px;
  box-shadow:0 16px 48px rgba(0,0,0,.2);
  transform:scale(.9);transition:transform .2s;
}
.dash-confirm-overlay.is-visible .dash-confirm-box{transform:scale(1)}
.dash-confirm-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.dash-confirm-icon.confirm-warn{background:var(--color-warning/15)}
.dash-confirm-icon.confirm-warn svg{color:var(--color-warning)}
.dash-confirm-icon.confirm-error{background:var(--color-error/15)}
.dash-confirm-icon.confirm-error svg{color:var(--color-error)}
.dash-confirm-title{font-size:.95rem;font-weight:600;color:var(--color-base-content);margin-bottom:6px}
.dash-confirm-msg{font-size:.8rem;color:var(--color-base-content);opacity:.5;line-height:1.6;margin-bottom:20px}
.dash-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.dash-confirm-btn{
  padding:8px 20px;border-radius:10px;font-size:.8rem;font-weight:500;
  cursor:pointer;border:none;transition:all .15s;
}
.dash-confirm-cancel{background:var(--color-base-200);color:var(--color-base-content)}
.dash-confirm-cancel:hover{background:var(--color-base-300)}
.dash-confirm-ok{background:var(--color-primary);color:var(--color-primary-content)}
.dash-confirm-ok:hover{opacity:.85}
.dash-cooldown-toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:9999;
  background:var(--color-base-200);color:var(--color-base-content);padding:10px 18px;border-radius:10px;
  font-size:.8rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s;
  box-shadow:0 4px 16px rgba(0,0,0,.2);display:flex;align-items:center;gap:6px;max-width:90vw}
.dash-cooldown-toast.is-visible{opacity:1}
</style>

<!-- custom confirm dialog -->
<div id="dash-confirm" class="dash-confirm-overlay">
  <div class="dash-confirm-box">
    <div class="dash-confirm-icon" id="dash-confirm-icon"></div>
    <div class="dash-confirm-title" id="dash-confirm-title"></div>
    <div class="dash-confirm-msg" id="dash-confirm-msg"></div>
    <div class="dash-confirm-actions">
      <button class="dash-confirm-btn dash-confirm-cancel" id="dash-confirm-cancel">{% trans "Cancel" %}</button>
      <button class="dash-confirm-btn dash-confirm-ok" id="dash-confirm-ok"></button>
    </div>
  </div>
</div>

{% if dash_ui_settings.ai_enabled %}

<div class="dash-chat">

  <!-- ====== top bar ====== -->
  <div class="dash-topbar" style="position:relative">
    <div class="dash-topbar-left">
      <div class="dash-topbar-avatar">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
      </div>
      <div>
        <div class="dash-topbar-title">{% trans "AI Assistant" %}</div>
      </div>
      <!-- model selector trigger -->
      <button id="ai-model-trigger" class="dash-model-trigger" type="button">
        <span id="ai-model-trigger-name">{% trans "Loading..." %}</span>
        <svg class="dash-model-trigger-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
      </button>
      <!-- model dropdown -->
      <div id="ai-model-dropdown" class="dash-model-dropdown">
        <div class="dash-model-search">
          <div class="dash-model-search-wrap">
            <svg class="dash-model-search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="m21 21-4.35-4.35"/></svg>
            <input type="text" id="ai-model-search-input" placeholder="{% trans 'Search models...' %}" autocomplete="off" />
          </div>
        </div>
        <div class="dash-model-list" id="ai-model-list">
          <!-- filled by JS -->
        </div>
      </div>
    </div>
    <div class="dash-topbar-actions">
      <button id="ai-toggle-prev" class="dash-topbar-btn" title="{% trans 'Chat History' %}" style="font-size:16px">
        <svg class="sidebar-icon-rtl" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="18" height="18"><path d="M21.97 15V9C21.97 4 19.97 2 14.97 2H8.96997C3.96997 2 1.96997 4 1.96997 9V15C1.96997 20 3.96997 22 8.96997 22H14.97C19.97 22 21.97 20 21.97 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.96997 2V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.97 9.43994L12.41 11.9999L14.97 14.5599" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <svg class="sidebar-icon-ltr" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="18" height="18"><path d="M21.97 15V9C21.97 4 19.97 2 14.97 2H8.96997C3.96997 2 1.96997 4 1.96997 9V15C1.96997 20 3.96997 22 8.96997 22H14.97C19.97 22 21.97 20 21.97 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.97 2V22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.96997 9.43994L10.53 11.9999L7.96997 14.5599" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      <button id="ai-clear" class="dash-topbar-btn" title="{% trans 'New Chat' %}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
      </button>
    </div>
  </div>

  <!-- ====== sidebar overlay ====== -->
  <div id="ai-sidebar-overlay" class="dash-sidebar-overlay"></div>

  <!-- ====== chat history sidebar ====== -->
  <div id="ai-sidebar" class="dash-sidebar">
    <div class="dash-sidebar-header">
      <span class="dash-sidebar-title">{% trans "Chat History" %}</span>
      <button id="ai-sidebar-close" class="dash-sidebar-close">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </div>
    <div id="ai-sidebar-list" class="dash-sidebar-list">
      <!-- filled by JS -->
    </div>
    <button id="ai-delete-all" class="dash-delete-all" style="display:none">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
      {% trans "Delete All" %}
    </button>
    <div class="dash-sidebar-new">
      <button id="ai-sidebar-new" class="dash-sidebar-new-btn">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        {% trans "New Chat" %}
      </button>
    </div>
  </div>

  <!-- ====== scroll area ====== -->
  <div class="dash-chat-scroll" id="ai-scroll">

    <!-- welcome -->
    <div class="dash-welcome" id="ai-welcome">
      <div class="dash-welcome-icon">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.898 20.624L16.5 21.75l-.398-1.126a3.375 3.375 0 00-2.456-2.456L12.75 18l1.126-.398a3.375 3.375 0 002.456-2.456L16.5 14.25l.398 1.126a3.375 3.375 0 002.456 2.456L20.25 18l-1.126.398a3.375 3.375 0 00-2.456-2.456z"/></svg>
      </div>
      <h2 id="ai-welcome-title">{% trans "Hello! I'm your AI assistant" %}</h2>
      <p id="ai-welcome-sub">{% trans "Ask me anything — data, reports, or editing records" %}</p>

      <div class="dash-welcome-chips" id="ai-chips">
        <div class="dash-welcome-chip" onclick="pickChip(this)">{% trans "How many records in the system?" %}</div>
        <div class="dash-welcome-chip" onclick="pickChip(this)">{% trans "Show latest data" %}</div>
        <div class="dash-welcome-chip" onclick="pickChip(this)">{% trans "Add new record" %}</div>
      </div>
    </div>

    <!-- messages -->
    <div class="dash-msgs" id="ai-msgs"></div>

  </div>

  <!-- ====== input (always visible, fixed bottom) ====== -->
  <div class="dash-input-wrap">
    <div class="dash-input-inner">
      <div class="dash-input-box">
        <textarea id="ai-input" rows="1" placeholder="{% trans 'Type your question here...' %}"></textarea>
        <button id="ai-send" class="dash-send-btn" disabled>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-7-7l7 7-7 7"/></svg>
        </button>
      </div>
      <div class="dash-input-footer">{% trans "Enter to send · Shift+Enter for new line" %}</div>
    </div>
  </div>

</div>

{% else %}

<div class="dash-chat">
  <div class="dash-disabled">
    <div class="dash-disabled-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
    </div>
    <h2>{% trans "AI Assistant is disabled" %}</h2>
    <p>{% trans "Enable it from settings page and enter your API key and AI model" %}</p>
    <a href="{% url 'admin:django_dash_dashboardsettings_changelist' %}" class="btn">{% trans "Settings" %}</a>
  </div>
</div>

{% endif %}

{% endblock %}

{% block scripts %}{{ block.super }}
<script>
(function(){
  var scroll=document.getElementById('ai-scroll');
  var msgs=document.getElementById('ai-msgs');
  var welcome=document.getElementById('ai-welcome');
  var input=document.getElementById('ai-input');
  var sendBtn=document.getElementById('ai-send');
  var clearBtn=document.getElementById('ai-clear');
  if(!scroll||!msgs||!input)return;

  // ====== custom confirm dialog ======
  var CONFIRM_WARN_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>';
  var CONFIRM_DELETE_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>';
  var confirmOverlay=document.getElementById('dash-confirm');
  var confirmIcon=document.getElementById('dash-confirm-icon');
  var confirmTitle=document.getElementById('dash-confirm-title');
  var confirmMsg=document.getElementById('dash-confirm-msg');
  var confirmOk=document.getElementById('dash-confirm-ok');
  var confirmCancel=document.getElementById('dash-confirm-cancel');

  function dashConfirm(opts){
    return new Promise(function(resolve){
      var type=opts.type||'warn';
      confirmIcon.className='dash-confirm-icon confirm-'+type;
      confirmIcon.innerHTML=type==='delete'?CONFIRM_DELETE_SVG:CONFIRM_WARN_SVG;
      confirmTitle.textContent=opts.title||'';
      confirmMsg.textContent=opts.message||'';
      confirmOk.textContent=opts.okText||'{% trans "OK" %}';
      confirmOk.className='dash-confirm-btn dash-confirm-ok';
      confirmOverlay.classList.add('is-visible');

      function close(result){
        confirmOverlay.classList.remove('is-visible');
        confirmOk.removeEventListener('click',onOk);
        confirmCancel.removeEventListener('click',onCancel);
        confirmOverlay.removeEventListener('click',onBg);
        document.removeEventListener('keydown',onKey);
        resolve(result);
      }
      function onOk(){close(true)}
      function onCancel(){close(false)}
      function onBg(e){if(e.target===confirmOverlay)close(false)}
      function onKey(e){if(e.key==='Escape')close(false);if(e.key==='Enter')close(true)}
      confirmOk.addEventListener('click',onOk);
      confirmCancel.addEventListener('click',onCancel);
      confirmOverlay.addEventListener('click',onBg);
      document.addEventListener('keydown',onKey);
    });
  }

  var MSGS='dash-chat-v3-{{ ai_user_pk }}';
  var IC_U='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0"/></svg>';
  var IC_A='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>';
  var COPY_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>';
  var CHECK_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>';
  var TYPING='<div class="dash-typing"><span class="dash-typing-dot"></span><span class="dash-typing-dot"></span><span class="dash-typing-dot"></span></div>';
  var convId=null;
  // نصوص الترجمة
  var T_COPY='{% trans "Copy" %}';
  var T_COPIED='{% trans "Copied" %}';
  var T_NO_MODELS='{% trans "No models available" %}';
  var T_SAVED_MODEL='{% trans "Saved model" %}';
  var T_LOAD_ERROR='{% trans "Load error" %}';
  var T_SUCCESS='{% trans "Success" %}';
  var T_ACTION_ERROR='{% trans "Action error" %}';
  var T_NEW_CHAT='{% trans "New chat?" %}';
  var T_NO_CONVS='{% trans "No conversations yet" %}';
  var T_MSG='{% trans "message" %}';
  var T_MESSAGES='{% trans "messages" %}';
  var T_CONFIRM_NEW='{% trans "New chat?" %}';
  var T_RATE_LIMIT='{% trans "Rate limit exceeded" %}';
  var T_WAIT='{% trans "Wait a moment before sending again" %}';
  var T_CONN_ERROR='{% trans "Connection error" %}';
  var T_DELETE='{% trans "Delete" %}';
  var T_CONFIRM_DELETE='{% trans "Delete this conversation?" %}';
  var T_OP_EXECUTED='{% trans "Executed" %}';
  var T_OP_PENDING='{% trans "Pending approval" %}';
  var T_OP_ERROR='{% trans "Error" %}';

  function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}

  function wireCopy(d){
    var btn=d.querySelector('.dash-copy-btn');
    if(!btn)return;
    btn.addEventListener('click',function(){
      var t=d.querySelector('.dash-msg-text').textContent;
      navigator.clipboard.writeText(t).then(function(){
        btn.innerHTML=CHECK_SVG+' '+T_COPIED;btn.classList.add('copied');
        setTimeout(function(){btn.innerHTML=COPY_SVG+' '+T_COPY;btn.classList.remove('copied')},1200);
      });
    });
  }

  function mkMsg(role,text){
    var u=role==='user';
    var d=document.createElement('div');
    d.className='dash-msg dash-msg-'+(u?'user':'ai');
    d.innerHTML='<div class="dash-msg-row">'
      +'<div class="dash-msg-avatar">'+(u?IC_U:IC_A)+'</div>'
      +'<div class="dash-msg-body"><div class="dash-msg-text">'+esc(text)+'</div>'
    +'<div class="dash-msg-actions"><button class="dash-copy-btn">'+COPY_SVG+' '+T_COPY+'</button></div>'
    +'</div></div>';
    wireCopy(d);return d;
  }

  function mkMsgHtml(html){
    var d=document.createElement('div');
    d.className='dash-msg dash-msg-ai';
    d.innerHTML='<div class="dash-msg-row">'
      +'<div class="dash-msg-avatar">'+IC_A+'</div>'
      +'<div class="dash-msg-body"><div class="dash-msg-text">'+html+'</div>'
      +'<div class="dash-msg-actions"><button class="dash-copy-btn">'+COPY_SVG+' '+T_COPY+'</button></div>'
      +'</div></div>';
    wireCopy(d);return d;
  }

  function addMsg(role,text){
    if(welcome)welcome.style.display='none';
    msgs.appendChild(mkMsg(role,text));scrollBot();
  }

  function addAiHtml(html){
    if(welcome)welcome.style.display='none';
    msgs.appendChild(mkMsgHtml(html));scrollBot();
  }

  function typing(on){
    var old=msgs.querySelector('.dash-typing-msg');
    if(!on){if(old)old.remove();return}
    var d=mkMsgHtml(TYPING);
    d.className+=' dash-typing-msg';
    msgs.appendChild(d);scrollBot();
  }

  function scrollBot(){requestAnimationFrame(function(){scroll.scrollTop=scroll.scrollHeight})}

  function persist(){
    var ms=[].map.call(msgs.querySelectorAll('.dash-msg:not(.dash-typing-msg)'),function(el){
      return{u:el.classList.contains('dash-msg-user'),t:(el.querySelector('.dash-msg-text')||{}).textContent||''};
    }).filter(function(o){return o.t&&!o.t.includes(T_COPY)});
    try{localStorage.setItem(MSGS,JSON.stringify(ms.slice(-60)))}catch(e){}
  }

  function restore(){
    try{var a=JSON.parse(localStorage.getItem(MSGS)||'[]')}catch(e){var a=[]}
    a.forEach(function(o){addMsg(o.u?'user':'ai',o.t)});
  }

  // Input
  input.addEventListener('keydown',function(e){
    if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();doSend();}
  });
  input.addEventListener('input',function(){
    sendBtn.disabled=!this.value.trim();
    this.style.height='0';
    this.style.height=Math.min(this.scrollHeight,200)+'px';
    this.style.overflowY=this.scrollHeight>200?'auto':'hidden';
  });
  sendBtn.addEventListener('click',function(){doSend()});

  // === Model Selector (ChatGPT-style) ===
  var modelTrigger=document.getElementById('ai-model-trigger');
  var modelTriggerName=document.getElementById('ai-model-trigger-name');
  var modelDropdown=document.getElementById('ai-model-dropdown');
  var modelSearchInput=document.getElementById('ai-model-search-input');
  var modelList=document.getElementById('ai-model-list');
  var MODEL_KEY='dash-chat-model-{{ ai_user_pk }}';
  var savedModel=localStorage.getItem(MODEL_KEY)||'';
  var allModels=[];
  var CHECK_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>';

  function openModelDropdown(){
    modelDropdown.classList.add('is-open');
    modelTrigger.classList.add('is-open');
    modelSearchInput.value='';
    renderModelList('');
    setTimeout(function(){modelSearchInput.focus()},50);
  }
  function closeModelDropdown(){
    modelDropdown.classList.remove('is-open');
    modelTrigger.classList.remove('is-open');
  }
  function toggleModelDropdown(){
    if(modelDropdown.classList.contains('is-open')) closeModelDropdown();
    else openModelDropdown();
  }

  modelTrigger.addEventListener('click',function(e){e.stopPropagation();toggleModelDropdown()});
  document.addEventListener('click',function(e){
    if(!modelDropdown.contains(e.target)&&!modelTrigger.contains(e.target)) closeModelDropdown();
  });
  modelDropdown.addEventListener('click',function(e){e.stopPropagation()});

  modelSearchInput.addEventListener('input',function(){renderModelList(this.value)});

  function renderModelList(query){
    var q=(query||'').toLowerCase();
    var filtered=q?allModels.filter(function(m){return m.name.toLowerCase().indexOf(q)!==-1||m.id.toLowerCase().indexOf(q)!==-1}):allModels;
    if(!filtered.length){
      modelList.innerHTML='<div class="dash-model-empty">'+T_NO_MODELS+'</div>';
      return;
    }
    var html='';
    filtered.forEach(function(m){
      var active=(savedModel===m.id)?' is-active':'';
      var icon=m.icon||'🤖';
      var desc=m.description||m.id;
      html+='<div class="dash-model-item'+active+'" data-model-id="'+esc(m.id)+'">';
      html+='<div class="dash-model-item-icon">'+icon+'</div>';
      html+='<div class="dash-model-item-info">';
      html+='<div class="dash-model-item-name">'+esc(m.name)+'</div>';
      html+='<div class="dash-model-item-desc">'+esc(desc)+'</div>';
      html+='</div>';
      html+='<div class="dash-model-item-check">'+CHECK_SVG+'</div>';
      html+='</div>';
    });
    modelList.innerHTML=html;
  }

  modelList.addEventListener('click',function(e){
    var item=e.target.closest('.dash-model-item');
    if(!item)return;
    var id=item.dataset.modelId;
    var model=allModels.find(function(m){return m.id===id});
    savedModel=id;
    localStorage.setItem(MODEL_KEY,id);
    modelTriggerName.textContent=model?model.name:id;
    closeModelDropdown();
  });

  // keyboard nav in dropdown
  modelSearchInput.addEventListener('keydown',function(e){
    var items=modelList.querySelectorAll('.dash-model-item');
    if(!items.length)return;
    var current=modelList.querySelector('.dash-model-item.is-focused');
    var idx=Array.prototype.indexOf.call(items,current);
    if(e.key==='ArrowDown'){
      e.preventDefault();
      if(current) current.classList.remove('is-focused');
      var next=items[idx+1]||items[0];
      next.classList.add('is-focused');
      next.scrollIntoView({block:'nearest'});
    }else if(e.key==='ArrowUp'){
      e.preventDefault();
      if(current) current.classList.remove('is-focused');
      var prev=items[idx-1]||items[items.length-1];
      prev.classList.add('is-focused');
      prev.scrollIntoView({block:'nearest'});
    }else if(e.key==='Enter'){
      e.preventDefault();
      if(current) current.click();
    }else if(e.key==='Escape'){
      closeModelDropdown();
      modelTrigger.focus();
    }
  });

  // استنتاج مسار admin تلقائياً — يعمل مع أي prefix (admin/, system-control-panel-2026/, إلخ)
  var ADMIN_BASE=(function(){var p=location.pathname;var i=p.indexOf('ai-assistant');return i>0?p.substring(0,i):'/admin/'})();

  function loadModels(){
    console.log('[AI] loadModels: fetching '+ADMIN_BASE+'ai-models/');
    fetch(ADMIN_BASE+"ai-models/",{credentials:'same-origin'})
      .then(function(r){
        console.log('[AI] loadModels: status='+r.status);
        if(!r.ok){return r.json().then(function(d){throw new Error(d.error||('HTTP '+r.status))})}
        return r.json()
      })
      .then(function(d){
        console.log('[AI] loadModels: got',d.models?d.models.length:0,'models');
        if(!d.models||!d.models.length){
          allModels=[];
          modelTriggerName.textContent=d.error||T_NO_MODELS;
          return;
        }
        allModels=d.models;
        // set trigger label
        if(savedModel){
          var found=d.models.find(function(m){return m.id===savedModel});
          modelTriggerName.textContent=found?found.name:savedModel;
        }else{
          modelTriggerName.textContent=T_SAVED_MODEL;
        }
        renderModelList('');
      }).catch(function(err){
        console.error('[AI] loadModels FAILED:',err);
        modelTriggerName.textContent=T_LOAD_ERROR;
      });
  }
  loadModels();

  var COOLDOWN=10000,lastSend=0;
  var cooldownToast=null;
  function showCooldownToast(remainingMs){
    if(!cooldownToast){
      cooldownToast=document.createElement('div');
      cooldownToast.className='dash-cooldown-toast';
      document.body.appendChild(cooldownToast);
    }
    cooldownToast.textContent='⏳'+(T_WAIT||' انتظر قليلاً قبل الإرسال ('+Math.ceil(remainingMs/1000)+' ثوانٍ)');
    cooldownToast.classList.add('is-visible');
    if(cooldownToast._t)clearTimeout(cooldownToast._t);
    cooldownToast._t=setTimeout(function(){cooldownToast.classList.remove('is-visible')},2600);
  }
  function doSend(){
    var q=input.value.trim();if(!q)return;
    var now=Date.now();
    if(now-lastSend<COOLDOWN){
      showCooldownToast(COOLDOWN-(now-lastSend));
      return;  // منع بسرعة مع تنبيه مرئي بدل الكتم الصامت
    }
    lastSend=now;
    input.value='';input.style.height='auto';input.style.overflowY='hidden';sendBtn.disabled=true;
    addMsg('user',q);
    var hist=[].map.call(msgs.querySelectorAll('.dash-msg:not(.dash-typing-msg)'),function(el){
      return{role:el.classList.contains('dash-msg-user')?'user':'assistant',
              content:(el.querySelector('.dash-msg-text')||{}).textContent||''};
    }).filter(function(m){return m.content&&!m.content.includes(T_COPY)});
    typing(true);
    fetch(ADMIN_BASE+"ai-chat/",{
      method:'POST',credentials:'same-origin',
      headers:{'Content-Type':'application/json','X-CSRFToken':(document.cookie.match(/csrftoken=([^;]+)/)||[])[1]||''},
      body:JSON.stringify({messages:hist.slice(-15),model:savedModel||'',conversation_id:convId})
    }).then(function(r){
      console.log('[AI] doSend: status='+r.status);
      if(r.status===429){return r.json().then(function(d){throw{status:429,msg:d.error||T_RATE_LIMIT}})}
      return r.json()
    }).then(function(d){
      console.log('[AI] doSend: reply length='+(d.reply||'').length+', error=',d.error||null);
      typing(false);
      sendBtn.disabled=false;
      if(d.conversation_id)convId=d.conversation_id;
      if(d.error){addAiHtml('<span style="color:var(--color-error)">⚠ '+esc(d.error)+'</span>')}
      else{
        var m=d.reply.match(/```json\s*(\{[\s\S]*?"action"[\s\S]*?\})\s*```/);
        if(m){
          try{var a=JSON.parse(m[1]);showAction(a,d.reply.replace(/```json[\s\S]*?```/,'').trim());}
          catch(x){addMsg('ai',d.reply)}
        }else addMsg('ai',d.reply);

        // إظهار النموذج الفعلي إذا كان هناك fallback
        if(d.was_fallback && d.model_used){
          var fbHtml='<div style="margin-top:6px;padding:6px 10px;border-radius:6px;background:var(--color-warning-light,#fff3cd);font-size:.72rem;color:var(--color-warning-text,#856404)">';
          fbHtml+='⚠️ طلبت: <b>'+esc(d.model_requested)+'</b> — استخدم: <b>'+esc(d.model_used)+'</b>';
          if(d.skipped_models && d.skipped_models.length){
            fbHtml+='<br><span style="opacity:.7">تخطى: '+esc(d.skipped_models.join(', '))+'</span>';
          }
          fbHtml+='</div>';
          addAiHtml(fbHtml);
        }

        // عرض نتائج العمليات
        if(d.operations&&d.operations.length){
          d.operations.forEach(function(op){
            var icon=op.status==='executed'?'✅':op.status==='pending_approval'?'⏳':'❌';
            var msg=op.status==='executed'?T_OP_EXECUTED:op.status==='pending_approval'?T_OP_PENDING:T_OP_ERROR;
            var detail=op.error?' ('+esc(op.error)+')':'';
            addAiHtml('<div style="margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--color-base-200);font-size:.78rem">'+icon+' '+msg+': '+esc(op.model)+detail+'</div>');
          });
        }
      }
      persist();
    }).catch(function(err){
      console.error('[AI] doSend FAILED:',err);
      typing(false);
      lastSend=0;  // إعادة تعيين cooldown عند الخطأ
      sendBtn.disabled=false;
      if(err&&err.status===429){
        addAiHtml('<span style="color:var(--color-warning)">⏳ '+esc(err.msg)+' — حاول مرة أخرى بعد قليل</span>');
      }else{
        addAiHtml('<span style="color:var(--color-error)">'+T_CONN_ERROR+'</span>');
      }
    });
  }

  function showAction(action,explanation){
    var ACTION_LABELS={
      create:'{% trans "Create" %}',insert:'{% trans "Create" %}',insert_data:'{% trans "Create" %}',
      update:'{% trans "Update" %}',update_data:'{% trans "Update" %}',
      delete:'{% trans "Delete" %}',delete_data:'{% trans "Delete" %}',
      list:'{% trans "List" %}',select:'{% trans "List" %}',select_data:'{% trans "List" %}',
      count:'{% trans "Count" %}',count_data:'{% trans "Count" %}',
      stats:'{% trans "Statistics" %}',stats_data:'{% trans "Statistics" %}'
    };
    var label=ACTION_LABELS[action.action]||action.action;
    var html='';
    if(explanation)html+='<p style="margin-bottom:6px">'+esc(explanation)+'</p>';
    html+='<div class="dash-action">';
    html+='<span class="dash-action-badge">'+label+'</span> <strong style="font-size:.82rem">'+esc(action.model||'?')+'</strong>';
    if(action.data)html+='<pre>'+esc(JSON.stringify(action.data,null,1))+'</pre>';
    html+='<div class="dash-action-btns">';
    html+='<button class="dash-action-do" data-act=\''+JSON.stringify(action)+'\'>'+'{% trans "Execute" %}'+'</button>';
    html+='<button class="dash-action-cancel" onclick="this.closest(\'.dash-msg\').remove()">'+'{% trans "Cancel" %}'+'</button>';
    html+='</div></div>';
    addAiHtml(html);
  }

  msgs.addEventListener('click',function(e){
    var btn=e.target.closest('.dash-action-do');if(!btn)return;
    var a;try{a=JSON.parse(btn.dataset.act)}catch(x){return}
    btn.disabled=true;btn.textContent='{% trans "Loading..." %}';
    fetch(ADMIN_BASE+"ai-action/",{
      method:'POST',credentials:'same-origin',
      headers:{'Content-Type':'application/json','X-CSRFToken':(document.cookie.match(/csrftoken=([^;]+)/)||[])[1]||''},
      body:JSON.stringify(a)
    }).then(function(r){return r.json()}).then(function(d){
      if(d.error)addAiHtml('<span style="color:var(--color-error)">'+esc(d.error)+'</span>');
      else addMsg('ai',T_SUCCESS+': '+(d.message||JSON.stringify(d)));
      persist();
    }).catch(function(){addAiHtml('<span style="color:var(--color-error)">'+T_ACTION_ERROR+'</span>')});
  });

  if(clearBtn) clearBtn.addEventListener('click',function(){
    dashConfirm({type:'warn',title:'{% trans "New chat?" %}',message:'{% trans "This will clear all messages." %}',okText:'{% trans "New Chat" %}'}).then(function(ok){
      if(!ok)return;
      convId=null;
      msgs.innerHTML='';if(welcome)welcome.style.display='';
      try{localStorage.removeItem(MSGS)}catch(e){}
      loadConversations();
    });
  });

  window.pickChip=function(el){
    input.value=el.textContent;sendBtn.disabled=false;doSend();
  };

  // ====== chat history sidebar ======
  var sidebar=document.getElementById('ai-sidebar');
  var sidebarOverlay=document.getElementById('ai-sidebar-overlay');
  var sidebarList=document.getElementById('ai-sidebar-list');
  var sidebarClose=document.getElementById('ai-sidebar-close');
  var sidebarNew=document.getElementById('ai-sidebar-new');
  var toggleBtn=document.getElementById('ai-toggle-prev');

  // تحديد الاتجاه حسب اللغة
  var isRTL=document.documentElement.dir==='rtl'||document.documentElement.getAttribute('dir')==='rtl';
  if(sidebar){
    sidebar.classList.add(isRTL?'rtl':'ltr');
  }

  function openSidebar(){
    if(sidebar)sidebar.classList.add('is-open');
    if(sidebarOverlay)sidebarOverlay.classList.add('is-visible');
    loadConversations();
  }
  function closeSidebar(){
    if(sidebar)sidebar.classList.remove('is-open');
    if(sidebarOverlay)sidebarOverlay.classList.remove('is-visible');
  }

  if(toggleBtn)toggleBtn.addEventListener('click',openSidebar);
  if(sidebarClose)sidebarClose.addEventListener('click',closeSidebar);
  if(sidebarOverlay)sidebarOverlay.addEventListener('click',closeSidebar);

  // محادثة جديدة من السايدبار
  if(sidebarNew)sidebarNew.addEventListener('click',function(){
    convId=null;
    msgs.innerHTML='';if(welcome)welcome.style.display='';
    try{localStorage.removeItem(MSGS)}catch(e){}
    closeSidebar();
    loadConversations();
  });

  // ====== تحميل المحادثات القديمة ======
  var DOTS_SVG='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>';
  var TRASH_SVG='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="13" height="13"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>';
  var canDeleteConv=false;

  function loadConversations(){
    fetch(ADMIN_BASE+"ai-conversations/",{credentials:'same-origin'})
    .then(function(r){return r.json()})
    .then(function(d){
      if(!sidebarList)return;
      canDeleteConv=!!d.can_delete;
      if(!d.conversations||!d.conversations.length){
        sidebarList.innerHTML='<div style="padding:32px 16px;text-align:center;font-size:.78rem;color:var(--color-base-content);opacity:.3">'+T_NO_CONVS+'</div>';
        return;
      }
      var html='';
      d.conversations.forEach(function(c){
        var isActive=c.id===convId?' is-active':'';
        var dateStr=c.updated||'';
        var msgLabel=c.msg_count===1?T_MSG:T_MESSAGES;
        var dotsHtml=canDeleteConv?'<button class="dash-conv-dots" data-cid="'+c.id+'">'+DOTS_SVG+'</button>':'';
        var menuHtml=canDeleteConv?'<div class="dash-conv-menu" data-cid="'+c.id+'"><button class="dash-conv-menu-item dash-conv-delete" data-cid="'+c.id+'">'+TRASH_SVG+' '+T_DELETE+'</button></div>':'';
        html+='<div class="dash-sidebar-item'+isActive+'" data-cid="'+c.id+'">'
          +'<div class="dash-sidebar-item-main">'
          +'<div class="dash-sidebar-item-title">'+esc(c.title)+'</div>'
          +'<div class="dash-sidebar-item-meta">'
          +'<span>'+dateStr+'</span>'
          +'<span class="dash-sidebar-item-count">'+c.msg_count+' '+msgLabel+'</span>'
          +'</div></div>'
          +dotsHtml+menuHtml
          +'</div>';
      });
      sidebarList.innerHTML=html;

  function closeAllMenus(){
    document.querySelectorAll('.dash-conv-dots.is-open').forEach(function(b){
      b.classList.remove('is-open');
      var cid=b.dataset.cid;
      var menu=document.querySelector('.dash-conv-menu[data-cid="'+cid+'"]');
      if(menu){
        menu.classList.remove('is-open');
        if(menu.parentNode===document.body)document.body.removeChild(menu);
      }
    });
  }

  // فتح/إغلاق القائمة المنسدلة
  sidebarList.querySelectorAll('.dash-conv-dots').forEach(function(btn){
    btn.addEventListener('click',function(e){
      e.stopPropagation();
      var cid=btn.dataset.cid;
      var menu=sidebarList.querySelector('.dash-conv-menu[data-cid="'+cid+'"]');
      // إغلاق القوائم المفتوحة الأخرى
      var wasOpen=btn.classList.contains('is-open');
      closeAllMenus();
      if(!wasOpen){
        var rect=btn.getBoundingClientRect();
        menu.style.top=(rect.bottom+4)+'px';
        menu.style.left=rect.left+'px';
        menu.style.right='auto';
        menu.classList.add('is-open');
        document.body.appendChild(menu);
        btn.classList.add('is-open');
      }
    });
  });

      // حذف محادثة
      sidebarList.querySelectorAll('.dash-conv-delete').forEach(function(btn){
        btn.addEventListener('click',function(e){
          e.stopPropagation();
          closeAllMenus();
          var cid=btn.dataset.cid;
          dashConfirm({type:'delete',title:'{% trans "Delete" %}',message:'{% trans "Delete this conversation?" %}',okText:'{% trans "Delete" %}'}).then(function(ok){
            if(!ok)return;
            fetch(ADMIN_BASE+"ai-conversation/"+cid+"/delete/",{
              method:'DELETE',credentials:'same-origin',
              headers:{'X-CSRFToken':(document.cookie.match(/csrftoken=([^;]+)/)||[])[1]||''}
            }).then(function(r){return r.json()}).then(function(d){
              if(d.ok){
                if(convId==cid){convId=null;msgs.innerHTML='';if(welcome)welcome.style.display='';}
                loadConversations();
              }
            }).catch(function(){});
          });
        });
      });

      // فتح محادثة عند الضغط
      sidebarList.querySelectorAll('.dash-sidebar-item-main').forEach(function(el){
        el.addEventListener('click',function(){
          var cid=el.closest('.dash-sidebar-item').dataset.cid;
          fetch(ADMIN_BASE+"ai-conversation/"+cid+"/",{credentials:'same-origin'})
          .then(function(r){return r.json()})
          .then(function(d){
            if(d.error)return;
            convId=d.id;
            msgs.innerHTML='';
            if(welcome)welcome.style.display='none';
            d.messages.forEach(function(m){
              addMsg(m.role==='user'?'user':'ai',m.content);
            });
            closeSidebar();
            loadConversations();
          }).catch(function(){});
        });
      });

      // إغلاق القوائم عند الضغط في أي مكان
      document.addEventListener('click',closeAllMenus);

      // إظهار/إخفاء زر حذف الكل
      var deleteAllBtn=document.getElementById('ai-delete-all');
      if(deleteAllBtn){
        if(canDeleteConv&&d.conversations&&d.conversations.length>1){
          deleteAllBtn.style.display='';
        }else{
          deleteAllBtn.style.display='none';
        }
      }
    }).catch(function(){});
  }

  // حذف كل المحادثات
  var deleteAllBtn=document.getElementById('ai-delete-all');
  if(deleteAllBtn){
    deleteAllBtn.addEventListener('click',function(){
      dashConfirm({type:'delete',title:'{% trans "Delete All" %}',message:'{% trans "Delete all conversations?" %}',okText:'{% trans "Delete All" %}'}).then(function(ok){
        if(!ok)return;
        fetch(ADMIN_BASE+"ai-conversations/delete-all/",{
          method:'DELETE',credentials:'same-origin',
          headers:{'X-CSRFToken':(document.cookie.match(/csrftoken=([^;]+)/)||[])[1]||''}
        }).then(function(r){return r.json()}).then(function(d){
          if(d.ok){
            convId=null;msgs.innerHTML='';if(welcome)welcome.style.display='';
            loadConversations();
          }
        }).catch(function(){});
      });
    });
  }

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