'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Shield, Eye, EyeOff, CheckCircle2, AlertTriangle } from 'lucide-react';
function passwordStrength(pw) {
    let score = 0;
    if (pw.length >= 12)
        score++;
    if (pw.length >= 16)
        score++;
    if (/[A-Z]/.test(pw))
        score++;
    if (/[a-z]/.test(pw))
        score++;
    if (/\d/.test(pw))
        score++;
    if (/[^a-zA-Z0-9]/.test(pw))
        score++;
    if (score <= 2)
        return { score, label: 'Weak', color: 'bg-red-500' };
    if (score <= 4)
        return { score, label: 'Fair', color: 'bg-yellow-500' };
    return { score, label: 'Strong', color: 'bg-green-500' };
}
export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }) {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [showPassword, setShowPassword] = useState(false);
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState('');
    const [done, setDone] = useState(false);
    const strength = passwordStrength(password);
    const passwordsMatch = password === confirmPassword;
    const canSubmit = name.trim() && email.trim() && password.length >= 12 && passwordsMatch && !submitting;
    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!canSubmit)
            return;
        setError('');
        setSubmitting(true);
        try {
            const result = await onComplete({
                name: name.trim(),
                email: email.trim(),
                password,
            });
            if (result.success) {
                setDone(true);
            }
            else {
                setError(result.error ?? 'Failed to create admin account');
            }
        }
        catch (err) {
            setError(err instanceof Error ? err.message : 'An unexpected error occurred');
        }
        finally {
            setSubmitting(false);
        }
    };
    if (done) {
        return (_jsx("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 px-4", children: _jsxs("div", { className: "w-full max-w-md text-center", children: [_jsx("div", { className: "mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100", children: _jsx(CheckCircle2, { className: "h-8 w-8 text-green-600" }) }), _jsx("h1", { className: "mb-2 text-2xl font-bold text-gray-900", children: "Setup Complete" }), _jsx("p", { className: "mb-6 text-gray-600", children: "Your admin account has been created. You can now sign in to manage your content." }), _jsx("button", { onClick: () => window.location.reload(), className: "w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700", children: "Go to Login" })] }) }));
    }
    return (_jsx("div", { className: "flex min-h-screen items-center justify-center bg-gray-50 px-4", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsx("div", { className: "mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600", children: _jsx(Shield, { className: "h-7 w-7 text-white" }) }), _jsxs("h1", { className: "text-2xl font-bold text-gray-900", children: ["Welcome to ", siteName] }), _jsx("p", { className: "mt-2 text-gray-600", children: "Create your admin account to get started" })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm", children: [error && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0 text-red-600" }), _jsx("p", { className: "text-sm text-red-800", children: error })] })), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-name", className: "mb-1.5 block text-sm font-medium text-gray-700", children: "Full Name" }), _jsx("input", { id: "setup-name", type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Jane Smith", className: "w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none", required: true, autoFocus: true, autoComplete: "name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-email", className: "mb-1.5 block text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { id: "setup-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "admin@example.com", className: "w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none", required: true, autoComplete: "email" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-password", className: "mb-1.5 block text-sm font-medium text-gray-700", children: "Password" }), _jsxs("div", { className: "relative", children: [_jsx("input", { id: "setup-password", type: showPassword ? 'text' : 'password', value: password, onChange: (e) => setPassword(e.target.value), placeholder: "Minimum 12 characters", className: "w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none", required: true, minLength: 12, autoComplete: "new-password" }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600", tabIndex: -1, children: showPassword ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) })] }), password && (_jsx("div", { className: "mt-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200", children: _jsx("div", { className: `h-full rounded-full transition-all ${strength.color}`, style: { width: `${(strength.score / 6) * 100}%` } }) }), _jsx("span", { className: "text-xs text-gray-600", children: strength.label })] }) }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-confirm", className: "mb-1.5 block text-sm font-medium text-gray-700", children: "Confirm Password" }), _jsx("input", { id: "setup-confirm", type: showPassword ? 'text' : 'password', value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Re-enter your password", className: `w-full rounded-lg border px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none ${confirmPassword && !passwordsMatch ? 'border-red-300' : 'border-gray-300'}`, required: true, autoComplete: "new-password" }), confirmPassword && !passwordsMatch && (_jsx("p", { className: "mt-1 text-xs text-red-600", children: "Passwords do not match" }))] }), _jsx("button", { type: "submit", disabled: !canSubmit, className: "w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: submitting ? 'Creating Account...' : 'Create Admin Account' }), _jsx("p", { className: "text-center text-xs text-gray-500", children: "This form is only available during initial setup. Once an admin account exists, it will be replaced by the login screen." })] })] }) }));
}
//# sourceMappingURL=SetupWizard.js.map