// import { sql } from '@/lib/db'
// import { Button } from '@/components/ui/button'
// import DeleteModalBtn from '@/components/ui/DeleteModalBtn'
// import { Suspense } from 'react'
// import { Loader2 } from 'lucide-react'
// import Link from 'next/link'

// interface Model {
//   id: string | number
//   name: string
//   slug: string
//   featured: boolean
//   location_name: string | null
// }

// interface AdminModelsListProps {
//   searchParams: { page?: string }
// }

// export default async function AdminModelsList({ searchParams }: AdminModelsListProps) {
//   const page = parseInt(searchParams.page || '1', 10)
//   const pageSize = 10 // Number of items per page
//   const offset = (page - 1) * pageSize

//   // Fetch data with pagination
//   const [rows, countResult] = await Promise.all([
//     sql<Model[]>`
//       SELECT m.id, m.name, m.slug, m.featured, l.name as location_name
//       FROM models m
//       LEFT JOIN locations l ON l.id = m.location_id
//       ORDER BY m.created_at DESC
//       LIMIT ${pageSize} OFFSET ${offset}
//     `,
//     sql<{ total: number }[]>`
//       SELECT COUNT(*) as total
//       FROM models
//     `,
//   ])

//   const totalItems = countResult[0]?.total || 0
  
//   const totalPages = Math.ceil(totalItems / pageSize)
  
//   const hasPreviousPage = page > 1

//   const hasNextPage = page < totalPages

//   return (
//     <Suspense fallback={<LoadingSkeleton />}>
//       <main className="max-w-5xl mx-auto p-6 grid gap-6">
//         <div className="flex items-center justify-between">
//           <h1 className="text-2xl font-semibold">Models</h1>
//           <Link href="/admin/models/new">
//             <Button>New Model</Button>
//           </Link>
//         </div>

//         {/* Table */}
//         <div className="rounded-lg border overflow-x-auto">
//           <table className="w-full text-sm">
//             <thead>
//               <tr className="border-b bg-muted/50">
//                 <th className="text-left p-3 font-medium">Name</th>
//                 <th className="text-left p-3 font-medium">Slug</th>
//                 <th className="text-left p-3 font-medium">Location</th>
//                 <th className="text-left p-3 font-medium">Featured</th>
//                 <th className="text-left p-3 font-medium">Actions</th>
//               </tr>
//             </thead>
//             <tbody>
//               {rows.length === 0 ? (
//                 <tr>
//                   <td colSpan={5} className="p-3 text-center text-muted-foreground">
//                     No models found
//                   </td>
//                 </tr>
//               ) : (
//                 rows.map((r) => (
//                   <tr key={r.id} className="border-b hover:bg-muted/30">
//                     <td className="p-3">{r.name}</td>
//                     <td className="p-3">{r.slug}</td>
//                     <td className="p-3">{r.location_name || '-'}</td>
//                     <td className="p-3">{r.featured ? 'Yes' : 'No'}</td>
//                     <td className="p-3">
//                       <div className="flex items-center gap-2">
//                         <Link
//                           href={`/admin/models/${r.id}/edit`}
//                           className="underline text-primary hover:opacity-80"
//                         >
//                           Edit
//                         </Link>
//                         <DeleteModalBtn id={r.id} />
//                       </div>
//                     </td>
//                   </tr>
//                 ))
//               )}
//             </tbody>
//           </table>
//         </div>

//         {/* Pagination Controls */}
//         <div className="flex items-center justify-between">
//           <div className="text-sm text-muted-foreground">
//             Showing {(page - 1) * pageSize + 1} to{' '}
//             {Math.min(page * pageSize, totalItems)} of {totalItems} models
//           </div>
//           <div className="flex items-center gap-2">
//             <Button
//               variant="outline"
//               size="sm"
//               disabled={!hasPreviousPage}
//               asChild
//             >
//               <Link href={`/admin/models?page=${page - 1}`}>Previous</Link>
//             </Button>
//             <Button
//               variant="outline"
//               size="sm"
//               disabled={!hasNextPage}
//               asChild
//             >
//               <Link href={`/admin/models?page=${page + 1}`}>Next</Link>
//             </Button>
//           </div>
//         </div>
//       </main>
//     </Suspense>
//   )
// }

// function LoadingSkeleton() {
//   return (
//     <div className="max-w-5xl mx-auto p-6 grid gap-6">
//       <div className="flex items-center justify-between">
//         <h1 className="text-2xl font-semibold">Models</h1>
//         <Button disabled>
//           <Loader2 className="mr-2 h-4 w-4 animate-spin" />
//           Loading...
//         </Button>
//       </div>
//       <div className="rounded-lg border overflow-x-auto">
//         <table className="w-full text-sm">
//           <thead>
//             <tr className="border-b bg-muted/50">
//               <th className="text-left p-3 font-medium">Name</th>
//               <th className="text-left p-3 font-medium">Slug</th>
//               <th className="text-left p-3 font-medium">Location</th>
//               <th className="text-left p-3 font-medium">Featured</th>
//               <th className="text-left p-3 font-medium">Actions</th>
//             </tr>
//           </thead>
//           <tbody>
//             {[...Array(5)].map((_, i) => (
//               <tr key={i} className="border-b">
//                 <td className="p-3">
//                   <div className="h-4 bg-muted rounded w-3/4 animate-pulse" />
//                 </td>
//                 <td className="p-3">
//                   <div className="h-4 bg-muted rounded w-1/2 animate-pulse" />
//                 </td>
//                 <td className="p-3">
//                   <div className="h-4 bg-muted rounded w-1/3 animate-pulse" />
//                 </td>
//                 <td className="p-3">
//                   <div className="h-4 bg-muted rounded w-1/4 animate-pulse" />
//                 </td>
//                 <td className="p-3">
//                   <div className="h-4 bg-muted rounded w-1/2 animate-pulse" />
//                 </td>
//               </tr>
//             ))}
//           </tbody>
//         </table>
//       </div>
//     </div>
//   )
// }