'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-destructive' };
    if (score <= 4)
        return { score, label: 'Fair', color: 'bg-warning' };
    return { score, label: 'Strong', color: 'bg-success' };
}
const fieldClass = 'w-full rounded-lg border border-border bg-input-background px-3 py-2.5 text-sm text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none';
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: "bg-muted flex min-h-screen items-center justify-center px-4", children: _jsxs("div", { className: "w-full max-w-md text-center", children: [_jsx("div", { className: "bg-success/10 mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(CheckCircle2, { className: "text-success h-8 w-8" }) }), _jsx("h1", { className: "text-foreground mb-2 text-2xl font-medium", children: "Setup Complete" }), _jsx("p", { className: "text-muted-foreground mb-6", children: "Your admin account has been created. You can now sign in to manage your content." }), _jsx("button", { onClick: () => window.location.reload(), className: "bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg px-6 py-3 font-medium transition-colors", children: "Go to Login" })] }) }));
    }
    return (_jsx("div", { className: "bg-muted flex min-h-screen items-center justify-center px-4", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsx("div", { className: "bg-primary mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl", children: _jsx(Shield, { className: "text-primary-foreground h-7 w-7" }) }), _jsxs("h1", { className: "text-foreground text-2xl font-medium", children: ["Welcome to ", siteName] }), _jsx("p", { className: "text-muted-foreground mt-2", children: "Create your admin account to get started" })] }), _jsxs("form", { onSubmit: handleSubmit, className: "border-border bg-card space-y-5 rounded-xl border p-6 shadow-sm", children: [error && (_jsxs("div", { className: "border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3", children: [_jsx(AlertTriangle, { className: "text-destructive mt-0.5 h-5 w-5 shrink-0" }), _jsx("p", { className: "text-destructive text-sm", children: error })] })), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-name", className: "text-foreground mb-1.5 block text-sm font-medium", children: "Full Name" }), _jsx("input", { id: "setup-name", type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Jane Smith", className: fieldClass, required: true, autoFocus: true, autoComplete: "name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-email", className: "text-foreground mb-1.5 block text-sm font-medium", children: "Email Address" }), _jsx("input", { id: "setup-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "admin@example.com", className: fieldClass, required: true, autoComplete: "email" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-password", className: "text-foreground mb-1.5 block text-sm font-medium", 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: `${fieldClass} pr-10`, required: true, minLength: 12, autoComplete: "new-password" }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2", 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: "bg-muted h-1.5 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full transition-all ${strength.color}`, style: { width: `${(strength.score / 6) * 100}%` } }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: strength.label })] }) }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "setup-confirm", className: "text-foreground mb-1.5 block text-sm font-medium", 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: `${fieldClass} ${confirmPassword && !passwordsMatch ? 'border-destructive' : ''}`, required: true, autoComplete: "new-password" }), confirmPassword && !passwordsMatch && (_jsx("p", { className: "text-destructive mt-1 text-xs", children: "Passwords do not match" }))] }), _jsx("button", { type: "submit", disabled: !canSubmit, className: "bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg py-2.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: submitting ? 'Creating Account...' : 'Create Admin Account' }), _jsx("p", { className: "text-muted-foreground text-center text-xs", 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