'use client'

import { useActionState } from 'react'
import { createUser } from './actions'
import { UserPlus } from 'lucide-react'

export default function CreateUserForm() {
  const [state, formAction, isPending] = useActionState(createUser, undefined)

  return (
    <div className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 p-6 md:p-8">
      <div className="flex items-center gap-3 mb-6">
        <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
          <UserPlus size={20} />
        </div>
        <div>
          <h2 className="text-lg font-bold text-slate-800 tracking-tight">Yeni Kullanıcı Ekle</h2>
          <p className="text-xs text-slate-500">Sisteme yeni bir yönetici veya editör ekleyin.</p>
        </div>
      </div>

      {state?.success && (
        <div className="bg-emerald-50 text-emerald-700 px-4 py-3 rounded-xl text-sm font-medium mb-6 border border-emerald-100/50">
          Kullanıcı başarıyla oluşturuldu.
        </div>
      )}
      {state?.error && (
        <div className="bg-red-50 text-red-700 px-4 py-3 rounded-xl text-sm font-medium mb-6 border border-red-100/50">
          {state.error}
        </div>
      )}

      <form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-5">
        <div>
          <label className="block text-sm font-semibold text-slate-700 mb-1.5">Kullanıcı Adı <span className="text-red-500">*</span></label>
          <input
            type="text"
            name="username"
            required
            autoComplete="off"
            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all"
            placeholder="örn: ahmet"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-slate-700 mb-1.5">Şifre <span className="text-red-500">*</span> <span className="text-slate-400 font-normal">(min. 6 karakter)</span></label>
          <input
            type="password"
            name="password"
            required
            autoComplete="new-password"
            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all"
            placeholder="••••••"
          />
        </div>
        <div>
          <label className="block text-sm font-semibold text-slate-700 mb-1.5">Rol</label>
          <select
            name="role"
            defaultValue="admin"
            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white outline-none text-sm transition-all appearance-none"
          >
            <option value="admin">Admin</option>
            <option value="editor">Editor</option>
          </select>
        </div>

        <div className="sm:col-span-3 flex justify-end mt-2">
          <button
            type="submit"
            disabled={isPending}
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-6 rounded-xl text-sm transition-all shadow-sm hover:shadow-md hover:-translate-y-0.5 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-sm flex items-center gap-2"
          >
            <UserPlus size={18} />
            {isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
          </button>
        </div>
      </form>
    </div>
  )
}