// شخصیت و مرزهای اخلاقی فروشندهٔ هوشمند
const AiSellerPersona = () => {
  const { useEffect, useMemo, useState } = React;
  const { Icon } = window.SB_UI;
  const token = localStorage.getItem(window.TOKEN_KEY);
  const headers = { 'Content-Type':'application/json', Authorization:`Bearer ${token}` };
  const defaults = {
    mission:'کمک به مخاطب برای یک تصمیم آگاهانه و متناسب با نیازش؛ فروش نتیجهٔ مشاورهٔ درست است، نه هدفی به هر قیمت.',
    brand_tone:'فارسی طبیعی، محترمانه، روشن و هماهنگ با هویت آکادمی',
    consultation_method:'ابتدا نیاز و شرایط مخاطب را بفهم؛ سپس راهنمایی صادقانه و متناسب ارائه بده. فروش نتیجهٔ مشاورهٔ درست است.'
  };
  const [profile, setProfile] = useState(defaults);
  const [enabled, setEnabled] = useState(true);
  const defaultRules = [
    { id:'preview-red-truth', type:'seller_red_line', text:'قیمت، تخفیف، ظرفیت، فوریت، نتیجه، درآمد، مدرک، هدیه یا ویژگی ساختگی اعلام نکن.', is_active:1, preview:true },
    { id:'preview-red-pressure', type:'seller_red_line', text:'مخاطب را تهدید، تحقیر، قضاوت یا برای خرید و افشای اطلاعات مالی تحت فشار قرار نده.', is_active:1, preview:true },
    { id:'preview-red-no', type:'seller_red_line', text:'به پاسخ منفی و حق پایان‌دادن به مکالمه احترام بگذار؛ عبارت «شما جدی نیستید» ممنوع است.', is_active:1, preview:true },
    { id:'preview-red-fit', type:'seller_red_line', text:'برای رسیدن به فروش، محصول نامتناسب با نیاز مخاطب پیشنهاد نده.', is_active:1, preview:true },
    { id:'preview-guide-empathy', type:'seller_guideline', text:'قبل از پاسخ به اعتراض همدلی کن و سپس فقط یک سؤال تشخیصی مرتبط بپرس.', is_active:1, preview:true },
    { id:'preview-guide-listen', type:'seller_guideline', text:'حرف فعلی مخاطب را واقعی پاسخ بده و اطلاعات قبلی را دوباره نپرس.', is_active:1, preview:true }
  ];
  const [rules, setRules] = useState(defaultRules);
  const [newType, setNewType] = useState('seller_red_line');
  const [newText, setNewText] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [notice, setNotice] = useState('');
  const [activeSection, setActiveSection] = useState('behavior');
  const [behaviorPanel, setBehaviorPanel] = useState('shared');
  const [informationPanel, setInformationPanel] = useState('facts');

  const load = () => {
    setLoading(true);
    fetch('/api/rules/seller-persona', { headers }).then(r=>r.json()).then(d=>{
      if (d.success) { setProfile({ ...defaults, ...(d.data.profile || {}) }); setEnabled(d.data.is_active !== 0); setRules((d.data.rules || []).length ? d.data.rules : defaultRules); }
      else flash('سرور هنوز ماژول جدید را بارگذاری نکرده؛ شخصیت پیش‌فرض نمایش داده شده است');
    }).catch(()=>flash('اتصال به API برقرار نشد؛ شخصیت پیش‌فرض نمایش داده شده است')).finally(()=>setLoading(false));
  };
  useEffect(()=>{ load(); }, []);
  const flash = text => { setNotice(text); setTimeout(()=>setNotice(''), 2500); };
  const set = (key, value) => setProfile(p=>({ ...p, [key]:value }));

  const saveProfile = () => {
    setSaving(true);
    fetch('/api/rules/seller-persona', { method:'PUT', headers, body:JSON.stringify({ profile, is_active:enabled }) })
      .then(r=>r.json()).then(d=>d.success ? flash('پروفایل مشترک تیم ذخیره شد و از پیام بعدی وارد پرامپت می‌شود') : flash(d.message || 'ذخیره انجام نشد'))
      .finally(()=>setSaving(false));
  };
  const addRule = () => {
    if (!newText.trim()) return;
    fetch('/api/rules', { method:'POST', headers, body:JSON.stringify({ type:newType, text:newText.trim() }) })
      .then(r=>r.json()).then(d=>{ if(d.success){ setNewText(''); load(); flash('قانون اضافه شد'); } });
  };
  const toggle = rule => rule.preview ? flash('برای ویرایش قوانین پیش‌فرض، ابتدا سرور را بازراه‌اندازی کنید') : fetch('/api/rules/'+rule.id, { method:'PUT', headers, body:JSON.stringify({ is_active:rule.is_active?0:1 }) }).then(load);
  const remove = rule => { if(rule.preview) return flash('این پیش‌نمایش است؛ پس از بازراه‌اندازی سرور نسخهٔ ذخیره‌شده قابل ویرایش می‌شود'); if(confirm('این قانون حذف شود؟')) fetch('/api/rules/'+rule.id,{method:'DELETE',headers}).then(load); };
  const prompt = useMemo(()=>`مأموریت تیم: ${profile.mission}\nلحن پایه برند: ${profile.brand_tone}\nروش مشترک مشاوره: ${profile.consultation_method}`, [profile]);
  const input = { width:'100%', boxSizing:'border-box', background:'var(--surface-2)', border:'1px solid var(--border)', color:'var(--text-1)', borderRadius:10, padding:'10px 12px', fontFamily:'inherit', fontSize:13, lineHeight:1.8, outline:'none' };
  const card = { background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:18 };
  const sections = [
    { id:'behavior', icon:'users', label:'پروفایل و رفتار', hint:'مشترک تیم و اختصاصی هر فروشنده' },
    { id:'information', icon:'book-open', label:'دانش و اطلاعات', hint:'فکت‌های تأییدشده و سؤال‌وجواب‌ها' },
    { id:'objections', icon:'message-circle-question', label:'اعتراض‌ها', hint:'پاسخ‌های ساختاریافته' },
    { id:'clone', icon:'sparkles', label:'کلونِ فروشنده', hint:'یادگیری از رونوشتِ مکالماتِ واقعی' },
  ];

  if (loading) return <div className="empty">در حال بارگذاری شخصیت فروشنده…</div>;
  return <div style={{maxWidth:1180,margin:'0 auto',display:'grid',gap:16}}>
    {notice && <div style={{position:'fixed',top:18,left:'50%',transform:'translateX(-50%)',zIndex:50,background:'#16271f',border:'1px solid #34D39966',color:'#6EE7B7',padding:'10px 18px',borderRadius:10,fontSize:12}}>{notice}</div>}
    <div style={{display:'grid',gap:5}}>
      <div style={{fontSize:20,fontWeight:900,color:'var(--text-1)'}}>فروشنده هوشمند</div>
      <div style={{fontSize:12.5,color:'var(--text-3)',lineHeight:1.9}}>هر بار فقط یک بخش را تنظیم کنید؛ ترتیب اعمال اطلاعات و قوانین تغییری نکرده است.</div>
    </div>

    <nav style={{...card,padding:8,display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(175px,1fr))',gap:7,position:'static',boxShadow:'none'}}>
      {sections.map(section => {
        const active = activeSection === section.id;
        return <button key={section.id} type="button" aria-label={section.label} aria-pressed={active} onClick={()=>setActiveSection(section.id)} style={{display:'flex',alignItems:'center',gap:10,textAlign:'right',border:`1px solid ${active?'#818CF8':'transparent'}`,borderRadius:10,padding:'10px 11px',background:active?'rgba(99,102,241,.12)':'transparent',color:active?'#A5B4FC':'var(--text-2)',cursor:'pointer',fontFamily:'inherit'}}>
          <Icon name={section.icon} size={17} color={active?'#818CF8':'var(--text-3)'}/>
          <span style={{minWidth:0}}><strong style={{display:'block',fontSize:12.5}}>{section.label}</strong><small style={{display:'block',marginTop:2,color:'var(--text-3)',fontSize:10.5,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{section.hint}</small></span>
        </button>;
      })}
    </nav>

    {activeSection === 'behavior' && <div style={{display:'grid',gap:16}}>
      <SectionSwitch active={behaviorPanel} onChange={setBehaviorPanel} items={[
        {id:'shared',label:'پروفایل و خط‌مشی مشترک',hint:'برای همهٔ فروشنده‌ها'},
        {id:'sellers',label:'شخصیت و قوانین فروشنده',hint:'اختصاصی حاجیان، صفری و دیگران'}
      ]}/>
      {behaviorPanel === 'shared' && <div style={{display:'grid',gap:16}}>
      <div style={{...card,display:'flex',alignItems:'center',justifyContent:'space-between',gap:20}}>
        <div><div style={{fontSize:18,fontWeight:900,color:'var(--text-1)'}}>پروفایل مشترک تیم فروش</div><div style={{fontSize:12,color:'var(--text-3)',marginTop:6,lineHeight:1.8}}>مأموریت، استاندارد برند و مرزهای این بخش برای همهٔ فروشنده‌ها اعمال می‌شوند.</div></div>
        <button onClick={()=>setEnabled(v=>!v)} style={{border:0,borderRadius:20,padding:'8px 15px',cursor:'pointer',background:enabled?'#10B98122':'#64748b22',color:enabled?'#34D399':'#94a3b8',fontWeight:800,flexShrink:0}}>{enabled?'● فعال':'○ غیرفعال'}</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'minmax(0,1.25fr) minmax(300px,.75fr)',gap:16,alignItems:'start'}}>
        <section style={card}><Title icon="users" text="استاندارد مشترک تیم" />
          <Field label="مأموریت تیم فروش"><textarea rows="3" style={{...input,resize:'vertical'}} value={profile.mission} onChange={e=>set('mission',e.target.value)} /></Field>
          <Field label="لحن پایه برند"><textarea rows="2" style={{...input,resize:'vertical'}} value={profile.brand_tone} onChange={e=>set('brand_tone',e.target.value)} /></Field>
          <Field label="روش مشترک مشاوره"><textarea rows="3" style={{...input,resize:'vertical'}} value={profile.consultation_method} onChange={e=>set('consultation_method',e.target.value)} /></Field>
        </section>
        <aside style={{...card,position:'sticky',top:100}}><Title icon="file-text" text="پیش‌نمایش پروفایل مشترک" /><pre style={{whiteSpace:'pre-wrap',direction:'rtl',fontFamily:'inherit',fontSize:11.5,lineHeight:2,color:'var(--text-2)',margin:0}}>{prompt}</pre></aside>
      </div>

      <section style={card}><Title icon="shield" text="خط قرمزها و خط‌مشی‌ها" />
        <div style={{display:'flex',gap:8,marginBottom:10}}>{[['seller_red_line','🔴 خط قرمز'],['seller_guideline','🔵 خط‌مشی']].map(([id,label])=><button key={id} onClick={()=>setNewType(id)} style={{padding:'7px 13px',borderRadius:8,border:'1px solid '+(newType===id?(id.includes('red')?'#F87171':'#818CF8'):'var(--border)'),background:'transparent',color:newType===id?(id.includes('red')?'#F87171':'#A5B4FC'):'var(--text-3)',cursor:'pointer'}}>{label}</button>)}</div>
        <div style={{display:'flex',gap:8}}><textarea rows="2" style={{...input,resize:'vertical'}} value={newText} onChange={e=>setNewText(e.target.value)} placeholder={newType==='seller_red_line'?'کاری که فروشنده تحت هیچ شرایطی نباید انجام دهد…':'رفتاری که فروشنده همیشه باید رعایت کند…'} /><button onClick={addRule} style={{border:0,borderRadius:9,padding:'0 18px',background:'#6366F1',color:'white',fontWeight:800,cursor:'pointer'}}>افزودن</button></div>
        <div style={{display:'grid',gap:8,marginTop:16}}>{rules.map(r=><div key={r.id} style={{display:'flex',alignItems:'center',gap:10,padding:'10px 12px',borderRadius:9,background:'var(--surface-2)',opacity:r.is_active?1:.48}}><span>{r.type==='seller_red_line'?'🔴':'🔵'}</span><span style={{flex:1,fontSize:12.5,lineHeight:1.8,color:'var(--text-2)'}}>{r.text}</span><button className="icon-btn" onClick={()=>toggle(r)} title="فعال/غیرفعال"><Icon name={r.is_active?'eye':'eye-off'} size={14}/></button><button className="icon-btn" onClick={()=>remove(r)} title="حذف"><Icon name="trash-2" size={14} color="#F87171"/></button></div>)}</div>
      </section>
      <div style={{display:'flex',justifyContent:'flex-end'}}><button onClick={saveProfile} disabled={saving} style={{border:0,borderRadius:10,padding:'11px 24px',background:'#6366F1',color:'#fff',fontWeight:900,cursor:'pointer'}}>{saving?'در حال ذخیره…':'ذخیره پروفایل مشترک'}</button></div>
      </div>}
      {behaviorPanel === 'sellers' && <IndividualSellers headers={headers} flash={flash} />}
    </div>}
    {activeSection === 'information' && <div style={{display:'grid',gap:16}}>
      <SectionSwitch active={informationPanel} onChange={setInformationPanel} items={[
        {id:'facts',label:'فکت‌های تأییدشده',hint:'قیمت، شرایط و اطلاعات قطعی'},
        {id:'knowledge',label:'دانش فروشنده',hint:'سؤال‌وجواب‌های اختصاصی'}
      ]}/>
      {informationPanel === 'facts' && <SalesFactsBank headers={headers} flash={flash} />}
      {informationPanel === 'knowledge' && <SalesKnowledgeBank headers={headers} flash={flash} />}
    </div>}
    {activeSection === 'objections' && <SalesObjectionsBank headers={headers} flash={flash} />}
    {activeSection === 'clone' && <SellerCloneTool headers={headers} flash={flash} />}
  </div>;
};

const SectionSwitch = ({ active, onChange, items }) => <div style={{display:'grid',gridTemplateColumns:`repeat(${items.length},minmax(0,1fr))`,gap:8,padding:7,background:'var(--surface)',border:'1px solid var(--border)',borderRadius:12}}>
  {items.map(item=><button key={item.id} type="button" aria-label={item.label} aria-pressed={active===item.id} onClick={()=>onChange(item.id)} style={{border:`1px solid ${active===item.id?'#818CF8':'transparent'}`,borderRadius:9,padding:'9px 12px',background:active===item.id?'rgba(99,102,241,.12)':'transparent',color:active===item.id?'#A5B4FC':'var(--text-2)',cursor:'pointer',fontFamily:'inherit',textAlign:'right'}}><strong style={{display:'block',fontSize:12.5}}>{item.label}</strong><small style={{display:'block',marginTop:2,color:'var(--text-3)',fontSize:10.5}}>{item.hint}</small></button>)}
</div>;

const SalesFactsBank = ({ headers, flash }) => {
  const { useEffect, useState } = React;
  const empty={id:'',category:'product',fact_key:'',value:'',source:'',valid_from:'',valid_until:'',is_verified:false,is_active:true};
  const [rows,setRows]=useState([]),[edit,setEdit]=useState(empty);
  const box={background:'var(--surface)',border:'1px solid var(--border)',borderRadius:14,padding:18};
  const input={width:'100%',boxSizing:'border-box',background:'var(--surface-2)',border:'1px solid var(--border)',color:'var(--text-1)',borderRadius:9,padding:'9px 11px',fontFamily:'inherit',fontSize:12.5,outline:'none'};
  const load=()=>fetch('/api/rules/sales-facts',{headers}).then(r=>r.json()).then(d=>d.success&&setRows(d.data.facts||[]));
  useEffect(()=>{ load(); },[]); const set=(k,v)=>setEdit(e=>({...e,[k]:v}));
  const save=()=>{const id=edit.id||('fact-'+Date.now());fetch('/api/rules/sales-facts/'+id,{method:'PUT',headers,body:JSON.stringify(edit)}).then(r=>r.json()).then(d=>{if(d.success){flash('اطلاعات واقعی ذخیره شد');setEdit(empty);load();}else flash(d.message||'ذخیره نشد');});};
  return <section style={box}><Title icon="badge-check" text="بانک اطلاعات واقعی و تأییدشده" />
    <div style={{fontSize:12,color:'var(--text-3)',lineHeight:1.9,marginBottom:12}}>قیمت، اقساط، ظرفیت، مدرس، مدت، مدرک و تخفیف فقط پس از ثبت مقدار و منبع معتبر قابل تأیید هستند.</div>
    <div style={{display:'grid',gridTemplateColumns:'minmax(250px,.75fr) minmax(0,1.25fr)',gap:14}}>
      <div style={{display:'grid',gap:7,alignContent:'start'}}>{rows.map(r=><button key={r.id} onClick={()=>setEdit({...r,is_verified:!!r.is_verified,is_active:!!r.is_active})} style={{textAlign:'right',padding:10,border:'1px solid var(--border)',borderRadius:9,background:'var(--surface-2)',color:'var(--text-2)',cursor:'pointer'}}><strong>{r.category}.{r.fact_key}</strong><div style={{fontSize:10,marginTop:4,color:r.is_verified?'#34D399':'#FBBF24'}}>{r.is_verified?'تأییدشده':'تأییدنشده'} · {r.value||'بدون مقدار'}</div></button>)}</div>
      <div style={{display:'grid',gap:9}}><Grid><Field label="دسته"><input style={input} value={edit.category} onChange={e=>set('category',e.target.value)}/></Field><Field label="کلید یکتا"><input style={input} value={edit.fact_key} onChange={e=>set('fact_key',e.target.value)}/></Field></Grid><Field label="مقدار واقعی"><textarea rows="2" style={input} value={edit.value} onChange={e=>set('value',e.target.value)}/></Field><Field label="منبع تأیید"><input style={input} value={edit.source} onChange={e=>set('source',e.target.value)}/></Field><Grid><Field label="شروع اعتبار"><input type="date" style={input} value={edit.valid_from||''} onChange={e=>set('valid_from',e.target.value)}/></Field><Field label="پایان اعتبار"><input type="date" style={input} value={edit.valid_until||''} onChange={e=>set('valid_until',e.target.value)}/></Field></Grid><div style={{display:'flex',gap:12,alignItems:'center'}}><label><input type="checkbox" checked={!!edit.is_verified} onChange={e=>set('is_verified',e.target.checked)}/> تأییدشده</label><label><input type="checkbox" checked={!!edit.is_active} onChange={e=>set('is_active',e.target.checked)}/> فعال</label><button onClick={save} style={{marginRight:'auto',border:0,borderRadius:9,padding:'9px 18px',background:'#6366F1',color:'#fff',fontWeight:800}}>ذخیره</button></div></div>
    </div></section>;
};

const SalesObjectionsBank = ({ headers, flash }) => {
  const { useEffect, useState } = React; const [rows,setRows]=useState([]);
  const load=()=>fetch('/api/rules/sales-objections',{headers}).then(r=>r.json()).then(d=>d.success&&setRows(d.data.objections||[])); useEffect(()=>{ load(); },[]);
  return <section style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:14,padding:18}}><Title icon="message-circle-question" text="بانک اعتراض‌های ساختاریافته"/><div style={{fontSize:12,color:'var(--text-3)',marginBottom:12}}>هر اعتراض شامل همدلی، هدف تشخیصی، فقط یک سؤال و ممنوعیت‌های روشن است.</div><div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:9}}>{rows.map(r=><div key={r.id} style={{padding:12,border:'1px solid var(--border)',borderRadius:10,background:'var(--surface-2)',opacity:r.is_active?1:.5}}><strong style={{color:'var(--text-1)'}}>{r.trigger_text}</strong><div style={{fontSize:11,color:'var(--text-2)',lineHeight:1.8,marginTop:6}}>{r.allowed_response}</div><div style={{fontSize:11,color:'#A5B4FC',marginTop:5}}>{r.next_question}</div></div>)}</div></section>;
};

