function generateFilterChips(applied={}){
  let html='';

  Object.keys(applied).forEach(key=>{
    const value=applied[key];
    if(!value||(Array.isArray(value)&&!value.length))return;

    html+=`
    <platform-chip style="margin:0 6px 6px 0;display:inline-block;">
      <span style="
        display:flex;
        align-items:center;
        gap:6px;
        padding:5px 10px;
        border-radius:999px;
        background:#fef2f2;
        border:1px solid #fca5a5;
        color:#b91c1c;
        font-size:11px;
        font-weight:500;
        line-height:1;
      ">
        ${key}: ${Array.isArray(value)?value.join(', '):value}
      </span>
    </platform-chip>`;
  });

  return html;
}


/* COMPONENT */
const triggerComp=ap.$('0a337864-15fd-4e94-8da1-59b7c89a0b17');

/* FILTER CONFIG */
const filtersConfig=[
{label:'Case ID',key:'cid',type:'range'},
{label:'eSub ID',filter:'eSubNum',type:'search'},
{label:'Submission Date',key:'submissionDate',type:'date-range'},
{label:'Policy Number',filter:'policyNumber',type:'search'},
{label:'Insured Name',filter:'insuredName',type:'search'},
{label:'Priority',filter:'priority',type:'multi-select',options:['High','Medium','Low']},
{label:'Agent Name',filter:'agentName',type:'search'},
{label:'Claim Number',filter:'claimNumber',type:'search'},
{label:'Hospital Name',filter:'hospitalName',type:'search'},
{label:'Status',filter:'status',type:'multi-select',options:['Pending','Approved','Rejected']}
];

/* INIT */
function waitForTrigger(){
const root=triggerComp.shadowRoot||triggerComp;
if(!root)return setTimeout(waitForTrigger,300);

const btn=root.querySelector('button')||root.querySelector('.p-button')||root.firstElementChild;
if(!btn)return setTimeout(waitForTrigger,300);

if(btn.dataset.filterAttached==='true')return;

btn.dataset.filterAttached='true';

btn.addEventListener('click',e=>{
e.preventDefault();
e.stopPropagation();
openCustomFilterDialog(btn);
});
}

