import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { TrashActionButtons } from './TrashActionButtons'
import { RotateCcw, Trash2, Calendar, MapPin } from 'lucide-react'

export default async function AdminTrashPage() {
  const deletedListings = await mockDb.getDeletedListings()

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">çöp kutusu</h2>
          <p className="text-ink/65 text-xs font-medium mt-1">
            Silinmiş mekanları buradan görebilir, geri yükleyebilir veya kalıcı olarak silebilirsiniz.
          </p>
        </div>
      </div>

      <div className="bg-paper border border-pine/8 rounded-2xl shadow-sm overflow-hidden max-w-5xl">
        <div className="p-4 border-b border-pine/5 bg-stone-deep/20">
          <h3 className="font-heading font-bold text-pine text-sm uppercase tracking-wider">Silinmiş Mekanlar</h3>
        </div>
        
        {deletedListings.length === 0 ? (
          <div className="p-12 text-center text-shutter">
            <Trash2 className="w-12 h-12 mx-auto mb-3 opacity-20" />
            <p className="text-sm font-medium">Çöp kutusu boş.</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-pine/8 text-sm">
              <thead className="bg-stone-deep/40 text-shutter font-mono text-[10px] uppercase tracking-wider">
                <tr>
                  <th className="px-6 py-4 text-left">Mekan Adı</th>
                  <th className="px-6 py-4 text-left">Kategori & Mahalle</th>
                  <th className="px-6 py-4 text-left">Silinme Tarihi</th>
                  <th className="px-6 py-4 text-right">İşlemler</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-dashed divide-pine/8 text-ink/85 font-medium">
                {deletedListings.map((listing) => (
                  <tr key={listing.id} className="hover:bg-stone/20 transition duration-150">
                    <td className="px-6 py-4">
                      <div className="font-heading font-bold text-pine lowercase text-sm">
                        {listing.nameTr}
                      </div>
                      <div className="text-[10px] text-shutter font-mono uppercase tracking-wider mt-0.5">
                        {listing.slug}
                      </div>
                    </td>
                    <td className="px-6 py-4 text-xs">
                      <div className="flex flex-col gap-1">
                        {listing.category && (
                          <span className="inline-flex items-center gap-1 text-turquoise">
                            {listing.category.nameTr}
                          </span>
                        )}
                        {listing.neighborhood && (
                          <span className="inline-flex items-center gap-1 text-shutter">
                            <MapPin className="w-3 h-3" />
                            {listing.neighborhood.nameTr}
                          </span>
                        )}
                      </div>
                    </td>
                    <td className="px-6 py-4 font-mono text-xs text-shutter">
                      <div className="flex items-center gap-1.5">
                        <Calendar className="w-3.5 h-3.5" />
                        {listing.deletedAt ? new Date(listing.deletedAt).toLocaleDateString('tr-TR', {
                          day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
                        }) : '-'}
                      </div>
                    </td>
                    <td className="px-6 py-4 text-right">
                      <TrashActionButtons id={listing.id} type="listing" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}