import useEditorStore from '../store/useEditorStore';

/**
 * Text-only editor panel for advanced templates.
 * Only allows editing labels, placeholders, and text—no design controls.
 */
export default function AdvancedTextEditor() {
    const editingTemplate = useEditorStore((s) => s.editingTemplate);
    const updateBlockSettings = useEditorStore((s) => s.updateBlockSettings);

    const blocks = editingTemplate?.jsonData?.blocks || [];
    const loginForm = blocks.find((b) => b.type === 'loginForm');

    if (!loginForm) {
        return (
            <div className="lpcd-advanced-editor">
                <div className="lpcd-advanced-empty">
                    <span className="dashicons dashicons-info-outline" />
                    <p>No login form block found in this template.</p>
                </div>
            </div>
        );
    }

    const s = loginForm.settings || {};
    const u = (key, val) => updateBlockSettings(loginForm.id, key, val);

    return (
        <div className="lpcd-advanced-editor">
            <div className="lpcd-advanced-header">
                <span className="dashicons dashicons-edit" />
                <h3>Edit Text Labels</h3>
            </div>

            <div className="lpcd-advanced-notice">
                <span className="dashicons dashicons-warning" />
                <p>This is an <strong>Advanced Template</strong> with a locked design. You can only customize the text labels shown on the login form. Changes will be reflected in the live preview instantly.</p>
            </div>

            <div className="lpcd-advanced-section">
                <h4 className="lpcd-advanced-section-title">Username Field</h4>
                <div className="lpcd-advanced-field">
                    <label>Label</label>
                    <input
                        type="text"
                        value={s.usernameLabel || ''}
                        onChange={(e) => u('usernameLabel', e.target.value)}
                        placeholder="Username or Email Address"
                    />
                </div>
                <div className="lpcd-advanced-field">
                    <label>Placeholder</label>
                    <input
                        type="text"
                        value={s.usernamePlaceholder || ''}
                        onChange={(e) => u('usernamePlaceholder', e.target.value)}
                        placeholder="e.g. Enter your email..."
                    />
                </div>
            </div>

            <div className="lpcd-advanced-section">
                <h4 className="lpcd-advanced-section-title">Password Field</h4>
                <div className="lpcd-advanced-field">
                    <label>Label</label>
                    <input
                        type="text"
                        value={s.passwordLabel || ''}
                        onChange={(e) => u('passwordLabel', e.target.value)}
                        placeholder="Password"
                    />
                </div>
                <div className="lpcd-advanced-field">
                    <label>Placeholder</label>
                    <input
                        type="text"
                        value={s.passwordPlaceholder || ''}
                        onChange={(e) => u('passwordPlaceholder', e.target.value)}
                        placeholder="e.g. Enter your password..."
                    />
                </div>
            </div>

            <div className="lpcd-advanced-section">
                <h4 className="lpcd-advanced-section-title">Submit Button</h4>
                <div className="lpcd-advanced-field">
                    <label>Button Text</label>
                    <input
                        type="text"
                        value={s.submitText || ''}
                        onChange={(e) => u('submitText', e.target.value)}
                        placeholder="Log In"
                    />
                </div>
            </div>

            <div className="lpcd-advanced-section">
                <h4 className="lpcd-advanced-section-title">Options</h4>
                <div className="lpcd-advanced-field">
                    <label>Remember Me Text</label>
                    <input
                        type="text"
                        value={s.rememberMeText || ''}
                        onChange={(e) => u('rememberMeText', e.target.value)}
                        placeholder="Remember Me"
                    />
                </div>
                <div className="lpcd-advanced-toggle">
                    <label>
                        <input
                            type="checkbox"
                            checked={s.showRememberMe !== false}
                            onChange={(e) => u('showRememberMe', e.target.checked)}
                        />
                        Show Remember Me
                    </label>
                </div>
                <div className="lpcd-advanced-field">
                    <label>Lost Password Text</label>
                    <input
                        type="text"
                        value={s.lostPasswordText || ''}
                        onChange={(e) => u('lostPasswordText', e.target.value)}
                        placeholder="Lost your password?"
                    />
                </div>
                <div className="lpcd-advanced-toggle">
                    <label>
                        <input
                            type="checkbox"
                            checked={s.showLostPassword !== false}
                            onChange={(e) => u('showLostPassword', e.target.checked)}
                        />
                        Show Lost Password Link
                    </label>
                </div>
                <div className="lpcd-advanced-toggle">
                    <label>
                        <input
                            type="checkbox"
                            checked={s.showBackLink !== false}
                            onChange={(e) => u('showBackLink', e.target.checked)}
                        />
                        Show Back to Site Link
                    </label>
                </div>
                <div className="lpcd-advanced-toggle">
                    <label>
                        <input
                            type="checkbox"
                            checked={s.showRegisterLink !== false}
                            onChange={(e) => u('showRegisterLink', e.target.checked)}
                        />
                        Show Register Link
                    </label>
                </div>
            </div>
        </div>
    );
}