/* POPUP */
function openCustomFilterDialog(buttonEl){

const existing=document.querySelector('#custom-filter-popup');
if(existing){existing.remove();return;}

const applied=alpha.local.get().appliedFilters||{};
const popup=document.createElement('div');

popup.id='custom-filter-popup';
popup.style.position='fixed';
popup.style.zIndex='999999';

popup.innerHTML=`
<style>
#custom-filter-popup{
background:#fff;
border-radius:10px;
border:1px solid #dbe3ee;
box-shadow:0 8px 24px rgba(0,0,0,.14);
overflow:hidden;
animation:fadeIn .12s ease;
font-family:Arial,sans-serif;
display:flex;
flex-direction:column;
width:280px;
height:340px;
max-height:70vh
}
#custom-filter-popup ::-webkit-scrollbar{width:6px}
#custom-filter-popup ::-webkit-scrollbar-track{background:#f3f4f6}
#custom-filter-popup ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:20px}
#custom-filter-popup ::-webkit-scrollbar-thumb:hover{background:#94a3b8}

@keyframes fadeIn{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}

.popup-header{
padding:10px 12px;
border-bottom:1px solid #e5e7eb;
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
font-weight:600;
background:#fff;
flex-shrink:0
}

.popup-close{
cursor:pointer;
font-size:14px;
color:#6b7280
}

.popup-body{
flex:1;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:8px;
display:flex;
flex-direction:column;
gap:8px;
background:#fff
}

.popup-footer{
padding:8px 12px;
border-top:1px solid #e5e7eb;
display:flex;
justify-content:flex-end;
gap:8px;
background:#fff;
flex-shrink:0
}

.filter-panel{
border:1px solid #dbe3ee;
border-radius:8px;
background:#f8fafc
}

.panel-header{
padding:8px 10px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-size:12px;
font-weight:600;
user-select:none
}

.panel-body{
padding:8px;
border-top:1px solid #e5e7eb;
background:#fff
}

.filter-panel.collapsed .panel-body{display:none}

.row{
display:flex;
gap:6px;
width:100%
}

.field{
flex:1;
display:flex;
flex-direction:column;
gap:3px;
min-width:0
}

.field label{
font-size:10px;
color:#6b7280
}

.custom-input{
width:100%;
box-sizing:border-box;
border:1px solid #d1d5db;
border-radius:6px;
padding:6px 8px;
font-size:11px;
outline:none;
background:#fff;
transition:.2s ease
}

.custom-input:hover{border-color:#9ca3af}

.custom-input:focus{
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.12)
}

.checkbox-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
font-size:11px
}

.btn{
border:none;
cursor:pointer;
border-radius:6px;
padding:6px 10px;
font-size:11px;
font-weight:600;
transition:.2s ease
}

.btn-clear{
background:#fff;
border:1px solid #d1d5db
}

.btn-clear:hover{background:#f9fafb}

.btn-apply{
background:#2563eb;
color:#fff
}

.btn-apply:hover{background:#1d4ed8}

.btn-apply.disabled{
opacity:.5;
pointer-events:none;
cursor:not-allowed
}

.panel-arrow{
font-size:11px;
transition:.2s ease
}

.filter-panel.collapsed .panel-arrow{
transform:rotate(-90deg)
}

.filter-error{
color:#dc2626;
font-size:10px;
margin-top:4px;
display:none
}
</style>

<div class="popup-header">
<span>Filters</span>
<span class="popup-close">✕</span>
</div>

<div class="popup-body">
${generateFilterHTML(filtersConfig,applied)}
</div>

<div class="popup-footer">
<button class="btn btn-clear">Clear</button>
<button class="btn btn-apply">Apply</button>
</div>
`;

document.body.appendChild(popup);

function updatePopupPosition(){

const rect=buttonEl.getBoundingClientRect();
const popupWidth=280;
const popupHeight=340;

let top=rect.bottom+6;
let left=rect.right-popupWidth;

const viewportWidth=window.innerWidth;
const viewportHeight=window.innerHeight;

if(left+popupWidth>viewportWidth-8){
left=viewportWidth-popupWidth-8;
}

if(left<8)left=8;

if(top+popupHeight>viewportHeight-8){
top=rect.top-popupHeight-6;
}

const isOutsideViewport=
rect.bottom<0||
rect.top>viewportHeight||
rect.right<0||
rect.left>viewportWidth;

if(isOutsideViewport){
closePopup();
return;
}

popup.style.top=`${top}px`;
popup.style.left=`${left}px`;
}

updatePopupPosition();

function closePopup(){
popup.remove();
document.removeEventListener('click',outsideClickHandler);
window.removeEventListener('scroll',updatePopupPosition,true);
window.removeEventListener('resize',updatePopupPosition);
}

window.addEventListener('scroll',updatePopupPosition,true);
window.addEventListener('resize',updatePopupPosition);

setTimeout(()=>{
document.addEventListener('click',outsideClickHandler);
},0);

function outsideClickHandler(e){
if(!popup.contains(e.target)&&!buttonEl.contains(e.target)){
closePopup();
}
}

popup.querySelector('.popup-close').addEventListener('click',closePopup);

popup.addEventListener('click',e=>{
const header=e.target.closest('.panel-header');
if(!header)return;
const panel=header.closest('.filter-panel');
panel.classList.toggle('collapsed');
});

popup.addEventListener('input',()=>{
validateFilters(popup);
toggleApplyButton(popup);
});

popup.querySelector('.btn-clear').addEventListener('click',()=>{

popup.querySelectorAll('input').forEach(input=>{
if(input.type==='checkbox'){
input.checked=false;
}else{
input.value='';
}
});

alpha.local.update('appliedFilters',{});
alpha.local.update('filterChips','');

validateFilters(popup);
toggleApplyButton(popup);

 fetchCompletedCases({});
});

popup.querySelector('.btn-apply').addEventListener('click',()=>{

validateFilters(popup);

if(hasValidationErrors(popup))return;

const values=getFilterValues(popup);

alpha.local.update('appliedFilters',values);

alpha.local.update('filterChips',generateFilterChips(values));
 fetchCompletedCases(values);

closePopup();
});

validateFilters(popup);
toggleApplyButton(popup);
}

/* HTML */
function generateFilterHTML(config,applied){

let html='';

config.forEach(filter=>{

const key=filter.key||filter.filter;

html+=`
<div class="filter-panel">

<div class="panel-header">
<span>${filter.label}</span>
<i class="pi pi-chevron-down panel-arrow"></i>
</div>

<div class="panel-body">
`;

if(filter.type==='range'){
html+=`
<div class="row">

<div class="field">
<label>Min Value</label>
<input type="number" min="0" class="custom-input" data-filter="cid" data-type="min" placeholder="0" value="${applied.fromCid||''}"/>
</div>

<div class="field">
<label>Max Value</label>
<input type="number" min="0" class="custom-input" data-filter="cid" data-type="max" placeholder="0" value="${applied.toCid||''}"/>
</div>

</div>
`;
}

if(filter.type==='search'){
html+=`
<div class="field">
<label>${filter.label}</label>
<input type="text" class="custom-input" data-filter="${filter.filter}" value="${applied[filter.filter]||''}"/>
</div>
`;
}

if(filter.type==='date-range'){
html+=`
<div class="row">

<div class="field">
<label>From</label>
<input type="date" class="custom-input" data-filter="submissionDate" data-type="from" value="${applied.fromSubmissionDate||''}"/>
</div>

<div class="field">
<label>To</label>
<input type="date" class="custom-input" data-filter="submissionDate" data-type="to" value="${applied.toSubmissionDate||''}"/>
</div>

</div>
`;
}

if(filter.type==='multi-select'){

const selected=(applied[filter.filter]||[]).map(v=>v.toLowerCase());

filter.options.forEach(opt=>{

const checked=selected.includes(opt.toLowerCase())?'checked':'';

html+=`
<div class="checkbox-item">
<span>${opt}</span>
<input type="checkbox" data-filter="${filter.filter}" value="${opt.toLowerCase()}" ${checked}/>
</div>
`;
});
}

html+=`
<div class="filter-error" data-error="${key}"></div>
</div>
</div>
`;
});

return html;
}

