// components/users/UserModal.jsx
import { useEffect, useMemo, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/free-solid-svg-icons";

export default function UserModal({ open, mode, initialData, onClose, onSubmit }) {
  const [form, setForm] = useState({
    name: "",
    pass: "",
    role: 2,
  });
  const [saving, setSaving] = useState(false);

   useEffect(() => {
    if (!open) return;
    setForm({
      name: initialData?.name ?? "",
      pass: "",
      role: Number(initialData?.role ?? 2),
    });
  }, [open, initialData]);

  const set = (key) => (e) => {
    const v = e.target.value;
    setForm((p) => ({ ...p, [key]: key === "role" ? Number(v) : v }));
  };

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim()) return;

    // role must be 1 or 2
    const role = Number(form.role) === 1 ? 1 : 2;

    onSubmit?.({
      name: form.name.trim(),
      pass: form.pass, // optional in edit
      role,
    });
  };


  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />

      <div className="relative w-full max-w-lg rounded-3xl border border-black/10 bg-white shadow-2xl">
        <div className="flex items-center justify-between px-6 py-4 border-b border-black/10">
          <div className="text-lg font-extrabold text-black/85">
            {mode === "edit" ? "Kullanıcı Düzenle" : "Yeni Kullanıcı"}
          </div>
          <button
            onClick={onClose}
            className="h-10 w-10 rounded-2xl border border-black/10 bg-white hover:bg-black/[0.03] transition"
            aria-label="Kapat"
          >
            <FontAwesomeIcon icon={faXmark} />
          </button>
        </div>

        <form onSubmit={submit} className="px-6 py-5 space-y-4">
          {/* If you changed Prisma id to Int autoincrement, you should hide this field in "create" */}
       

          <Field label="İsim">
            <input
              value={form.name}
              onChange={set("name")}
              placeholder="Ad Soyad"
              className={inputCls}
            />
          </Field>

          <Field label="Şifre">
            <input
              value={form.pass}
              onChange={set("pass")}
              type="password"
              placeholder={mode === "edit" ? "Boş bırak: değişmesin" : "••••••••"}
              className={inputCls}
            />
           
          </Field>

          <Field label="Rol">
            <select value={form.role} onChange={set("role")} className={inputCls}>
              <option value={1}>1 — Yönetici</option>
              <option value={2}>2 — Kullanıcı</option>
            </select>
          </Field>

          <div className="pt-2 flex items-center justify-end gap-2">
            <button
              type="button"
              onClick={onClose}
              className="rounded-2xl border border-black/10 bg-white px-4 py-2.5 text-sm font-semibold text-black/70 hover:bg-black/[0.03] transition"
            >
              İptal
            </button>
            <button
              disabled={saving}
              type="submit"
              className="rounded-2xl px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-[#e04a3b] to-[#ff6a5e] shadow-lg shadow-[#e04a3b]/15 hover:brightness-[1.02] active:scale-[0.99] transition disabled:opacity-70"
            >
              {saving ? "Kaydediliyor..." : "Kaydet"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div className="space-y-1">
      <div className="text-sm font-semibold text-black/75">{label}</div>
      {children}
    </div>
  );
}

const inputCls =
  "w-full rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:ring-4 focus:ring-[#e04a3b]/10 focus:border-[#e04a3b]/30 transition";