import React,{useEffect,useState} from 'react';
import {request,errorMessage,type Paginated} from './api';
export type Category={id:number;name:string;slug:string;content_type:string;locale:string;version:number;contents_count?:number;deleted_at?:string|null};
export function CategoryManager({types}:{types:Record<string,string>}){
 const [page,setPage]=useState<Paginated<Category>|null>(null),[number,setNumber]=useState(1),[scope,setScope]=useState(''),[trash,setTrash]=useState(false),[refresh,setRefresh]=useState(0),[error,setError]=useState(''),[notice,setNotice]=useState(''),[busy,setBusy]=useState(false),[editing,setEditing]=useState<Category|null>(null),[name,setName]=useState(''),[slug,setSlug]=useState(''),[type,setType]=useState('post'),[locale,setLocale]=useState('en');
 useEffect(()=>{let active=true;request<Paginated<Category>>(`/categories?${new URLSearchParams({page:String(number),...(scope?{content_type:scope}:{}),trash:trash?'1':'0'})}`).then(x=>{if(active)setPage(x);}).catch(e=>{if(active)setError(errorMessage(e));});return()=>{active=false;};},[number,scope,trash,refresh]);
 function reset(){setEditing(null);setName('');setSlug('');}
 async function save(e:React.FormEvent){e.preventDefault();setBusy(true);setError('');try{await request(editing?`/categories/${editing.id}`:'/categories',{method:editing?'PUT':'POST',body:JSON.stringify({name,slug,content_type:type,locale,...(editing?{version:editing.version}:{})})});reset();setNotice('دسته ذخیره شد.');setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 async function action(category:Category,restore=false){if(!restore&&!window.confirm('دسته به سطل زباله منتقل شود؟'))return;setBusy(true);setError('');try{await request(`/categories/${category.id}${restore?'/restore':''}`,{method:restore?'POST':'DELETE',body:JSON.stringify({version:category.version})});reset();setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 return <section className="manager-module"><h2>دسته‌بندی محتوا</h2><p className="muted">هر دسته به یک نوع محتوا و یک زبان تعلق دارد.</p>{error&&<p className="admin-alert error" role="alert">{error}</p>}{notice&&<p className="admin-alert" role="status">{notice}</p>}<form className="card module-form" onSubmit={save}><h3>{editing?'ویرایش دسته':'دسته جدید'}</h3><div className="form-grid"><label>نام دسته<input required value={name} onChange={e=>setName(e.target.value)}/></label><label>نامک<input required dir="ltr" disabled={!!editing} value={slug} onChange={e=>setSlug(e.target.value)}/></label><label>نوع محتوا<select disabled={!!editing} value={type} onChange={e=>setType(e.target.value)}>{Object.entries(types).map(([key,label])=><option key={key} value={key}>{label}</option>)}</select></label><label>زبان<select disabled={!!editing} value={locale} onChange={e=>setLocale(e.target.value)}><option value="en">English</option><option value="fa">فارسی</option></select></label></div><div className="editor-actions"><button className="btn btn-primary btn-sm" disabled={busy}>ذخیره دسته</button>{editing&&<button type="button" className="btn btn-ghost btn-sm" onClick={reset}>انصراف</button>}</div></form>
 <div className="module-tools"><label>نوع محتوا<select value={scope} onChange={e=>{setScope(e.target.value);setNumber(1);}}><option value="">همه</option>{Object.entries(types).map(([key,label])=><option key={key} value={key}>{label}</option>)}</select></label><label className="checkbox"><input type="checkbox" checked={trash} onChange={e=>{setTrash(e.target.checked);setNumber(1);reset();}}/>سطل زباله</label></div><div className="card table-scroll"><table><thead><tr><th>دسته</th><th>نوع / زبان</th><th>محتواها</th><th>عملیات</th></tr></thead><tbody>{page?.data.map(category=><tr key={category.id}><td>{category.name}<small dir="ltr">{category.slug}</small></td><td>{types[category.content_type]} · {category.locale}</td><td>{category.contents_count??0}</td><td>{category.deleted_at?<button disabled={busy} onClick={()=>action(category,true)}>بازیابی</button>:<><button onClick={()=>{setEditing(category);setName(category.name);setSlug(category.slug);setType(category.content_type);setLocale(category.locale);}}>ویرایش</button><button disabled={busy} onClick={()=>action(category)}>سطل زباله</button></>}</td></tr>)}</tbody></table>{page?.data.length===0&&<p className="empty muted">دسته‌ای در این فهرست نیست.</p>}</div><nav className="pagination"><button disabled={number<=1} onClick={()=>setNumber(x=>x-1)}>قبلی</button><span>{page?.total??0} دسته</span><button disabled={!page||number>=page.last_page} onClick={()=>setNumber(x=>x+1)}>بعدی</button></nav></section>;
}