'use client'

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

export function ForcePasswordChange({ slug }: { slug: string }) {
    const [state, action, isPending] = useActionState(changePasswordAndDisableMustChange, { success: false, error: '' })

    return (
        <div className="bg-white border rounded-xl p-8 max-w-md w-full shadow-sm">
            <div className="mb-6">
                <h1 className="text-xl font-bold text-gray-900 mb-2">Passwort ändern</h1>
                <p className="text-gray-500 text-sm">
                    Dies ist Ihre erste Anmeldung mit den vom Administrator vergebenen Zugangsdaten.
                    Bitte vergeben Sie ein neues, sicheres Passwort.
                </p>
            </div>

            <form action={action} className="space-y-4">
                <input type="hidden" name="slug" value={slug} />
                <div>
                    <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Aktuelles (temporäres) Passwort</label>
                    <input
                        name="currentPassword"
                        type="password"
                        required
                        placeholder="••••••••"
                        className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
                    />
                </div>

                <div>
                    <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Neues Passwort</label>
                    <input
                        name="newPassword"
                        type="password"
                        required
                        minLength={8}
                        placeholder="••••••••"
                        className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
                    />
                </div>

                <div>
                    <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Passwort wiederholen</label>
                    <input
                        name="confirmPassword"
                        type="password"
                        required
                        minLength={8}
                        placeholder="••••••••"
                        className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-500 outline-none transition-all"
                    />
                </div>

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

                <button
                    type="submit"
                    disabled={isPending}
                    className="w-full bg-gray-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-gray-800 disabled:opacity-50 transition-all shadow-sm"
                >
                    {isPending ? 'Speichern...' : 'Passwort aktualisieren'}
                </button>
            </form>
        </div>
    )
}