"use client";

import { useState } from "react";
import { Send, Megaphone } from "lucide-react";
import { PageHeader } from "@/components/shared/page-header";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCan } from "@/features/auth/use-can";
import { useT } from "@/i18n";
import { useUrlState } from "@/lib/use-url-state";
import { PushStats } from "@/features/push/push-stats";
import { OverviewTab, type PushTab } from "@/features/push/tab-overview";
import { BroadcastsTab } from "@/features/push/tab-broadcasts";
import { DeliveriesTab } from "@/features/push/tab-deliveries";
import { DevicesTab } from "@/features/push/tab-devices";
import { FailedJobsTab } from "@/features/push/tab-failed-jobs";
import { TestPushDialog } from "@/features/push/test-push-dialog";
import { NewBroadcastDialog } from "@/features/push/new-broadcast-dialog";

const PUSH_TABS: PushTab[] = ["overview", "broadcasts", "deliveries", "devices", "failedJobs"];

/**
 * The Firebase push module: message captains from the back office, and watch the
 * pipeline — health, broadcasts, the delivery log, registered devices and the
 * failed jobs — in one place.
 */
export default function PushPage() {
  const t = useT();
  const { can } = useCan();
  const canSend = can("push.send");
  const canBroadcast = can("push.broadcast");
  const canManage = can("push.manage");

  const [tab, setTab] = useUrlState<PushTab>("tab", "overview", (value) =>
    PUSH_TABS.includes(value as PushTab) ? (value as PushTab) : "overview",
  );
  const [testOpen, setTestOpen] = useState(false);
  const [broadcastOpen, setBroadcastOpen] = useState(false);

  const activeTab: PushTab = tab === "failedJobs" && !canManage ? "overview" : tab;

  return (
    <div>
      <PageHeader
        title={t("push.title")}
        subtitle={t("push.subtitle")}
        actions={
          <div className="flex flex-wrap items-center gap-2">
            {canBroadcast ? (
              <Button
                size={canSend ? "default" : "sm"}
                onClick={() => setBroadcastOpen(true)}
                className="gap-2"
              >
                <Megaphone className="h-4 w-4" aria-hidden />
                {t("push.newBroadcast")}
              </Button>
            ) : null}
            {canSend ? (
              <Button size="sm" variant="outline" onClick={() => setTestOpen(true)} className="gap-2">
                <Send className="h-4 w-4" aria-hidden />
                {t("push.sendTest")}
              </Button>
            ) : null}
          </div>
        }
      />

      <div className="mb-6">
        <PushStats />
      </div>

      <Tabs value={activeTab} onValueChange={(value) => setTab(value as PushTab)}>
        <TabsList>
          <TabsTrigger value="overview">{t("push.tab.overview")}</TabsTrigger>
          <TabsTrigger value="broadcasts">{t("push.tab.broadcasts")}</TabsTrigger>
          <TabsTrigger value="deliveries">{t("push.tab.deliveries")}</TabsTrigger>
          <TabsTrigger value="devices">{t("push.tab.devices")}</TabsTrigger>
          {canManage ? <TabsTrigger value="failedJobs">{t("push.tab.failedJobs")}</TabsTrigger> : null}
        </TabsList>

        <div className="mt-4">
          <TabsContent value="overview">
            <OverviewTab onNavigate={(next) => setTab(next)} />
          </TabsContent>
          <TabsContent value="broadcasts">
            <BroadcastsTab />
          </TabsContent>
          <TabsContent value="deliveries">
            <DeliveriesTab />
          </TabsContent>
          <TabsContent value="devices">
            <DevicesTab />
          </TabsContent>
          {canManage ? (
            <TabsContent value="failedJobs">
              <FailedJobsTab />
            </TabsContent>
          ) : null}
        </div>
      </Tabs>

      <TestPushDialog open={testOpen} onOpenChange={setTestOpen} />
      <NewBroadcastDialog open={broadcastOpen} onOpenChange={setBroadcastOpen} />
    </div>
  );
}