const SalesKnowledgeBank = ({ headers, flash }) => {
  const { useEffect, useState } = React;
  const empty = sellerId => ({ id:'',seller_id:sellerId||null,topic:'',keywords:'',answer:'',next_question:'',followup_keywords:'',followup_answer:'',followup_next_question:'',context_keywords:'',capture_field:'هدف اصلی از یادگیری',source:'',restrictions:'',is_verified:true,is_active:true,priority:50 });
  const [rows,setRows]=useState([]), [edit,setEdit]=useState(empty('hajian')), [previewText,setPreviewText]=useState('نرم‌افزار تحت ویندوز یعنی چی؟'), [preview,setPreview]=useState(null);
  const [sellerId,setSellerId]=useState('hajian'), [sellers,setSellers]=useState([]);
  const box={background:'var(--surface)',border:'1px solid var(--border)',borderRadius:14,padding:18};
  const input={width:'100%',boxSizing:'border-box',background:'var(--surface-2)',border:'1px solid var(--border)',color:'var(--text-1)',borderRadius:9,padding:'9px 11px',fontFamily:'inherit',fontSize:12.5,lineHeight:1.8,outline:'none'};
  const load=()=>fetch('/api/rules/sales-knowledge'+(sellerId?'?seller_id='+encodeURIComponent(sellerId):''),{headers}).then(r=>r.json()).then(d=>d.success&&setRows(d.data.knowledge||[]));
  useEffect(()=>{load();setEdit(empty(sellerId));setPreview(null);},[sellerId]);
  useEffect(()=>{fetch('/api/rules/seller-personas',{headers}).then(r=>r.json()).then(d=>d.success&&setSellers(d.data.sellers||[]));},[]);
  const select=r=>setEdit({...r,keywords:JSON.parse(r.keywords||'[]').join('، '),followup_keywords:JSON.parse(r.followup_keywords||'[]').join('، '),context_keywords:JSON.parse(r.context_keywords||'[]').join('، '),is_verified:!!r.is_verified,is_active:!!r.is_active});
  const set=(k,v)=>setEdit(e=>({...e,[k]:v}));
  const save=()=>{const id=edit.id||('knowledge-'+Date.now());fetch('/api/rules/sales-knowledge/'+id,{method:'PUT',headers,body:JSON.stringify({...edit,seller_id:sellerId||null})}).then(r=>r.json()).then(d=>{if(d.success){flash('دانش کوتاه ذخیره شد و از پیام بعدی فعال است');setEdit(empty(sellerId));load();}else flash(d.message||'ذخیره نشد');});};
  const archive=id=>fetch('/api/rules/sales-knowledge/'+id,{method:'DELETE',headers}).then(()=>load());
  const runPreview=()=>fetch('/api/rules/sales-knowledge/preview',{method:'POST',headers,body:JSON.stringify({text:previewText,channel:'voice',seller_id:sellerId||null})}).then(r=>r.json()).then(d=>d.success&&setPreview(d.data));
  return <section style={{...box,marginTop:10}}>
    <Title icon="book-open" text="بانک دانش کوتاه فروشنده" />
    <div style={{display:'flex',gap:12,alignItems:'end',marginBottom:14}}><div style={{fontSize:12,color:'var(--text-3)',lineHeight:1.9,flex:1}}>فقط پاسخ‌های تأییدشده وارد مکالمه می‌شوند. تغییر فعال بدون ری‌استارت از پیام بعدی اعمال می‌شود.</div><Field label="پایگاه دانش فروشنده"><select style={{...input,minWidth:180}} value={sellerId} onChange={e=>setSellerId(e.target.value)}><option value="">دانش عمومی</option>{sellers.map(s=><option key={s.id} value={s.id}>{s.profile?.name||s.name}</option>)}</select></Field></div>
    <div style={{display:'grid',gridTemplateColumns:'minmax(260px,.7fr) minmax(0,1.3fr)',gap:16,alignItems:'start'}}>
      <div style={{display:'grid',gap:7}}>{rows.map(r=><div key={r.id} style={{padding:'10px',border:'1px solid var(--border)',borderRadius:9,background:'var(--surface-2)',opacity:r.is_active?1:.5}}><button onClick={()=>select(r)} style={{width:'100%',textAlign:'right',border:0,background:'transparent',color:'var(--text-1)',cursor:'pointer',fontWeight:800}}>{r.topic}</button><div style={{display:'flex',justifyContent:'space-between',fontSize:10,color:'var(--text-3)',marginTop:5}}><span>{r.is_verified?'تأییدشده':'تأییدنشده'} · اولویت {r.priority}</span><button onClick={()=>archive(r.id)} style={{border:0,background:'transparent',color:'#F87171',cursor:'pointer'}}>آرشیو</button></div></div>)}</div>
      <div style={{display:'grid',gap:9}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:9}}><Field label="موضوع"><input style={input} value={edit.topic} onChange={e=>set('topic',e.target.value)}/></Field><Field label="کلیدواژه‌ها (با ویرگول)"><input style={input} value={edit.keywords} onChange={e=>set('keywords',e.target.value)}/></Field></div>
        <Field label="پاسخ مفید یک‌جمله‌ای"><textarea rows="2" style={input} value={edit.answer} onChange={e=>set('answer',e.target.value)}/></Field>
        <Field label="تنها سؤال بعدی"><input style={input} value={edit.next_question} onChange={e=>set('next_question',e.target.value)}/></Field>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:9}}><Field label="پاسخ‌های کوتاه پیرو"><input style={input} value={edit.followup_keywords} onChange={e=>set('followup_keywords',e.target.value)}/></Field><Field label="پاسخ دانشی پیرو"><input style={input} value={edit.followup_answer} onChange={e=>set('followup_answer',e.target.value)}/></Field></div>
        <Field label="سؤال بعد از پاسخ پیرو"><input style={input} value={edit.followup_next_question||''} onChange={e=>set('followup_next_question',e.target.value)}/></Field>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:9}}><Field label="نشانه‌های لازم در تاریخچه"><input style={input} value={edit.context_keywords} onChange={e=>set('context_keywords',e.target.value)}/></Field><Field label="فیلد حافظه"><input style={input} value={edit.capture_field} onChange={e=>set('capture_field',e.target.value)}/></Field></div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:9}}><Field label="منبع"><input style={input} value={edit.source} onChange={e=>set('source',e.target.value)}/></Field><Field label="محدودیت استفاده"><input style={input} value={edit.restrictions} onChange={e=>set('restrictions',e.target.value)}/></Field></div>
        <div style={{display:'flex',gap:12,alignItems:'center'}}><label><input type="checkbox" checked={edit.is_verified} onChange={e=>set('is_verified',e.target.checked)}/> تأییدشده</label><label><input type="checkbox" checked={edit.is_active} onChange={e=>set('is_active',e.target.checked)}/> فعال</label><input type="number" style={{...input,width:100}} value={edit.priority} onChange={e=>set('priority',e.target.value)}/><button onClick={save} style={{marginRight:'auto',border:0,borderRadius:9,padding:'9px 18px',background:'#6366F1',color:'#fff',fontWeight:800,cursor:'pointer'}}>ذخیره دانش</button></div>
        <div style={{borderTop:'1px solid var(--border)',paddingTop:12,display:'grid',gap:8}}><strong style={{fontSize:12,color:'var(--text-1)'}}>پیش‌نمایش تصمیم اجرایی</strong><div style={{display:'flex',gap:8}}><input style={input} value={previewText} onChange={e=>setPreviewText(e.target.value)}/><button onClick={runPreview} style={{border:'1px solid var(--border)',borderRadius:9,padding:'0 15px',background:'var(--surface-2)',color:'var(--text-1)',cursor:'pointer'}}>آزمایش</button></div>{preview&&<pre style={{whiteSpace:'pre-wrap',direction:'rtl',fontFamily:'inherit',fontSize:11,color:'var(--text-2)'}}>{JSON.stringify(preview,null,2)}</pre>}</div>
      </div>
    </div>
  </section>;
};

