// SearchView.jsx — محرك البحث القانوني (Frontend-only, ready for backend)

/* =========================================================
   STATIC CATALOGS
   ========================================================= */
const SEARCH_TIERS = [
  { v: 1, label: 'الأنظمة الأساسية', desc: 'الأقوى قانونياً', color: '#2d7a4f' },
  { v: 2, label: 'مراسيم/قرارات وزارية', desc: 'تنفيذية عليا', color: '#a84f32' },
  { v: 3, label: 'قرارات هيئات تنظيمية', desc: 'متخصصة', color: '#1e5d9c' },
  { v: 4, label: 'وثائق مرجعية', desc: 'إرشادية', color: '#5e5d59' },
  { v: 5, label: 'اتفاقيات', desc: 'دولية وثنائية', color: '#87867f' },
];

const SEARCH_AREAS = [
  ['تجاري', 1033], ['عمل', 421], ['مدني', 856], ['جنائي', 234], ['أحوال شخصية', 312],
  ['عقاري', 567], ['ضرائب', 189], ['بنوك ومالية', 245], ['تأمين', 134],
  ['ملكية فكرية', 98], ['تحكيم', 76], ['إداري', 412], ['دستوري', 145],
  ['طبي', 89], ['بيئي', 67], ['طاقة', 123], ['اتصالات', 156], ['نقل', 98],
  ['زراعة', 76], ['تعليم', 145], ['ثقافي', 67], ['رياضي', 45], ['بلدي', 234],
  ['تأشيرات', 178], ['حماية مستهلك', 134], ['أمن سيبراني', 89],
  ['بيانات', 123], ['أوقاف', 67], ['زكاة', 45], ['تخطيط مدن', 78],
  ['اقتصاد رقمي', 156], ['استثمار', 234], ['شركات', 412],
];

const SEARCH_INSTRUMENTS = [
  ['نظام', 1245], ['مرسوم ملكي', 567], ['قرار وزاري', 1834], ['لائحة تنفيذية', 892],
  ['تعميم', 423], ['أمر سامي', 234], ['اتفاقية', 167], ['وثيقة مرجعية', 312],
];

const SEARCH_ISSUERS = [
  'وزارة العدل', 'وزارة الموارد البشرية', 'هيئة السوق المالية', 'البنك المركزي',
  'الهيئة العامة للزكاة والضريبة', 'وزارة التجارة', 'وزارة الصحة', 'وزارة الاستثمار',
  'وزارة الداخلية', 'وزارة الخارجية', 'هيئة الاتصالات', 'هيئة المحامين',
];

const SEARCH_SUGGESTIONS = ['نظام العمل', 'الفصل التعسفي', 'الشركات', 'الأحوال الشخصية', 'التنفيذ', 'حماية البيانات', 'العمل المرن', 'التأشيرات'];

const SEARCH_TOP = ['نظام العمل 2026', 'الفصل التعسفي', 'مكافأة نهاية الخدمة', 'نقل الكفالة', 'الإيجار التجاري', 'الإفلاس'];

const SEARCH_DOCS = [
  {
    doc_id: 'labor-law-1426',
    title_ar: 'نظام العمل',
    full_text: `## الباب الأول: التعاريف والأحكام العامة

### الفصل الأول: التعاريف

#### المادة الأولى
يسمى هذا النظام "نظام العمل".

#### المادة الثانية
يقصد بالألفاظ والعبارات الآتية - أينما وردت في هذا النظام - المعاني المبينة أمامها.

**الوزارة:** وزارة الموارد البشرية والتنمية الاجتماعية.
**صاحب العمل:** كل شخص طبيعي أو اعتباري يستخدم عاملاً أو أكثر مقابل أجر.
**العامل:** كل شخص طبيعي يعمل لمصلحة صاحب عمل وتحت إدارته أو إشرافه مقابل أجر.

## الباب الثاني: تنظيم عمليات التوظيف

#### المادة الرابعة والسبعون
ينتهي عقد العمل في الحالات الآتية: إذا اتفق الطرفان على إنهائه على أن تكون موافقة العامل كتابة. إذا انتهت المدة المحددة في العقد ما لم يكن العقد قد جُدِّد صراحة.

#### المادة الثمانون
لا يستحق العامل مكافأة نهاية الخدمة في الحالات التالية: إذا ترك العمل باختياره قبل إتمام سنتين في خدمة صاحب العمل.`,
    toc: [
      { level: 2, title: 'الباب الأول: التعاريف والأحكام العامة', id: 'bab-1' },
      { level: 4, title: 'المادة الأولى', id: 'mada-1' },
      { level: 4, title: 'المادة الثانية', id: 'mada-2' },
      { level: 2, title: 'الباب الثاني: تنظيم التوظيف', id: 'bab-2' },
      { level: 4, title: 'المادة الرابعة والسبعون', id: 'mada-74' },
      { level: 4, title: 'المادة الثمانون', id: 'mada-80' },
    ],
    tier: 1, role: 'موضوعي', legal_area: 'عمل', instrument: 'نظام', instrument_number: 'م/51',
    hijri_year: 1426, issuer_ar: 'وزارة الموارد البشرية', is_repealed: false, text_source: 'full',
    pdf_original_url: '#', uqn_url: '#',
    relations: { versions: 3, amends: 0, amended_by: 12, implements: 0, implemented_by: 4, related: 18, cited_by: 247, cites: 6 },
    summary: 'ينظم علاقات العمل بين أصحاب العمل والعمال، ويحدد حقوق الطرفين والتزاماتهم، ويغطي شروط العقد والأجور والإجازات وإنهاء الخدمة وحماية العاملين.',
  },
  {
    doc_id: 'companies-law-1437',
    title_ar: 'نظام الشركات',
    full_text: `## الباب الأول: أحكام عامة\n\n#### المادة الأولى\nيسمى هذا النظام "نظام الشركات".\n\n#### المادة الثانية\nالشركة عقد يلتزم بمقتضاه شخصان أو أكثر بأن يساهم كل منهم في مشروع يستهدف الربح.\n\n## الباب الثاني: أنواع الشركات\n\n#### المادة الثالثة\nأنواع الشركات: شركة تضامن، شركة توصية بسيطة، شركة محاصة، شركة مساهمة، شركة توصية بالأسهم، شركة ذات مسؤولية محدودة.`,
    toc: [
      { level: 2, title: 'الباب الأول: أحكام عامة', id: 'bab-1' },
      { level: 4, title: 'المادة الأولى', id: 'mada-1' },
      { level: 2, title: 'الباب الثاني: أنواع الشركات', id: 'bab-2' },
    ],
    tier: 1, role: 'موضوعي', legal_area: 'تجاري', instrument: 'نظام', instrument_number: 'م/3',
    hijri_year: 1437, issuer_ar: 'وزارة التجارة', is_repealed: false, text_source: 'full',
    pdf_original_url: '#', uqn_url: '#',
    relations: { versions: 2, amends: 0, amended_by: 8, implements: 0, implemented_by: 6, related: 24, cited_by: 412, cites: 4 },
    summary: 'يحدد القواعد القانونية لتأسيس وإدارة وتصفية الشركات في المملكة، ويغطي 6 أنواع رئيسية من الشركات بكل خصائصها وأحكامها.',
  },
  {
    doc_id: 'data-protection-1443',
    title_ar: 'نظام حماية البيانات الشخصية',
    full_text: `## الباب الأول: أحكام عامة\n\n#### المادة الأولى\nيهدف هذا النظام إلى حماية البيانات الشخصية وضمان معالجتها بأسلوب آمن ومسؤول.\n\n#### المادة الثانية\nيطبق هذا النظام على كل جهة تعالج بيانات شخصية لأشخاص مقيمين في المملكة العربية السعودية.`,
    toc: [{ level: 2, title: 'أحكام عامة', id: 'bab-1' }, { level: 4, title: 'المادة الأولى', id: 'mada-1' }],
    tier: 1, role: 'موضوعي', legal_area: 'بيانات', instrument: 'نظام', instrument_number: 'م/19',
    hijri_year: 1443, issuer_ar: 'هيئة البيانات والذكاء الاصطناعي', is_repealed: false, text_source: 'full',
    pdf_original_url: '#',
    relations: { versions: 1, amends: 0, amended_by: 2, implements: 0, implemented_by: 3, related: 14, cited_by: 89, cites: 8 },
    summary: 'ينظم جمع ومعالجة البيانات الشخصية، ويحدد حقوق أصحاب البيانات والتزامات المتحكمين والمعالجين، مع عقوبات للمخالفات.',
  },
  {
    doc_id: 'arbitration-1433',
    title_ar: 'نظام التحكيم',
    full_text: `## الباب الأول: أحكام عامة\n\n#### المادة الأولى\nيطبق هذا النظام على كل تحكيم، أياً كانت طبيعة العلاقة القانونية التي يدور حولها النزاع.`,
    toc: [{ level: 4, title: 'المادة الأولى', id: 'mada-1' }],
    tier: 1, role: 'إجرائي', legal_area: 'تحكيم', instrument: 'نظام', instrument_number: 'م/34',
    hijri_year: 1433, issuer_ar: 'وزارة العدل', is_repealed: false, text_source: 'full',
    relations: { versions: 1, amends: 0, amended_by: 3, implements: 0, implemented_by: 2, related: 12, cited_by: 156, cites: 4 },
    summary: 'ينظم التحكيم التجاري والمدني داخل المملكة، ويحدد إجراءات التحكيم وسلطات المحكمين وتنفيذ أحكام التحكيم.',
  },
  {
    doc_id: 'rent-decree-1442',
    title_ar: 'نظام الإيجار التجاري',
    full_text: `## أحكام عامة\n\n#### المادة الأولى\nينظم هذا النظام العلاقة بين المؤجر والمستأجر للعقارات التجارية في المملكة.`,
    toc: [{ level: 4, title: 'المادة الأولى', id: 'mada-1' }],
    tier: 2, role: 'موضوعي', legal_area: 'عقاري', instrument: 'مرسوم ملكي', instrument_number: 'م/76',
    hijri_year: 1442, issuer_ar: 'مجلس الوزراء', is_repealed: false, text_source: 'full',
    relations: { versions: 1, amends: 0, amended_by: 1, implements: 0, implemented_by: 1, related: 8, cited_by: 67, cites: 3 },
    summary: 'ينظم العلاقة الإيجارية للعقارات التجارية، ويحدد حقوق المؤجر والمستأجر وطرق إنهاء العقد ومعالجة النزاعات.',
  },
  {
    doc_id: 'consumer-protection-1442',
    title_ar: 'نظام حماية المستهلك',
    full_text: `## أحكام عامة\n\n#### المادة الأولى\nيهدف هذا النظام إلى حماية حقوق المستهلك وضمان جودة المنتجات والخدمات.`,
    toc: [{ level: 4, title: 'المادة الأولى', id: 'mada-1' }],
    tier: 2, role: 'موضوعي', legal_area: 'حماية مستهلك', instrument: 'مرسوم ملكي', instrument_number: 'م/93',
    hijri_year: 1442, issuer_ar: 'وزارة التجارة', is_repealed: false, text_source: 'full',
    relations: { versions: 1, amends: 0, amended_by: 4, implements: 0, implemented_by: 2, related: 10, cited_by: 78, cites: 5 },
    summary: 'يحمي حقوق المستهلكين في المعاملات التجارية، ويلزم التجار بمعايير الإفصاح والجودة، ويحدد طرق التعويض عند المخالفة.',
  },
];

