// panels.jsx — Filters sidebar, Analytics panel, Detail panel
const { useState: useStateP, useEffect: useEffectP } = React;

/* ═══════════════════ FILTERS SIDEBAR ═══════════════════ */
function FiltersSidebar({ filterValues, filters, onFilterChange, onClearFilters, savedSearches, recentSearches, onLoadSearch, onDeleteSearch, onSaveSearch, onClearSaved, onClearRecent, levels, collapsed, onToggleCollapse, mobileMode }) {
  const hasFilters = Object.values(filters).some(v => v && v.length > 0);
  const activeCounts = (filters.ano?.length||0) + (filters.tipo?.length||0) + (filters.sigla?.length||0) + (filters.situacao?.length||0);

  const fsS = {
    wrap: mobileMode ? { width:'100%', height:'100%', background:'var(--bg-1)', display:'flex', flexDirection:'column', overflow:'hidden' } : { width: collapsed ? 36 : 'var(--sidebar-w)', minWidth: collapsed ? 36 : 'var(--sidebar-w)', height:'100%', borderRight:'1px solid var(--border-1)', background:'var(--bg-1)', display:'flex', flexDirection:'column', overflow:'hidden', transition:'width var(--tr-med), min-width var(--tr-med)' },
    collapseBtn: { padding:'var(--sp-3) var(--sp-3)', display:'flex', alignItems:'center', justifyContent: collapsed ? 'center' : 'space-between', borderBottom:'1px solid var(--border-1)', cursor:'pointer', color:'var(--text-2)', background:'var(--bg-2)' },
    collapsedRail: { flex:1, display:'flex', flexDirection:'column', alignItems:'center', paddingTop:'var(--sp-3)', gap:'var(--sp-4)', cursor:'pointer' },
    collapsedIcon: { color:'var(--text-3)', display:'flex', flexDirection:'column', alignItems:'center', gap:3, padding:'var(--sp-1)' },
    collapsedBadge: { fontSize:'0.65rem', fontFamily:'var(--font-mono)', background:'var(--accent-subtle)', color:'var(--accent-text)', padding:'0 4px', borderRadius:'var(--radius-sm)', fontWeight:600 },
    section: { padding:'var(--sp-4) var(--sp-4)' },
    sectionTitle: { fontSize:'0.846rem', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--text-3)', marginBottom:'var(--sp-3)', display:'flex', alignItems:'center', justifyContent:'space-between' },
    divider: { height:1, background:'var(--border-1)', margin:'0' },
    scrollArea: { flex:1, overflowY:'auto', overflowX:'hidden' },
    clearBtn: { fontSize:'0.846rem', fontWeight:500, color:'var(--accent-text)', cursor:'pointer', textTransform:'none', letterSpacing:0 },
    searchItem: { display:'flex', alignItems:'center', gap:'var(--sp-2)', padding:'6px var(--sp-2)', cursor:'pointer', borderRadius:'var(--radius-sm)', fontSize:'0.923rem', color:'var(--text-1)' },
    searchItemTerms: { display:'flex', gap:3, flex:1, overflow:'hidden' },
    searchChip: { fontSize:'0.77rem', padding:'1px 5px', background:'var(--bg-3)', borderRadius:'var(--radius-sm)', whiteSpace:'nowrap', color:'var(--text-2)' },
    emptyMsg: { fontSize:'0.923rem', color:'var(--text-3)', padding:'var(--sp-2)' }
  };

  if (collapsed && !mobileMode) {
    return (
      <div style={fsS.wrap}>
        <div style={fsS.collapseBtn} onClick={onToggleCollapse} title="Expandir sidebar">
          <IcoChevRight size={11}/>
        </div>
        <div style={fsS.collapsedRail} onClick={onToggleCollapse}>
          <div style={fsS.collapsedIcon} title="Filtros">
            <IcoFilter size={12}/>
            {activeCounts > 0 && <span style={fsS.collapsedBadge}>{activeCounts}</span>}
          </div>
          {savedSearches && savedSearches.length > 0 && (
            <div style={fsS.collapsedIcon} title="Buscas salvas">
              <IcoSave size={12}/>
              <span style={fsS.collapsedBadge}>{savedSearches.length}</span>
            </div>
          )}
          {recentSearches && recentSearches.length > 0 && (
            <div style={fsS.collapsedIcon} title="Recentes">
              <IcoHistory size={12}/>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div style={fsS.wrap}>
      {!mobileMode && (
        <div style={fsS.collapseBtn} onClick={onToggleCollapse} title="Recolher sidebar">
          <span style={{fontSize:'0.846rem', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--text-3)'}}>Painel lateral</span>
          <IcoChevRight size={13} style={{transform:'rotate(180deg)'}}/>
        </div>
      )}
      <div style={fsS.scrollArea}>
        {/* Structured filters */}
        <div style={fsS.section}>
          <div style={fsS.sectionTitle}>
            <span>Filtros</span>
            {hasFilters && <span style={fsS.clearBtn} onClick={onClearFilters}>Limpar</span>}
          </div>
          <SearchableSelect label="Ano" options={filterValues.anos || []} selected={filters.ano || []}
            onChange={v => onFilterChange({...filters, ano: v})} mono/>
          <SearchableSelect label="Tipo" options={filterValues.tipos || []} selected={filters.tipo || []}
            onChange={v => onFilterChange({...filters, tipo: v})}/>
          <SearchableSelect label="Sigla" options={filterValues.siglas || []} selected={filters.sigla || []}
            onChange={v => onFilterChange({...filters, sigla: v})} mono/>
          <SearchableSelect label="Situação" options={filterValues.situacoes || []} selected={filters.situacao || []}
            onChange={v => onFilterChange({...filters, situacao: v})}/>
        </div>

        <div style={fsS.divider}/>

        {/* Saved searches */}
        <div style={fsS.section}>
          <div style={fsS.sectionTitle}>
            <span style={{display:'flex',alignItems:'center',gap:4}}><IcoSave size={10}/> Buscas salvas</span>
            <span style={{display:'flex',gap:'var(--sp-2)'}}>
              {levels.length > 0 && <span style={fsS.clearBtn} onClick={onSaveSearch}>Salvar atual</span>}
              {savedSearches && savedSearches.length > 0 && <span style={fsS.clearBtn} onClick={onClearSaved}>Limpar</span>}
            </span>
          </div>
          {(!savedSearches || savedSearches.length === 0) && (
            <div style={fsS.emptyMsg}>Nenhuma busca salva.</div>
          )}
          {savedSearches && savedSearches.map((s, i) => (
            <div key={i} style={fsS.searchItem}
              onClick={() => onLoadSearch(s)}
              onMouseEnter={e => e.currentTarget.style.background='var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background='transparent'}>
              <div style={fsS.searchItemTerms}>
                {s.terms.map((t, j) => <span key={j} style={fsS.searchChip}>{t}</span>)}
              </div>
              <span style={{color:'var(--text-3)', cursor:'pointer', display:'flex'}} title="Remover"
                onClick={e => { e.stopPropagation(); onDeleteSearch(i); }}>
                <IcoClose size={10}/>
              </span>
            </div>
          ))}
        </div>

        <div style={fsS.divider}/>

        {/* Recent history */}
        <div style={fsS.section}>
          <div style={fsS.sectionTitle}>
            <span style={{display:'flex',alignItems:'center',gap:4}}><IcoHistory size={10}/> Recentes</span>
            {recentSearches && recentSearches.length > 0 && <span style={fsS.clearBtn} onClick={onClearRecent}>Limpar</span>}
          </div>
          {(!recentSearches || recentSearches.length === 0) && (
            <div style={fsS.emptyMsg}>Nenhuma busca recente.</div>
          )}
          {recentSearches && recentSearches.slice(0, 8).map((s, i) => (
            <div key={i} style={fsS.searchItem}
              onClick={() => onLoadSearch(s)}
              onMouseEnter={e => e.currentTarget.style.background='var(--bg-hover)'}
              onMouseLeave={e => e.currentTarget.style.background='transparent'}>
              <div style={fsS.searchItemTerms}>
                {s.terms.map((t, j) => <span key={j} style={fsS.searchChip}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ═══════════════════ ANALYTICS PANEL ═══════════════════ */
function AnalyticsPanel({ stats, loading, placement, onClose }) {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1024;
  const charts = [
    { key:'tipo', label:'Por tipo', data: stats?.porTipo, color:'--data-1' },
    { key:'situacao', label:'Por situação', data: stats?.porSituacao, color:'--data-2' },
    { key:'ano', label:'Por ano', data: stats?.porAno, color:'--data-1' },
    { key:'despacho', label:'Por despacho', data: stats?.porDespacho, color:'--data-4' }
  ];

  const isPage = placement === 'page';

  const anS = {
    wrap: isPage ? {
      flex:1, background:'var(--bg-1)', display:'flex', flexDirection:'column', overflow:'hidden'
    } : {
      background:'var(--bg-1)', borderBottom:'1px solid var(--border-1)', overflow:'hidden'
    },
    header: { display:'flex', alignItems:'center', justifyContent:'space-between', padding: isDesktop ? 'var(--sp-4) var(--sp-6)' : 'var(--sp-3) var(--sp-4)', borderBottom:'1px solid var(--border-1)' },
    body: { padding: isPage ? (isDesktop ? 'var(--sp-6) var(--sp-8)' : 'var(--sp-5) var(--sp-6)') : 'var(--sp-3)', overflowY:'auto', flex:1 },
    grid: { display:'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1fr)', gap: isPage ? (isDesktop ? 'var(--sp-10)' : 'var(--sp-6)') : 'var(--sp-4)', maxWidth: 'none', margin: 0 }
  };

  return (
    <div style={anS.wrap}>
      <div style={anS.header}>
        <span style={{fontSize: isPage ? (isDesktop ? '1.23rem' : '0.923rem') : '0.77rem', fontWeight:700, color:'var(--text-0)', letterSpacing:'-0.01em'}}>
          {isPage ? 'Análise das proposições' : 'Distribuições do nível atual'}
        </span>
        <span style={{cursor:'pointer', color:'var(--text-2)', display:'flex', alignItems:'center', gap:6, fontSize: isDesktop ? '1rem' : '0.846rem'}}
          onClick={onClose} title="Voltar para tabela">
          {isPage ? <><IcoClose size={isDesktop ? 13 : 11}/> Voltar para tabela</> : <IcoClose size={12}/>}
        </span>
      </div>
      <div style={anS.body}>
        {loading ? (
          <div style={{padding:'var(--sp-4)'}}>
            <div className="skeleton" style={{width:'100%', height:120, marginBottom:'var(--sp-4)'}}/>
            <div className="skeleton" style={{width:'100%', height:120}}/>
          </div>
        ) : (!stats || stats.total === 0) ? (
          <EmptyState
            message="Sem dados para analisar"
            sub="A busca atual não retornou nenhuma proposição. Refine os termos da cascata ou ajuste os filtros pra gerar gráficos."
          />
        ) : (
          <div style={anS.grid}>
            {charts.map(c => (
              <div key={c.key}>
                <div style={{fontSize: isPage ? (isDesktop ? '1rem' : '0.846rem') : '0.77rem', fontWeight:600, color:'var(--text-2)', marginBottom:'var(--sp-4)', textTransform: isPage ? 'uppercase' : 'none', letterSpacing: isPage ? '0.04em' : 0}}>{c.label}</div>
                {c.key === 'ano' ? <TimelineChart data={c.data} height={isPage ? (isDesktop ? 280 : 160) : 90}/> : <HBarChart data={c.data} maxItems={isPage ? (isDesktop ? 12 : 10) : 6} colorVar={c.color}/>}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* ═══════════════════ DETAIL PANEL ═══════════════════ */
function DetailPanel({ proposition, onClose, isMobile }) {
  const p = proposition;
  if (!p) return null;

  const dpS = {
    wrap: isMobile ? {
      position:'fixed', inset:0, zIndex:92, background:'var(--bg-1)',
      display:'flex', flexDirection:'column', overflow:'hidden',
      animation: 'sheetIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1)'
    } : {
      width:'var(--detail-w)', minWidth:'var(--detail-w)', height:'100%',
      borderLeft:'1px solid var(--border-1)', background:'var(--bg-1)',
      display:'flex', flexDirection:'column', overflow:'hidden'
    },
    header: {
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'var(--sp-3) var(--sp-4)', borderBottom:'1px solid var(--border-1)',
      background:'var(--bg-2)'
    },
    headerTitle: { fontWeight:600, fontSize:'1.077rem', display:'flex', alignItems:'center', gap:'var(--sp-2)' },
    body: { flex:1, overflowY:'auto', padding:'var(--sp-4)' },
    field: { marginBottom:'var(--sp-4)' },
    fieldLabel: { fontSize:'0.7rem', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--text-3)', marginBottom:'var(--sp-1)' },
    fieldValue: { fontSize:'0.923rem', color:'var(--text-0)', lineHeight:1.6 },
    fieldValueMono: { fontSize:'0.846rem', color:'var(--text-1)', fontFamily:'var(--font-mono)' },
    metaGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--sp-3)' },
    linkBtn: { display:'inline-flex', alignItems:'center', gap:4, padding:'4px 8px', background:'var(--bg-2)', border:'1px solid var(--border-0)', borderRadius:'var(--radius)', fontSize:'0.846rem', color:'var(--accent-text)', cursor:'pointer', textDecoration:'none' }
  };

  return (
    <div style={dpS.wrap}>
      <div style={dpS.header}>
        <div style={dpS.headerTitle}>
          <span className="badge badge-accent">{p.sigla}</span>
          <span>{p.sigla} {p.numero}/{p.ano}</span>
        </div>
        <span style={{cursor:'pointer', color:'var(--text-2)', display:'flex'}} onClick={onClose}><IcoClose size={14}/></span>
      </div>
      <div style={dpS.body}>
        {/* Ementa */}
        <div style={dpS.field}>
          <div style={dpS.fieldLabel}>Ementa</div>
          <div style={dpS.fieldValue}>{p.ementa}</div>
        </div>

        {/* Ementa detalhada */}
        {p.ementa_detalhada && p.ementa_detalhada !== p.ementa && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Ementa detalhada</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem', color:'var(--text-1)'}}>{p.ementa_detalhada}</div>
          </div>
        )}

        {/* Meta grid */}
        <div style={dpS.metaGrid}>
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>ID</div>
            <div style={dpS.fieldValueMono}>{p.id}</div>
          </div>
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Tipo</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem'}}>{p.tipo}</div>
          </div>
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Ano</div>
            <div style={dpS.fieldValueMono}>{p.ano}</div>
          </div>
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Data</div>
            <div style={dpS.fieldValueMono}>{p.data}</div>
          </div>
        </div>

        {/* Status */}
        {p.situacao && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Situação</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem'}}>{p.situacao}</div>
          </div>
        )}
        {p.regime && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Regime</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem'}}>{p.regime}</div>
          </div>
        )}
        {p.tramitacao && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Tramitação</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem'}}>{p.tramitacao}</div>
          </div>
        )}
        {p.despacho && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Despacho</div>
            <div style={{...dpS.fieldValue, fontSize:'0.846rem', lineHeight:1.5}}>{p.despacho}</div>
          </div>
        )}
        {p.palavra_chave && (
          <div style={dpS.field}>
            <div style={dpS.fieldLabel}>Palavras-chave</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:4}}>
              {(p.palavra_chave||'').split(',').map((kw, i) => (
                <span key={i} className="badge badge-default" style={{fontFamily:'var(--font-sans)'}}>{kw.trim()}</span>
              ))}
            </div>
          </div>
        )}

        {/* Links */}
        <div style={dpS.field}>
          <div style={dpS.fieldLabel}>Links</div>
          <div style={{display:'flex', gap:'var(--sp-2)', flexWrap:'wrap'}}>
            {p.url && <a href={p.url} target="_blank" rel="noopener" style={dpS.linkBtn}><IcoLink size={11}/> Ficha oficial</a>}
            {p.url_teor && <a href={p.url_teor} target="_blank" rel="noopener" style={dpS.linkBtn}><IcoNote size={11}/> Texto completo</a>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FiltersSidebar, AnalyticsPanel, DetailPanel });