'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-xl shadow-sm border border-gray-100 p-6">
      <div className="flex items-center gap-2 mb-4">
        <UserPlus size={20} className="text-blue-600" />
        <h2 className="text-lg font-semibold text-gray-800">Yeni Kullanıcı Ekle</h2>
      </div>

      {state?.success && (
        <div className="bg-green-50 text-green-700 p-3 rounded-lg text-sm mb-4">
          Kullanıcı başarıyla oluşturuldu.
        </div>
      )}
      {state?.error && (
        <div className="bg-red-50 text-red-700 p-3 rounded-lg text-sm mb-4">
          {state.error}
        </div>
      )}

      <form action={formAction} className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Kullanıcı Adı *</label>
          <input
            type="text"
            name="username"
            required
            autoComplete="off"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Şifre * <span className="text-gray-400 font-normal">(min. 6 karakter)</span></label>
          <input
            type="password"
            name="password"
            required
            autoComplete="new-password"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Rol</label>
          <select
            name="role"
            defaultValue="admin"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
          >
            <option value="admin">Admin</option>
            <option value="editor">Editor</option>
          </select>
        </div>

        <div className="sm:col-span-3 flex justify-end">
          <button
            type="submit"
            disabled={isPending}
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-5 rounded-lg text-sm transition-colors disabled:opacity-70 flex items-center gap-2"
          >
            <UserPlus size={16} />
            {isPending ? 'Oluşturuluyor...' : 'Kullanıcı Oluştur'}
          </button>
        </div>
      </form>
    </div>
  )
}
