"use client";

import { NewsDialog } from "@/components/dashboard/news/news-dialog";
import { PageHeader } from "@/components/layout";
import { ConfirmationDialog, TruncatedText } from "@/components/shared";
import { Card } from "@/components/ui";
import { Skeleton } from "@/components/ui/skeleton";
import { useFormattedDate } from "@/hooks/use-formatted-date";
import { useNewsItem, useNewsMutations } from "@/hooks/use-news";
import { useRouter } from "@/i18n/routing";
import type { CreateNewsRequest, News, NewsTrafficSources } from "@/types";
import {
  Calendar,
  ExternalLink,
  Pencil,
  Trash2
} from "lucide-react";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";

export function NewsDetailsPageContainer() {
  const t = useTranslations();
  const locale = useLocale();
  const isArabic = locale === "ar";
  const numberLocale = "en-US";
  const router = useRouter();
  const { formatDate, formatDateTime } = useFormattedDate();
  const params = useParams();
  const newsId = params.id as string;

  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { newsItem, statistics, isLoading, refetch } = useNewsItem(newsId);
  const { updateNews, deleteNews } = useNewsMutations();
  const newsUrl = newsItem?.news_url || newsItem?.url;
  const newsAuthor = newsItem?.author_name || newsItem?.author;
  const newsTags = newsItem?.tags || [];
  const featuredImage = newsItem?.featured_image_url || newsItem?.featured_image;

  type NewsStatsViewRow = {
    id: string | number;
    recorded_at: string | null;
    views: number;
    unique_views: number;
    comments: number;
    shares: number;
    search_impressions: number;
    search_clicks: number;
    search_ctr: string | number;
    average_read_time: number;
    bounce_rate: string | number;
    engagement_rate: string | number;
    ad_clicks: number;
    ad_revenue: string | number;
    ad_manager_revenue: string | number;
    traffic_sources: NewsTrafficSources | NewsTrafficSources[] | null;
  };

  const latestStats: NewsStatsViewRow | undefined = newsItem?.stats
    ? {
      id: newsItem.id,
      recorded_at: newsItem.stats.recorded_at || newsItem.published_at || null,
      views: newsItem.stats.views ?? 0,
      unique_views: newsItem.stats.unique_views ?? 0,
      comments: newsItem.stats.comments ?? 0,
      shares: newsItem.stats.shares ?? 0,
      search_impressions: newsItem.stats.search_impressions ?? 0,
      search_clicks: newsItem.stats.search_clicks ?? 0,
      search_ctr: newsItem.stats.search_ctr ?? "0",
      average_read_time: newsItem.stats.average_read_time ?? 0,
      bounce_rate: newsItem.stats.bounce_rate ?? "0",
      engagement_rate: newsItem.stats.engagement_rate ?? "0",
      ad_clicks: newsItem.stats.ad_clicks ?? 0,
      ad_revenue: newsItem.stats.ad_revenue ?? "0",
      ad_manager_revenue: newsItem.stats.ad_manager_revenue ?? "0",
      traffic_sources: newsItem.stats.traffic_sources ?? null,
    }
    : statistics?.[0]
      ? {
        id: statistics[0].id,
        recorded_at: statistics[0].recorded_at,
        views: statistics[0].views_count ?? 0,
        unique_views: statistics[0].unique_views_count ?? 0,
        comments: statistics[0].comments_count ?? 0,
        shares: statistics[0].shares_count ?? 0,
        search_impressions: statistics[0].search_impressions ?? 0,
        search_clicks: statistics[0].search_clicks ?? 0,
        search_ctr: statistics[0].search_ctr ?? "0",
        average_read_time: statistics[0].average_read_time ?? 0,
        bounce_rate: statistics[0].bounce_rate ?? "0",
        engagement_rate: statistics[0].engagement_rate ?? "0",
        ad_clicks: statistics[0].ad_clicks ?? 0,
        ad_revenue: statistics[0].ad_revenue ?? "0",
        ad_manager_revenue: statistics[0].ad_manager_revenue ?? "0",
        traffic_sources: statistics[0].traffic_sources ?? null,
      }
      : undefined;

  const statsRows: NewsStatsViewRow[] = statistics?.length
    ? statistics.map((stat) => ({
      id: stat.id,
      recorded_at: stat.recorded_at,
      views: stat.views_count ?? 0,
      unique_views: stat.unique_views_count ?? 0,
      comments: stat.comments_count ?? 0,
      shares: stat.shares_count ?? 0,
      search_impressions: stat.search_impressions ?? 0,
      search_clicks: stat.search_clicks ?? 0,
      search_ctr: stat.search_ctr ?? "0",
      average_read_time: stat.average_read_time ?? 0,
      bounce_rate: stat.bounce_rate ?? "0",
      engagement_rate: stat.engagement_rate ?? "0",
      ad_clicks: stat.ad_clicks ?? 0,
      ad_revenue: stat.ad_revenue ?? "0",
      ad_manager_revenue: stat.ad_manager_revenue ?? "0",
      traffic_sources: stat.traffic_sources ?? null,
    }))
    : newsItem?.stats
      ? [
        {
          id: `summary-${newsItem.id}`,
          recorded_at: newsItem.stats.recorded_at || newsItem.published_at || null,
          views: newsItem.stats.views ?? 0,
          unique_views: newsItem.stats.unique_views ?? 0,
          comments: newsItem.stats.comments ?? 0,
          shares: newsItem.stats.shares ?? 0,
          search_impressions: newsItem.stats.search_impressions ?? 0,
          search_clicks: newsItem.stats.search_clicks ?? 0,
          search_ctr: newsItem.stats.search_ctr ?? "0",
          average_read_time: newsItem.stats.average_read_time ?? 0,
          bounce_rate: newsItem.stats.bounce_rate ?? "0",
          engagement_rate: newsItem.stats.engagement_rate ?? "0",
          ad_clicks: newsItem.stats.ad_clicks ?? 0,
          ad_revenue: newsItem.stats.ad_revenue ?? "0",
          ad_manager_revenue: newsItem.stats.ad_manager_revenue ?? "0",
          traffic_sources: newsItem.stats.traffic_sources ?? null,
        },
      ]
      : [];

  const formatValue = (value: string | number | null | undefined) => {
    if (value === null || value === undefined || value === "") return "-";
    return String(value);
  };

  const handleEditSubmit = async (data: CreateNewsRequest) => {
    if (!newsItem) return;

    setIsSubmitting(true);
    try {
      await updateNews(newsItem.id, data);
      refetch();
    } catch (error: unknown) {
      const errorMessage =
        (error as { message?: string })?.message ||
        t("news.errorUpdatingNews") ||
        "Failed to update news";
      toast.error(errorMessage);
      throw error;
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!newsItem) return;

    try {
      await deleteNews(newsItem.id);
      router.push("/news");
    } catch (error: unknown) {
      const errorMessage =
        (error as { message?: string })?.message ||
        t("news.errorDeletingNews") ||
        "Failed to delete news";
      toast.error(errorMessage);
    }
  };

  const headerActions = [
    ...(newsUrl
      ? [{
          label: t("news.viewArticle"),
          icon: <ExternalLink className="h-4 w-4" />,
          onClick: () => window.open(newsUrl, "_blank", "noopener,noreferrer"),
          variant: "outline" as const,
        }]
      : []),
    {
      label: t("common.edit"),
      icon: <Pencil className="h-4 w-4" />,
      onClick: () => setIsEditDialogOpen(true),
      variant: "outline" as const,
      actionKey: "news.update",
    },
    {
      label: t("common.delete"),
      icon: <Trash2 className="h-4 w-4" />,
      onClick: () => setIsDeleteDialogOpen(true),
      variant: "destructive" as const,
      actionKey: "news.delete",
    },
  ];

  if (isLoading) {
    return (
      <div className="space-y-6">
        <PageHeader
          title={t("news.details.title")}
          breadcrumbs={[
            { label: t("dashboard.home") },
            { label: t("news.title"), href: "/news" },
            { label: t("news.details.title") },
          ]}
        />

        <Card className="p-4 sm:p-6 flex flex-col lg:flex-row gap-4 sm:gap-6">
          <Skeleton className="shrink-0 w-20 h-20 rounded-lg" />
          <div className="min-w-0 flex-1 flex flex-col gap-4">
            <Skeleton className="h-5 w-3/4" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-1/2" />
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
              {[1, 2, 3].map((i) => (
                <Skeleton key={i} className="h-20 rounded-lg" />
              ))}
            </div>
          </div>
        </Card>
      </div>
    );
  }

  if (!newsItem) {
    return (
      <div className="space-y-6">
        <PageHeader
          title={t("news.details.title")}
          breadcrumbs={[
            { label: t("dashboard.home") },
            { label: t("news.title"), href: "/news" },
            { label: t("news.details.title") },
          ]}
        />

        <Card className="p-6">
          <p className="text-muted-foreground text-center">{t("news.notFound")}</p>
        </Card>
      </div>
    );
  }

  const editInitialData: News = {
    id: newsItem.id,
    project_id: newsItem.project_id,
    title: newsItem.title,
    content: newsItem.content || "",
    author_name: newsAuthor,
    category: newsItem.category || undefined,
    tags: newsTags,
    featured_image_url: featuredImage || undefined,
    news_url: newsUrl || undefined,
    url: newsUrl,
    published_at: newsItem.published_at,
    status: newsItem.status,
    status_label: newsItem.status_label,
    news_type: newsItem.news_type,
    news_type_label: newsItem.news_type_label,
    created_at: newsItem.created_at || undefined,
    updated_at: newsItem.updated_at || undefined,
    author: newsAuthor,
    featured_image: featuredImage || undefined,
    statistics: newsItem.statistics,
    stats: newsItem.stats ?? (latestStats
      ? {
          views: latestStats.views,
          unique_views: latestStats.unique_views,
          comments: latestStats.comments,
          shares: latestStats.shares,
          recorded_at: latestStats.recorded_at,
        }
      : null),
  };

  const newsDataRows = [
    // { key: "id", label: isArabic ? "المعرف" : "ID", value: newsItem.id },
    // {
    //   key: "project_id",
    //   label: isArabic ? "معرف المشروع" : "Project ID",
    //   value: newsItem.project_id,
    // },
    // { key: "title", label: isArabic ? "العنوان" : "Title", value: newsItem.title },
    // { key: "slug", label: isArabic ? "المعرف النصي" : "Slug", value: newsItem.slug },
    // {
    //   key: "content",
    //   label: isArabic ? "المحتوى" : "Content",
    //   value: newsItem.content,
    // },
    {
      key: "author_name",
      label: isArabic ? "المصدر" : "Source",
      value: newsAuthor,
    },
    {
      key: "category",
      label: isArabic ? "التصنيف" : "Category",
      value: newsItem.category,
    },
    {
      key: "tags",
      label: isArabic ? "الوسوم" : "Tags",
      value: newsTags.length > 0 ? newsTags.join(", ") : null,
    },
    // {
    //   key: "featured_image_url",
    //   label: isArabic ? "رابط الصورة" : "Featured Image URL",
    //   value: featuredImage,
    // },
    {
      key: "news_url",
      label: isArabic ? "رابط الخبر" : "News URL",
      value: newsUrl,
    },
    {
      key: "published_at",
      label: isArabic ? "تاريخ النشر" : "Published At",
      value: newsItem.published_at ? formatDate(newsItem.published_at) : null,
    },
    {
      key: "status",
      label: isArabic ? "الحالة" : "Status",
      value: (newsItem as { status_label?: string }).status_label || newsItem.status,
    },
    {
      key: "news_type",
      label: isArabic ? "نوع الخبر" : "News Type",
      value: (newsItem as { news_type_label?: string }).news_type_label || newsItem.news_type,
    },
    {
      key: "stats_views",
      label: isArabic ? "المشاهدات" : "Views",
      value: latestStats?.views,
    },
    {
      key: "stats_unique_views",
      label: isArabic ? "الزوار الفريدون" : "Unique Views",
      value: latestStats?.unique_views,
    },
    {
      key: "stats_comments",
      label: isArabic ? "التعليقات" : "Comments",
      value: latestStats?.comments,
    },
    {
      key: "stats_shares",
      label: isArabic ? "المشاركات" : "Shares",
      value: latestStats?.shares,
    },
    {
      key: "stats_recorded_at",
      label: isArabic ? "تاريخ تسجيل الإحصائيات" : "Stats Recorded At",
      value: latestStats?.recorded_at ? formatDate(latestStats.recorded_at) : null,
    },
    {
      key: "created_at",
      label: isArabic ? "تاريخ الإنشاء" : "Created At",
      value: newsItem.created_at ? formatDateTime(newsItem.created_at) : null,
    },
    {
      key: "updated_at",
      label: isArabic ? "تاريخ التحديث" : "Updated At",
      value: newsItem.updated_at ? formatDateTime(newsItem.updated_at) : null,
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title={t("news.details.title")}
        breadcrumbs={[
          { label: t("dashboard.home") },
          { label: t("news.title"), href: "/news" },
          { label: t("news.details.title") },
        ]}
        actions={headerActions}
      />

      <Card className="p-4 sm:p-6 flex flex-col lg:flex-row gap-4 sm:gap-6">
        <div className="shrink-0 w-20 h-20 sm:w-24 sm:h-24 self-start bg-primary/20 rounded-lg flex items-center justify-center overflow-hidden relative">
          {featuredImage ? (
            <Image
              src={featuredImage}
              alt={newsItem.title}
              fill
              unoptimized
              sizes="96px"
              className="object-cover"
            />
          ) : (
            <svg className="size-10 text-primary/60" viewBox="0 0 48 48" fill="currentColor">
              <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
              <circle cx="24" cy="24" r="8" />
            </svg>
          )}
        </div>

        <div className="min-w-0 flex-1 flex flex-col gap-4">
          <div className="flex flex-col gap-3 w-full">
            <h2 className="text-base font-bold text-foreground">{newsItem.title}</h2>

            <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs items-center">
              {newsItem.published_at && (
                <div className="flex gap-1 items-center text-muted-foreground">
                  <span>{formatDate(newsItem.published_at)}</span>
                  <Calendar className="size-3.5" />
                </div>
              )}

              {newsAuthor && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <div className="flex gap-1 items-center text-muted-foreground">
                    <span>{newsAuthor}</span>
                  </div>
                </>
              )}
              {newsItem.category && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <span className="px-2 py-0.5 rounded border border-border bg-secondary/20 text-secondary">
                    {newsItem.category}
                  </span>
                </>
              )}
              {newsItem.status && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <span className="px-2 py-0.5 rounded border border-border bg-muted/20">
                    {(newsItem as { status_label?: string }).status_label || newsItem.status}
                  </span>
                </>
              )}
              {newsItem.news_type && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <span className="px-2 py-0.5 rounded border border-border bg-primary/10 text-primary">
                    {(newsItem as { news_type_label?: string }).news_type_label || newsItem.news_type}
                  </span>
                </>
              )}

              {latestStats?.recorded_at && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <div className="flex gap-1 items-center text-muted-foreground">
                    <span>{formatDate(latestStats.recorded_at)}</span>
                    <span>{isArabic ? "(آخر تحديث)" : "(Last update)"}</span>
                  </div>
                </>
              )}
              {newsUrl && (
                <>
                  <span className="text-muted-foreground">|</span>
                  <a href={newsUrl} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                    {t("news.viewArticle")}
                  </a>
                </>
              )}
            </div>
            {newsTags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {newsTags.map((tag) => (
                  <span key={tag} className="inline-flex items-center rounded-md bg-primary/10 text-primary px-2 py-1 text-xs">
                    {tag}
                  </span>
                ))}
              </div>
            )}
            {newsItem.content && (
              <TruncatedText text={newsItem.content} className="text-sm text-muted-foreground whitespace-pre-line" maxWords={100} fullContentTitle={t("common.fullContent")} showMoreLabel={t("common.showMore")} />
            )}
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("news.views")}</p>
              <p className="text-lg font-bold text-foreground">
                {(latestStats?.views ?? 0).toLocaleString(numberLocale)}
              </p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{isArabic ? "الزوار الفريدون" : "Unique Views"}</p>
              <p className="text-lg font-bold text-foreground">
                {(latestStats?.unique_views ?? 0).toLocaleString(numberLocale)}
              </p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{isArabic ? "المشاركات" : "Shares"}</p>
              <p className="text-lg font-bold text-foreground">
                {(latestStats?.shares ?? 0).toLocaleString(numberLocale)}
              </p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("news.searchAppearances")}</p>
              <p className="text-lg font-bold text-foreground">
                {(latestStats?.search_impressions ?? 0).toLocaleString(numberLocale)}
              </p>
            </div>
          </div>
        </div>
      </Card>

      <Card className="p-4 sm:p-6">
        <h3 className="text-base font-semibold text-foreground mb-4">
          {isArabic ? "بيانات الخبر الكاملة" : "Complete News Data"}
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
          {newsDataRows.map((row) => (
            <div key={row.key} className="rounded-lg border border-border p-3 bg-muted/20">
              <p className="text-xs text-muted-foreground">{row.label}</p>
              <p className="text-sm text-foreground break-words mt-1">{formatValue(row.value)}</p>
            </div>
          ))}
        </div>
      </Card>

      {latestStats?.traffic_sources && !Array.isArray(latestStats.traffic_sources) && (
        <Card className="p-4 sm:p-6">
          <h3 className="text-base font-semibold text-foreground mb-4">{t("news.trafficSources")}</h3>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("news.organic")}</p>
              <p className="text-lg font-bold text-foreground">{latestStats.traffic_sources.organic}</p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("news.direct")}</p>
              <p className="text-lg font-bold text-foreground">{latestStats.traffic_sources.direct}</p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("news.social")}</p>
              <p className="text-lg font-bold text-foreground">{latestStats.traffic_sources.social}</p>
            </div>
            <div className="bg-muted/30 rounded-lg px-3 sm:px-6 py-3 flex flex-col gap-2 items-center min-w-0">
              <p className="text-xs text-muted-foreground">{t("ads.paid")}</p>
              <p className="text-lg font-bold text-foreground">{latestStats.traffic_sources.paid}</p>
            </div>
          </div>
        </Card>
      )}

      <Card className="overflow-hidden">
        <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-border">
          <h3 className="text-base font-semibold text-foreground ">{t("news.statistics.title")}</h3>
          <p className="mt-1 text-sm text-muted-foreground">
            {isArabic ? "يعرض هذا القسم سجل الإحصائيات الفعلي القادم من API الخبر." : "This section shows the actual statistics history returned by the news API."}
          </p>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-muted/30">
              <tr>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {t("news.statistics.date")}
                </th>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {t("news.statistics.views")}
                </th>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {isArabic ? "الزوار الفريدون" : "Unique Views"}
                </th>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {isArabic ? "التعليقات" : "Comments"}
                </th>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {isArabic ? "المشاركات" : "Shares"}
                </th>
                {/* <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {t("news.statistics.searchAppearances")}
                </th> */}
                {/* <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {isArabic ? "نقرات البحث" : "Search Clicks"}
                </th>
                <th className="px-6 py-3 text-xs font-semibold text-muted-foreground text-center">
                  {isArabic ? "نسبة النقر" : "CTR"}
                </th> */}
              </tr>
            </thead>
            <tbody>
              {statsRows.length === 0 && (
                <tr>
                  <td colSpan={8} className="px-6 py-6 text-sm text-center text-muted-foreground">
                    {isArabic ? "لا توجد إحصاءات متاحة" : "No statistics available"}
                  </td>
                </tr>
              )}
              {statsRows.map((stat, index) => (
                <tr key={String(stat.id)} className={index !== statsRows.length - 1 ? "border-b border-border" : ""}>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.recorded_at ? formatDate(stat.recorded_at) : "-"}
                  </td>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.views.toLocaleString(numberLocale)}
                  </td>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.unique_views.toLocaleString(numberLocale)}
                  </td>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.comments.toLocaleString(numberLocale)}
                  </td>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.shares.toLocaleString(numberLocale)}
                  </td>
                  {/* <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.search_impressions.toLocaleString(numberLocale)}
                  </td> */}
                  {/* <td className="px-6 py-4 text-sm text-foreground text-center">
                    {stat.search_clicks.toLocaleString(numberLocale)}
                  </td>
                  <td className="px-6 py-4 text-sm text-foreground text-center">
                    {formatValue(stat.search_ctr)}
                  </td> */}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <NewsDialog
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onSubmit={handleEditSubmit}
        isLoading={isSubmitting}
        mode="edit"
        initialData={editInitialData}
        submitAction={{ actionKey: "news.update" }}
      />

      <ConfirmationDialog
        open={isDeleteDialogOpen}
        onOpenChange={setIsDeleteDialogOpen}
        title={t("news.deleteNews") || "Delete News"}
        description={t("news.deleteNewsConfirmation") || "Are you sure you want to delete this news? This action cannot be undone."}
        confirmLabel={t("common.delete")}
        cancelLabel={t("common.cancel")}
        onConfirm={handleDelete}
        confirmAction={{ actionKey: "news.delete" }}
        variant="danger"
      />
    </div>
  );
}