// assets/js/pages/admin/tabs/CategoriesTab.js

const CategoriesTab = ({ state, handlers }) => {
  const {
    categories,
    setCategories,
    showCreateCategoryModal,
    setShowCreateCategoryModal,
    showEditCategoryModal,
    setShowEditCategoryModal,
    selectedCategory,
    setSelectedCategory,
  } = state;

  const { handleCreateCategory, handleUpdateCategory, handleDeleteCategory } =
    handlers;

  return (
    <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl shadow-xl border border-slate-700">
      <div className="p-6 border-b border-slate-700">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold text-white">
            🏷️ Kelola Kategori
          </h2>
          <button
            onClick={() => setShowCreateCategoryModal(true)}
            className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg"
          >
            ➕ Tambah Kategori
          </button>
        </div>

        <div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-lg">
          <p className="text-sm text-blue-300">
            ℹ️ Kelola kategori yang digunakan untuk mengklasifikasikan barang
            hilang dan temuan
          </p>
        </div>
      </div>

      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {categories.map((category) => (
            <div
              key={category.id}
              className="bg-gradient-to-br from-slate-700 to-slate-800 border-2 border-slate-600 rounded-xl p-5 hover:border-blue-500 hover:shadow-xl hover:shadow-blue-500/20 transition-all"
            >
              {/* Header */}
              <div className="flex justify-between items-start mb-4 border-b border-slate-600 pb-3">
                <div className="flex-1">
                  <h3 className="text-lg font-bold text-white">
                    {category.name}
                  </h3>
                  <p className="text-xs text-slate-400 mt-1">
                    Value:{" "}
                    <span className="text-blue-400">{category.value}</span>
                  </p>
                </div>
                <div className="text-2xl">🏷️</div>
              </div>

              {/* Stats */}
              <div className="bg-slate-900/50 p-3 rounded-lg border border-slate-600 mb-4">
                <div className="text-sm text-slate-300">
                  <strong className="text-blue-400">ID:</strong> {category.id}
                </div>
              </div>

              {/* Description if available */}
              {category.description && (
                <div className="bg-slate-900/50 p-3 rounded-lg border border-slate-600 mb-4">
                  <p className="text-sm text-slate-300">
                    {category.description}
                  </p>
                </div>
              )}

              {/* Actions */}
              <div className="flex gap-2">
                <button
                  onClick={() => {
                    setSelectedCategory(category);
                    setShowEditCategoryModal(true);
                  }}
                  className="flex-1 px-3 py-2 bg-gradient-to-r from-yellow-600 to-yellow-700 text-white text-sm rounded-lg hover:from-yellow-700 hover:to-yellow-800 transition shadow-lg"
                >
                  ✏️ Edit
                </button>

                <button
                  onClick={() => {
                    if (
                      confirm(
                        `⚠️ Yakin ingin menghapus kategori "${category.name}"?\n\nPeringatan: Barang dengan kategori ini mungkin terpengaruh!`
                      )
                    ) {
                      handleDeleteCategory(category.id);
                    }
                  }}
                  className="px-3 py-2 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm rounded-lg hover:from-red-700 hover:to-red-800 transition shadow-lg"
                >
                  🗑️
                </button>
              </div>
            </div>
          ))}
        </div>

        {categories.length === 0 && (
          <div className="text-center py-12 text-slate-400">
            <div className="text-6xl mb-4">🏷️</div>
            <p>Belum ada kategori</p>
          </div>
        )}
      </div>

      {/* Create Category Modal */}
      <Modal
        isOpen={showCreateCategoryModal}
        onClose={() => setShowCreateCategoryModal(false)}
        title="➕ Tambah Kategori Baru"
      >
        <form onSubmit={handleCreateCategory} className="space-y-4">
          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Nama Kategori *
            </label>
            <input
              type="text"
              name="name"
              required
              placeholder="Contoh: Elektronik"
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Value (Identifier) *
            </label>
            <input
              type="text"
              name="value"
              required
              placeholder="Contoh: elektronik (huruf kecil, tanpa spasi)"
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            />
            <p className="text-xs text-slate-400 mt-1">
              Value digunakan sebagai identifier. Gunakan huruf kecil, tanpa
              spasi.
            </p>
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Deskripsi (Opsional)
            </label>
            <textarea
              name="description"
              rows="3"
              placeholder="Deskripsi singkat tentang kategori ini..."
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            />
          </div>

          <button
            type="submit"
            disabled={state.loading}
            className="w-full px-4 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
          >
            {state.loading ? "⏳ Menyimpan..." : "✅ Simpan Kategori"}
          </button>
        </form>
      </Modal>

      {/* Edit Category Modal */}
      <Modal
        isOpen={showEditCategoryModal}
        onClose={() => {
          setShowEditCategoryModal(false);
          setSelectedCategory(null);
        }}
        title="✏️ Edit Kategori"
      >
        {selectedCategory && (
          <form onSubmit={handleUpdateCategory} className="space-y-4">
            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Nama Kategori *
              </label>
              <input
                type="text"
                name="name"
                required
                defaultValue={selectedCategory.name}
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              />
            </div>

            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Value (Identifier) *
              </label>
              <input
                type="text"
                name="value"
                required
                defaultValue={selectedCategory.value}
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              />
              <p className="text-xs text-slate-400 mt-1">
                Hati-hati mengubah value, dapat mempengaruhi data existing
              </p>
            </div>

            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Deskripsi (Opsional)
              </label>
              <textarea
                name="description"
                rows="3"
                defaultValue={selectedCategory.description || ""}
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              />
            </div>

            <button
              type="submit"
              disabled={state.loading}
              className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
            >
              {state.loading ? "⏳ Menyimpan..." : "✅ Update Kategori"}
            </button>
          </form>
        )}
      </Modal>
    </div>
  );
};
