import { db } from '@/lib/db'
import Link from 'next/link'
import { Plus, Edit, Trash2, MoreHorizontal } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuGroup,
} from '@/components/ui/dropdown-menu'

export default async function AdminRoomsPage() {
  const rooms = await db.room.findMany({
    orderBy: { createdAt: 'desc' }
  })

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Odalar</h2>
          <p className="text-gray-500 dark:text-gray-400 mt-2">
            Sistemdeki tüm odaları buradan yönetebilirsiniz.
          </p>
        </div>
        <Link href="/admin/rooms/create">
          <Button className="w-full sm:w-auto">
            <Plus className="mr-2 h-4 w-4" /> Yeni Oda Ekle
          </Button>
        </Link>
      </div>

      <div className="bg-white dark:bg-gray-950/50 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm backdrop-blur-sm">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead className="w-24">Resimler</TableHead>
              <TableHead>Ad (TR)</TableHead>
              <TableHead>Tip</TableHead>
              <TableHead>Kapasite</TableHead>
              <TableHead>Fiyat</TableHead>
              <TableHead>Durum</TableHead>
              <TableHead className="text-right">İşlemler</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rooms.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="h-24 text-center text-gray-500">
                  Henüz oda bulunmuyor.
                </TableCell>
              </TableRow>
            ) : (
              rooms.map((room) => (
                <TableRow key={room.id} className="group">
                  <TableCell>
                    <div className="flex flex-col gap-2">
                      {room.imageUrl ? (
                        <img 
                          src={room.imageUrl} 
                          alt={room.nameTr} 
                          className="h-10 w-16 rounded-md object-cover border border-gray-200 dark:border-gray-800"
                        />
                      ) : (
                        <div className="h-10 w-16 rounded-md bg-gray-100 dark:bg-gray-800 flex items-center justify-center border border-gray-200 dark:border-gray-800">
                          <span className="text-[10px] text-gray-400 dark:text-gray-500">Yok</span>
                        </div>
                      )}
                      
                      {room.images && room.images.length > 0 && (
                        <div className="flex gap-1">
                          {room.images.slice(0, 3).map((img, i) => (
                            <img key={i} src={img} alt="galeri" className="h-6 w-8 rounded object-cover border border-gray-200 dark:border-gray-800" />
                          ))}
                          {room.images.length > 3 && (
                            <div className="h-6 w-8 rounded bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-[10px] font-medium border border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-300">
                              +{room.images.length - 3}
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="font-medium text-gray-900 dark:text-white">
                    {room.nameTr}
                  </TableCell>
                  <TableCell className="text-gray-500 dark:text-gray-400">
                    {room.type === 'STUDIO_1_0' ? 'Stüdyo (1+0)' : 'Süit (1+1)'}
                  </TableCell>
                  <TableCell className="text-gray-500 dark:text-gray-400">
                    {room.capacity} Kişi
                  </TableCell>
                  <TableCell className="text-gray-500 dark:text-gray-400">
                    {room.price ? `₺${room.price}` : '-'}
                  </TableCell>
                  <TableCell>
                    {room.available ? (
                      <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900">
                        Müsait
                      </Badge>
                    ) : (
                      <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-900">
                        Kapalı
                      </Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger render={<Button variant="ghost" className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100" />}>
                        <span className="sr-only">Menüyü aç</span>
                        <MoreHorizontal className="h-4 w-4" />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="w-[160px]">
                        <DropdownMenuGroup>
                          <DropdownMenuLabel>İşlemler</DropdownMenuLabel>
                        </DropdownMenuGroup>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem render={<Link href={`/admin/rooms/${room.id}/edit`} />}>
                          <Edit className="mr-2 h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Düzenle
                        </DropdownMenuItem>
                        <DropdownMenuItem render={<form action={async () => {
                          'use server'
                          const { deleteRoom } = await import('@/lib/actions/room')
                          await deleteRoom(room.id)
                        }} />}>
                          <button type="submit" className="w-full flex items-center cursor-pointer text-red-600 dark:text-red-400 focus:text-red-600">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Sil
                          </button>
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}