/**
 * ============================================================
 * © 2025 Diploy — a brand of Bisht Technologies Private Limited
 * Original Author: BTPL Engineering Team
 * Website: https://diploy.in
 * Contact: cs@diploy.in
 *
 * Distributed under the Envato / CodeCanyon License Agreement.
 * Licensed to the purchaser for use as defined by the
 * Envato Market (CodeCanyon) Regular or Extended License.
 *
 * You are NOT permitted to redistribute, resell, sublicense,
 * or share this source code, in whole or in part.
 * Respect the author's rights and Envato licensing terms.
 * ============================================================
 */

import { useState, useCallback, useEffect } from "react";
import { PageNumbers } from "@/components/ui/page-numbers";
import { useQuery, useMutation } from "@tanstack/react-query";
import Header from "@/components/layout/header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Loading } from "@/components/ui/loading";
import {
  FileText, Plus, RefreshCw, Clock, Trash2, Edit3,
  Phone, ExternalLink, Reply, Clipboard, Image, Video,
  FileDown, Megaphone, Wrench, ShieldCheck, Globe, MousePointerClick,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { WHATSAPP_LANGUAGES } from "@/lib/template-constants";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient, apiRequestFormData } from "@/lib/queryClient";
import type { Template } from "@shared/schema";
import { TemplatesTable } from "@/components/templates/TemplatesTable";
import { TemplatePreview } from "@/components/templates/TemplatePreview";
import {
  TemplateDialog,
  getTemplateDrafts,
  deleteTemplateDraft,
  type TemplateDraft,
} from "@/components/templates/TemplateDialog";
import { useAuth } from "@/contexts/auth-context";
import { api } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";

type SyncFail = {
  status: string;
  message: string;
};

const languageMap = Object.fromEntries(
  WHATSAPP_LANGUAGES.map((l) => [l.code, l.label])
);

function getLanguageLabel(code: string): string {
  return languageMap[code] || languageMap[code?.replace("-", "_")] || code || "English";
}

const categoryStyles: Record<string, { label: string; className: string; icon: any }> = {
  MARKETING: { label: "Marketing", className: "bg-purple-50 text-purple-700 border-purple-200", icon: Megaphone },
  UTILITY: { label: "Utility", className: "bg-blue-50 text-blue-700 border-blue-200", icon: Wrench },
  AUTHENTICATION: { label: "Authentication", className: "bg-amber-50 text-amber-700 border-amber-200", icon: ShieldCheck },
};

const btnTypeIcons: Record<string, any> = {
  PHONE_NUMBER: Phone,
  URL: ExternalLink,
  QUICK_REPLY: Reply,
  COPY_CODE: Clipboard,
};

function extractButtons(template: any) {
  const buttons: Array<{ type: string; text: string }> = [];
  if (template.buttons && Array.isArray(template.buttons)) {
    for (const btn of template.buttons) {
      buttons.push({ type: btn.type || "QUICK_REPLY", text: btn.text || "" });
    }
  }
  if (buttons.length === 0 && template.components && Array.isArray(template.components)) {
    for (const comp of template.components) {
      if (comp.type === "BUTTONS" && Array.isArray(comp.buttons)) {
        for (const btn of comp.buttons) {
          buttons.push({ type: btn.type || "QUICK_REPLY", text: btn.text || "" });
        }
      }
    }
  }
  return buttons;
}

function getMediaIcon(mediaType: string | null | undefined) {
  switch (mediaType?.toLowerCase()) {
    case "image": return Image;
    case "video": return Video;
    case "document": return FileDown;
    default: return null;
  }
}

