"use client";

import { StatusBadge } from "@/components/ui/status-badge";
import { useRouter } from "@/i18n/routing";
import {
  useLatestLfii,
  useLatestTickets,
  useLfiiStats,
  useTicketStats,
} from "@/hooks/use-dashboard-home-data";
import { formatLocaleDate, type Locale } from "@/lib/i18n-utils";
import { CalendarDays, Clock3, Eye, FileClock, Files, FileText, FileWarning, MoreHorizontal, Ticket, TicketCheck, TicketPlus, Trash2 } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import { useMemo, useState } from "react";
import type {
  DashboardMetricCardItem,
  DashboardTableColumn,
  DashboardTabOption,
  LatestReleaseRow,
  LatestTicketRow,
} from "./dashboard-home-types";
import { DashboardHomeView } from "./dashboard-home-view";
import { TableIconButton } from "./table-icon-button";

export function DashboardHomeContainer() {
  const t = useTranslations("dashboard.home");
  const locale = useLocale() as Locale;
  const router = useRouter();
  const [activeReleaseStatsTab, setActiveReleaseStatsTab] = useState("releases");
  const [activeLatestReleasesTab, setActiveLatestReleasesTab] = useState("releases");

  const { data: lfiiStats, isLoading: lfiiStatsLoading } = useLfiiStats();
  const { data: ticketStats, isLoading: ticketStatsLoading } = useTicketStats();
  const { data: latestLfii } = useLatestLfii();
  const { data: latestTickets } = useLatestTickets();

  const releaseStatsTabs = useMemo<DashboardTabOption[]>(
    () => [
      { id: "news", label: t("tabs.newsStats") },
      { id: "releases", label: t("tabs.releaseStats") },
    ],
    [t]
  );

  const latestReleasesTabs = useMemo<DashboardTabOption[]>(
    () => [
      { id: "news", label: t("tabs.latestNews") },
      { id: "releases", label: t("tabs.latestReleases") },
    ],
    [t]
  );

  const releaseStatsCards = useMemo<DashboardMetricCardItem[]>(() => {
    const comparisonLabel = t("cards.comparisonLabel");

    if (activeReleaseStatsTab === "news") {
      return [
        {
          id: "total-news",
          title: t("cards.totalNews"),
          value: lfiiStatsLoading ? "—" : String(lfiiStats.total),
          comparisonLabel,
          comparisonValue: "2.69%",
          trend: "up",
          icon: Files,
          iconClassName: "text-[var(--stat-gold-text)]",
          iconBgClassName: "bg-[var(--stat-gold-bg)]",
        },
        {
          id: "published-news",
          title: t("cards.publishedNews"),
          value: lfiiStatsLoading ? "—" : String(lfiiStats.active),
          comparisonLabel,
          comparisonValue: "2.69%",
          trend: "up",
          icon: FileText,
          iconClassName: "text-success-50",
          iconBgClassName: "bg-[var(--stat-green-bg)]",
        },
        {
          id: "scheduled-news",
          title: t("cards.scheduledNews"),
          value: lfiiStatsLoading ? "—" : String(lfiiStats.scheduled),
          comparisonLabel,
          comparisonValue: "1.39%",
          trend: "down",
          icon: FileClock,
          iconClassName: "text-primary",
          iconBgClassName: "bg-primary-50",
        },
        {
          id: "disabled-news",
          title: t("cards.disabledNews"),
          value: lfiiStatsLoading ? "—" : String(lfiiStats.disabled),
          comparisonLabel,
          comparisonValue: "2.69%",
          trend: "up",
          icon: FileWarning,
          iconClassName: "text-danger-500",
          iconBgClassName: "bg-[var(--stat-red-bg)]",
        },
        {
          id: "draft-news",
          title: t("cards.draftNews"),
          value: lfiiStatsLoading ? "—" : String(lfiiStats.draft),
          comparisonLabel,
          comparisonValue: "1.39%",
          trend: "down",
          icon: FileText,
          iconClassName: "text-[var(--stat-gray-text)]",
          iconBgClassName: "bg-[var(--stat-gray-bg)]",
        },
      ];
    }

    return [
      {
        id: "total-releases",
        title: t("cards.totalReleases"),
        value: lfiiStatsLoading ? "—" : String(lfiiStats.total),
        comparisonLabel,
        comparisonValue: "2.69%",
        trend: "up",
        icon: Files,
        iconClassName: "text-[var(--stat-gold-text)]",
        iconBgClassName: "bg-[var(--stat-gold-bg)]",
      },
      {
        id: "active-releases",
        title: t("cards.activeReleases"),
        value: lfiiStatsLoading ? "—" : String(lfiiStats.active),
        comparisonLabel,
        comparisonValue: "2.69%",
        trend: "up",
        icon: FileText,
        iconClassName: "text-success-50",
        iconBgClassName: "bg-[var(--stat-green-bg)]",
      },
      {
        id: "scheduled-releases",
        title: t("cards.scheduledReleases"),
        value: lfiiStatsLoading ? "—" : String(lfiiStats.scheduled),
        comparisonLabel,
        comparisonValue: "1.39%",
        trend: "down",
        icon: FileClock,
        iconClassName: "text-primary",
        iconBgClassName: "bg-primary-50",
      },
      {
        id: "disabled-releases",
        title: t("cards.disabledReleases"),
        value: lfiiStatsLoading ? "—" : String(lfiiStats.disabled),
        comparisonLabel,
        comparisonValue: "2.69%",
        trend: "up",
        icon: FileWarning,
        iconClassName: "text-danger-500",
        iconBgClassName: "bg-[var(--stat-red-bg)]",
      },
      {
        id: "draft-releases",
        title: t("cards.draftReleases"),
        value: lfiiStatsLoading ? "—" : String(lfiiStats.draft),
        comparisonLabel,
        comparisonValue: "1.39%",
        trend: "down",
        icon: FileText,
        iconClassName: "text-[var(--stat-gray-text)]",
        iconBgClassName: "bg-[var(--stat-gray-bg)]",
      },
    ];
  }, [activeReleaseStatsTab, t, lfiiStats, lfiiStatsLoading]);

  const ticketStatsCards = useMemo<DashboardMetricCardItem[]>(() => {
    const comparisonLabel = t("cards.comparisonLabel");

    return [
      {
        id: "total-tickets",
        title: t("cards.totalTickets"),
        value: ticketStatsLoading ? "—" : String(ticketStats.total),
        comparisonLabel,
        comparisonValue: "2.69%",
        trend: "up",
        icon: Ticket,
        iconClassName: "text-primary",
        iconBgClassName: "bg-primary-50",
      },
      {
        id: "new-tickets",
        title: t("cards.newTickets"),
        value: ticketStatsLoading ? "—" : String(ticketStats.uncompleted),
        comparisonLabel,
        comparisonValue: "1.39%",
        trend: "down",
        icon: TicketPlus,
        iconClassName: "text-primary",
        iconBgClassName: "bg-primary-50",
      },
      {
        id: "completed-tickets",
        title: t("cards.completedTickets"),
        value: ticketStatsLoading ? "—" : String(ticketStats.completed),
        comparisonLabel,
        comparisonValue: "1.39%",
        trend: "down",
        icon: TicketCheck,
        iconClassName: "text-primary",
        iconBgClassName: "bg-primary-50",
      },
    ];
  }, [t, ticketStats, ticketStatsLoading]);

  const latestReleasesRows = useMemo<LatestReleaseRow[]>(() => {
    if (activeLatestReleasesTab === "news" || activeLatestReleasesTab === "releases") {
      return latestLfii.map((raw) => {
        const dateStr = raw.created_at ?? "";
        const publishDateStr = raw.publish_date ?? raw.created_at ?? "";
        const isPublished = raw.status !== 0 && raw.status !== false && raw.status !== "0";
        return {
          id: String(raw.id ?? ""),
          title: raw.title ?? "",
          releaseDate: dateStr ? formatLocaleDate(dateStr, locale) : "—",
          source: raw.source ?? "—",
          status: "published" as const,
          publishDate: publishDateStr ? formatLocaleDate(publishDateStr, locale) : "—",
          publishTime: raw.publish_time ?? undefined,
          isPublished,
        };
      });
    }
    return [];
  }, [latestLfii, activeLatestReleasesTab, locale]);

  const latestTicketsRows = useMemo<LatestTicketRow[]>(
    () =>
      latestTickets.map((raw) => ({
        id: String(raw.id ?? ""),
        date: raw.created_at ? formatLocaleDate(raw.created_at, locale) : "—",
        name: raw.name ?? "—",
        email: raw.email ?? "—",
        phone: raw.phone ?? "—",
        status: "new" as const,
      })),
    [latestTickets, locale]
  );

  const latestReleasesColumns = useMemo<DashboardTableColumn<LatestReleaseRow>[]>(
    () => [
      {
        key: "number",
        header: t("table.columns.number"),
        headerClassName: "w-[56px] text-center",
        cellClassName: "text-center text-foreground",
        render: (_, index) => index + 1,
      },
      {
        key: "title",
        header: t("table.columns.releaseTitle"),
        headerClassName: "min-w-[320px] text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => <span className="block truncate">{row.title}</span>,
      },
      {
        key: "releaseDate",
        header: t("table.columns.releaseDate"),
        headerClassName: "text-center",
        cellClassName: "text-center",
        render: (row) => (
          <div className="flex items-center justify-center gap-2 text-foreground">
            <span>{row.releaseDate}</span>
            <CalendarDays className="h-4 w-4 text-font-tertiary" />
          </div>
        ),
      },
      {
        key: "source",
        header: t("table.columns.source"),
        headerClassName: "text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => row.source,
      },
      {
        key: "status",
        header: t("table.columns.status"),
        headerClassName: "text-center",
        cellClassName: "text-center",
        render: (row) => <StatusBadge status={row.status} />,
      },
      {
        key: "publishDate",
        header: t("table.columns.publishDate"),
        headerClassName: "text-center",
        cellClassName: "text-center",
        render: (row) =>
          row.isPublished ? (
            <div className="flex flex-col items-center gap-1">
              <div className="flex items-center gap-2 text-foreground">
                <span>{row.publishDate}</span>
                <CalendarDays className="h-4 w-4 text-font-tertiary" />
              </div>
              {row.publishTime ? (
                <div className="flex items-center gap-2 text-foreground">
                  <span>{row.publishTime}</span>
                  <Clock3 className="h-4 w-4 text-font-tertiary" />
                </div>
              ) : null}
            </div>
          ) : (
            <div className="flex items-center justify-center gap-2 text-foreground">
              <span>{row.publishDate}</span>
              <CalendarDays className="h-4 w-4 text-font-tertiary" />
            </div>
          ),
      },

    ],
    [t]
  );

  const latestTicketsColumns = useMemo<DashboardTableColumn<LatestTicketRow>[]>(
    () => [
      {
        key: "number",
        header: t("table.columns.number"),
        headerClassName: "w-[56px] text-center",
        cellClassName: "text-center text-foreground",
        render: (_, index) => index + 1,
      },
      {
        key: "date",
        header: t("table.columns.date"),
        headerClassName: "text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => row.date,
      },
      {
        key: "name",
        header: t("table.columns.name"),
        headerClassName: "text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => row.name,
      },
      {
        key: "email",
        header: t("table.columns.email"),
        headerClassName: "text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => row.email,
      },
      {
        key: "phone",
        header: t("table.columns.phone"),
        headerClassName: "text-center",
        cellClassName: "text-center text-foreground",
        render: (row) => row.phone,
      },
      {
        key: "status",
        header: t("table.columns.status"),
        headerClassName: "text-center",
        cellClassName: "text-center",
        render: () => (
          <span className="inline-flex h-8 items-center justify-center rounded-lg bg-[var(--status-new-bg)] px-4 text-[11px] font-bold text-[var(--status-new-text)]">
            {t("table.tickets.newStatus")}
          </span>
        ),
      },

    ],
    [t]
  );

  return (
    <DashboardHomeView
      dateRangeLabel={t("dateRangeLabel")}
      emptyMessage={t("empty")}
      viewAllLabel={t("viewAll")}
      releaseStatsTabs={releaseStatsTabs}
      activeReleaseStatsTab={activeReleaseStatsTab}
      onReleaseStatsTabChange={setActiveReleaseStatsTab}
      releaseStatsCards={releaseStatsCards}
      ticketStatsTitle={t("sections.ticketStats")}
      ticketStatsCards={ticketStatsCards}
      onViewTicketStats={() => router.push("/dashboard/tickets")}
      latestReleasesTabs={latestReleasesTabs}
      activeLatestReleasesTab={activeLatestReleasesTab}
      onLatestReleasesTabChange={setActiveLatestReleasesTab}
      latestReleasesRows={latestReleasesRows}
      latestReleasesColumns={latestReleasesColumns}
      onViewLatestReleases={() => router.push("/dashboard/lifi")}
      latestTicketsTitle={t("sections.latestTickets")}
      latestTicketsRows={latestTicketsRows}
      latestTicketsColumns={latestTicketsColumns}
      onViewLatestTickets={() => router.push("/dashboard/tickets")}
    />
  );
}