import { getArticleByExternalId } from '@/lib/feature/article/article.external';
import { UpdateArticleForm } from '@/ui/components/internal/update-article-form';
import { UUIDv4 } from '@/utils/types/uuid';
import { ArrowLeftIcon } from 'lucide-react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Suspense } from 'react';

interface UpdateArticlePageProps {
    params: Promise<{ externalId: string }>;
}

const ArticleFormContent = async ({
    params,
}: {
    params: Promise<{ externalId: string }>;
}) => {
    const { externalId } = await params;
    const result = await getArticleByExternalId(externalId as UUIDv4);
    if (!result.ok) throw result.error;

    const article = result.value;
    if (!article) notFound();

    return <UpdateArticleForm article={article} />;
};

const UpdateArticlePage = ({ params }: UpdateArticlePageProps) => {
    return (
        <div className='container mx-auto px-4 py-10 min-h-3/4'>
            <div className='mb-6'>
                <Link
                    href='/admin'
                    className='inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors'
                >
                    <ArrowLeftIcon className='size-4' />
                    Back to articles
                </Link>
            </div>
            <div className='rounded-lg border border-border p-6'>
                <h2 className='mb-6 text-2xl font-bold'>Edit Article</h2>
                <Suspense fallback={<div>Loading...</div>}>
                    <ArticleFormContent params={params} />
                </Suspense>
            </div>
        </div>
    );
};

export default UpdateArticlePage;