import type { Metadata } from "next";
import { listAllCategoriesForAdmin, listAllRoomsForAdmin } from "@/lib/rooms/queries";
import {
  createRoomCategory,
  toggleRoomCategoryActive,
  deleteRoomCategory,
  reorderRoomCategories,
  createRoom,
  toggleRoomActive,
  deleteRoom,
  reorderRooms,
} from "@/lib/admin/rooms-actions";
import { SortableList } from "@/components/admin/SortableList";
import { AdminRoomCard } from "@/components/admin/AdminRoomCard";

export const metadata: Metadata = {
  title: "Odalar",
};

export default async function AdminRoomsPage() {
  const [categories, rooms] = await Promise.all([listAllCategoriesForAdmin(), listAllRoomsForAdmin()]);

  return (
    <div className="p-8">
      <div className="mb-6 border-b border-border pb-6">
        <h1 className="text-[22px]">Odalar</h1>
        <p className="mt-0.5 text-[12.5px] text-text-muted">
          Sohbet odası içerik/tanıtım sayfaları — kategoriler ve odalar sürükleyerek sıralanabilir, tanıtım yazısını içerik botu üretebilir ya da elle girebilirsiniz.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
        <section>
          <h2 className="mb-3 text-[15px] font-bold">Kategoriler</h2>
          <form action={createRoomCategory} className="mb-4 flex gap-2">
            <input
              name="name"
              placeholder="Yeni kategori (örn. Şehirlere Göre Sohbet)"
              required
              className="flex-1 rounded-lg border border-border px-3 py-2 text-[13px]"
            />
            <button className="rounded-lg bg-accent px-3.5 py-2 text-[12.5px] font-semibold text-white">Ekle</button>
          </form>

          <SortableList
            key={categories.map((c) => c.id).join(",")}
            items={categories.map((category) => {
              const toggle = toggleRoomCategoryActive.bind(null, category.id);
              const remove = deleteRoomCategory.bind(null, category.id);
              const roomCount = rooms.filter((r) => r.categoryId === category.id).length;
              return {
                id: category.id,
                content: (
                  <div className="flex flex-wrap items-center justify-between gap-y-1.5 rounded-xl border border-border bg-surface px-3 py-2.5">
                    <div className="flex items-center gap-2">
                      <span className="text-[13.5px] font-semibold">{category.name}</span>
                      <span className="rounded-full bg-bg-alt px-2 py-0.5 text-[10.5px] font-semibold text-text-muted">
                        {roomCount} oda
                      </span>
                      <span
                        className={`rounded-full px-2 py-0.5 text-[10.5px] font-semibold ${
                          category.isActive ? "bg-green-100 text-green-700" : "bg-accent/10 text-accent"
                        }`}
                      >
                        {category.isActive ? "Aktif" : "Pasif"}
                      </span>
                    </div>
                    <div className="flex gap-1.5">
                      <form action={toggle}>
                        <button className="rounded-md px-2 py-1 text-[11px] font-semibold text-text-muted hover:bg-bg-alt">
                          {category.isActive ? "Gizle" : "Göster"}
                        </button>
                      </form>
                      <form action={remove}>
                        <button
                          disabled={roomCount > 0}
                          title={roomCount > 0 ? "İçinde oda olan kategori silinemez" : undefined}
                          className="rounded-md px-2 py-1 text-[11px] font-semibold text-accent hover:bg-accent/10 disabled:cursor-not-allowed disabled:opacity-40"
                        >
                          Sil
                        </button>
                      </form>
                    </div>
                  </div>
                ),
              };
            })}
            onReorder={reorderRoomCategories}
          />

          <h2 className="mb-3 mt-8 text-[15px] font-bold">Yeni Oda</h2>
          <form action={createRoom} className="flex flex-col gap-2 rounded-2xl border border-border bg-surface p-4">
            <select name="categoryId" required className="rounded-lg border border-border px-3 py-2 text-[13px]">
              <option value="">Kategori seç</option>
              {categories.map((category) => (
                <option key={category.id} value={category.id}>
                  {category.name}
                </option>
              ))}
            </select>
            <input
              name="name"
              placeholder="Oda adı (örn. Gece Sohbeti)"
              required
              className="rounded-lg border border-border px-3 py-2 text-[13px]"
            />
            <textarea
              name="description"
              placeholder="Kısa açıklama (opsiyonel — bot makale üretirken bağlam olarak kullanır)"
              rows={2}
              className="resize-none rounded-lg border border-border px-3 py-2 text-[13px]"
            />
            <button className="self-start rounded-lg bg-accent px-4 py-2 text-[12.5px] font-semibold text-white">
              Oda Ekle
            </button>
          </form>
        </section>

        <section>
          <h2 className="mb-3 text-[15px] font-bold">Odalar</h2>
          <div className="flex flex-col gap-6">
            {categories.map((category) => {
              const categoryRooms = rooms.filter((r) => r.categoryId === category.id);
              if (categoryRooms.length === 0) return null;

              return (
                <div key={category.id}>
                  <h3 className="mb-2 text-[13px] font-semibold text-text-muted">
                    {category.name}
                    <span className="ml-2 font-normal text-text-muted">({categoryRooms.length} oda)</span>
                  </h3>

                  <SortableList
                    key={categoryRooms.map((r) => r.id).join(",")}
                    items={categoryRooms.map((room) => ({
                      id: room.id,
                      content: (
                        <AdminRoomCard
                          roomId={room.id}
                          name={room.name}
                          description={room.description}
                          categoryId={room.categoryId}
                          categories={categories}
                          introArticle={room.introArticle}
                          coverImage={room.coverImage}
                          isActive={room.isActive}
                          toggleAction={toggleRoomActive.bind(null, room.id)}
                          removeAction={deleteRoom.bind(null, room.id)}
                        />
                      ),
                    }))}
                    onReorder={reorderRooms}
                  />
                </div>
              );
            })}
          </div>
        </section>
      </div>
    </div>
  );
}