"use client"

import { useState } from "react"
import { WhatsAppTemplateList } from "./WhatsAppTemplateList"
import { WhatsAppTemplateDraftEditor } from "./WhatsAppTemplateDraftEditor"
import { TemplateDraftItem } from "@/types/whatsapp"

export function WhatsAppTemplateMain() {
    const [view, setView] = useState<"list" | "editor">("list")
    const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)

    const handleSelectTemplate = (template: TemplateDraftItem) => {
        setSelectedTemplateId(template._id)
        setView("editor")
    }

    const handleCreateNew = () => {
        setSelectedTemplateId(null)
        setView("editor")
    }

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

    return (
        <div className="w-full">
            {view === "list" ? (
                <WhatsAppTemplateList
                    onSelectTemplate={handleSelectTemplate}
                    onCreateNew={handleCreateNew}
                />
            ) : (
                <WhatsAppTemplateDraftEditor
                    templateId={selectedTemplateId}
                    onBack={handleBack}
                />
            )}
        </div>
    )
}