import React from 'react';
export type SectionItem={title?:string;text?:string;label?:string;value?:string;unit?:string;name?:string;role?:string;initials?:string;tags?:string[];image_uuid?:string;link?:string};
export type SectionData={eyebrow?:string;title?:string;highlight?:string;text?:string;link?:string;label?:string;items?:SectionItem[]};
export type Section={key:string;type:string;enabled:boolean;data:SectionData};
const typeLabels:Record<string,string>={hero:'عنوان اصلی',cards:'کارت‌ها',text:'متن',chips:'برچسب‌ها',team:'اعضای تیم',cta:'دعوت به اقدام',stats:'آمار',trust:'نام همکاران',faq:'پرسش و پاسخ'};
const labels:Record<string,string>={eyebrow:'عنوان کوچک',title:'عنوان',highlight:'بخش رنگی عنوان',text:'توضیح',link:'آدرس دکمه',label:'متن دکمه',value:'عدد',unit:'واحد',name:'نام',role:'سمت',initials:'حروف نام',tags:'برچسب‌ها'};
export function SectionEditor({sections,onChange}:{sections:Section[];onChange:(value:Section[])=>void}){
 function update(index:number,next:Section){onChange(sections.map((s,i)=>i===index?next:s));}
 function move(index:number,offset:number){const next=[...sections];[next[index],next[index+offset]]=[next[index+offset],next[index]];onChange(next);}
 function dataFields(s:Section):string[]{return s.type==='hero'?['eyebrow','title','highlight','text','label','link']:s.type==='cta'?['eyebrow','title','text','label','link']:['eyebrow','title','text'];}
 function itemFields(s:Section):string[]{return s.type==='team'?['name','role','initials','text','tags']:s.type==='stats'?['value','unit','label']:['chips','trust'].includes(s.type)?['label']:['label','title','text','tags'];}
 return <section className="section-editor"><h3>بخش‌های صفحه</h3><p className="muted">متن‌ها را ویرایش کنید؛ ترتیب و نمایش هر بخش قابل تغییر است.</p>{sections.map((section,index)=><details key={section.key} className="section-editor-card"><summary>{index+1}. {typeLabels[section.type]??section.type} — {section.data.title||'بخش بدون عنوان'}</summary><div className="section-controls"><label className="checkbox"><input type="checkbox" checked={section.enabled} onChange={e=>update(index,{...section,enabled:e.target.checked})}/>نمایش بخش</label><button type="button" disabled={index===0} onClick={()=>move(index,-1)}>بالاتر ↑</button><button type="button" disabled={index===sections.length-1} onClick={()=>move(index,1)}>پایین‌تر ↓</button><button type="button" onClick={()=>{if(window.confirm('این بخش از صفحه حذف شود؟'))onChange(sections.filter((_,i)=>i!==index));}}>حذف بخش</button></div>
 {dataFields(section).map(key=><label key={key}>{labels[key]}{key==='text'?<textarea rows={3} value={String(section.data[key as keyof SectionData]??'')} onChange={e=>update(index,{...section,data:{...section.data,[key]:e.target.value}})}/>:<input value={String(section.data[key as keyof SectionData]??'')} dir={key==='link'?'ltr':undefined} onChange={e=>update(index,{...section,data:{...section.data,[key]:e.target.value}})}/>}</label>)}
 {section.data.items?.map((item,itemIndex)=><fieldset className="section-item" key={itemIndex}><legend>مورد {itemIndex+1}</legend>{itemFields(section).map(key=><label key={key}>{labels[key]}{key==='text'?<textarea rows={3} value={item.text??''} onChange={e=>{const items=[...(section.data.items??[])];items[itemIndex]={...item,text:e.target.value};update(index,{...section,data:{...section.data,items}});}}/>:<input value={key==='tags'?(item.tags??[]).join(' | '):String(item[key as keyof SectionItem]??'')} onChange={e=>{const items=[...(section.data.items??[])];items[itemIndex]={...item,[key]:key==='tags'?e.target.value.split('|').map(x=>x.trim()).filter(Boolean):e.target.value};update(index,{...section,data:{...section.data,items}});}}/>}</label>)}<button type="button" onClick={()=>update(index,{...section,data:{...section.data,items:section.data.items?.filter((_,i)=>i!==itemIndex)}})}>حذف مورد</button></fieldset>)}
 {!['hero','cta','text'].includes(section.type)&&<button type="button" onClick={()=>update(index,{...section,data:{...section.data,items:[...(section.data.items??[]),{label:''}]}})}>+ افزودن مورد</button>}
 </details>)}<label>افزودن بخش<select value="" onChange={e=>{if(!e.target.value)return;onChange([...sections,{key:`section-${Date.now().toString(36)}`,type:e.target.value,enabled:true,data:{title:'',text:'',...(!['hero','cta','text'].includes(e.target.value)?{items:[]}:{})}}]);}}><option value="">انتخاب نوع بخش…</option>{Object.entries(typeLabels).map(([value,label])=><option key={value} value={value}>{label}</option>)}</select></label></section>;
}