'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { ArrowLeft, Eye, Loader2, AlertTriangle } from 'lucide-react';
import { toast } from 'sonner';
import { SEOPanel } from '../components/SEOPanel.js';
import { useApiData } from '../lib/useApiData.js';
import { cmsApi } from '../lib/api.js';
export function PageEditor({ id, onNavigate }) {
    const isNew = !id;
    const { data, loading, error } = useApiData(isNew ? '' : `/collections/pages/${id}`);
    const [title, setTitle] = useState('');
    const [slug, setSlug] = useState('');
    const [status, setStatus] = useState('draft');
    const [saving, setSaving] = useState(false);
    const [initialized, setInitialized] = useState(isNew);
    const [seoData, setSeoData] = useState({});
    useEffect(() => {
        if (data && !initialized) {
            setTitle(data.title ?? '');
            setSlug(data.slug ?? '');
            setStatus(data.status === 'PUBLISHED' ? 'published' : 'draft');
            setInitialized(true);
        }
    }, [data, initialized]);
    const savePage = async () => {
        setSaving(true);
        const body = JSON.stringify({
            title,
            slug,
            status: status === 'published' ? 'PUBLISHED' : 'DRAFT',
        });
        const res = isNew
            ? await cmsApi('/collections/pages', { method: 'POST', body })
            : await cmsApi(`/collections/pages/${id}`, { method: 'PUT', body });
        setSaving(false);
        if (res.error) {
            toast.error(res.error);
        }
        else {
            toast.success('Page saved successfully!');
            if (isNew && res.data?.id) {
                onNavigate?.(`/pages/${res.data.id}`);
            }
        }
    };
    const publishPage = async () => {
        setSaving(true);
        const body = JSON.stringify({
            title,
            slug,
            status: 'PUBLISHED',
        });
        const endpoint = isNew ? '/collections/pages' : `/collections/pages/${id}`;
        const method = isNew ? 'POST' : 'PUT';
        const res = await cmsApi(endpoint, { method, body });
        setSaving(false);
        if (res.error) {
            toast.error(res.error);
        }
        else {
            setStatus('published');
            toast.success('Page published!');
            if (isNew && res.data?.id) {
                onNavigate?.(`/pages/${res.data.id}`);
            }
        }
    };
    if (!isNew && loading) {
        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-blue-600" }) }));
    }
    return (_jsxs("div", { className: "flex h-full flex-col bg-white", children: [error && (_jsxs("div", { className: "mx-4 mt-3 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3", children: [_jsx(AlertTriangle, { className: "h-5 w-5 shrink-0 text-red-600" }), _jsx("span", { className: "flex-1 text-sm text-red-800", children: error })] })), _jsx("div", { className: "border-b border-gray-200 px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("button", { onClick: () => onNavigate?.('/pages'), className: "inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Pages"] }), _jsx("div", { className: "flex items-center gap-3", children: _jsxs("button", { className: "flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] }) })] }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "mx-auto max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8", children: [_jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Page title", className: "mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl" }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-gray-600", children: "URL Slug" }), _jsx("input", { type: "text", value: slug, onChange: (e) => setSlug(e.target.value), placeholder: "url-slug", className: "w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" })] }), _jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 p-8 text-center", children: [_jsx("p", { className: "mb-2 text-gray-500", children: "No blocks added yet" }), _jsx("p", { className: "text-sm text-gray-400", children: "Click \"Add Block\" to start building your page" }), _jsx("button", { className: "mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700", children: "Add Block" })] })] }) }), _jsx("div", { className: "w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50", children: _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [_jsx("h3", { className: "mb-3 text-sm font-semibold text-gray-900", children: "Publish" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700", children: "Status" }), _jsxs("select", { value: status, onChange: (e) => setStatus(e.target.value), className: "w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none", children: [_jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "published", children: "Published" })] })] }), _jsx("button", { onClick: savePage, disabled: saving, className: "w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50", children: saving ? 'Saving...' : 'Save Page' }), status === 'draft' && (_jsx("button", { onClick: publishPage, disabled: saving, className: "w-full rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50", children: saving ? 'Publishing...' : 'Publish' }))] })] }), _jsx(SEOPanel, { title: title, slug: slug, seoData: seoData, onChange: setSeoData })] }) })] })] }));
}
//# sourceMappingURL=PageEditor.js.map