import { Head, router, useForm } from '@inertiajs/react';
import {
    ArrowDown,
    ArrowUp,
    CheckCircle2,
    ExternalLink,
    FolderOpen,
    Layers3,
    MessageCircleQuestion,
    Plus,
    Settings2,
    Sparkles,
} from 'lucide-react';
import type { FormEvent } from 'react';
import { useMemo, useState } from 'react';
import {
    FaqQuestionSortableList,
    type FaqQuestionRow,
} from '@/components/admin/faq-question-sortable-list';
import { FormField } from '@/components/form-field';
import { EmptyState } from '@/components/layout/empty-state';
import { FormSheet } from '@/components/layout/form-sheet';
import { PageHeader } from '@/components/layout/page-header';
import { ResourceActionsMenu } from '@/components/resource-actions-menu';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { SheetFooter } from '@/components/ui/sheet';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { RichTextEditor } from '@/components/ui/rich-text-editor';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import adminHomepageFaqs from '@/routes/admin/homepage-faqs';
import { edit as adminHomepageLayout } from '@/routes/admin/homepage-layout';

type FaqCategoryRow = {
    id: number;
    name: string;
    display_order: number;
    is_active: boolean;
    items: FaqQuestionRow[];
};

type Props = {
    title: string;
    subtitle: string;
    supportLabel: string;
    supportUrl: string;
    categories: FaqCategoryRow[];
};

function MetricCard({
    label,
    value,
    hint,
    icon: Icon,
}: {
    label: string;
    value: number;
    hint: string;
    icon: React.ComponentType<{ className?: string }>;
}) {
    return (
        <div className="rounded-2xl border border-border/70 bg-card p-4 shadow-sm">
            <div className="flex items-start justify-between gap-3">
                <div className="space-y-1">
                    <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
                        {label}
                    </p>
                    <p className="text-2xl font-semibold tracking-tight">{value}</p>
                    <p className="text-xs text-muted-foreground">{hint}</p>
                </div>
                <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                    <Icon className="size-4.5" />
                </div>
            </div>
        </div>
    );
}

function SaveButton({
    processing,
    saved,
    label = 'Save changes',
}: {
    processing: boolean;
    saved: boolean;
    label?: string;
}) {
    return (
        <Button type="submit" disabled={processing} className="w-full gap-2 sm:w-auto">
            {processing ? (
                <>
                    <span className="size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent" />
                    Saving…
                </>
            ) : saved ? (
                <>
                    <CheckCircle2 className="size-4" />
                    Saved
                </>
            ) : (
                label
            )}
        </Button>
    );
}

