"use client";

import { useState, useTransition } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { updateCategory, deleteCategory } from "@/app/admin/categories/actions";

interface Props {
  category: { id: string; title: string; slug: string };
  courseCount: number;
}

export function CategoryRow({ category, courseCount }: Props) {
  const [editing, setEditing] = useState(false);
  const [pending, startTransition] = useTransition();

  function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    startTransition(() => updateCategory(category.id, fd));
    setEditing(false);
  }

  function handleDelete() {
    if (courseCount > 0) {
      alert(`Нельзя удалить: к категории привязано ${courseCount} курсов`);
      return;
    }
    if (!confirm(`Удалить категорию «${category.title}»?`)) return;
    startTransition(() => deleteCategory(category.id));
  }

  return (
    <div className="flex items-center gap-3 px-4 py-3" style={{ border: "2px solid var(--border)", background: "var(--background)" }}>
      {editing ? (
        <form onSubmit={handleUpdate} className="flex items-center gap-2 flex-1">
          <Input name="title" defaultValue={category.title} required className="h-8 text-sm" />
          <Input name="slug" defaultValue={category.slug} className="h-8 text-sm w-36" />
          <Button type="submit" size="sm" disabled={pending}>Сохранить</Button>
          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>✕</Button>
        </form>
      ) : (
        <>
          <span className="flex-1 font-medium" style={{ color: "var(--foreground)" }}>{category.title}</span>
          <span className="text-xs font-mono" style={{ color: "var(--muted-foreground)" }}>/{category.slug}</span>
          <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>{courseCount} курсов</span>
          <button onClick={() => setEditing(true)} className="text-xs underline" style={{ color: "var(--muted-foreground)" }}>
            Редакт.
          </button>
          <button onClick={handleDelete} disabled={pending} className="text-xs" style={{ color: "oklch(0.577 0.245 27.325)" }}>
            Удалить
          </button>
        </>
      )}
    </div>
  );
}