import React,{useEffect,useState} from 'react';
import {request,errorMessage,type Paginated} from './api';
export type Media={id:number;uuid:string;original_name:string;alt:string;caption:string|null;is_public:boolean;version:number;preview_url:string;public_url:string|null;width:number;height:number;size:number;deleted_at:string|null};
export function MediaLibrary({onPick}:{onPick?:(media:Media)=>void}){
 const [page,setPage]=useState<Paginated<Media>|null>(null),[number,setNumber]=useState(1),[q,setQ]=useState(''),[trash,setTrash]=useState(false),[refresh,setRefresh]=useState(0),[busy,setBusy]=useState(false),[loading,setLoading]=useState(true),[error,setError]=useState(''),[notice,setNotice]=useState(''),[editing,setEditing]=useState<Media|null>(null),[file,setFile]=useState<File|null>(null);
 useEffect(()=>{let active=true;setLoading(true);const timer=setTimeout(()=>{request<Paginated<Media>>(`/media?${new URLSearchParams({page:String(number),q,trash:trash?'1':'0'})}`).then(x=>{if(active)setPage(x);}).catch(e=>{if(active)setError(errorMessage(e));}).finally(()=>{if(active)setLoading(false);});},150);return()=>{active=false;clearTimeout(timer);};},[q,number,trash,refresh]);
 async function upload(){if(!file)return;setBusy(true);setError('');try{const data=new FormData();data.append('file',file);const result=await request<{data:Media}>('/media',{method:'POST',body:data});setEditing(result.data);setNotice('تصویر ذخیره شد؛ تا تأیید شما خصوصی می‌ماند.');setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 async function save(pickAfter=false){if(!editing)return;setBusy(true);setError('');try{const result=await request<{data:Media}>(`/media/${editing.id}`,{method:'PUT',body:JSON.stringify({alt:editing.alt,caption:editing.caption,is_public:editing.is_public,version:editing.version})});setEditing(result.data);setNotice('مشخصات تصویر ذخیره شد.');if(pickAfter)onPick?.(result.data);setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 async function remove(media:Media){if(!window.confirm('تصویر به سطل زباله منتقل شود؟'))return;setBusy(true);setError('');try{await request(`/media/${media.id}`,{method:'DELETE',body:JSON.stringify({version:media.version})});setEditing(null);setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 async function restore(media:Media){setBusy(true);setError('');try{await request(`/media/${media.id}/restore`,{method:'POST',body:JSON.stringify({version:media.version})});setRefresh(x=>x+1);}catch(e){setError(errorMessage(e));}finally{setBusy(false);}}
 return <section className="manager-module"><header className="module-heading"><div><h2>{onPick?'انتخاب تصویر شاخص':'کتابخانه رسانه'}</h2><p className="muted">JPEG، PNG و WebP؛ حداکثر ۵ مگابایت و ۸ میلیون پیکسل.</p></div></header>{error&&<p className="admin-alert error" role="alert">{error}</p>}{notice&&<p className="admin-alert" role="status">{notice}</p>}
 <div className="card upload-box"><label>تصویر جدید<input type="file" accept="image/jpeg,image/png,image/webp" onChange={e=>setFile(e.target.files?.[0]??null)}/></label><button type="button" className="btn btn-primary btn-sm" disabled={!file||busy} onClick={upload}>{busy?'در حال انجام…':'بارگذاری تصویر'}</button></div>
 <div className="module-tools"><label>جست‌وجوی فایل<input value={q} onChange={e=>{setQ(e.target.value);setNumber(1);}}/></label>{!onPick&&<label className="checkbox"><input type="checkbox" checked={trash} onChange={e=>{setTrash(e.target.checked);setNumber(1);setEditing(null);}}/>سطل زباله</label>}</div>
 {editing&&!editing.deleted_at&&<div className="card media-editor"><img src={editing.preview_url} alt={editing.alt||'پیش‌نمایش تصویر'}/><div><h3>{editing.original_name}</h3><p className="muted">{editing.width} × {editing.height} · {Math.ceil(editing.size/1024)} KB</p><label>متن جایگزین تصویر<input value={editing.alt} onChange={e=>setEditing({...editing,alt:e.target.value})}/></label><label>توضیح تصویر<textarea value={editing.caption??''} onChange={e=>setEditing({...editing,caption:e.target.value})}/></label><label className="checkbox"><input type="checkbox" checked={editing.is_public} onChange={e=>setEditing({...editing,is_public:e.target.checked})}/>اجازه نمایش عمومی این تصویر در سایت</label><div className="editor-actions"><button type="button" className="btn btn-primary btn-sm" disabled={busy} onClick={()=>save()}>ذخیره مشخصات</button>{onPick&&<button type="button" className="btn btn-ghost btn-sm" disabled={busy} onClick={()=>save(true)}>ذخیره و انتخاب این تصویر</button>}<button type="button" className="btn btn-ghost btn-sm" onClick={()=>setEditing(null)}>بستن</button></div></div></div>}
 {loading?<p role="status" className="empty">در حال بارگذاری…</p>:!page?.data.length?<p className="empty muted">تصویری در این فهرست نیست.</p>:<div className="media-grid">{page.data.map(media=><article className="card media-tile" key={media.id}>{!media.deleted_at&&<button type="button" className="media-preview" onClick={()=>setEditing(media)}><img src={media.preview_url} alt={media.alt||media.original_name} loading="lazy"/></button>}<strong>{media.original_name}</strong><span className="muted">{media.is_public?'عمومی':'خصوصی'} · {media.width} × {media.height}</span><div>{media.deleted_at?<button type="button" disabled={busy} onClick={()=>restore(media)}>بازیابی</button>:<><button type="button" onClick={()=>setEditing(media)}>مشخصات</button>{onPick?<button type="button" onClick={()=>onPick(media)}>انتخاب</button>:<button type="button" disabled={busy} onClick={()=>remove(media)}>انتقال به سطل زباله</button>}</>}</div></article>)}</div>}
 <nav className="pagination" aria-label="صفحه‌بندی رسانه"><button type="button" disabled={number<=1||loading} onClick={()=>setNumber(x=>x-1)}>قبلی</button><span>{page?.total??0} تصویر · {number} از {page?.last_page??1}</span><button type="button" disabled={!page||number>=page.last_page||loading} onClick={()=>setNumber(x=>x+1)}>بعدی</button></nav></section>;
}