export default function Templates() {
  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
    null
  );
  const [showDialog, setShowDialog] = useState(false);
  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
  const [activeDraft, setActiveDraft] = useState<TemplateDraft | null>(null);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const { toast } = useToast();
  const { user } = useAuth();
  const userRole = user?.role;
  const { t } = useTranslation();

  // Fetch active channel
  const { data: activeChannel } = useQuery({
    queryKey: ["/api/channels/active"],
  });
  const channelId = activeChannel?.id;

  const [drafts, setDrafts] = useState<TemplateDraft[]>(() => getTemplateDrafts(channelId));

  const refreshDrafts = useCallback(() => {
    setDrafts(getTemplateDrafts(channelId));
  }, [channelId]);

  useEffect(() => {
    setDrafts(getTemplateDrafts(channelId));
  }, [channelId]);

  const handleResumeDraft = (draft: TemplateDraft) => {
    setEditingTemplate(null);
    setActiveDraft(draft);
    setShowDialog(true);
  };

  const handleDeleteDraft = (draftId: string) => {
    deleteTemplateDraft(draftId, channelId);
    refreshDrafts();
  };


  // Fetch templates (paginated)
  const { data: templatesData, isLoading: templatesLoading } = useQuery({
    queryKey: ["templates", userRole, channelId, page, limit],
    queryFn: async () => {
      if (userRole === "superadmin") {
        const res = await fetch(`/api/templates?page=${page}&limit=${limit}`, {
          credentials: "include",
        });
        if (!res.ok) throw new Error(await res.text());
        return res.json(); // expects { data: Template[], pagination: { total, totalPages } }
      } else {
        const res = await api.getTemplates(channelId, page, limit);
        const data = await res.json();
        return data;
      }
    },
    enabled: userRole === "superadmin" || !!activeChannel,
  });