export default function AdminHomepageFaqsIndex({
    title,
    subtitle,
    supportLabel,
    supportUrl,
    categories,
}: Props) {
    const settingsForm = useForm({
        title,
        subtitle,
        support_label: supportLabel,
        support_url: supportUrl,
    });
    const [settingsSaved, setSettingsSaved] = useState(false);

    const createCategoryForm = useForm({
        name: '',
        is_active: true,
    });
    const [showCategoryForm, setShowCategoryForm] = useState(false);

    const [editingCategory, setEditingCategory] = useState<FaqCategoryRow | null>(
        null,
    );
    const editCategoryForm = useForm({
        name: '',
        is_active: true,
    });

    const [activeCategoryId, setActiveCategoryId] = useState(
        () => categories[0]?.id.toString() ?? '',
    );
    const [creatingForCategoryId, setCreatingForCategoryId] = useState<
        number | null
    >(null);
    const createItemForm = useForm({
        question: '',
        answer: '',
        is_active: true,
    });

    const [editingItem, setEditingItem] = useState<FaqQuestionRow | null>(null);
    const editItemForm = useForm({
        question: '',
        answer: '',
        is_active: true,
    });

    const stats = useMemo(() => {
        const totalQuestions = categories.reduce(
            (sum, category) => sum + category.items.length,
            0,
        );
        const activeQuestions = categories.reduce(
            (sum, category) =>
                sum + category.items.filter((item) => item.is_active).length,
            0,
        );
        const activeCategories = categories.filter(
            (category) => category.is_active,
        ).length;

        return {
            totalQuestions,
            activeQuestions,
            activeCategories,
        };
    }, [categories]);

    const activeCategory = useMemo(
        () =>
            categories.find(
                (category) => category.id.toString() === activeCategoryId,
            ) ?? categories[0],
        [categories, activeCategoryId],
    );

    const submitSettings = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        settingsForm.patch(adminHomepageFaqs.settings.update.url(), {
            onSuccess: () => {
                setSettingsSaved(true);
                setTimeout(() => setSettingsSaved(false), 3000);
            },
        });
    };

    const submitCreateCategory = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        createCategoryForm.post(adminHomepageFaqs.categories.store.url(), {
            onSuccess: () => {
                createCategoryForm.reset();
                setShowCategoryForm(false);
            },
        });
    };

    const openEditCategory = (category: FaqCategoryRow) => {
        setEditingCategory(category);
        editCategoryForm.setData({
            name: category.name,
            is_active: category.is_active,
        });
        editCategoryForm.clearErrors();
    };

    const closeEditCategory = () => {
        setEditingCategory(null);
        editCategoryForm.reset();
        editCategoryForm.clearErrors();
    };

    const submitEditCategory = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!editingCategory) {
            return;
        }

        editCategoryForm.patch(
            adminHomepageFaqs.categories.update.url({
                category: editingCategory.id,
            }),
            { onSuccess: () => closeEditCategory() },
        );
    };

    const deleteCategory = (categoryId: number) => {
        router.delete(
            adminHomepageFaqs.categories.destroy.url({ category: categoryId }),
        );
    };

    const moveCategory = (categoryId: number, direction: -1 | 1) => {
        const index = categories.findIndex(
            (category) => category.id === categoryId,
        );

        if (index === -1) {
            return;
        }

        const targetIndex = index + direction;

        if (targetIndex < 0 || targetIndex >= categories.length) {
            return;
        }

        const orderedIds = categories.map((category) => category.id);
        [orderedIds[index], orderedIds[targetIndex]] = [
            orderedIds[targetIndex],
            orderedIds[index],
        ];

        router.post(
            adminHomepageFaqs.categories.reorder.url(),
            { ids: orderedIds },
            { preserveScroll: true, preserveState: true },
        );
    };

    const openCreateItem = (categoryId: number) => {
        setCreatingForCategoryId(categoryId);
        createItemForm.reset();
        createItemForm.clearErrors();
    };

    const closeCreateItem = () => {
        setCreatingForCategoryId(null);
        createItemForm.reset();
        createItemForm.clearErrors();
    };

    const submitCreateItem = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!creatingForCategoryId) {
            return;
        }

        createItemForm.post(
            adminHomepageFaqs.items.store.url({
                category: creatingForCategoryId,
            }),
            { onSuccess: () => closeCreateItem() },
        );
    };

    const openEditItem = (item: FaqQuestionRow) => {
        setEditingItem(item);
        editItemForm.setData({
            question: item.question,
            answer: item.answer,
            is_active: item.is_active,
        });
        editItemForm.clearErrors();
    };

    const closeEditItem = () => {
        setEditingItem(null);
        editItemForm.reset();
        editItemForm.clearErrors();
    };

    const submitEditItem = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!editingItem) {
            return;
        }

        editItemForm.patch(
            adminHomepageFaqs.items.update.url({ item: editingItem.id }),
            { onSuccess: () => closeEditItem() },
        );
    };

    const deleteItem = (itemId: number) => {
        router.delete(adminHomepageFaqs.items.destroy.url({ item: itemId }));
    };

    const reorderItems = (categoryId: number, orderedIds: number[]) => {
        router.post(
            adminHomepageFaqs.items.reorder.url({ category: categoryId }),
            { ids: orderedIds },
            { preserveScroll: true, preserveState: true },
        );
    };

    const sheetOpen =
        editingCategory !== null ||
        creatingForCategoryId !== null ||
        editingItem !== null;

    return (
        <>
            <Head title="Homepage FAQs" />

            <div className="flex h-full flex-1 flex-col gap-6">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <PageHeader
                        title="Homepage FAQs"
                        description="Configure the public FAQ section on your welcome page. Organize categories, questions, and support messaging."
                    />
                    <div className="flex flex-wrap items-center gap-2">
                        {settingsSaved && (
                            <span className="hidden items-center gap-1.5 text-sm text-emerald-600 sm:flex dark:text-emerald-400">
                                <CheckCircle2 className="size-4" />
                                Settings saved
                            </span>
                        )}
                        <Button variant="outline" size="sm" asChild>
                            <a href="/" target="_blank" rel="noopener noreferrer">
                                Preview homepage
                                <ExternalLink className="size-3.5" />
                            </a>
                        </Button>
                    </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-3">
                    <MetricCard
                        label="Categories"
                        value={categories.length}
                        hint={`${stats.activeCategories} active on site`}
                        icon={Layers3}
                    />
                    <MetricCard
                        label="Questions"
                        value={stats.totalQuestions}
                        hint={`${stats.activeQuestions} published`}
                        icon={MessageCircleQuestion}
                    />
                    <MetricCard
                        label="Live tabs"
                        value={stats.activeCategories}
                        hint="Visible when they contain active Q&A"
                        icon={Sparkles}
                    />
                </div>

                <div className="grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
                    <div className="space-y-4 xl:sticky xl:top-24 xl:self-start">
                        <Card className="overflow-hidden border-border/70 shadow-sm">
                            <CardHeader className="border-b bg-muted/20 pb-4">
                                <div className="flex items-start gap-3">
                                    <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                        <Settings2 className="size-4.5" />
                                    </div>
                                    <div className="space-y-1">
                                        <CardTitle className="text-base">
                                            Section appearance
                                        </CardTitle>
                                        <CardDescription>
                                            Headline, subtitle, and support CTA shown above the FAQ accordion.
                                        </CardDescription>
                                    </div>
                                </div>
                            </CardHeader>
                            <CardContent className="space-y-5 pt-5">
                                <div className="rounded-2xl border border-border/70 bg-linear-to-br from-muted/40 to-background p-4 shadow-inner">
                                    <p className="text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
                                        Live preview
                                    </p>
                                    <p className="mt-3 text-lg font-semibold tracking-tight">
                                        {settingsForm.data.title || 'FAQ title'}
                                    </p>
                                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                                        {settingsForm.data.subtitle ||
                                            'FAQ subtitle appears here.'}
                                    </p>
                                    <p className="mt-4 text-sm text-muted-foreground">
                                        Didn&apos;t find the answer?{' '}
                                        <span className="font-semibold text-foreground">
                                            {settingsForm.data.support_label ||
                                                'Contact support'}
                                        </span>
                                    </p>
                                </div>

                                <form onSubmit={submitSettings} className="space-y-4">
                                    <FormField label="Title" htmlFor="faq_title">
                                        <Input
                                            id="faq_title"
                                            value={settingsForm.data.title}
                                            onChange={(event) =>
                                                settingsForm.setData(
                                                    'title',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>

                                    <FormField label="Subtitle" htmlFor="faq_subtitle">
                                        <Textarea
                                            id="faq_subtitle"
                                            rows={3}
                                            value={settingsForm.data.subtitle}
                                            onChange={(event) =>
                                                settingsForm.setData(
                                                    'subtitle',
                                                    event.target.value,
                                                )
                                            }
                                        />
                                    </FormField>

                                    <Separator />

                                    <div className="grid gap-4">
                                        <FormField
                                            label="Support link label"
                                            htmlFor="faq_support_label"
                                        >
                                            <Input
                                                id="faq_support_label"
                                                value={
                                                    settingsForm.data.support_label
                                                }
                                                onChange={(event) =>
                                                    settingsForm.setData(
                                                        'support_label',
                                                        event.target.value,
                                                    )
                                                }
                                            />
                                        </FormField>
                                        <FormField
                                            label="Support link URL"
                                            htmlFor="faq_support_url"
                                        >
                                            <Input
                                                id="faq_support_url"
                                                value={settingsForm.data.support_url}
                                                onChange={(event) =>
                                                    settingsForm.setData(
                                                        'support_url',
                                                        event.target.value,
                                                    )
                                                }
                                            />
                                        </FormField>
                                    </div>

                                    <SaveButton
                                        processing={settingsForm.processing}
                                        saved={settingsSaved}
                                        label="Save section settings"
                                    />
                                </form>
                            </CardContent>
                        </Card>
                    </div>

                    <Card className="overflow-hidden border-border/70 shadow-sm">
                        <CardHeader className="border-b bg-muted/20 pb-4">
                            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                <div className="flex items-start gap-3">
                                    <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                        <FolderOpen className="size-4.5" />
                                    </div>
                                    <div className="space-y-1">
                                        <CardTitle className="text-base">
                                            Content library
                                        </CardTitle>
                                        <CardDescription>
                                            Categories become tabs on the homepage. Questions render as accordion items inside each tab.
                                        </CardDescription>
                                    </div>
                                </div>
                                <Button
                                    type="button"
                                    variant={showCategoryForm ? 'secondary' : 'default'}
                                    size="sm"
                                    className="shrink-0 gap-1.5"
                                    onClick={() =>
                                        setShowCategoryForm((open) => !open)
                                    }
                                >
                                    <Plus className="size-4" />
                                    New category
                                </Button>
                            </div>
                        </CardHeader>

                        <CardContent className="p-0">
                            {showCategoryForm && (
                                <div className="border-b bg-muted/10 px-6 py-5">
                                    <form
                                        onSubmit={submitCreateCategory}
                                        className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto_auto] lg:items-end"
                                    >
                                        <FormField
                                            label="Category name"
                                            htmlFor="category_name"
                                        >
                                            <Input
                                                id="category_name"
                                                placeholder="e.g. Pricing, Booking, General"
                                                value={createCategoryForm.data.name}
                                                onChange={(event) =>
                                                    createCategoryForm.setData(
                                                        'name',
                                                        event.target.value,
                                                    )
                                                }
                                            />
                                        </FormField>
                                        <div className="flex items-center gap-2 rounded-xl border bg-background px-3 py-2.5">
                                            <Switch
                                                id="category_active"
                                                checked={
                                                    createCategoryForm.data
                                                        .is_active
                                                }
                                                onCheckedChange={(checked) =>
                                                    createCategoryForm.setData(
                                                        'is_active',
                                                        checked,
                                                    )
                                                }
                                            />
                                            <Label htmlFor="category_active">
                                                Active
                                            </Label>
                                        </div>
                                        <div className="flex gap-2">
                                            <Button
                                                type="button"
                                                variant="outline"
                                                onClick={() =>
                                                    setShowCategoryForm(false)
                                                }
                                            >
                                                Cancel
                                            </Button>
                                            <Button
                                                type="submit"
                                                disabled={
                                                    createCategoryForm.processing
                                                }
                                            >
                                                Create
                                            </Button>
                                        </div>
                                    </form>
                                </div>
                            )}

                            {categories.length === 0 ? (
                                <div className="p-6">
                                    <EmptyState
                                        title="Start with a category"
                                        description="Create your first category to organize FAQ tabs on the homepage."
                                        className="border-border/70 bg-muted/10 py-16"
                                    />
                                </div>
                            ) : (
                                <div className="grid min-h-[520px] lg:grid-cols-[280px_minmax(0,1fr)]">
                                    <div className="border-b lg:border-r lg:border-b-0">
                                        <div className="border-b px-4 py-3">
                                            <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                                                Categories
                                            </p>
                                        </div>
                                        <div className="space-y-1 p-3">
                                            {categories.map((category, index) => {
                                                const isSelected =
                                                    category.id.toString() ===
                                                    activeCategoryId;

                                                return (
                                                    <div
                                                        key={category.id}
                                                        className={cn(
                                                            'rounded-xl border transition-all',
                                                            isSelected
                                                                ? 'border-primary/20 bg-primary/5 shadow-sm'
                                                                : 'border-transparent hover:border-border/70 hover:bg-muted/30',
                                                        )}
                                                    >
                                                        <button
                                                            type="button"
                                                            onClick={() =>
                                                                setActiveCategoryId(
                                                                    category.id.toString(),
                                                                )
                                                            }
                                                            className="flex w-full items-start gap-3 px-3 py-3 text-left"
                                                        >
                                                            <div
                                                                className={cn(
                                                                    'mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold',
                                                                    isSelected
                                                                        ? 'bg-primary text-primary-foreground'
                                                                        : 'bg-muted text-muted-foreground',
                                                                )}
                                                            >
                                                                {index + 1}
                                                            </div>
                                                            <div className="min-w-0 flex-1">
                                                                <div className="flex flex-wrap items-center gap-2">
                                                                    <p className="font-medium">
                                                                        {
                                                                            category.name
                                                                        }
                                                                    </p>
                                                                    {!category.is_active && (
                                                                        <Badge
                                                                            variant="secondary"
                                                                            className="text-[10px] uppercase tracking-wide"
                                                                        >
                                                                            Hidden
                                                                        </Badge>
                                                                    )}
                                                                </div>
                                                                <p className="mt-1 text-xs text-muted-foreground">
                                                                    {
                                                                        category
                                                                            .items
                                                                            .length
                                                                    }{' '}
                                                                    question
                                                                    {category
                                                                        .items
                                                                        .length ===
                                                                    1
                                                                        ? ''
                                                                        : 's'}
                                                                </p>
                                                            </div>
                                                        </button>

                                                        <div className="flex items-center justify-between gap-2 border-t border-border/50 px-3 py-2">
                                                            <div className="flex items-center gap-1">
                                                                <Button
                                                                    type="button"
                                                                    variant="ghost"
                                                                    size="icon-sm"
                                                                    disabled={
                                                                        index ===
                                                                        0
                                                                    }
                                                                    onClick={() =>
                                                                        moveCategory(
                                                                            category.id,
                                                                            -1,
                                                                        )
                                                                    }
                                                                >
                                                                    <ArrowUp className="size-3.5" />
                                                                </Button>
                                                                <Button
                                                                    type="button"
                                                                    variant="ghost"
                                                                    size="icon-sm"
                                                                    disabled={
                                                                        index ===
                                                                        categories.length -
                                                                            1
                                                                    }
                                                                    onClick={() =>
                                                                        moveCategory(
                                                                            category.id,
                                                                            1,
                                                                        )
                                                                    }
                                                                >
                                                                    <ArrowDown className="size-3.5" />
                                                                </Button>
                                                            </div>
                                                            <ResourceActionsMenu
                                                                onEdit={() =>
                                                                    openEditCategory(
                                                                        category,
                                                                    )
                                                                }
                                                                onDelete={() =>
                                                                    deleteCategory(
                                                                        category.id,
                                                                    )
                                                                }
                                                                deleteTitle="Delete category?"
                                                                deleteDescription="All questions in this category will also be deleted."
                                                            />
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>

                                    <div className="flex min-h-[420px] flex-col">
                                        {activeCategory ? (
                                            <>
                                                <div className="flex flex-col gap-4 border-b px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
                                                    <div>
                                                        <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                                                            Questions
                                                        </p>
                                                        <h3 className="mt-1 text-lg font-semibold tracking-tight">
                                                            {activeCategory.name}
                                                        </h3>
                                                        <p className="mt-1 text-sm text-muted-foreground">
                                                            Drag to reorder. Only active questions appear on the public site.
                                                        </p>
                                                    </div>
                                                    <Button
                                                        type="button"
                                                        className="gap-1.5"
                                                        onClick={() =>
                                                            openCreateItem(
                                                                activeCategory.id,
                                                            )
                                                        }
                                                    >
                                                        <Plus className="size-4" />
                                                        Add question
                                                    </Button>
                                                </div>

                                                <div className="flex-1 p-6">
                                                    <FaqQuestionSortableList
                                                        items={
                                                            activeCategory.items
                                                        }
                                                        disabled={sheetOpen}
                                                        onReorder={(
                                                            orderedIds,
                                                        ) =>
                                                            reorderItems(
                                                                activeCategory.id,
                                                                orderedIds,
                                                            )
                                                        }
                                                        onEdit={openEditItem}
                                                        onDelete={deleteItem}
                                                    />
                                                </div>
                                            </>
                                        ) : null}
                                    </div>
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>

            <FormSheet
                open={editingCategory !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        closeEditCategory();
                    }
                }}
                title="Edit category"
            >
                <form onSubmit={submitEditCategory} className="grid gap-4">
                    <FormField label="Name" htmlFor="edit_category_name">
                        <Input
                            id="edit_category_name"
                            value={editCategoryForm.data.name}
                            onChange={(event) =>
                                editCategoryForm.setData(
                                    'name',
                                    event.target.value,
                                )
                            }
                        />
                    </FormField>
                    <div className="flex items-center gap-2 rounded-xl border bg-muted/20 px-3 py-2.5">
                        <Switch
                            id="edit_category_active"
                            checked={editCategoryForm.data.is_active}
                            onCheckedChange={(checked) =>
                                editCategoryForm.setData('is_active', checked)
                            }
                        />
                        <Label htmlFor="edit_category_active">Active</Label>
                    </div>
                    <SheetFooter>
                        <Button
                            type="submit"
                            disabled={editCategoryForm.processing}
                        >
                            Save category
                        </Button>
                    </SheetFooter>
                </form>
            </FormSheet>

            <FormSheet
                open={creatingForCategoryId !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        closeCreateItem();
                    }
                }}
                title="Add question"
                className="sm:max-w-2xl"
            >
                <form onSubmit={submitCreateItem} className="grid gap-4">
                    <FormField label="Question" htmlFor="create_question">
                        <Input
                            id="create_question"
                            placeholder="What do customers ask most often?"
                            value={createItemForm.data.question}
                            onChange={(event) =>
                                createItemForm.setData(
                                    'question',
                                    event.target.value,
                                )
                            }
                        />
                    </FormField>
                    <FormField label="Answer" htmlFor="create_answer">
                        <RichTextEditor
                            id="create_answer"
                            key={`create-${creatingForCategoryId ?? 'new'}`}
                            value={createItemForm.data.answer}
                            onChange={(html) =>
                                createItemForm.setData('answer', html)
                            }
                            placeholder="Write a clear, concise answer."
                        />
                    </FormField>
                    <div className="flex items-center gap-2 rounded-xl border bg-muted/20 px-3 py-2.5">
                        <Switch
                            id="create_item_active"
                            checked={createItemForm.data.is_active}
                            onCheckedChange={(checked) =>
                                createItemForm.setData('is_active', checked)
                            }
                        />
                        <Label htmlFor="create_item_active">
                            Publish on homepage
                        </Label>
                    </div>
                    <SheetFooter>
                        <Button
                            type="submit"
                            disabled={createItemForm.processing}
                        >
                            Create question
                        </Button>
                    </SheetFooter>
                </form>
            </FormSheet>

            <FormSheet
                open={editingItem !== null}
                onOpenChange={(open) => {
                    if (!open) {
                        closeEditItem();
                    }
                }}
                title="Edit question"
                className="sm:max-w-2xl"
            >
                <form onSubmit={submitEditItem} className="grid gap-4">
                    <FormField label="Question" htmlFor="edit_question">
                        <Input
                            id="edit_question"
                            value={editItemForm.data.question}
                            onChange={(event) =>
                                editItemForm.setData(
                                    'question',
                                    event.target.value,
                                )
                            }
                        />
                    </FormField>
                    <FormField label="Answer" htmlFor="edit_answer">
                        <RichTextEditor
                            id="edit_answer"
                            key={`edit-${editingItem?.id ?? 'none'}`}
                            value={editItemForm.data.answer}
                            onChange={(html) =>
                                editItemForm.setData('answer', html)
                            }
                            placeholder="Write a clear, concise answer."
                        />
                    </FormField>
                    <div className="flex items-center gap-2 rounded-xl border bg-muted/20 px-3 py-2.5">
                        <Switch
                            id="edit_item_active"
                            checked={editItemForm.data.is_active}
                            onCheckedChange={(checked) =>
                                editItemForm.setData('is_active', checked)
                            }
                        />
                        <Label htmlFor="edit_item_active">
                            Publish on homepage
                        </Label>
                    </div>
                    <SheetFooter>
                        <Button
                            type="submit"
                            disabled={editItemForm.processing}
                        >
                            Save question
                        </Button>
                    </SheetFooter>
                </form>
            </FormSheet>
        </>
    );
}

AdminHomepageFaqsIndex.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Website settings', href: adminHomepageLayout.url() },
            { title: 'Homepage FAQs', href: adminHomepageFaqs.index.url() },
        ]}
    >
        {page}
    </AppLayout>
);