TrashView.tsx

import React, { useState } from 'react';
import { RotateCcw, Trash2 } from 'lucide-react';
import { Modal } from './Modal';
import { Script } from './types';
interface Props { scripts:Script[]; onRestore:(id:string)=>void; onPermanentDelete:(id:string)=>void; onEmptyTrash:()=>void; }
export const TrashView:React.FC<Props>=({scripts,onRestore,onPermanentDelete,onEmptyTrash})=>{const[action,setAction]=useState<{kind:'restore'|'delete'|'empty';script?:Script}|null>(null);if(!scripts.length)return <div className="py-20 text-center text-[var(--text-muted)]"><Trash2 className="w-14 h-14 mx-auto opacity-25 mb-3"/><h2 className="font-bold text-lg text-[var(--text-main)]">Tong Sampah Kosong</h2></div>;return <><div className="space-y-4"><div className="flex items-center justify-between"><div><h2 className="font-bold text-xl">Tong Sampah</h2><p className="text-xs text-[var(--text-muted)]">{scripts.length} item dapat dipulihkan.</p></div><button onClick={()=>setAction({kind:'empty'})} className="px-3 py-2 rounded-xl bg-red-600 text-white text-xs font-bold">Kosongkan</button></div><div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">{scripts.map(s=><div key={s.id} className="p-4 rounded-2xl bg-[var(--bg-card)] border border-[var(--border-color)]"><div className="flex justify-between gap-2"><strong className="truncate">{s.name}</strong><span className="text-[10px]">v{s.version}</span></div><p className="text-xs text-[var(--text-muted)] mt-2 line-clamp-2">{s.description||'Tanpa deskripsi.'}</p><div className="flex gap-2 mt-4"><button onClick={()=>setAction({kind:'restore',script:s})} className="flex-1 py-2 rounded-lg bg-green-50 text-green-700 text-xs font-bold flex items-center justify-center gap-1"><RotateCcw className="w-3 h-3"/>Pulihkan</button><button onClick={()=>setAction({kind:'delete',script:s})} className="flex-1 py-2 rounded-lg bg-red-50 text-red-700 text-xs font-bold flex items-center justify-center gap-1"><Trash2 className="w-3 h-3"/>Hapus</button></div></div>)}</div></div><Modal isOpen={!!action} onClose={()=>setAction(null)} title={action?.kind==='empty'?'Kosongkan Tong Sampah':action?.kind==='restore'?'Pulihkan Skrip':'Hapus Permanen'} message={action?.kind==='empty'?'Semua item di Trash akan dihapus permanen.':action?.kind==='restore'?`Pulihkan "${action.script?.name}"?`:`Hapus "${action?.script?.name}" secara permanen?`} type={action?.kind==='restore'?'info':'danger'} confirmLabel={action?.kind==='restore'?'Pulihkan':action?.kind==='empty'?'Kosongkan':'Hapus'} onConfirm={()=>{if(!action)return;if(action.kind==='empty')onEmptyTrash();else if(action.kind==='restore'&&action.script)onRestore(action.script.id);else if(action.script)onPermanentDelete(action.script.id);setAction(null)}}/></>};