"use client"

import { useState } from "react"
import { PageTitle } from "@/components/common/PageTitle"
import { WhatsAppTemplateDraftEditor } from "@/components/modules/reminders/WhatsAppTemplateDraftEditor"
import { TemplateDraftItem } from "@/types/whatsapp"
import { useTranslations } from "next-intl"
import { WhatsAppTemplateList } from "@/components/modules/reminders/WhatsAppTemplateList"

type ViewMode = "list" | "create" | "edit"

export default function WhatsAppTemplatePage() {
    const t = useTranslations("sidebar")
    const [viewMode, setViewMode] = useState<ViewMode>("list")
    const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)

    const handleSelectTemplate = (template: TemplateDraftItem) => {
        setSelectedTemplateId(template._id)
        setViewMode("edit")
    }

    const handleCreateNew = () => {
        setSelectedTemplateId(null)
        setViewMode("create")
    }

    const handleBack = () => {
        setSelectedTemplateId(null)
        setViewMode("list")
    }

    return (
        <div className="w-full">
            <PageTitle title={t("whatsappTemplate")} />

            {viewMode === "list" && (
                <WhatsAppTemplateList
                    onSelectTemplate={handleSelectTemplate}
                    onCreateNew={handleCreateNew}
                />
            )}

            {(viewMode === "create" || viewMode === "edit") && (
                <WhatsAppTemplateDraftEditor
                    templateId={selectedTemplateId}
                    onBack={handleBack}
                />
            )}
        </div>
    )
}