// src/components/manajemenUsers/UserHero.tsx
import { useState } from "react";
import axios from "axios";
// IMPORT ICON REACT RESMI BIAR MODERN, BANG!
import { UserPlus, UserCheck, Loader2 } from "lucide-react";

interface HeroProps {
  onUserDitambahkan: () => void;
}

export default function UsersHero({ onUserDitambahkan }: HeroProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({
    nama_lengkap: "",
    username: "",
    password: "",
    role: "User",
    email: "",
    lembaga: "",
  });
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const respon = await axios.post("http://localhost:5000/api/register", formData);
      if (respon.data.success) {
        alert(respon.data.message);
        setIsModalOpen(false);
        // Reset Form
        setFormData({ nama_lengkap: "", username: "", password: "", role: "User", email: "", lembaga: "" });
        // Refresh tabel di halaman utama otomatis
        onUserDitambahkan();
      }
    } catch (error: any) {
      console.error(error);
      alert(error.response?.data?.message || "Gagal menambah user baru!");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-3xl p-8 shadow-lg text-white mb-8 flex justify-between items-center">
      <div>
        <h1 className="text-4xl font-extrabold tracking-tight">Manajemen Pengguna</h1>
        <p className="text-blue-100 mt-2 text-lg">Kelola hak akses data, penyerah, penerima, dan petugas BAST CIFO.</p>
      </div>

      {/* TOMBOL DENGAN ICON REACT USERPLUS */}
      <button
        onClick={() => setIsModalOpen(true)}
        className="bg-white text-blue-700 font-bold px-6 py-3 rounded-2xl shadow hover:bg-blue-50 transition-all duration-200 flex items-center gap-2 transform hover:scale-105"
      >
        <UserPlus size={18} />
        Tambah User Baru
      </button>

      {/* MODAL POP UP FORM TAMBAH USER */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50 p-4">
          <div className="bg-white rounded-3xl p-8 max-w-md w-full shadow-2xl border border-gray-100 text-gray-800 animate-in fade-in zoom-in-95 duration-200">
            {/* HEAD MODAL DENGAN ICON REACT USERCHECK */}
            <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2 text-blue-700">
              <UserCheck size={24} />
              Registrasi Pengguna Baru
            </h2>
            
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Nama Lengkap *</label>
                <input
                  type="text"
                  required
                  value={formData.nama_lengkap}
                  onChange={(e) => setFormData({ ...formData, nama_lengkap: e.target.value })}
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                  placeholder="Contoh: Bu Sari"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-1">Username *</label>
                  <input
                    type="text"
                    required
                    value={formData.username}
                    onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                    placeholder="sari123"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-1">Password *</label>
                  <input
                    type="password"
                    required
                    value={formData.password}
                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                    placeholder="******"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Role / Hak Akses</label>
                <select
                  value={formData.role}
                  onChange={(e) => setFormData({ ...formData, role: e.target.value })}
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition bg-white"
                >
                  <option value="Admin">Admin</option>
                  <option value="User">User</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Email (Opsional)</label>
                <input
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                  placeholder="sari@cifo.co.id"
                />
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">Instansi / Lembaga (Opsional)</label>
                <input
                  type="text"
                  value={formData.lembaga}
                  onChange={(e) => setFormData({ ...formData, lembaga: e.target.value })}
                  className="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                  placeholder="SMKN 4 Bandung / PT CIFO"
                />
              </div>

              <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 mt-6">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="px-5 py-2.5 rounded-xl border border-gray-300 font-semibold text-gray-600 hover:bg-gray-50 transition"
                >
                  Batal
                </button>
                {/* BUTTON SUBMIT DENGAN SPINNER LOADER2 SAAT SAVE DATA */}
                <button
                  type="submit"
                  disabled={loading}
                  className="px-5 py-2.5 rounded-xl bg-blue-600 font-semibold text-white hover:bg-blue-700 shadow transition disabled:opacity-50 flex items-center gap-2"
                >
                  {loading ? (
                    <>
                      <Loader2 className="animate-spin" size={16} />
                      Menyimpan...
                    </>
                  ) : (
                    "Simpan Pengguna"
                  )}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}