"use client";

import { useState } from "react";
import { AdminRoomEditForm } from "@/components/admin/AdminRoomEditForm";

export function AdminRoomCard({
  roomId,
  name,
  description,
  categoryId,
  categories,
  introArticle,
  coverImage,
  isActive,
  toggleAction,
  removeAction,
}: {
  roomId: string;
  name: string;
  description: string | null;
  categoryId: string;
  categories: { id: string; name: string }[];
  introArticle: string | null;
  coverImage: string | null;
  isActive: boolean;
  toggleAction: () => Promise<void>;
  removeAction: () => Promise<void>;
}) {
  const [editing, setEditing] = useState(false);

  if (editing) {
    return (
      <AdminRoomEditForm
        roomId={roomId}
        name={name}
        description={description ?? ""}
        categoryId={categoryId}
        categories={categories}
        introArticle={introArticle ?? ""}
        coverImage={coverImage}
        onDone={() => setEditing(false)}
      />
    );
  }

  return (
    <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="min-w-0 flex-1">
        <span className="text-[13.5px] font-semibold">{name}</span>
        {description && <p className="truncate text-[11.5px] text-text-muted">{description}</p>}
      </div>
      <div className="ml-3 flex shrink-0 items-center gap-1.5">
        <span
          className={`rounded-full px-2 py-0.5 text-[10.5px] font-semibold ${
            isActive ? "bg-green-100 text-green-700" : "bg-accent/10 text-accent"
          }`}
        >
          {isActive ? "Aktif" : "Pasif"}
        </span>
        <span
          className={`rounded-full px-2 py-0.5 text-[10.5px] font-semibold ${
            introArticle ? "bg-blue-100 text-blue-700" : "bg-bg-alt text-text-muted"
          }`}
        >
          {introArticle ? "Makale var" : "Makale yok"}
        </span>
        <button
          type="button"
          onClick={() => setEditing(true)}
          className="rounded-md px-2 py-1 text-[11px] font-semibold text-text-muted hover:bg-bg-alt hover:text-accent"
        >
          Düzenle
        </button>
        <form action={toggleAction}>
          <button className="rounded-md px-2 py-1 text-[11px] font-semibold text-text-muted hover:bg-bg-alt">
            {isActive ? "Gizle" : "Göster"}
          </button>
        </form>
        <form action={removeAction}>
          <button className="rounded-md px-2 py-1 text-[11px] font-semibold text-accent hover:bg-accent/10">Sil</button>
        </form>
      </div>
    </div>
  );
}