/* VALIDATION */
function validateFilters(root){

const minInput=root.querySelector('[data-filter="cid"][data-type="min"]');
const maxInput=root.querySelector('[data-filter="cid"][data-type="max"]');

const min=Number(minInput?.value);
const max=Number(maxInput?.value);

const cidError=root.querySelector('[data-error="cid"]');

if(minInput?.value&&min<0){

cidError.innerText='Min value cannot be less than 0';
cidError.style.display='block';

}else if(maxInput?.value&&max<0){

cidError.innerText='Max value cannot be less than 0';
cidError.style.display='block';

}else if(minInput?.value&&maxInput?.value&&min>max){

cidError.innerText='Min cannot exceed Max';
cidError.style.display='block';

}else{

cidError.innerText='';
cidError.style.display='none';
}

const fromDateInput=root.querySelector('[data-filter="submissionDate"][data-type="from"]');
const toDateInput=root.querySelector('[data-filter="submissionDate"][data-type="to"]');

const fromDate=fromDateInput?.value;
const toDate=toDateInput?.value;

const dateError=root.querySelector('[data-error="submissionDate"]');

if(fromDate&&toDate&&new Date(toDate)<new Date(fromDate)){

dateError.innerText='To date cannot be earlier than From date';
dateError.style.display='block';

}else{

dateError.innerText='';
dateError.style.display='none';
}

if(fromDate){
toDateInput.min=fromDate;
}else{
toDateInput.removeAttribute('min');
}
}

function hasValidationErrors(root){
return Array.from(root.querySelectorAll('.filter-error')).some(el=>el.style.display==='block');
}

function hasAnyFilterValue(root){

const inputs=root.querySelectorAll('input[data-filter]');

for(let input of inputs){

if(input.type==='checkbox'&&input.checked)return true;

if(input.type!=='checkbox'&&input.value)return true;
}

return false;
}

function toggleApplyButton(root){

const btn=root.querySelector('.btn-apply');
if(!btn)return;

const hasErrors=hasValidationErrors(root);
const hasValues=hasAnyFilterValue(root);

if(hasErrors||!hasValues){

btn.disabled=true;
btn.classList.add('disabled');

}else{

btn.disabled=false;
btn.classList.remove('disabled');
}
}

function getFilterValues(root){

const result={};

root.querySelectorAll('input[data-filter]').forEach(input=>{

const filter=input.dataset.filter;
const type=input.dataset.type;

if(input.type==='checkbox'){

if(input.checked){

if(!result[filter]){
result[filter]=[];
}

result[filter].push(input.value);
}

return;
}

if(!input.value)return;

if(filter==='cid'){

if(type==='min'){
result.fromCid=Number(input.value);
}

if(type==='max'){
result.toCid=Number(input.value);
}

return;
}

if(filter==='submissionDate'){

if(type==='from'){
result.fromSubmissionDate=input.value;
}

if(type==='to'){
result.toSubmissionDate=input.value;
}

return;
}

result[filter]=input.value;
});

return result;
}

function generateFilterChips(applied){

let html='';

Object.keys(applied||{}).forEach(key=>{

const value=applied[key];
if(!value)return;

html+=`
<platform-chip>
<span style="padding:4px 10px;border-radius:999px;background:#eff6ff;border:1px solid #2563eb;font-size:11px">
${key}:${Array.isArray(value)?value.join(', '):value}
</span>
</platform-chip>
`;
});

return html;
}

waitForTrigger();

async function fetchCompletedCases(filterBody){

    try{

        const options={
            url:{
                type:'environment',
                value:{
                    __alpha_env__:'PHI_BACKEND_BASE_URL'
                }
            },
            path:'/cases/completed/fetch',
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                auth_token:{
                    type:'environment',
                    value:{
                        __alpha_env__:'PHI_AUTH_TOKEN'
                    }
                }
            },
            body:{
                filterBody
            },
            parseResponseBody:true
        };

        const httpRes=await ap.http(
            options.url,
            {
                method:options.method,
                headers:options.headers,
                path:options.path,
                body:JSON.stringify(options.body)
            }
        );

        const res=await httpRes.json();

        console.log('API RESPONSE =>',res);

        alpha.local.update(
            'closed_cases',
            res?.casesDetails || []
        );

        alpha.local.update(
            'totalCount',
            Number(
                res?.totalCount?.[0]?.total_count
            ) || 0
        );

        const table=ap.$(
            '2077cc64-eded-48da-bb87-27360331d005'
        );

        table.pageNumber=1;

        table.rows=5;

        window.dispatchEvent(
            new CustomEvent(
                'alpha_element:connected_callback',
                {
                    detail:{
                        element:table
                    }
                }
            )
        );

    }catch(err){

         ap.toast.showToast({
        status:'error',
        title:'Filter Failed',
        message: 'Failed to fetch filtered records'
    });

        console.error(
            'FILTER API ERROR =>',
            err
        );
    }
}