import Link from "next/link";
import { redirect } from "next/navigation";

import { ShellPage } from "@/components/page-templates";
import { SectionCard } from "@/components/ui";
import { getSession } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

function formatDate(date: Date | null) {
  if (!date) {
    return "Not synced";
  }

  return new Intl.DateTimeFormat("id-ID", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit"
  }).format(date);
}

export default async function SuperAdminChannelDetailPage({
  params
}: {
  params: Promise<{ channelId: string }>;
}) {
  const session = await getSession();
  if (!session || session.role !== "super_admin") {
    redirect("/unauthorized");
  }

  const { channelId } = await params;

  const channel = await prisma.channel.findUnique({
    where: { id: channelId },
    include: {
      tenant: true,
      conversations: {
        where: {},
        take: 5,
        orderBy: { lastMessageAt: "desc" }
      },
      webhookEvents: {
        orderBy: { createdAt: "desc" },
        take: 8
      }
    }
  });

  if (!channel) {
    redirect("/super-admin/channels?error=channel_not_found");
  }

  const failedWebhookCount = channel.webhookEvents.filter((item) => item.processStatus === "failed").length;

  return (
    <ShellPage shell="super-admin" title="Channel Detail" description="Phone status, webhook health, failure summary, dan reconnect action.">
      <div className="grid gap-6 xl:grid-cols-2">
        <SectionCard title="Channel info">
          <p className="text-sm text-on-surface-variant">Tenant: {channel.tenant.name}</p>
          <p className="text-sm text-on-surface-variant">Provider: {channel.provider}</p>
          <p className="text-sm text-on-surface-variant">Channel name: {channel.channelName}</p>
          <p className="text-sm text-on-surface-variant">WABA ID: {channel.wabaId ?? "-"}</p>
          <p className="text-sm text-on-surface-variant">Phone Number ID: {channel.phoneNumberId ?? "-"}</p>
          <p className="text-sm text-on-surface-variant">Display Number: {channel.displayPhoneNumber ?? "-"}</p>
          <p className="text-sm text-on-surface-variant">Status: {channel.status}</p>
          <p className="text-sm text-on-surface-variant">Webhook status: {channel.webhookStatus ?? "unknown"}</p>
          <p className="text-sm text-on-surface-variant">Last sync: {formatDate(channel.lastSyncAt)}</p>
          <div className="mt-4 flex gap-3">
            <Link href={`/super-admin/tenants/${channel.tenantId}`} className="text-brand hover:underline">
              Open tenant
            </Link>
            <Link href="/super-admin/channels" className="text-brand hover:underline">
              Back to channels
            </Link>
          </div>
        </SectionCard>
        <SectionCard title="Health">
          <p className="text-sm text-on-surface-variant">Webhook failures: {failedWebhookCount}</p>
          <p className="text-sm text-on-surface-variant">Conversations tracked: {channel.conversations.length}</p>
          <ul className="mt-2 space-y-2">
            {channel.webhookEvents.map((event) => (
              <li key={event.id} className="rounded-xl border border-line bg-surface-container p-3">
                <p className="text-xs text-outline">{event.eventType}</p>
                <p className="text-sm text-on-surface">Status: {event.processStatus}</p>
                <p className="text-xs text-outline">Created: {formatDate(event.createdAt)}</p>
              </li>
            ))}
            {channel.webhookEvents.length === 0 ? <p className="text-sm text-on-surface-variant">No webhook events.</p> : null}
          </ul>
        </SectionCard>
      </div>
    </ShellPage>
  );
}