/* =========================================================
   HELPERS
   ========================================================= */
function searchTierBadgeStyle(tier) {
  const map = {
    1: { bg: 'rgba(45,122,79,0.12)', color: '#2d7a4f' },
    2: { bg: '#f2e5df', color: '#a84f32' },
    3: { bg: 'rgba(30,93,156,0.12)', color: '#1e5d9c' },
    4: { bg: '#e8e6dc', color: '#5e5d59' },
    5: { bg: '#e8e6dc', color: '#87867f' },
  };
  return map[tier] || map[4];
}

function searchStatusInfo(d) {
  if (d.is_repealed) return { label: 'ملغى', bg: '#f7e5e5', color: '#b53333' };
  if ((d.relations?.amended_by || 0) > 0) return { label: 'مُعدَّل', bg: '#fef3e2', color: '#a05e1a' };
  return { label: 'ساري', bg: '#e0f2ea', color: '#2d7a4f' };
}

function highlightText(text, q) {
  if (!q || !text) return text;
  const re = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
  return text.replace(re, '<mark style="background:rgba(201,100,66,0.18);color:#a84f32;font-style:normal;padding:0 2px;border-radius:3px;">$1</mark>');
}

function renderMarkdownToHtml(md) {
  if (!md) return '';
  let html = md;
  html = html.replace(/^#### (.+)$/gm, '<h4 style="font-size:14px;font-weight:600;margin:14px 0 8px;color:#141413;padding:8px 12px;background:#e8e6dc;border-radius:6px;border-right:3px solid #c96442;">$1</h4>');
  html = html.replace(/^### (.+)$/gm, '<h3 style="font-size:16px;font-weight:600;margin:18px 0 10px;color:#141413;">$1</h3>');
  html = html.replace(/^## (.+)$/gm, '<h2 style="font-size:18px;font-weight:700;margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(20,20,19,0.12);color:#a84f32;">$1</h2>');
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  html = html.split('\n\n').map(p => {
    const t = p.trim();
    if (!t) return '';
    if (t.startsWith('<')) return t;
    return `<p style="margin:0 0 12px;color:#4d4c48;line-height:1.85;">${t}</p>`;
  }).join('\n');
  return html;
}

/* =========================================================
   FILTER SIDEBAR
   ========================================================= */
function SearchFilterSidebar({ filters, onChange, facets }) {
  const [issuerSearch, setIssuerSearch] = React.useState('');
  const [showAllAreas, setShowAllAreas] = React.useState(false);

  const update = (patch) => onChange({ ...filters, ...patch });
  const toggleSet = (key, val) => {
    const next = new Set(filters[key]);
    if (next.has(val)) next.delete(val); else next.add(val);
    update({ [key]: next });
  };

  const filteredIssuers = SEARCH_ISSUERS.filter(i => i.toLowerCase().includes(issuerSearch.toLowerCase())).slice(0, 8);
  const areaList = showAllAreas ? SEARCH_AREAS : SEARCH_AREAS.slice(0, 12);

  const sectionTitle = { fontSize: 11, fontWeight: 700, color: sanadColors.textMuted, letterSpacing: '0.04em', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 5 };
  const optionStyle = { display: 'flex', alignItems: 'center', gap: 7, padding: '4px 0', cursor: 'pointer', fontSize: 12.5, color: sanadColors.textSecondary };
  const countStyle = { marginRight: 'auto', fontSize: 11, color: sanadColors.textMuted };

  return (
    <aside style={{
      background: sanadColors.bgElevated, border: `1px solid ${sanadColors.border}`,
      borderRadius: 12, padding: 16, position: 'sticky', top: 16,
      maxHeight: 'calc(100vh - 100px)', overflowY: 'auto',
    }}>
      {/* Tier */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>📊 المستوى القانوني <span title="مرتبة حسب القوة القانونية" style={{ width:13, height:13, borderRadius:'50%', background: sanadColors.bgSubtle, fontSize:9, display:'inline-flex', alignItems:'center', justifyContent:'center', cursor:'help' }}>ⓘ</span></div>
        {SEARCH_TIERS.map(t => (
          <label key={t.v} style={{ display:'flex', alignItems:'flex-start', gap:7, padding:'6px 0', cursor:'pointer' }}>
            <input type="radio" name="tier" checked={filters.tier === t.v} onChange={() => update({ tier: t.v })} style={{ accentColor: sanadColors.brand, marginTop:2 }}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:12.5, fontWeight:500, color: sanadColors.textPrimary, display:'flex', alignItems:'center', gap:5 }}>
                <span style={{ width:8, height:8, borderRadius:'50%', background: t.color }}/>
                {t.label}
              </div>
              <div style={{ fontSize:10, color: sanadColors.textMuted, marginTop:1 }}>{t.desc}</div>
            </div>
          </label>
        ))}
      </div>

      {/* Areas */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>📂 المجال القانوني</div>
        {areaList.map(([n, c]) => (
          <label key={n} style={optionStyle}>
            <input type="checkbox" checked={filters.areas.has(n)} onChange={() => toggleSet('areas', n)} style={{ accentColor: sanadColors.brand }}/>
            <span>{n}</span>
            <span style={countStyle}>{(facets.legal_area||{})[n] ?? c}</span>
          </label>
        ))}
        <button onClick={() => setShowAllAreas(!showAllAreas)} style={{ background:'transparent', border:'none', cursor:'pointer', color: sanadColors.brand, fontSize:11, padding:'4px 0', marginTop:4, fontFamily: sanadFonts.arabic }}>
          {showAllAreas ? 'عرض أقل' : 'عرض الكل (33)'}
        </button>
      </div>

      {/* Instruments */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>📄 نوع الوثيقة</div>
        {SEARCH_INSTRUMENTS.map(([n, c]) => (
          <label key={n} style={optionStyle}>
            <input type="checkbox" checked={filters.instruments.has(n)} onChange={() => toggleSet('instruments', n)} style={{ accentColor: sanadColors.brand }}/>
            <span>{n}</span>
            <span style={countStyle}>{c}</span>
          </label>
        ))}
      </div>

      {/* Issuer */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>🏛️ الجهة المُصدِرة</div>
        <input value={issuerSearch} onChange={e => setIssuerSearch(e.target.value)} placeholder="ابحث في الجهات…" style={{
          width:'100%', padding:'6px 10px', border:`1px solid ${sanadColors.border}`, borderRadius:6,
          background: sanadColors.bg, fontSize:11, marginBottom:8, outline:'none', fontFamily: sanadFonts.arabic, direction:'rtl', boxSizing:'border-box',
        }}/>
        {filteredIssuers.map(i => (
          <label key={i} style={optionStyle}>
            <input type="radio" name="issuer" checked={filters.issuer === i} onChange={() => update({ issuer: i })} style={{ accentColor: sanadColors.brand }}/>
            <span>{i}</span>
          </label>
        ))}
      </div>

      {/* Year range */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>📅 السنة الهجرية</div>
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          <input type="number" placeholder="من" min={1380} max={1446} value={filters.yearFrom||''} onChange={e => update({ yearFrom: e.target.value ? +e.target.value : null })} style={{ width:65, padding:5, border:`1px solid ${sanadColors.border}`, borderRadius:5, fontSize:11, fontFamily:sanadFonts.arabic, outline:'none' }}/>
          <span style={{ color: sanadColors.textMuted, fontSize:10 }}>إلى</span>
          <input type="number" placeholder="إلى" min={1380} max={1446} value={filters.yearTo||''} onChange={e => update({ yearTo: e.target.value ? +e.target.value : null })} style={{ width:65, padding:5, border:`1px solid ${sanadColors.border}`, borderRadius:5, fontSize:11, fontFamily:sanadFonts.arabic, outline:'none' }}/>
        </div>
      </div>

      {/* Status */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>✅ الحالة</div>
        {[['all','الكل'],['active','ساري'],['repealed','ملغى']].map(([v,l]) => (
          <label key={v} style={optionStyle}>
            <input type="radio" name="status" checked={filters.status === v} onChange={() => update({ status: v })} style={{ accentColor: sanadColors.brand }}/>
            <span>{l}</span>
          </label>
        ))}
      </div>

      {/* Text */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>📝 النص</div>
        <label style={optionStyle}><input type="checkbox" checked={filters.fullText} onChange={e => update({ fullText: e.target.checked })} style={{ accentColor: sanadColors.brand }}/><span>نص كامل فقط</span></label>
        <label style={optionStyle}><input type="checkbox" checked={filters.hasUqn} onChange={e => update({ hasUqn: e.target.checked })} style={{ accentColor: sanadColors.brand }}/><span>به رابط UQN</span></label>
        <label style={optionStyle}><input type="checkbox" checked={filters.hasEn} onChange={e => update({ hasEn: e.target.checked })} style={{ accentColor: sanadColors.brand }}/><span>ترجمة إنجليزية</span></label>
      </div>

      {/* Relations */}
      <div style={{ marginBottom: 18 }}>
        <div style={sectionTitle}>🔗 الترابط</div>
        {[['amendments','به تعديلات'],['regulations','به لوائح'],['precedents','به سوابق']].map(([v,l]) => (
          <label key={v} style={optionStyle}>
            <input type="checkbox" checked={filters.relations.has(v)} onChange={() => toggleSet('relations', v)} style={{ accentColor: sanadColors.brand }}/>
            <span>{l}</span>
          </label>
        ))}
      </div>

      {/* Source */}
      <div>
        <div style={sectionTitle}>🌐 المصدر</div>
        {[['all','الكل'],['UQN','UQN'],['BOE','BOE'],['NCAR','NCAR'],['قانونية','قانونية']].map(([v,l]) => (
          <label key={v} style={optionStyle}>
            <input type="radio" name="source" checked={filters.source === v} onChange={() => update({ source: v })} style={{ accentColor: sanadColors.brand }}/>
            <span>{l}</span>
          </label>
        ))}
      </div>
    </aside>
  );
}

/* =========================================================
   ACTIVE FILTERS BAR
   ========================================================= */
function SearchActiveFilters({ filters, onChange }) {
  const update = (patch) => onChange({ ...filters, ...patch });
  const removeSet = (key, val) => {
    const next = new Set(filters[key]);
    next.delete(val);
    update({ [key]: next });
  };

  const chips = [];
  if (filters.tier) chips.push({ label: SEARCH_TIERS.find(t=>t.v===filters.tier).label, clear: () => update({ tier: null }) });
  filters.areas.forEach(a => chips.push({ label: a, clear: () => removeSet('areas', a) }));
  filters.instruments.forEach(i => chips.push({ label: i, clear: () => removeSet('instruments', i) }));
  if (filters.issuer) chips.push({ label: filters.issuer, clear: () => update({ issuer: '' }) });
  if (filters.yearFrom || filters.yearTo) chips.push({ label: `${filters.yearFrom || '...'} - ${filters.yearTo || '...'}هـ`, clear: () => update({ yearFrom: null, yearTo: null }) });
  if (filters.status !== 'all') chips.push({ label: filters.status === 'active' ? 'ساري' : 'ملغى', clear: () => update({ status: 'all' }) });
  if (filters.fullText) chips.push({ label: 'نص كامل', clear: () => update({ fullText: false }) });
  filters.relations.forEach(r => {
    const map = { amendments:'به تعديلات', regulations:'به لوائح', precedents:'به سوابق' };
    chips.push({ label: map[r], clear: () => removeSet('relations', r) });
  });

  if (chips.length === 0) return null;

  return (
    <div style={{ display:'flex', flexWrap:'wrap', gap:5, marginBottom:12, alignItems:'center' }}>
      {chips.map((c, i) => (
        <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:5, background: sanadColors.brandSubtle, color: sanadColors.brand, borderRadius:9999, padding:'2px 4px 2px 10px', fontSize:11 }}>
          {c.label}
          <button onClick={c.clear} style={{ width:16, height:16, border:'none', background:'transparent', color:'inherit', cursor:'pointer', borderRadius:'50%', display:'inline-flex', alignItems:'center', justifyContent:'center', padding:0 }}>
            <svg width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2.4" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </span>
      ))}
      <button onClick={() => onChange({
        tier: null, areas: new Set(), instruments: new Set(), issuer: '',
        yearFrom: null, yearTo: null, status: 'all', fullText: false,
        hasUqn: false, hasEn: false, relations: new Set(), source: 'all',
      })} style={{ background:'transparent', border:'none', cursor:'pointer', color: sanadColors.brand, fontSize:11, padding:'2px 8px', fontFamily: sanadFonts.arabic, fontWeight:500 }}>
        مسح الكل
      </button>
    </div>
  );
}

/* =========================================================
   RESULT CARD
   ========================================================= */
function SearchResultCard({ doc, query, onOpen, onSave }) {
  const tierStyle = searchTierBadgeStyle(doc.tier);
  const status = searchStatusInfo(doc);
  const counters = doc.relations || {};

  return (
    <article onClick={() => onOpen(doc)} style={{
      background: sanadColors.bgElevated, border: `1px solid ${sanadColors.border}`, borderRadius: 12, padding: 16,
      cursor:'pointer', display:'flex', flexDirection:'column', gap:10, transition:'all 160ms',
    }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = sanadColors.brand; e.currentTarget.style.boxShadow = '0 4px 12px rgba(20,20,19,0.06)'; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = sanadColors.border; e.currentTarget.style.boxShadow = 'none'; }}
    >
      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8, flexWrap:'wrap' }}>
        <h3 style={{ flex:'1 1 200px', fontSize:16, fontWeight:600, color: sanadColors.textPrimary, margin:0, lineHeight:1.45 }}
          dangerouslySetInnerHTML={{ __html: highlightText(doc.title_ar, query) }}/>
        <div style={{ display:'inline-flex', gap:5, flexWrap:'wrap' }}>
          <span style={{ fontSize:10, fontWeight:600, padding:'2px 9px', borderRadius:9999, background: tierStyle.bg, color: tierStyle.color, whiteSpace:'nowrap' }}>📊 {SEARCH_TIERS.find(t=>t.v===doc.tier)?.label}</span>
          <span style={{ fontSize:10, fontWeight:600, padding:'2px 9px', borderRadius:9999, background: status.bg, color: status.color, whiteSpace:'nowrap' }}>{status.label}</span>
          {doc.role && <span style={{ fontSize:10, fontWeight:600, padding:'2px 9px', borderRadius:9999, background: sanadColors.bgSubtle, color: sanadColors.textSecondary }}>{doc.role}</span>}
        </div>
      </div>

      {/* Meta */}
      <div style={{ fontSize:11, color: sanadColors.textMuted, display:'flex', flexWrap:'wrap', gap:8, alignItems:'center' }}>
        <span>{doc.instrument || ''}{doc.instrument_number ? ' '+doc.instrument_number : ''}</span>
        <span style={{ width:3, height:3, borderRadius:'50%', background: sanadColors.textMuted }}/>
        <span>{doc.hijri_year}هـ</span>
        <span style={{ width:3, height:3, borderRadius:'50%', background: sanadColors.textMuted }}/>
        <span>🏛️ {doc.issuer_ar}</span>
      </div>

      {/* Summary */}
      {doc.summary && (
        <p style={{ fontSize:12.5, color: sanadColors.textTertiary, lineHeight:1.7, margin:0 }}
          dangerouslySetInnerHTML={{ __html: highlightText(doc.summary, query) }}/>
      )}

      {/* Footer */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:10, paddingTop:10, borderTop:`1px solid ${sanadColors.borderLight}` }}>
        <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
          {counters.versions ? <span style={{ fontSize:11, color: sanadColors.textSecondary, display:'inline-flex', alignItems:'center', gap:4 }}>📅 <strong style={{ color: sanadColors.textPrimary }}>{counters.versions}</strong> إصدار</span> : null}
          {counters.amended_by ? <span style={{ fontSize:11, color: sanadColors.textSecondary, display:'inline-flex', alignItems:'center', gap:4 }}>✏️ <strong style={{ color: sanadColors.textPrimary }}>{counters.amended_by}</strong> تعديل</span> : null}
          {counters.implemented_by ? <span style={{ fontSize:11, color: sanadColors.textSecondary, display:'inline-flex', alignItems:'center', gap:4 }}>📋 <strong style={{ color: sanadColors.textPrimary }}>{counters.implemented_by}</strong> لائحة</span> : null}
          {counters.related ? <span style={{ fontSize:11, color: sanadColors.textSecondary, display:'inline-flex', alignItems:'center', gap:4 }}>🔗 <strong style={{ color: sanadColors.textPrimary }}>{counters.related}</strong> ذات صلة</span> : null}
          {counters.cited_by ? <span style={{ fontSize:11, color: sanadColors.textSecondary, display:'inline-flex', alignItems:'center', gap:4 }}>📎 <strong style={{ color: sanadColors.textPrimary }}>{counters.cited_by}</strong> مرجع</span> : null}
        </div>
        <div style={{ display:'inline-flex', gap:5, alignItems:'center' }}>
          <span style={{ fontSize:10, padding:'2px 7px', borderRadius:9999, background: doc.text_source==='full' ? '#e0f2ea' : sanadColors.bgSubtle, color: doc.text_source==='full' ? '#2d7a4f' : sanadColors.textMuted }}>
            {doc.text_source === 'full' ? '📄 نص كامل' : '📑 PDF فقط'}
          </span>
          <button onClick={(e) => { e.stopPropagation(); onSave(doc); }} title="حفظ" style={{
            display:'inline-flex', alignItems:'center', gap:4, padding:'4px 10px', borderRadius:6,
            border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, cursor:'pointer',
            fontSize:11, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic,
          }}>
            <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.8" viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
            حفظ
          </button>
        </div>
      </div>
    </article>
  );
}

/* =========================================================
   DETAIL MODAL (3 cols: side / main / quick)
   ========================================================= */
function SearchDetailModal({ doc, onClose, onSave, onCrossSection, allDocs }) {
  const [tab, setTab] = React.useState('text');
  if (!doc) return null;
  const tierStyle = searchTierBadgeStyle(doc.tier);
  const status = searchStatusInfo(doc);

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, zIndex:9100, background:'rgba(20,20,19,0.55)', backdropFilter:'blur(4px)',
      display:'flex', alignItems:'center', justifyContent:'center', padding:20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: sanadColors.bgElevated, borderRadius: 16,
        boxShadow: '0 24px 64px rgba(20,20,19,0.22)',
        width: '95%', maxWidth: 1280, height: '90vh',
        display: 'grid', gridTemplateColumns: '260px 1fr 240px', overflow: 'hidden',
        direction: 'rtl', fontFamily: sanadFonts.arabic, position: 'relative',
      }}>
        <button onClick={onClose} style={{ position:'absolute', top:14, left:14, width:32, height:32, borderRadius:'50%', border:'none', background: sanadColors.bgSubtle, cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center', color: sanadColors.textSecondary, zIndex:5 }}>
          <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>

        {/* ─── Side: Timeline / Amendments / Refs / Cross-section ─── */}
        <aside style={{ borderLeft:`1px solid ${sanadColors.border}`, overflowY:'auto', padding:16, background: sanadColors.bg }}>
          {[
            { title: `📅 الإصدارات (${doc.relations?.versions||1})`, items: [{ label:'الإصدار الحالي', meta:`${doc.hijri_year}هـ`, current:true }] },
            { title: `✏️ التعديلات (${doc.relations?.amended_by||0})`, items: doc.relations?.amended_by ? Array.from({length: Math.min(3, doc.relations.amended_by)}).map((_,i) => ({ label:`تعديل المادة ${4+i*23}`, meta:`${1437+i}هـ` })) : [] },
            { title: `📋 اللوائح التنفيذية (${doc.relations?.implemented_by||0})`, items: doc.relations?.implemented_by ? Array.from({length: Math.min(3, doc.relations.implemented_by)}).map((_,i) => ({ label:`لائحة ${i+1}`, meta:`${1437+i}هـ` })) : [] },
            { title: `🔗 وثائق ذات صلة (${doc.relations?.related||0})`, items: allDocs.filter(d => d.doc_id !== doc.doc_id).slice(0,3).map(d => ({ label: d.title_ar, link: d.doc_id })) },
          ].map((sec, si) => (
            <div key={si} style={{ marginBottom:14 }}>
              <div style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, marginBottom:8, letterSpacing:'0.04em', textTransform:'uppercase' }}>{sec.title}</div>
              <div style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:8, padding:'8px 10px' }}>
                {sec.items.length === 0 ? (
                  <div style={{ fontSize:11, color: sanadColors.textMuted }}>لا توجد</div>
                ) : sec.items.map((it, i) => (
                  <div key={i} onClick={() => it.link && onCrossSection?.(it.link)} style={{ display:'flex', alignItems:'flex-start', gap:8, padding:'5px 0', cursor: it.link ? 'pointer' : 'default', fontSize:11.5 }}>
                    <span style={{ width:7, height:7, borderRadius:'50%', background: it.current ? sanadColors.brand : sanadColors.textMuted, marginTop:5, flexShrink:0 }}/>
                    <div style={{ flex:1 }}>
                      <div style={{ fontWeight: it.current ? 600 : 400, color: it.current ? sanadColors.textPrimary : sanadColors.textSecondary }}>{it.label}</div>
                      {it.meta && <div style={{ color: sanadColors.textMuted, fontSize:10, marginTop:1 }}>{it.meta}</div>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Cross-section refs */}
          <div style={{ marginBottom:14 }}>
            <div style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, marginBottom:8, letterSpacing:'0.04em', textTransform:'uppercase' }}>📚 في الأقسام الأخرى</div>
            <div style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:8, padding:'8px 10px', display:'flex', flexDirection:'column', gap:5 }}>
              <a style={{ fontSize:11.5, color: sanadColors.brand, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5 }}>
                ⚖️ <span>{doc.relations?.cited_by||0} حكم في السوابق</span>
              </a>
              <a style={{ fontSize:11.5, color: sanadColors.brand, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5 }}>
                📝 <span>3 مقالات</span>
              </a>
              <a style={{ fontSize:11.5, color: sanadColors.brand, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:5 }}>
                📚 <span>2 كتب</span>
              </a>
            </div>
          </div>

          {/* Sources */}
          <div>
            <div style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, marginBottom:8, letterSpacing:'0.04em', textTransform:'uppercase' }}>🌐 المصادر الرسمية</div>
            <div style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:8, padding:'8px 10px', display:'flex', flexDirection:'column', gap:5 }}>
              {doc.uqn_url && <a href={doc.uqn_url} target="_blank" rel="noopener" style={{ fontSize:11.5, color: sanadColors.brand, textDecoration:'none' }}>🔗 UQN</a>}
              {doc.pdf_original_url && <a href={doc.pdf_original_url} target="_blank" rel="noopener" style={{ fontSize:11.5, color: sanadColors.brand, textDecoration:'none' }}>📥 PDF الأصلي</a>}
            </div>
          </div>
        </aside>

        {/* ─── Main ─── */}
        <div style={{ overflowY:'auto', display:'flex', flexDirection:'column' }}>
          {/* Header */}
          <div style={{ padding:'18px 26px', borderBottom:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, position:'sticky', top:0, zIndex:2 }}>
            <h2 style={{ fontSize:22, fontWeight:700, margin:'0 0 8px', lineHeight:1.4, color: sanadColors.textPrimary }}>{doc.title_ar}</h2>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8, alignItems:'center', fontSize:12, color: sanadColors.textMuted }}>
              <span style={{ fontSize:10, fontWeight:600, padding:'2px 9px', borderRadius:9999, background: tierStyle.bg, color: tierStyle.color }}>📊 {SEARCH_TIERS.find(t=>t.v===doc.tier)?.label}</span>
              <span style={{ fontSize:10, fontWeight:600, padding:'2px 9px', borderRadius:9999, background: status.bg, color: status.color }}>{status.label}</span>
              <span>{doc.instrument} {doc.instrument_number||''}</span>
              <span>·</span>
              <span>{doc.hijri_year}هـ</span>
              <span>·</span>
              <span>🏛️ {doc.issuer_ar}</span>
            </div>
          </div>

          {/* Tabs */}
          <div style={{ display:'flex', gap:4, padding:'0 26px', borderBottom:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, position:'sticky', top:88, zIndex:2 }}>
            {[
              ['text','📜 النص الكامل'],
              ['timeline','⏱ الجدول الزمني'],
              ['relations','🔗 الروابط'],
              ['details','ℹ️ التفاصيل'],
            ].map(([id, label]) => (
              <button key={id} onClick={() => setTab(id)} style={{
                padding:'10px 14px', border:'none', background:'transparent', cursor:'pointer',
                fontSize:12.5, fontWeight: tab===id ? 600 : 500,
                color: tab===id ? sanadColors.brand : sanadColors.textSecondary,
                borderBottom: tab===id ? `2px solid ${sanadColors.brand}` : '2px solid transparent',
                marginBottom:-1, fontFamily: sanadFonts.arabic,
              }}>{label}</button>
            ))}
          </div>

          {/* Content */}
          <div style={{ padding:24, lineHeight:1.85, flex:1 }}>
            {tab === 'text' && (
              <>
                {doc.toc && doc.toc.length > 0 && (
                  <div style={{ background: sanadColors.bg, borderRadius:8, padding:12, marginBottom:16, borderRight:`3px solid ${sanadColors.brand}` }}>
                    <div style={{ fontSize:11, fontWeight:700, color: sanadColors.textMuted, marginBottom:6, letterSpacing:'0.04em' }}>📑 جدول المحتويات</div>
                    {doc.toc.map((t, i) => (
                      <div key={i} onClick={() => { const el = document.getElementById(`mada-target-${i}`); if (el) el.scrollIntoView({ behavior:'smooth', block:'start' }); }}
                        style={{ padding:'3px 0', paddingRight:`${(t.level-2)*12}px`, fontSize:11.5, color: sanadColors.textSecondary, cursor:'pointer' }}
                        onMouseEnter={e => e.currentTarget.style.color = sanadColors.brand}
                        onMouseLeave={e => e.currentTarget.style.color = sanadColors.textSecondary}
                      >{t.title}</div>
                    ))}
                  </div>
                )}
                <div dangerouslySetInnerHTML={{ __html: renderMarkdownToHtml(doc.full_text) }}/>
              </>
            )}

            {tab === 'timeline' && (
              <div>
                <h2 style={{ fontSize:18, fontWeight:700, marginBottom:16 }}>الجدول الزمني</h2>
                <div style={{ position:'relative', paddingRight:16, borderRight:`2px solid ${sanadColors.border}` }}>
                  {[
                    { y: doc.hijri_year, label: 'الإصدار الأصلي' },
                    ...((doc.relations?.amended_by||0) > 0 ? Array.from({length: Math.min(5, doc.relations.amended_by)}).map((_,i) => ({ y: doc.hijri_year+i+1, label: `تعديل ${i+1}` })) : []),
                  ].map((t, i) => (
                    <div key={i} style={{ position:'relative', paddingBottom:18 }}>
                      <div style={{ position:'absolute', right:-22, top:4, width:10, height:10, borderRadius:'50%', background: sanadColors.brand, border:`2px solid ${sanadColors.bgElevated}` }}/>
                      <div style={{ fontWeight:600, color: sanadColors.textPrimary }}>{t.y}هـ</div>
                      <div style={{ color: sanadColors.textMuted, fontSize:13 }}>{t.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {tab === 'relations' && (
              <div>
                <h2 style={{ fontSize:18, fontWeight:700, marginBottom:16 }}>الروابط والعلاقات</h2>
                {Object.entries({
                  cited_by: 'مراجع إليه', cites: 'يستشهد بـ', amended_by: 'تعديلات لاحقة',
                  implemented_by: 'لوائح تنفيذية', related: 'وثائق ذات صلة', versions: 'إصدارات',
                }).map(([k, label]) => doc.relations?.[k] ? (
                  <div key={k} style={{ marginBottom:14, padding:'12px 14px', background: sanadColors.bg, borderRadius:9 }}>
                    <div style={{ fontWeight:600, marginBottom:6 }}>{label} ({doc.relations[k]})</div>
                    <div style={{ fontSize:13, color: sanadColors.textMuted }}>{doc.relations[k]} وثيقة مرتبطة</div>
                  </div>
                ) : null)}
              </div>
            )}

            {tab === 'details' && (
              <div>
                <h2 style={{ fontSize:18, fontWeight:700, marginBottom:16 }}>تفاصيل الوثيقة</h2>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:12 }}>
                  {[
                    ['المعرّف', doc.doc_id],
                    ['نوع الوثيقة', doc.instrument],
                    ['الرقم', doc.instrument_number||'—'],
                    ['السنة', `${doc.hijri_year}هـ`],
                    ['الجهة', doc.issuer_ar],
                    ['المجال', doc.legal_area],
                    ['الدور', doc.role||'—'],
                    ['الحالة', searchStatusInfo(doc).label],
                    ['المستوى', SEARCH_TIERS.find(t=>t.v===doc.tier)?.label],
                    ['مصدر النص', doc.text_source==='full'?'نص كامل':'PDF فقط'],
                  ].map(([k,v]) => (
                    <div key={k} style={{ padding:10, background: sanadColors.bg, borderRadius:8 }}>
                      <div style={{ fontSize:11, color: sanadColors.textMuted }}>{k}</div>
                      <div style={{ fontWeight:600, marginTop:3, color: sanadColors.textPrimary }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* ─── Quick info ─── */}
        <aside style={{ borderRight:`1px solid ${sanadColors.border}`, overflowY:'auto', padding:16, background: sanadColors.bg, display:'flex', flexDirection:'column', gap:10 }}>
          {[
            ['السنة الهجرية', `${doc.hijri_year}هـ`],
            ['الحالة', searchStatusInfo(doc).label],
            ['الجهة', doc.issuer_ar],
            ['المجال', doc.legal_area],
            ['الدور', doc.role||'—'],
            ['المراجع إليه', `${doc.relations?.cited_by||0} مرة`],
          ].map(([k,v]) => (
            <div key={k} style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:8, padding:'8px 12px', display:'flex', flexDirection:'column', gap:3 }}>
              <span style={{ fontSize:10, color: sanadColors.textMuted, fontWeight:500 }}>{k}</span>
              <span style={{ fontSize:12.5, fontWeight:600, color: sanadColors.textPrimary }}>{v}</span>
            </div>
          ))}

          <div style={{ marginTop:8 }}>
            <h4 style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, margin:'0 0 8px', letterSpacing:'0.04em', textTransform:'uppercase' }}>إجراءات سريعة</h4>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              <button onClick={() => onSave(doc)} style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, borderRadius:8, cursor:'pointer', fontSize:12, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic }}>
                📁 حفظ في ملفاتي
              </button>
              <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, borderRadius:8, cursor:'pointer', fontSize:12, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic }}>📋 نسخ</button>
              <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, borderRadius:8, cursor:'pointer', fontSize:12, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic }}>🖨️ طباعة</button>
              <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, borderRadius:8, cursor:'pointer', fontSize:12, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic }}>📥 PDF</button>
              <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', border:`1px solid ${sanadColors.border}`, background: sanadColors.bgElevated, borderRadius:8, cursor:'pointer', fontSize:12, color: sanadColors.textSecondary, fontFamily: sanadFonts.arabic }}>🔗 رابط</button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

