'use client'

import { useActionState } from 'react'
import { createMember } from '../../actions'

const initialState = {
    success: false,
    error: '',
}

export function CreateMemberForm({ orgId }: { orgId: string }) {
    const [state, action, isPending] = useActionState(createMember, initialState)

    return (
        <div className="space-y-4">
            <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider">Mitglied manuell hinzufügen</h3>
            <form action={action} className="space-y-3">
                <input type="hidden" name="orgId" value={orgId} />

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Name (Ansprechpartner)</label>
                        <input
                            name="name"
                            type="text"
                            required
                            placeholder="Anrede Vorname Nachname"
                            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="email@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>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div>
                        <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Betrieb</label>
                        <input
                            name="betrieb"
                            type="text"
                            required
                            placeholder="Name des Betriebs"
                            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">Sparte</label>
                        <input
                            name="sparte"
                            type="text"
                            required
                            placeholder="z.B. Sanitär"
                            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">Ort</label>
                        <input
                            name="ort"
                            type="text"
                            required
                            placeholder="Stadt"
                            className="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-brand-500 outline-none"
                        />
                    </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">Mitglied 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...' : 'Mitglied anlegen'}
                </button>
            </form>
        </div>
    )
}
