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

export default async function TemplateDetailPage({ params }: { params: Promise<{ templateId: string }> }) {
  const { templateId } = await params;
  const session = await getSession();
  if (!session) {
    redirect("/login");
  }

  const template = await prisma.messageTemplate.findFirst({
    where: { id: templateId, tenantId: session.tenantId },
    include: { channel: true }
  });
  if (!template) {
    redirect("/templates?error=template_not_found");
  }

  return (
    <ShellPage shell="admin" title="Template Detail" description="Preview content, provider metadata, dan approval state.">
      <div className="grid gap-6 xl:grid-cols-2">
        <SectionCard title="Template preview">
          <p className="text-sm text-on-surface-variant">
            <strong>Name:</strong> {template.name}
          </p>
          <p className="text-sm text-on-surface-variant">
            <strong>Category:</strong> {template.category}
          </p>
          <p className="text-sm text-on-surface-variant">
            <strong>Language:</strong> {template.languageCode}
          </p>
          <p className="mt-4 rounded-xl border border-line bg-surface-container p-3 text-sm text-on-surface-variant">{template.bodyText}</p>
        </SectionCard>
        <SectionCard title="Provider status">
          <p className="text-sm text-on-surface-variant">
            <strong>Approval:</strong> {template.approvalStatus}
          </p>
          <p className="text-sm text-on-surface-variant">
            <strong>Channel:</strong> {template.channel.channelName}
          </p>
          <p className="text-sm text-on-surface-variant">
            <strong>Provider id:</strong> {template.providerTemplateId || "-"}
          </p>
          <p className="text-sm text-on-surface-variant">
            <strong>Rejected reason:</strong> {template.rejectedReason || "-"}
          </p>
        </SectionCard>
      </div>
    </ShellPage>
  );
}