const createTemplateMutation = useMutation({
  mutationFn: async (data: any) => {
    const formData = new FormData();

    formData.append("name", data.name);
    formData.append("category", data.category);
    formData.append("language", data.language);
    formData.append("body", data.body || "");
    formData.append("channelId", activeChannel?.id);

    if (data.footer) {
      formData.append("footer", data.footer);
    }

    if (data.variables?.length) {
      formData.append("samples", JSON.stringify(data.variables));
    }

    if (data.buttons?.length) {
      formData.append("buttons", JSON.stringify(data.buttons));
    }

    if (data.mediaFile) {
      formData.append("mediaFile", data.mediaFile);
      formData.append("mediaType", data.mediaType);
    } else if (data.header) {
      formData.append("header", data.header);
    }

    if (data.marketingSubType && data.marketingSubType !== "CUSTOM") {
      formData.append("marketingSubType", data.marketingSubType);
    }

    if (data.couponCode) {
      formData.append("couponCode", data.couponCode);
    }

    if (data.offerText) {
      formData.append("offerText", data.offerText);
    }

    if (data.hasExpiration) {
      formData.append("hasExpiration", "true");
      formData.append("expirationDays", String(data.expirationDays || 14));
    }

    if (data.carouselCards?.length) {
      const cardsForJson = data.carouselCards.map((card: any) => {
        const { mediaFile, mediaPreview, ...rest } = card;
        return rest;
      });
      formData.append("carouselCards", JSON.stringify(cardsForJson));
      data.carouselCards.forEach((card: any, idx: number) => {
        if (card.mediaFile instanceof File) {
          formData.append(`carouselCardMedia_${idx}`, card.mediaFile);
        }
      });
    }

    if (data.catalogId) {
      formData.append("catalogId", data.catalogId);
    }

    if (data.category === "AUTHENTICATION") {
      formData.append("authType", data.authType || "COPY_CODE");
      formData.append("authCodeExpiry", String(data.authCodeExpiry || 10));
      formData.append("authSecurityDisclaimer", String(data.authSecurityDisclaimer));
      if (data.authPackageName) {
        formData.append("authPackageName", data.authPackageName);
      }
      if (data.authSignatureHash) {
        formData.append("authSignatureHash", data.authSignatureHash);
      }
    }

    if (data.headerVariable) {
      formData.append("headerVariable", data.headerVariable);
    }

    if (editingTemplate) {
      return await apiRequestFormData(
        "PUT",
        `/api/templates/${editingTemplate.id}`,
        formData
      );
    }

    return await apiRequestFormData("POST", "/api/templates", formData);
  },

  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["templates"] });
    toast({
      title: editingTemplate ? "Template updated" : "Template created",
      description: editingTemplate
        ? "Your template has been updated successfully."
        : "Your template has been created and submitted for approval.",
    });
    setShowDialog(false);
    setEditingTemplate(null);
  },

  onError: (error: any) => {
    const message =
    error?.response?.data?.message ||   // axios style
    error?.data?.message ||             // custom wrapper
    error?.message ||                   // fallback
    "Failed to create template";

  toast({
    title: "Error",
    description: message,
    variant: "destructive",
  });
  },
});



  const deleteTemplateMutation = useMutation({
    mutationFn: async (templateId: string) =>
      apiRequest("DELETE", `/api/templates/${templateId}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["templates"] });
      toast({
        title: "Template deleted",
        description: "Template deleted successfully.",
      });
    },
    onError: (error: any) => {
      toast({
        title: "Error",
        description: error.message,
        variant: "destructive",
      });
    },
  });

  

  // Sync templates mutation
  const syncTemplatesMutation = useMutation({
    mutationFn: async () => {
      if (!activeChannel) throw new Error("No active channel");
      const response = await apiRequest("POST", `/api/templates/sync`, {
        channelId: activeChannel?.id,
      });
      return await response.json();
    },
    onSuccess: (data: any) => {
      queryClient.invalidateQueries({ queryKey: ["templates"] });
      const created = data.createdCount || 0;
      const updated = data.updatedCount || 0;
      const total = data.totalFromWhatsApp || 0;
      const skipped = data.skippedCount || 0;

      if (data.autoCreated) {
        const results = data.autoCreateResults || [];
        const succeeded = results.filter((r: any) => r.status !== "FAILED").length;
        const failed = results.filter((r: any) => r.status === "FAILED").length;
        let description = `${succeeded} starter template${succeeded !== 1 ? "s" : ""} submitted for approval.`;
        if (failed > 0) {
          description += ` ${failed} failed to create.`;
        }
        description += " Status will update automatically via webhooks.";
        toast({
          title: "Starter templates created",
          description,
        });
        return;
      }

      let description = "";
      if (created > 0 && updated > 0) {
        description = `Imported ${created} new, updated ${updated} existing (${total} total on WhatsApp)`;
      } else if (created > 0) {
        description = `Imported ${created} new template${created > 1 ? "s" : ""} from WhatsApp (${total} total)`;
      } else if (updated > 0) {
        description = `Updated ${updated} template${updated > 1 ? "s" : ""} (${total} total on WhatsApp)`;
      } else if (total === 0) {
        description = "No templates found on this WhatsApp Business Account. Create templates first or check your channel connection.";
      } else {
        description = `All ${total} template${total !== 1 ? "s" : ""} already in sync`;
      }

      toast({
        title: "Templates synced",
        description,
      });
    },
    onError: (error: any) => {
      const message =
        error?.message || "Something went wrong while syncing templates.";
      toast({
        title: "Sync failed",
        description: message,
        variant: "destructive",
      });
    },
  });

  const handleCreateTemplate = () => {
    setEditingTemplate(null);
    setActiveDraft(null);
    setShowDialog(true);
  };
  const handleEditTemplate = (template: Template) => {
    setEditingTemplate(template);
    setShowDialog(true);
  };
  const handleDuplicateTemplate = (template: Template) => {
    setEditingTemplate({ ...template, name: `${template.name}_copy` });
    setShowDialog(true);
  };
  const handleDeleteTemplate = (template: Template) => {
    if (confirm(`Delete template "${template.name}"?`))
      deleteTemplateMutation.mutate(template.id);
  };
  const handleSyncTemplates = () => syncTemplatesMutation.mutate();

  if (!activeChannel && userRole !== "superadmin") {
    return (
      <div className="flex-1 dots-bg min-h-screen">
        <Header
          title={t("templates.title")}
          subtitle={t("templates.superAdminSubTitle")}
        />
        <main className="p-6">
          <Card>
            <CardContent className="py-12 text-center">
              <FileText className="w-12 h-12 mx-auto text-gray-400 mb-4" />
              <p className="text-gray-500">
                Please select or create a WhatsApp channel first
              </p>
              <Button
                className="mt-4"
                onClick={() => (window.location.href = "/settings")}
              >
                Go to Settings
              </Button>
            </CardContent>
          </Card>
        </main>
      </div>
    );
  }

  return (
    <div className="flex-1 dots-bg min-h-screen">
      <Header
        title={t("templates.title")}
        subtitle={t("templates.userSubTitle")}
      />
      <main className="p-4 sm:p-6">
        <Card>
          <CardHeader>
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <CardTitle className="flex items-center text-lg sm:text-xl">
                <FileText className="w-5 h-5 mr-2" />
                {t("templates.mess_Temp")}
              </CardTitle>
              {userRole !== "superadmin" && (
                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleSyncTemplates}
                    disabled={syncTemplatesMutation.isPending}
                    className="w-full sm:w-auto"
                  >
                    <RefreshCw
                      className={`w-4 h-4 mr-2 ${
                        syncTemplatesMutation.isPending ? "animate-spin" : ""
                      }`}
                    />
                    {t("templates.sync")}
                  </Button>
                  <Button
                    onClick={handleCreateTemplate}
                    className="w-full sm:w-auto"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    {t("templates.createTemplate")}
                  </Button>
                </div>
              )}
            </div>
          </CardHeader>

          {drafts.length > 0 && (
            <div className="px-6 pb-2">
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <Clock className="w-4 h-4 text-amber-600" />
                  <h3 className="text-sm font-semibold text-amber-800">Unsaved Drafts</h3>
                  <span className="text-xs bg-amber-200 text-amber-800 rounded-full px-2 py-0.5">{drafts.length}</span>
                </div>
                <div className="space-y-2">
                  {drafts.map((draft) => (
                    <div
                      key={draft.id}
                      className="flex items-center justify-between bg-white rounded-md border border-amber-100 px-3 py-2"
                    >
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <span className="font-medium text-sm text-gray-900 truncate">
                            {draft.data.name || "Untitled template"}
                          </span>
                          <span className="text-xs bg-blue-100 text-blue-700 rounded px-1.5 py-0.5">
                            {draft.data.category || "MARKETING"}
                          </span>
                        </div>
                        <p className="text-xs text-gray-500 mt-0.5 truncate">
                          {draft.data.body
                            ? draft.data.body.substring(0, 80) + (draft.data.body.length > 80 ? "..." : "")
                            : "No body text"}
                          {" · "}
                          Saved {new Date(draft.savedAt).toLocaleString()}
                        </p>
                      </div>
                      <div className="flex items-center gap-1 ml-3 shrink-0">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-green-700 hover:text-green-800 hover:bg-green-50"
                          onClick={() => handleResumeDraft(draft)}
                        >
                          <Edit3 className="w-3.5 h-3.5 mr-1" />
                          Resume
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-red-500 hover:text-red-700 hover:bg-red-50"
                          onClick={() => handleDeleteDraft(draft.id)}
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          <CardContent>
            {templatesLoading ? (
              <Loading />
            ) : (
              <>
                {/* Superadmin Table */}
                {userRole === "superadmin" ? (
                  <>
                    <div className="hidden lg:block overflow-x-auto">
                      <table className="min-w-full border border-gray-200 bg-white rounded-lg shadow-sm">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Name
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Created By
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Category
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Status
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Language
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Body
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Buttons
                            </th>
                            <th className="py-3 px-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b">
                              Created At
                            </th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-200">
                          {templatesData?.data.map((template) => {
                            const cat = categoryStyles[template.category] || categoryStyles.MARKETING;
                            const CatIcon = cat.icon;
                            const MediaIcon = getMediaIcon(template.mediaType);
                            const buttons = extractButtons(template);
                            return (
                            <tr
                              key={template.id}
                              className="hover:bg-gray-50 transition-colors"
                            >
                              <td className="py-3 px-4 text-sm text-gray-900 font-medium">
                                <div className="flex items-center gap-1.5">
                                  {MediaIcon && <MediaIcon className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />}
                                  <span className="truncate max-w-[200px]">{template.name}</span>
                                </div>
                              </td>
                              <td className="py-3 px-4 text-sm text-gray-700">
                                {template?.createdByName?.trim() || "-"}
                              </td>
                              <td className="py-3 px-4 text-sm">
                                <Badge variant="outline" className={`text-[11px] ${cat.className}`}>
                                  <CatIcon className="w-3 h-3 mr-1" />
                                  {cat.label}
                                </Badge>
                              </td>
                              <td className="py-3 px-4">
                                <Badge className={`text-xs border-0 ${
                                    template.status.toLowerCase() === "approved"
                                      ? "bg-green-500 text-white hover:bg-green-600"
                                      : template.status.toLowerCase() === "rejected"
                                      ? "bg-red-500 text-white hover:bg-red-600"
                                      : template.status.toLowerCase() === "pending"
                                      ? "bg-yellow-500 text-white hover:bg-yellow-600"
                                      : "bg-gray-500 text-white hover:bg-gray-600"
                                  }`}>
                                  {template.status.toUpperCase()}
                                </Badge>
                              </td>
                              <td className="py-3 px-4 text-sm text-gray-600">
                                <span className="inline-flex items-center text-xs">
                                  <Globe className="w-3 h-3 mr-1 text-gray-400" />
                                  {getLanguageLabel(template.language)}
                                </span>
                              </td>
                              <td className="py-3 px-4 text-sm text-gray-700 max-w-xs truncate">
                                {template.body}
                              </td>
                              <td className="py-3 px-4">
                                {buttons.length > 0 ? (
                                  <div className="flex flex-wrap gap-1">
                                    {buttons.map((btn, idx) => {
                                      const BtnIcon = btnTypeIcons[btn.type] || MousePointerClick;
                                      return (
                                        <Badge key={idx} variant="outline" className="text-[10px] px-1.5 py-0 bg-gray-50 text-gray-600 border-gray-200">
                                          <BtnIcon className="w-2.5 h-2.5 mr-0.5" />
                                          {btn.text || btn.type}
                                        </Badge>
                                      );
                                    })}
                                  </div>
                                ) : (
                                  <span className="text-xs text-gray-400">-</span>
                                )}
                              </td>
                              <td className="py-3 px-4 text-sm text-gray-600">
                                {new Date(template.createdAt).toLocaleDateString()}
                              </td>
                            </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    </div>

                    {/* Mobile Card View */}
                    <div className="lg:hidden space-y-4">
                      {templatesData?.data.map((template) => {
                        const cat = categoryStyles[template.category] || categoryStyles.MARKETING;
                        const CatIcon = cat.icon;
                        const MediaIcon = getMediaIcon(template.mediaType);
                        const buttons = extractButtons(template);
                        return (
                        <Card key={template.id} className="overflow-hidden">
                          <CardContent className="p-4">
                            <div className="flex items-start justify-between mb-3">
                              <div className="flex-1 min-w-0">
                                <h3 className="font-semibold text-gray-900 mb-1 truncate">
                                  {template.name}
                                </h3>
                                <p className="text-sm text-gray-600">
                                  {template?.createdByName?.trim() || "Unknown"}
                                </p>
                              </div>
                              <Badge className={`text-xs ml-2 flex-shrink-0 border-0 ${
                                  template.status.toLowerCase() === "approved"
                                    ? "bg-green-500 text-white hover:bg-green-600"
                                    : template.status.toLowerCase() === "rejected"
                                    ? "bg-red-500 text-white hover:bg-red-600"
                                    : template.status.toLowerCase() === "pending"
                                    ? "bg-yellow-500 text-white hover:bg-yellow-600"
                                    : "bg-gray-500 text-white hover:bg-gray-600"
                                }`}>
                                {template.status.toUpperCase()}
                              </Badge>
                            </div>
                            <div className="flex flex-wrap gap-2 mb-3 pb-3 border-b">
                              <Badge variant="outline" className={`text-[11px] ${cat.className}`}>
                                <CatIcon className="w-3 h-3 mr-1" />
                                {cat.label}
                              </Badge>
                              <span className="inline-flex items-center text-[11px] text-gray-500">
                                <Globe className="w-3 h-3 mr-0.5" />
                                {getLanguageLabel(template.language)}
                              </span>
                              {MediaIcon && (
                                <span className="inline-flex items-center text-[11px] text-gray-500">
                                  <MediaIcon className="w-3 h-3 mr-0.5" />
                                  {template.mediaType}
                                </span>
                              )}
                            </div>
                            <div className="mb-3">
                              <p className="text-sm text-gray-700 line-clamp-3">
                                {template.body}
                              </p>
                            </div>
                            {buttons.length > 0 && (
                              <div className="flex flex-wrap gap-1 mb-3">
                                {buttons.map((btn, idx) => {
                                  const BtnIcon = btnTypeIcons[btn.type] || MousePointerClick;
                                  return (
                                    <Badge key={idx} variant="outline" className="text-[11px] px-1.5 py-0.5 bg-gray-50 text-gray-600 border-gray-200">
                                      <BtnIcon className="w-3 h-3 mr-1" />
                                      {btn.text || btn.type}
                                    </Badge>
                                  );
                                })}
                              </div>
                            )}
                            <div className="text-xs text-gray-400">
                              {new Date(template.createdAt).toLocaleDateString()}
                            </div>
                          </CardContent>
                        </Card>
                        );
                      })}
                    </div>

                    {/* Pagination */}
                    {templatesData?.pagination && (
                      <div className="w-full mt-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div className="flex flex-col sm:flex-row sm:items-center gap-2">
                          <span className="text-sm text-gray-700">
                            Showing {(page - 1) * limit + 1} to{" "}
                            {Math.min(
                              page * limit,
                              templatesData.pagination.total
                            )}{" "}
                            of {templatesData.pagination.total} templates
                          </span>
                          <select
                            value={limit}
                            onChange={(e) => {
                              setLimit(Number(e.target.value));
                              setPage(1);
                            }}
                            className="border px-3 py-2 rounded-md text-sm w-24"
                          >
                            {[5, 10, 20, 50].map((l) => (
                              <option key={l} value={l}>
                                {l}
                              </option>
                            ))}
                          </select>
                        </div>
                        <div className="flex items-center justify-center sm:justify-end gap-2">
                          <button
                            className="px-3 py-1 border rounded disabled:opacity-50"
                            disabled={page <= 1}
                            onClick={() =>
                              setPage((prev) => Math.max(prev - 1, 1))
                            }
                          >
                            Previous
                          </button>
                          <PageNumbers
                            currentPage={page}
                            totalPages={templatesData.pagination.totalPages}
                            onPageChange={(p) => setPage(p)}
                          />
                          <button
                            className="px-3 py-1 border rounded disabled:opacity-50"
                            disabled={
                              page >= templatesData.pagination.totalPages
                            }
                            onClick={() =>
                              setPage((prev) =>
                                Math.min(
                                  prev + 1,
                                  templatesData.pagination.totalPages
                                )
                              )
                            }
                          >
                            Next
                          </button>
                        </div>
                      </div>
                    )}
                  </>
                ) : (
                  <TemplatesTable
                    templates={templatesData?.data || []}
                    onViewTemplate={setSelectedTemplate}
                    onEditTemplate={handleEditTemplate}
                    onDuplicateTemplate={handleDuplicateTemplate}
                    onDeleteTemplate={handleDeleteTemplate}
                  />
                )}
              </>
            )}
          </CardContent>
        </Card>
      </main>

      {/* Template Preview */}
      {selectedTemplate && (
        <TemplatePreview
          template={selectedTemplate}
          onClose={() => setSelectedTemplate(null)}
        />
      )}

      {/* Template Dialog */}
      <TemplateDialog
        open={showDialog}
        onOpenChange={(open) => {
          setShowDialog(open);
          if (!open) {
            setActiveDraft(null);
            refreshDrafts();
          }
        }}
        template={editingTemplate}
        onSubmit={(data) => createTemplateMutation.mutate(data)}
        isSubmitting={createTemplateMutation.isPending}
        initialDraft={activeDraft}
        onDraftSaved={refreshDrafts}
        channelId={channelId}
      />
    </div>
  );
}
