'use client';

import Link from 'next/link';
import { useActionState } from 'react';
import { deleteCategoryAction, saveCategoryAction, type FormState } from '@/app/admin/actions';
import type { Category } from '@/lib/types';

const initial: FormState = { status: 'idle' };

export default function CategoryForm({
  category,
  productCount = 0,
}: {
  category?: Category;
  productCount?: number;
}) {
  const [state, action, pending] = useActionState(saveCategoryAction, initial);

  return (
    <>
      <form action={action} className="space-y-6">
        {category && <input type="hidden" name="id" value={category.id} />}

        <section className="rounded-2xl border border-cocoa-800/10 bg-white p-6">
          <h2 className="font-display text-xl">Kategori bilgileri</h2>
          <div className="mt-5 space-y-5">
            <div className="grid gap-5 sm:grid-cols-2">
              <div>
                <label htmlFor="name" className="field-label">
                  Kategori adı *
                </label>
                <input
                  id="name"
                  name="name"
                  required
                  defaultValue={category?.name}
                  className="field"
                  placeholder="Su Böreği"
                />
              </div>
              <div>
                <label htmlFor="slug" className="field-label">
                  URL adresi (slug)
                </label>
                <input
                  id="slug"
                  name="slug"
                  defaultValue={category?.slug}
                  className="field"
                  placeholder="su-boregi"
                />
              </div>
            </div>

            <div>
              <label htmlFor="description" className="field-label">
                Açıklama
              </label>
              <textarea
                id="description"
                name="description"
                rows={3}
                defaultValue={category?.description ?? ''}
                className="field resize-y"
                placeholder="Menü sayfasında kategori başlığının altında görünür."
              />
            </div>

            <div className="grid gap-5 sm:grid-cols-[140px_1fr] sm:items-end">
              <div>
                <label htmlFor="sort_order" className="field-label">
                  Sıra
                </label>
                <input
                  id="sort_order"
                  name="sort_order"
                  type="number"
                  min={1}
                  defaultValue={category?.sort_order ?? 99}
                  className="field"
                />
              </div>
              <label className="flex cursor-pointer items-center gap-2.5 pb-2.5 text-sm text-cocoa-700">
                <input
                  type="checkbox"
                  name="is_active"
                  defaultChecked={category?.is_active ?? true}
                  className="h-4 w-4 rounded border-cocoa-800/30 text-gold-500 focus:ring-gold-400"
                />
                Sitede yayında
              </label>
            </div>
          </div>
        </section>

        {state.status === 'error' && (
          <p className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{state.message}</p>
        )}
        {state.status === 'ok' && (
          <p className="rounded-xl bg-green-50 px-4 py-3 text-sm text-green-800">{state.message}</p>
        )}

        <div className="flex flex-wrap items-center gap-3">
          <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
        {pending ? 'Kaydediliyor…' : 'Kaydet'}
      </button>
          <Link href="/admin/kategoriler" className="btn-outline">
            Listeye dön
          </Link>
        </div>
      </form>

      {category && (
        <form action={deleteCategoryAction} className="mt-10 border-t border-cocoa-800/10 pt-6">
          <input type="hidden" name="id" value={category.id} />
          <p className="text-sm text-cocoa-500">
            {productCount > 0
              ? `Bu kategoriyi silerseniz içindeki ${productCount} ürün de silinir.`
              : 'Bu kategoriyi kalıcı olarak silmek istiyorsanız:'}
          </p>
          <button
            type="submit"
            className="btn mt-3 border border-red-300 text-red-700 hover:bg-red-50"
          >
            Kategoriyi sil
          </button>
        </form>
      )}
    </>
  );
}