/* =========================================================
   MAIN VIEW
   ========================================================= */
function SearchView() {
  const [query, setQuery] = React.useState('');
  const [section, setSection] = React.useState('laws'); // laws | precedents | articles | books
  const [searchAll, setSearchAll] = React.useState(false);
  const [searched, setSearched] = React.useState(false);
  const [view, setView] = React.useState('list'); // list | grid | grouped
  const [sort, setSort] = React.useState('relevance');
  const [selected, setSelected] = React.useState(null);
  const [showSaveModal, setShowSaveModal] = React.useState(null);
  const [filters, setFilters] = React.useState({
    tier: null, areas: new Set(), instruments: new Set(), issuer: '',
    yearFrom: null, yearTo: null, status: 'all', fullText: false,
    hasUqn: false, hasEn: false, relations: new Set(), source: 'all',
  });

  const debounceRef = React.useRef(null);
  React.useEffect(() => {
    clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      if (query.trim() || hasActiveFilters()) setSearched(true);
    }, 250);
    return () => clearTimeout(debounceRef.current);
  }, [query]);

  const hasActiveFilters = () => {
    const f = filters;
    return f.tier || f.areas.size || f.instruments.size || f.issuer || f.yearFrom || f.yearTo
      || f.status !== 'all' || f.fullText || f.hasUqn || f.hasEn || f.relations.size || f.source !== 'all';
  };

  React.useEffect(() => { if (hasActiveFilters()) setSearched(true); }, [filters]);

  // Filter + sort
  const results = React.useMemo(() => {
    let list = SEARCH_DOCS;
    const q = query.trim().toLowerCase();
    if (q) {
      list = list.filter(d =>
        d.title_ar.toLowerCase().includes(q) ||
        (d.summary && d.summary.toLowerCase().includes(q)) ||
        (d.full_text && d.full_text.toLowerCase().includes(q)) ||
        (d.legal_area && d.legal_area.includes(q))
      );
    }
    if (filters.tier) list = list.filter(d => d.tier === filters.tier);
    if (filters.areas.size) list = list.filter(d => filters.areas.has(d.legal_area));
    if (filters.instruments.size) list = list.filter(d => filters.instruments.has(d.instrument));
    if (filters.issuer) list = list.filter(d => d.issuer_ar === filters.issuer);
    if (filters.yearFrom) list = list.filter(d => d.hijri_year >= filters.yearFrom);
    if (filters.yearTo) list = list.filter(d => d.hijri_year <= filters.yearTo);
    if (filters.status === 'active') list = list.filter(d => !d.is_repealed);
    if (filters.status === 'repealed') list = list.filter(d => d.is_repealed);
    if (filters.fullText) list = list.filter(d => d.text_source === 'full');

    if (sort === 'newest') list = [...list].sort((a,b) => b.hijri_year - a.hijri_year);
    else if (sort === 'oldest') list = [...list].sort((a,b) => a.hijri_year - b.hijri_year);
    else if (sort === 'amendments') list = [...list].sort((a,b) => (b.relations?.amended_by||0) - (a.relations?.amended_by||0));
    else if (sort === 'relations') list = [...list].sort((a,b) => (b.relations?.cited_by||0) - (a.relations?.cited_by||0));
    else if (sort === 'tier') list = [...list].sort((a,b) => a.tier - b.tier);

    return list;
  }, [query, filters, sort]);

  const isLanding = !searched && !query.trim() && !hasActiveFilters();

  return (
    <div style={{ direction:'rtl', fontFamily: sanadFonts.arabic, background: sanadColors.bg, minHeight:'100%' }}>

      {/* Section tabs */}
      <div style={{ display:'flex', alignItems:'center', gap:4, padding:'12px 28px 0', background: sanadColors.bg, borderBottom:`1px solid ${sanadColors.borderLight}` }}>
        {[
          ['laws', '📜 الأنظمة', searchAll ? null : 9654],
          ['precedents', '⚖️ السوابق', null, 'قريباً'],
          ['articles', '📝 المقالات', null, 'قريباً'],
          ['books', '📚 الكتب', null, 'قريباً'],
        ].map(([id, label, count, chip]) => (
          <button key={id} onClick={() => setSection(id)} style={{
            padding:'9px 16px', border:'none', background:'transparent', cursor:'pointer',
            fontSize:13.5, fontWeight: section===id ? 600 : 500,
            color: section===id ? sanadColors.brand : sanadColors.textSecondary,
            borderBottom: section===id ? `2px solid ${sanadColors.brand}` : '2px solid transparent',
            marginBottom:-1, display:'inline-flex', alignItems:'center', gap:5, fontFamily: sanadFonts.arabic,
          }}>
            {label}
            <span style={{ fontSize:10, padding:'1px 7px', borderRadius:9999, background: section===id ? sanadColors.brandSubtle : sanadColors.bgSubtle, color: section===id ? sanadColors.brand : sanadColors.textMuted }}>{count ? count.toLocaleString('ar-SA') : chip}</span>
          </button>
        ))}
        <label style={{ marginRight:'auto', display:'flex', alignItems:'center', gap:6, fontSize:11.5, color: sanadColors.textSecondary, cursor:'pointer', userSelect:'none' }}>
          <input type="checkbox" checked={searchAll} onChange={e => setSearchAll(e.target.checked)} style={{ accentColor: sanadColors.brand }}/>
          بحث في كل الأقسام
        </label>
      </div>

      {/* Hero (landing) */}
      {isLanding && (
        <div style={{ maxWidth:760, margin:'0 auto', padding:'52px 24px 20px', textAlign:'center' }}>
          <h1 style={{ fontSize:36, fontWeight:700, color: sanadColors.textPrimary, margin:'0 0 12px', letterSpacing:'-0.02em' }}>
            ابحث في <span style={{ color: sanadColors.brand }}>القانون السعودي</span> بسرعة
          </h1>
          <p style={{ fontSize:15, color: sanadColors.textSecondary, margin:0 }}>
            9,654 نظام ولائحة وقرار · مفهرسة بدقة · تبحث وتفهم في ثانية
          </p>
        </div>
      )}

      {/* Search bar */}
      <div style={{
        position: isLanding ? 'static' : 'sticky', top: isLanding ? 'auto' : 0, zIndex: 30,
        background: isLanding ? 'transparent' : sanadColors.bg,
        padding: isLanding ? '0 24px' : '12px 28px',
        boxShadow: isLanding ? 'none' : `0 1px 0 ${sanadColors.borderLight}`,
        maxWidth: isLanding ? 760 : 'none', margin: '0 auto',
      }}>
        <div style={{
          display:'flex', alignItems:'center', gap:8,
          background: sanadColors.bgElevated, border:`1.5px solid ${sanadColors.border}`,
          borderRadius:12, padding:'0 14px', height:52, maxWidth: isLanding ? 'none' : 720, marginLeft: isLanding ? 0 : 'auto', marginRight: isLanding ? 0 : 'auto',
          transition:'border-color 150ms',
        }}
          onFocus={e => e.currentTarget.style.borderColor = sanadColors.brand}
        >
          <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" style={{ color: sanadColors.textMuted, flexShrink:0 }}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Escape') setQuery(''); }}
            placeholder="ابحث بالكلمة، رقم المادة، اسم النظام…"
            style={{ flex:1, border:'none', background:'transparent', outline:'none', fontSize:15, color: sanadColors.textPrimary, fontFamily: sanadFonts.arabic, direction:'rtl' }}
          />
          {query && (
            <button onClick={() => setQuery('')} style={{ width:24, height:24, borderRadius:'50%', border:'none', background: sanadColors.bgSubtle, cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center', color: sanadColors.textMuted, flexShrink:0 }}>
              <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          )}
          <span style={{ fontSize:10, color: sanadColors.textMuted, padding:'3px 7px', borderRadius:5, border:`1px solid ${sanadColors.border}`, background: sanadColors.bg, fontFamily:'monospace', flexShrink:0 }}>⌘K</span>
        </div>
      </div>

      {/* Landing extras */}
      {isLanding && (
        <div style={{ maxWidth:760, margin:'0 auto', padding:'0 24px' }}>
          <div style={{ fontSize:11, fontWeight:700, color: sanadColors.textMuted, marginTop:24, marginBottom:8, letterSpacing:'0.04em' }}>🔥 اقتراحات شائعة</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:7, marginBottom:8 }}>
            {SEARCH_SUGGESTIONS.map(s => (
              <button key={s} onClick={() => setQuery(s)} style={{
                padding:'6px 13px', borderRadius:9999,
                background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`,
                fontSize:12.5, color: sanadColors.textSecondary, cursor:'pointer', fontFamily: sanadFonts.arabic,
              }}>{s}</button>
            ))}
          </div>

          <div style={{ fontSize:11, fontWeight:700, color: sanadColors.textMuted, marginTop:20, marginBottom:8, letterSpacing:'0.04em' }}>📂 المجالات القانونية</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:7 }}>
            {SEARCH_AREAS.slice(0, 8).map(([n, c]) => (
              <button key={n} onClick={() => { const next = new Set(filters.areas); next.add(n); setFilters({ ...filters, areas: next }); }} style={{
                display:'inline-flex', alignItems:'center', gap:5,
                padding:'6px 13px', borderRadius:9999,
                background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`,
                fontSize:12.5, color: sanadColors.textSecondary, cursor:'pointer', fontFamily: sanadFonts.arabic,
              }}>{n}<span style={{ fontSize:10, color: sanadColors.textMuted }}>{c}</span></button>
            ))}
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(170px, 1fr))', gap:10, marginTop:24 }}>
            {[
              { icon:'📅', title:'أنظمة 1446هـ', meta:'الصادرة هذا العام', filter: { yearFrom: 1446 } },
              { icon:'🏛️', title:'الأنظمة الأساسية', meta:'الـ 5 الأقوى قانونياً', filter: { tier: 1 } },
              { icon:'✏️', title:'آخر التعديلات', meta:'مرتبة حسب التحديث', sort: 'newest' },
              { icon:'🔥', title:'الأكثر بحثاً', meta:'هذا الأسبوع', q: 'نظام العمل' },
            ].map((s, i) => (
              <button key={i} onClick={() => {
                if (s.filter) setFilters({ ...filters, ...s.filter });
                if (s.sort) setSort(s.sort);
                if (s.q) setQuery(s.q);
              }} style={{
                background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`,
                borderRadius:12, padding:'12px 14px', cursor:'pointer', textAlign:'right',
                fontFamily: sanadFonts.arabic, transition:'all 160ms',
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = sanadColors.brand; e.currentTarget.style.transform = 'translateY(-1px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = sanadColors.border; e.currentTarget.style.transform = 'none'; }}
              >
                <div style={{ fontSize:18, marginBottom:5 }}>{s.icon}</div>
                <div style={{ fontSize:12.5, fontWeight:600, color: sanadColors.textPrimary, marginBottom:2 }}>{s.title}</div>
                <div style={{ fontSize:11, color: sanadColors.textMuted }}>{s.meta}</div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Search layout */}
      {!isLanding && section === 'laws' && (
        <div style={{ display:'grid', gridTemplateColumns:'260px 1fr 220px', gap:18, maxWidth:1200, margin:'0 auto', padding:'18px 28px 36px', alignItems:'start' }}>

          <SearchFilterSidebar filters={filters} onChange={setFilters} facets={{}}/>

          {/* Results column */}
          <div>
            <SearchActiveFilters filters={filters} onChange={setFilters}/>

            {/* Toolbar */}
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:10, marginBottom:12 }}>
              <div style={{ fontSize:13, color: sanadColors.textSecondary }}>
                <strong style={{ color: sanadColors.textPrimary }}>{results.length.toLocaleString('ar-SA')}</strong> نتيجة{query ? <> لـ "<strong>{query}</strong>"</> : ''}
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:7 }}>
                <select value={sort} onChange={e => setSort(e.target.value)} style={{
                  padding:'5px 10px', border:`1px solid ${sanadColors.border}`, borderRadius:6,
                  background: sanadColors.bgElevated, fontSize:11.5, color: sanadColors.textSecondary,
                  cursor:'pointer', outline:'none', fontFamily: sanadFonts.arabic,
                }}>
                  <option value="relevance">ذات صلة</option>
                  <option value="newest">الأحدث</option>
                  <option value="oldest">الأقدم</option>
                  <option value="amendments">الأكثر تعديلاً</option>
                  <option value="relations">الأكثر ترابطاً</option>
                  <option value="tier">المستوى</option>
                </select>
                <div style={{ display:'inline-flex', background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:6, overflow:'hidden' }}>
                  {[
                    ['list', <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>],
                    ['grid', <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>],
                    ['grouped', <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>],
                  ].map(([id, icon]) => (
                    <button key={id} onClick={() => setView(id)} style={{
                      width:30, height:28, border:'none', cursor:'pointer',
                      background: view===id ? sanadColors.bgSubtle : 'transparent',
                      color: view===id ? sanadColors.brand : sanadColors.textMuted,
                      display:'inline-flex', alignItems:'center', justifyContent:'center',
                    }}>{icon}</button>
                  ))}
                </div>
              </div>
            </div>

            {/* Results */}
            {results.length === 0 ? (
              <div style={{ textAlign:'center', padding:'60px 24px', color: sanadColors.textMuted }}>
                <div style={{ fontSize:48, marginBottom:12, opacity:0.5 }}>🔍</div>
                <div style={{ fontSize:16, fontWeight:600, color: sanadColors.textPrimary, marginBottom:6 }}>لا توجد نتائج</div>
                <div style={{ fontSize:12.5 }}>جرّب تغيير كلمات البحث أو تخفيف الفلاتر.</div>
              </div>
            ) : view === 'grouped' ? (
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {Object.entries(results.reduce((acc, d) => { (acc[d.legal_area] = acc[d.legal_area] || []).push(d); return acc; }, {})).map(([k, items]) => (
                  <div key={k} style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:12, overflow:'hidden' }}>
                    <div style={{ padding:'10px 16px', background: sanadColors.bgSubtle, fontSize:12.5, fontWeight:600, display:'flex', justifyContent:'space-between' }}>
                      <span>{k}</span>
                      <span style={{ fontSize:11, color: sanadColors.textMuted }}>{items.length} نتيجة</span>
                    </div>
                    <div style={{ display:'flex', flexDirection:'column' }}>
                      {items.map(d => (
                        <div key={d.doc_id} style={{ borderTop:`1px solid ${sanadColors.borderLight}` }}>
                          <SearchResultCard doc={d} query={query} onOpen={setSelected} onSave={d => setShowSaveModal({ item:d })}/>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ display: view==='grid' ? 'grid' : 'flex', flexDirection: view==='grid' ? undefined : 'column', gridTemplateColumns: view==='grid' ? 'repeat(auto-fill, minmax(min(100%, 320px), 1fr))' : undefined, gap:12 }}>
                {results.map(d => (
                  <SearchResultCard key={d.doc_id} doc={d} query={query} onOpen={setSelected} onSave={d => setShowSaveModal({ item:d })}/>
                ))}
              </div>
            )}
          </div>

          {/* Right info col */}
          <aside style={{ display:'flex', flexDirection:'column', gap:10, position:'sticky', top:16 }}>
            <div style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:12, padding:'12px 14px' }}>
              <h4 style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, margin:'0 0 8px', letterSpacing:'0.04em' }}>💡 نصيحة</h4>
              <div style={{ fontSize:11, color: sanadColors.textSecondary, lineHeight:1.7 }}>
                استخدم <kbd style={{ background: sanadColors.bgSubtle, padding:'1px 5px', borderRadius:3, fontSize:10 }}>⌘K</kbd> للبحث، <kbd style={{ background: sanadColors.bgSubtle, padding:'1px 5px', borderRadius:3, fontSize:10 }}>↑↓</kbd> للتنقل، <kbd style={{ background: sanadColors.bgSubtle, padding:'1px 5px', borderRadius:3, fontSize:10 }}>Esc</kbd> للإغلاق.
              </div>
            </div>
            <div style={{ background: sanadColors.bgElevated, border:`1px solid ${sanadColors.border}`, borderRadius:12, padding:'12px 14px' }}>
              <h4 style={{ fontSize:10, fontWeight:700, color: sanadColors.textMuted, margin:'0 0 8px', letterSpacing:'0.04em' }}>📈 الأكثر بحثاً اليوم</h4>
              <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                {SEARCH_TOP.map((t, i) => (
                  <div key={t} onClick={() => setQuery(t)} style={{ display:'flex', gap:6, alignItems:'center', cursor:'pointer', padding:'3px 0' }}>
                    <span style={{ fontSize:11, color: sanadColors.textMuted, fontWeight:600, minWidth:14 }}>{i+1}</span>
                    <span style={{ fontSize:11.5, color: sanadColors.textSecondary }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </aside>
        </div>
      )}

      {/* Empty section state */}
      {!isLanding && section !== 'laws' && !searchAll && (
        <div style={{ textAlign:'center', padding:'80px 24px', maxWidth:480, margin:'0 auto' }}>
          <div style={{ fontSize:56, marginBottom:16, opacity:0.6 }}>{section==='precedents'?'⚖️':section==='articles'?'📝':'📚'}</div>
          <div style={{ fontSize:18, fontWeight:600, color: sanadColors.textPrimary, marginBottom:8 }}>
            قسم {section==='precedents'?'السوابق القضائية':section==='articles'?'المقالات':'الكتب'} قيد البناء
          </div>
          <div style={{ fontSize:13, color: sanadColors.textMuted, lineHeight:1.7 }}>
            نعمل حالياً على فهرسة هذا القسم. سيكون متاحاً قريباً مع بحث متكامل وروابط بالأنظمة ذات الصلة.
          </div>
        </div>
      )}

      {/* Detail modal */}
      {selected && (
        <SearchDetailModal
          doc={selected}
          allDocs={SEARCH_DOCS}
          onClose={() => setSelected(null)}
          onSave={(d) => { setShowSaveModal({ item: d }); }}
          onCrossSection={(docId) => {
            const next = SEARCH_DOCS.find(d => d.doc_id === docId);
            if (next) setSelected(next);
          }}
        />
      )}

      {/* Save modal */}
      {showSaveModal && typeof SaveToFilesModal !== 'undefined' && (
        <SaveToFilesModal onClose={() => setShowSaveModal(null)} onSave={() => setShowSaveModal(null)}/>
      )}
    </div>
  );
}

Object.assign(window, { SearchView });