const IndividualSellers = ({ headers, flash }) => {
  const { useEffect, useState } = React;
  const { Icon } = window.SB_UI;
  const blank = { name:'',role:'مشاور فروش',mission:'',personality:'',tone:'',conversation_style:'',specialty:'',response_length:'کوتاه',question_style:'یک سؤال کوتاه و مرتبط',photo_url:'',is_active:1 };
  const [sellers,setSellers] = useState([]), [selected,setSelected] = useState(''), [profile,setProfile] = useState(blank);
  const [rules,setRules] = useState([]), [newText,setNewText] = useState(''), [newType,setNewType] = useState('guideline'), [loading,setLoading] = useState(true), [preview,setPreview] = useState('');
  const [panel,setPanel] = useState('profile');
  const box={background:'var(--surface)',border:'1px solid var(--border)',borderRadius:14,padding:18};
  const input={width:'100%',boxSizing:'border-box',background:'var(--surface-2)',border:'1px solid var(--border)',color:'var(--text-1)',borderRadius:9,padding:'9px 11px',fontFamily:'inherit',fontSize:12.5,lineHeight:1.8,outline:'none'};
  const loadList=()=>fetch('/api/rules/seller-personas',{headers}).then(r=>r.json()).then(d=>{ if(d.success) setSellers(d.data.sellers||[]); }).finally(()=>setLoading(false));
  useEffect(()=>{ loadList(); },[]);
  const choose=id=>{ setSelected(id); setPanel('profile'); setPreview(''); fetch('/api/rules/seller-personas/'+id,{headers}).then(r=>r.json()).then(d=>{if(d.success){setProfile(d.data.profile||blank);setRules(d.data.rules||[]);}}); };
  const set=(k,v)=>setProfile(p=>({...p,[k]:v}));
  const save=()=>fetch('/api/rules/seller-personas/'+selected,{method:'PUT',headers,body:JSON.stringify({profile,is_active:profile.is_active!==0})}).then(r=>r.json()).then(d=>{if(d.success){flash('شخصیت اختصاصی فروشنده ذخیره شد');loadList();}});
  const loadPreview=()=>fetch(`/api/rules/seller-personas/${selected}/effective-prompt?channel=text`,{headers}).then(r=>r.json()).then(d=>{if(d.success)setPreview(d.data.text||'');});
  const add=()=>{if(!newText.trim())return;fetch(`/api/rules/seller-personas/${selected}/rules`,{method:'POST',headers,body:JSON.stringify({type:newType,text:newText})}).then(r=>r.json()).then(d=>{if(d.success){setNewText('');choose(selected);}})};
  const toggle=r=>fetch(`/api/rules/seller-personas/${selected}/rules/${r.id}`,{method:'PUT',headers,body:JSON.stringify({is_active:r.is_active?0:1})}).then(()=>choose(selected));
  const remove=r=>{if(confirm('این قانون اختصاصی حذف شود؟'))fetch(`/api/rules/seller-personas/${selected}/rules/${r.id}`,{method:'DELETE',headers}).then(()=>choose(selected));};
  return <section style={{...box,marginTop:10}}>
    <Title icon="users" text="شخصیت اختصاصی فروشنده‌ها" />
    <div style={{fontSize:12,color:'var(--text-3)',lineHeight:1.9,marginBottom:14}}>پروفایل مشترک بالا برای همه اعمال می‌شود. این بخش فقط تفاوت‌های شخصیتی و قوانین اختصاصی هر فروشنده را اضافه می‌کند.</div>
    {loading?<div style={{color:'var(--text-3)'}}>در حال دریافت فروشنده‌ها…</div>:<div style={{display:'grid',gridTemplateColumns:'260px minmax(0,1fr)',gap:16,alignItems:'start'}}>
      <div style={{display:'grid',gap:7}}>{sellers.map(s=><button key={s.id} onClick={()=>choose(s.id)} style={{display:'flex',alignItems:'center',gap:10,textAlign:'right',padding:'11px 12px',borderRadius:9,cursor:'pointer',border:`1px solid ${selected===s.id?'#818CF8':'var(--border)'}`,background:selected===s.id?'rgba(99,102,241,.11)':'var(--surface-2)',color:'var(--text-2)'}}>
        {s.profile?.photo_url
          ? <img src={s.profile.photo_url} alt="" style={{width:34,height:34,borderRadius:'50%',objectFit:'cover',flexShrink:0}}/>
          : <div style={{width:34,height:34,borderRadius:'50%',flexShrink:0,background:'var(--surface)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,fontWeight:800,color:'var(--text-3)'}}>{(s.profile?.name||s.name||'?').charAt(0)}</div>}
        <div style={{flex:1}}><div style={{fontWeight:850}}>{s.profile?.name||s.name}</div><div style={{fontSize:10.5,color:'var(--text-3)',marginTop:3}}>{s.profile?'شخصیت اختصاصی فعال':'هنوز شخصیت اختصاصی ندارد'} · {s.rules_count||0} قانون</div></div>
      </button>)}</div>
      {!selected?<div style={{padding:35,textAlign:'center',color:'var(--text-3)',border:'1px dashed var(--border)',borderRadius:12}}>یک فروشنده را انتخاب کنید.</div>:<div style={{display:'grid',gap:14}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,borderBottom:'1px solid var(--border)',paddingBottom:12}}>
          <div style={{display:'flex',gap:7}}>
            {[['profile','شخصیت اختصاصی'],['rules','قوانین اختصاصی']].map(([id,label])=><button key={id} type="button" aria-label={label} aria-pressed={panel===id} onClick={()=>setPanel(id)} style={{border:`1px solid ${panel===id?'#818CF8':'var(--border)'}`,borderRadius:9,padding:'7px 13px',background:panel===id?'rgba(99,102,241,.12)':'var(--surface-2)',color:panel===id?'#A5B4FC':'var(--text-2)',fontWeight:800,cursor:'pointer'}}>{label}</button>)}
          </div>
          <button onClick={()=>set('is_active',profile.is_active?0:1)} style={{border:0,borderRadius:20,padding:'6px 12px',background:profile.is_active?'#10B98122':'#64748b22',color:profile.is_active?'#34D399':'#94a3b8',cursor:'pointer'}}>{profile.is_active?'فعال':'غیرفعال'}</button>
        </div>

        {panel==='profile'&&<div style={{display:'grid',gap:12}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}><Field label="نام نمایشی"><input style={input} value={profile.name||''} onChange={e=>set('name',e.target.value)}/></Field><Field label="نقش اختصاصی"><input style={input} value={profile.role||''} onChange={e=>set('role',e.target.value)}/></Field></div>
          <Field label="لینک عکس/آواتار (فقط داخل پنل ادمین نمایش داده می‌شود، هرگز برای مشتری ارسال نمی‌شود)">
            <div style={{display:'flex',gap:10,alignItems:'center'}}>
              {profile.photo_url
                ? <img src={profile.photo_url} alt="" style={{width:44,height:44,borderRadius:'50%',objectFit:'cover',border:'1px solid var(--border)',flexShrink:0}}/>
                : <div style={{width:44,height:44,borderRadius:'50%',border:'1px dashed var(--border)',flexShrink:0}}/>}
              <input style={input} placeholder="مثلاً /sellers/hajian.jpg یا آدرس فایل روی سرور" value={profile.photo_url||''} onChange={e=>set('photo_url',e.target.value)}/>
            </div>
          </Field>
          {[['specialty','تخصص'],['mission','مأموریت اختصاصی'],['personality','ویژگی‌های شخصیتی'],['tone','لحن اختصاصی'],['conversation_style','سبک گفت‌وگو'],['response_length','طول پاسخ'],['question_style','سبک سؤال‌پرسیدن']].map(([k,l])=><Field key={k} label={l}><textarea rows="2" style={{...input,resize:'vertical'}} value={profile[k]||''} onChange={e=>set(k,e.target.value)}/></Field>)}
          <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}><button onClick={loadPreview} style={{border:'1px solid var(--border)',borderRadius:9,padding:'9px 18px',background:'var(--surface-2)',color:'var(--text-1)',fontWeight:800,cursor:'pointer'}}>پیش‌نمایش پرامپت مؤثر</button><button onClick={save} style={{border:0,borderRadius:9,padding:'9px 18px',background:'#6366F1',color:'#fff',fontWeight:800,cursor:'pointer'}}>ذخیره شخصیت فروشنده</button></div>
          {preview&&<Field label="پرامپت نهایی مؤثر و لایه‌بندی‌شده"><textarea readOnly rows="12" style={{...input,resize:'vertical'}} value={preview}/></Field>}
        </div>}

        {panel==='rules'&&<div><strong style={{fontSize:12.5,color:'var(--text-1)'}}>قوانین اختصاصی</strong>
          <div style={{display:'flex',gap:7,marginTop:9}}><select style={{...input,width:130}} value={newType} onChange={e=>setNewType(e.target.value)}><option value="guideline">خط‌مشی</option><option value="red_line">خط قرمز</option></select><input style={input} value={newText} onChange={e=>setNewText(e.target.value)} placeholder="قانون مخصوص همین فروشنده…"/><button onClick={add} style={{border:0,borderRadius:8,padding:'0 14px',background:'#6366F1',color:'#fff',cursor:'pointer'}}>افزودن</button></div>
          <div style={{display:'grid',gap:7,marginTop:10}}>{rules.map(r=><div key={r.id} style={{display:'flex',gap:8,alignItems:'center',padding:'8px 10px',borderRadius:8,background:'var(--surface-2)',opacity:r.is_active?1:.45}}><span>{r.type==='red_line'?'🔴':'🔵'}</span><span style={{fontSize:9,padding:'2px 5px',borderRadius:5,background:r.conflict?'#EF444422':'#6366F122',color:r.conflict?'#F87171':'#A5B4FC'}}>{r.layer==='shared'?'مشترک':'اختصاصی'}{r.conflict?' · متعارض':''}</span><span style={{flex:1,fontSize:11.5,color:'var(--text-2)'}}>{r.text}</span><button className="icon-btn" onClick={()=>toggle(r)}><Icon name={r.is_active?'eye':'eye-off'} size={13}/></button><button className="icon-btn" onClick={()=>remove(r)}><Icon name="trash-2" size={13} color="#F87171"/></button></div>)}</div>
        </div>}
      </div>}
    </div>}
  </section>;
};

const SellerCloneTool = ({ headers, flash }) => {
  const { useEffect, useState } = React;
  const { Icon } = window.SB_UI;
  const box={background:'var(--surface)',border:'1px solid var(--border)',borderRadius:14,padding:18};
  const input={width:'100%',boxSizing:'border-box',background:'var(--surface-2)',border:'1px solid var(--border)',color:'var(--text-1)',borderRadius:9,padding:'9px 11px',fontFamily:'inherit',fontSize:12.5,lineHeight:1.8,outline:'none'};
  const [sellers,setSellers]=useState([]);
  const [sellerId,setSellerId]=useState('hajian');
  const [transcripts,setTranscripts]=useState([{name:'مکالمه ۱',text:''}]);
  const [running,setRunning]=useState(false);
  const [report,setReport]=useState(null);
  const [error,setError]=useState('');
  const [history,setHistory]=useState([]);
  const [historyOpenId,setHistoryOpenId]=useState('');
  const [historyDetail,setHistoryDetail]=useState(null);

  useEffect(()=>{fetch('/api/rules/seller-personas',{headers}).then(r=>r.json()).then(d=>d.success&&setSellers(d.data.sellers||[]));},[]);
  const loadHistory=()=>fetch('/api/rules/seller-clone/history?sellerId='+encodeURIComponent(sellerId),{headers}).then(r=>r.json()).then(d=>d.success&&setHistory(d.data.runs||[]));
  useEffect(()=>{ loadHistory(); setHistoryOpenId(''); setHistoryDetail(null); },[sellerId]);

  const setTranscript=(i,field,val)=>setTranscripts(list=>list.map((t,idx)=>idx===i?{...t,[field]:val}:t));
  const addTranscript=()=>setTranscripts(list=>[...list,{name:`مکالمه ${list.length+1}`,text:''}]);
  const removeTranscript=i=>setTranscripts(list=>list.filter((_,idx)=>idx!==i));

  const run=()=>{
    const valid = transcripts.filter(t=>t.text && t.text.trim().length>20);
    if(!valid.length){ flash('حداقلِ یک رونوشتِ واقعی (بیش از چند خط) لازمه'); return; }
    setRunning(true); setError(''); setReport(null);
    fetch('/api/rules/seller-clone',{method:'POST',headers,body:JSON.stringify({sellerId,transcripts:valid})})
      .then(r=>r.json()).then(d=>{
        if(d.success){ setReport(d.data); flash('کلونِ فروشنده تمام شد'); loadHistory(); }
        else setError(d.message||'اجرا نشد');
      }).catch(e=>setError(e.message||'ارتباط برقرار نشد')).finally(()=>setRunning(false));
  };

  const openHistory=id=>{
    if(historyOpenId===id){ setHistoryOpenId(''); setHistoryDetail(null); return; }
    setHistoryOpenId(id); setHistoryDetail(null);
    fetch('/api/rules/seller-clone/history/'+id,{headers}).then(r=>r.json()).then(d=>d.success&&setHistoryDetail(d.data));
  };

  return <section style={box}>
    <Title icon="sparkles" text="کلونِ فروشنده" />
    <div style={{fontSize:12,color:'var(--text-3)',lineHeight:1.9,marginBottom:14}}>
      چندتا رونوشتِ واقعیِ مکالمه بده تا سیستم فکت/اعتراض/دانش/اتیکتِ مشتری رو ازش یاد بگیره — بدونِ حذفِ چیزی که قبلاً یاد گرفته. بعدش خودکار تست می‌کنه چند درصد قابلِ بازیابی‌ه؛ اگه زیرِ ۹۵٪ موند، یه‌بار دیگه سخت‌گیرانه‌تر تلاش می‌کنه و اگه بازم نشد، گزارشِ دقیق می‌ده.
    </div>

    <Field label="فروشنده">
      <select style={{...input,maxWidth:260}} value={sellerId} onChange={e=>setSellerId(e.target.value)}>
        {sellers.map(s=><option key={s.id} value={s.id}>{s.profile?.name||s.name}</option>)}
      </select>
    </Field>

    <div style={{display:'grid',gap:10,marginTop:10}}>
      {transcripts.map((t,i)=><div key={i} style={{border:'1px solid var(--border)',borderRadius:10,padding:12,background:'var(--surface-2)'}}>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:8}}>
          <input style={{...input,maxWidth:220}} value={t.name} onChange={e=>setTranscript(i,'name',e.target.value)} placeholder="اسمِ مکالمه (اختیاری)"/>
          {transcripts.length>1 && <button onClick={()=>removeTranscript(i)} className="icon-btn" title="حذف"><Icon name="trash-2" size={14} color="#F87171"/></button>}
        </div>
        <textarea rows="6" style={{...input,resize:'vertical',fontSize:11.5}} value={t.text} onChange={e=>setTranscript(i,'text',e.target.value)} placeholder="متنِ کاملِ رونوشتِ مکالمه رو اینجا بچسبونید…"/>
      </div>)}
    </div>

    <div style={{display:'flex',gap:8,marginTop:10}}>
      <button onClick={addTranscript} style={{border:'1px solid var(--border)',borderRadius:9,padding:'9px 16px',background:'var(--surface-2)',color:'var(--text-1)',cursor:'pointer'}}>+ افزودنِ مکالمه‌یِ دیگر</button>
      <button onClick={run} disabled={running} style={{marginRight:'auto',border:0,borderRadius:9,padding:'9px 22px',background:running?'#6366F188':'#6366F1',color:'#fff',fontWeight:800,cursor:running?'default':'pointer'}}>{running?'در حالِ اجرا… (ممکنه چند دقیقه طول بکشه)':'اجرایِ کلون'}</button>
    </div>

    {error && <div style={{marginTop:14,padding:12,borderRadius:9,background:'#EF444422',color:'#F87171',fontSize:12}}>{error}</div>}

    {report && <div style={{marginTop:18,borderTop:'1px solid var(--border)',paddingTop:14,display:'grid',gap:12}}>
      <strong style={{fontSize:13,color:'var(--text-1)'}}>گزارشِ نهایی</strong>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(120px,1fr))',gap:9}}>
        <CloneMetric label="فکت‌هایِ جدید" value={report.totalAdded?.facts}/>
        <CloneMetric label="اعتراض‌هایِ جدید" value={report.totalAdded?.objections}/>
        <CloneMetric label="دانشِ جدید" value={report.totalAdded?.faq}/>
        <CloneMetric label="کلیدواژه‌هایِ اتیکت" value={report.totalAdded?.keywords}/>
        <CloneMetric label="امتیازِ نهایی" value={report.score?.pct+'٪'} tone={report.score?.pct>=95?'#34D399':'#FBBF24'}/>
      </div>
      {report.score?.pct<95 && report.score?.failedChecks?.length>0 && <div>
        <div style={{fontSize:12,color:'#FBBF24',fontWeight:800,marginBottom:6}}>⚠️ زیرِ ۹۵٪ موند — این‌ها ردشدن:</div>
        <div style={{display:'grid',gap:5}}>{report.score.failedChecks.map((c,i)=><div key={i} style={{fontSize:11.5,color:'var(--text-2)',padding:'6px 9px',background:'var(--surface-2)',borderRadius:7}}>[{c.type}] {c.quote}</div>)}</div>
      </div>}
      {report.seller_fingerprints?.length>0 && <div>
        <div style={{fontSize:12,color:'var(--text-1)',fontWeight:800,marginBottom:6}}>اثرِانگشت‌هایِ لحنِ فروشنده (نیازِ بازبینیِ دستی):</div>
        <div style={{display:'grid',gap:5}}>{report.seller_fingerprints.slice(0,15).map((fp,i)=><div key={i} style={{fontSize:11.5,color:'var(--text-2)',padding:'6px 9px',background:'var(--surface-2)',borderRadius:7}}><strong style={{color:'#A5B4FC'}}>[{fp.topic||'-'}]</strong> {fp.quote}</div>)}</div>
      </div>}
    </div>}

    <div style={{marginTop:22,borderTop:'1px solid var(--border)',paddingTop:14}}>
      <strong style={{fontSize:13,color:'var(--text-1)'}}>مکالماتِ ثبت‌شده برایِ این فروشنده</strong>
      {!history.length
        ? <div style={{marginTop:10,fontSize:12,color:'var(--text-3)'}}>هنوز مکالمه‌ای برایِ این فروشنده ثبت نشده.</div>
        : <div style={{display:'grid',gap:7,marginTop:10}}>{history.map(h=><div key={h.id}>
            <button onClick={()=>openHistory(h.id)} style={{width:'100%',textAlign:'right',display:'flex',alignItems:'center',gap:10,padding:'10px 12px',border:'1px solid var(--border)',borderRadius:9,background:historyOpenId===h.id?'rgba(99,102,241,.1)':'var(--surface-2)',color:'var(--text-2)',cursor:'pointer'}}>
              <Icon name={historyOpenId===h.id?'chevron-up':'chevron-down'} size={14}/>
              <span style={{flex:1}}>{h.names.join('، ')}</span>
              <span style={{fontSize:11,color:h.scorePct>=95?'#34D399':'#FBBF24'}}>{h.scorePct}٪</span>
              <span style={{fontSize:10,color:'var(--text-3)'}}>{h.createdAt}</span>
            </button>
            {historyOpenId===h.id && <div style={{marginTop:7,padding:12,border:'1px solid var(--border)',borderRadius:9,background:'var(--surface-2)'}}>
              {!historyDetail ? <div style={{fontSize:12,color:'var(--text-3)'}}>در حالِ بارگذاری…</div> : <div style={{display:'grid',gap:10}}>
                {historyDetail.transcripts.map((t,i)=><div key={i}>
                  <div style={{fontSize:11.5,fontWeight:800,color:'#A5B4FC',marginBottom:4}}>{t.name}</div>
                  <pre style={{whiteSpace:'pre-wrap',fontFamily:'inherit',fontSize:11,lineHeight:1.9,color:'var(--text-2)',background:'var(--surface)',padding:10,borderRadius:7,margin:0,maxHeight:220,overflowY:'auto'}}>{t.text}</pre>
                </div>)}
                <div style={{fontSize:11.5,color:'var(--text-3)'}}>فکت: {historyDetail.report?.totalAdded?.facts} · اعتراض: {historyDetail.report?.totalAdded?.objections} · دانش: {historyDetail.report?.totalAdded?.faq} · کلیدواژه: {historyDetail.report?.totalAdded?.keywords}</div>
              </div>}
            </div>}
          </div>)}</div>}
    </div>
  </section>;
};
const CloneMetric = ({label,value,tone}) => <div style={{background:'var(--surface-2)',borderRadius:10,padding:'10px 12px'}}><div style={{fontSize:10.5,color:'var(--text-3)'}}>{label}</div><div style={{fontSize:16,fontWeight:800,marginTop:4,color:tone||'var(--text-1)'}}>{value ?? '—'}</div></div>;

const Title = ({icon,text}) => <div style={{display:'flex',alignItems:'center',gap:8,fontSize:14,fontWeight:900,color:'var(--text-1)',marginBottom:14}}><window.SB_UI.Icon name={icon} size={17} color="#818CF8"/>{text}</div>;
const Field = ({label,children}) => <label style={{display:'block',fontSize:11.5,color:'var(--text-3)',fontWeight:700,marginBottom:12}}><span style={{display:'block',marginBottom:6}}>{label}</span>{children}</label>;
const Grid = ({children}) => <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:12}}>{children}</div>;
window.AiSellerPersona = AiSellerPersona;