'use client'

import { useActionState, useState } from 'react'
import { createAdmin } from '../../actions'

export function CreateAdminForm({ orgId }: { orgId: string }) {
    const [state, action, isPending] = useActionState(createAdmin, { success: false, error: '' })
    const [showForm, setShowForm] = useState(false)

    if (!showForm) {
        return (
            <button
                onClick={() => setShowForm(true)}
                className="w-full py-2 border-2 border-dashed border-gray-200 rounded-lg text-sm text-gray-500 hover:border-brand-500 hover:text-brand-500 transition-all font-medium"
            >
                + Administrator hinzufügen
            </button>
        )
    }

    return (
        <div className="bg-gray-50 border rounded-xl p-4 space-y-4">
            <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold text-gray-900">Neuen Admin anlegen</h3>
                <button
                    onClick={() => setShowForm(false)}
                    className="text-xs text-gray-400 hover:text-gray-600"
                >
                    Abbrechen
                </button>
            </div>

            <form action={action} className="space-y-3">
                <input type="hidden" name="orgId" value={orgId} />

                <div>
                    <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Name</label>
                    <input
                        name="name"
                        required
                        placeholder="z.B. Max Mustermann"
                        className="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none"
                    />
                </div>

                <div>
                    <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">E-Mail</label>
                    <input
                        name="email"
                        type="email"
                        required
                        placeholder="admin@beispiel.de"
                        className="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none"
                    />
                </div>

                <div>
                    <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Passwort</label>
                    <div className="relative">
                        <input
                            name="password"
                            type="text"
                            required
                            defaultValue={Math.random().toString(36).slice(-10)}
                            className="w-full px-3 py-2 border rounded-lg text-sm font-mono focus:ring-2 focus:ring-brand-500 outline-none"
                        />
                        <p className="text-[10px] text-gray-400 mt-1">Das Passwort muss dem Admin manuell mitgeteilt werden.</p>
                    </div>
                </div>

                {state.error && (
                    <p className="text-xs text-red-600 bg-red-50 p-2 rounded">{state.error}</p>
                )}

                {state.success && (
                    <p className="text-xs text-green-600 bg-green-50 p-2 rounded">Administrator erfolgreich angelegt.</p>
                )}

                <button
                    type="submit"
                    disabled={isPending}
                    className="w-full bg-gray-900 text-white py-2 rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-colors"
                >
                    {isPending ? 'Wird angelegt...' : 'Admin anlegen'}
                </button>
            </form>
        </div>
    )
}
