import { notFound } from "next/navigation";

import { PdfDownloadButton } from "@/components/reports/pdf-download-button";
import { ReportDetailContent } from "@/components/reports/report-detail-content";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { reportTokenSchema } from "@/lib/validations/case";
import { getCalculationByReportToken } from "@/services/calculation.service";

interface SharedReportPageProps {
  params: Promise<{ token: string }>;
}

export default async function SharedReportPage({ params }: SharedReportPageProps) {
  const { token } = await params;
  const parsedToken = reportTokenSchema.safeParse(token);
  if (!parsedToken.success) {
    notFound();
  }

  const calculation = await getCalculationByReportToken(parsedToken.data);
  if (!calculation) {
    notFound();
  }

  return (
    <section className="mx-auto w-full max-w-6xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
      <Card className="border-emerald-200 bg-emerald-50/60">
        <CardContent className="flex flex-wrap items-center justify-between gap-3 py-4">
          <div className="space-y-1">
            <p className="text-base font-semibold text-emerald-900">
              Shared Report - {calculation.title}
            </p>
            <p className="text-sm text-emerald-800">
              Read-only inheritance report generated by AlWirasah
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Badge>Read Only</Badge>
            <PdfDownloadButton
              endpoint={`/api/shared/report/${calculation.reportToken}/pdf`}
              filename={`alwirasah-shared-${calculation.id}.pdf`}
            />
          </div>
        </CardContent>
      </Card>

      <ReportDetailContent calculation={calculation} />
    </section>
  );
}