"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useTranslations } from "next-intl";
import jsPDF from "jspdf";
import { toast } from "react-hot-toast";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import {
  JANE_DOE_CLIENT,
  JANE_DOE_RESULTS,
  JANE_DOE_SUICIDE_RISK,
  JANE_DOE_ITEM_RESPONSES,
} from "@/lib/sampleReportData";
import ReportCard from "@/components/practitioner/ReportCard";

const SCALE_ORDER = [
  "somatization",
  "cognitive_issues",
  "demoralization",
  "anhedonia",
  "anxiety",
  "suicidal_ideation",
  "activation",
  "disconstraint",
  "substance_use_problems",
];

const SCALE_DISPLAY_NAMES: Record<string, string> = {
  somatization: "Somatization",
  cognitive_issues: "Cognitive Issues",
  demoralization: "Demoralization",
  anhedonia: "Anhedonia",
  anxiety: "Anxiety",
  suicidal_ideation: "Suicidal Ideation",
  activation: "Activation",
  disconstraint: "Disconstraint",
  substance_use_problems: "Substance Use Problems",
};


const SCALE_INTERPRETATION_KEYS: Record<string, string> = {
  somatization: "somatizationInterpretation",
  cognitive_issues: "cognitiveIssuesInterpretation",
  demoralization: "demoralizationInterpretation",
  anhedonia: "anhedoniaInterpretation",
  anxiety: "anxietyInterpretation",
  suicidal_ideation: "suicidalIdeationInterpretation",
  activation: "activationInterpretation",
  disconstraint: "disconstraintInterpretation",
  substance_use_problems: "substanceUseInterpretation",
};

const SCALE_DESCRIPTION_KEYS: Record<string, string> = {
  somatization: "somatizationDescription",
  cognitive_issues: "cognitiveIssuesDescription",
  demoralization: "demoralizationDescription",
  anhedonia: "anhedoniaDescription",
  anxiety: "anxietyDescription",
  suicidal_ideation: "suicidalIdeationDescription",
  activation: "activationDescription",
  disconstraint: "disconstraintDescription",
  substance_use_problems: "substanceUseDescription",
};

const SCALE_NOT_ELEVATED_KEYS: Record<string, string> = {
  somatization: "somatizationNotElevated",
  cognitive_issues: "cognitiveIssuesNotElevated",
  demoralization: "demoralizationNotElevated",
  anhedonia: "anhedoniaNotElevated",
  anxiety: "anxietyNotElevated",
  suicidal_ideation: "suicidalIdeationNotElevated",
  activation: "activationNotElevated",
  disconstraint: "disconstraintNotElevated",
  substance_use_problems: "substanceUseNotElevated",
};

const PRACTITIONER_SCALE_GROUPS = [
  { key: "somaticCognitive", scales: ["somatization", "cognitive_issues"] },
  { key: "internalizing", scales: ["demoralization", "anhedonia", "anxiety", "suicidal_ideation"] },
  { key: "externalizing", scales: ["activation", "disconstraint", "substance_use_problems"] },
];

export default function SampleTherapistReportPage() {
  const t = useTranslations();
  const reportRef = useRef<HTMLDivElement>(null);
  const [isDownloading, setIsDownloading] = useState(false);

  const suicideRisk = JANE_DOE_SUICIDE_RISK;

  const scaleResults = JANE_DOE_RESULTS.map((r) => ({
    name: SCALE_DISPLAY_NAMES[r.scale_name] || r.scale_name,
    key: r.scale_name,
    percentage: r.percentile,
    rawScore: (r as any).raw_score ?? null,
    sortOrder: SCALE_ORDER.indexOf(r.scale_name),
  })).sort((a, b) => {
    if (a.sortOrder === -1) return 1;
    if (b.sortOrder === -1) return -1;
    return a.sortOrder - b.sortOrder;
  });

  const formatDate = (dateString: string) => {
    if (!dateString) return "-";
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" });
  };

  const getRiskLabel = (risk: string) => {
    if (!risk) return "-";
    const normalized = risk.toLowerCase();
    if (normalized.includes("at least moderate") || normalized.includes("high") || normalized.includes("moderate") || normalized.includes("medium")) return t("practitioner.common.high");
    if (normalized.includes("mild")) return t("practitioner.common.mild");
    if (normalized.includes("low")) return t("practitioner.common.low");
    return risk.charAt(0).toUpperCase() + risk.slice(1).toLowerCase();
  };

  const getSuicideRiskNarrative = () => {
    const normalized = suicideRisk.toLowerCase();
    if (normalized.includes("high") || normalized.includes("moderate"))
      return t("practitioner.report.suicideRiskNarrativeModerate");
    if (normalized.includes("mild")) return t("practitioner.report.suicideRiskNarrativeMild");
    return t("practitioner.report.suicideRiskNarrativeLow");
  };

  const handleDownloadPDF = async () => {
    if (!reportRef.current || isDownloading) return;
    setIsDownloading(true);
    let offscreenContainer: HTMLDivElement | null = null;
    try {
      const html2canvas = (await import("html2canvas-pro")).default;
      const canvasScale = 2;

      offscreenContainer = document.createElement("div");
      offscreenContainer.style.cssText = "position:fixed;left:-9999px;top:0;width:800px;z-index:-1;";
      const clone = reportRef.current.cloneNode(true) as HTMLElement;
      offscreenContainer.appendChild(clone);
      document.body.appendChild(offscreenContainer);

      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));

      const canvas = await html2canvas(clone, {
        scale: canvasScale,
        useCORS: true,
        allowTaint: true,
        backgroundColor: "#ffffff",
        logging: false,
      });

      const pdfWidth = 210;
      const pdfHeight = 297;
      const margin = 10;
      const availableWidth = pdfWidth - margin * 2;
      const availableHeight = pdfHeight - margin * 2;
      const imgWidthPx = canvas.width;
      const imgHeightPx = canvas.height;
      const ratio = availableWidth / imgWidthPx;
      const pageHeightPx = availableHeight / ratio;

      const sectionElements = clone.querySelectorAll("[data-pdf-section]");
      const cloneRect = clone.getBoundingClientRect();
      const breakPoints: number[] = [];
      sectionElements.forEach((el) => {
        const rect = el.getBoundingClientRect();
        const yPx = Math.round((rect.top - cloneRect.top) * canvasScale);
        if (yPx > 0 && yPx < imgHeightPx) breakPoints.push(yPx);
      });

      document.body.removeChild(offscreenContainer);
      offscreenContainer = null;

      const uniqueBreakPoints = [...new Set(breakPoints)].sort((a, b) => a - b);
      const pages: { startY: number; endY: number }[] = [];
      let currentY = 0;

      while (currentY < imgHeightPx) {
        const idealEnd = currentY + pageHeightPx;
        if (idealEnd >= imgHeightPx) {
          pages.push({ startY: currentY, endY: imgHeightPx });
          break;
        }
        let bestBreak = -1;
        for (const bp of uniqueBreakPoints) {
          if (bp <= currentY) continue;
          if (bp <= idealEnd) bestBreak = bp;
          else break;
        }
        if (bestBreak > currentY) {
          pages.push({ startY: currentY, endY: bestBreak });
          currentY = bestBreak;
        } else {
          pages.push({ startY: currentY, endY: Math.min(idealEnd, imgHeightPx) });
          currentY = Math.min(idealEnd, imgHeightPx);
        }
      }

      if (pages.length === 0) pages.push({ startY: 0, endY: imgHeightPx });

      const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4", compress: true });

      for (let i = 0; i < pages.length; i++) {
        if (i > 0) pdf.addPage();
        const { startY, endY } = pages[i];
        const sliceH = endY - startY;
        if (sliceH <= 0) continue;
        const sliceCanvas = document.createElement("canvas");
        sliceCanvas.width = imgWidthPx;
        sliceCanvas.height = Math.ceil(sliceH);
        const ctx = sliceCanvas.getContext("2d");
        if (!ctx) continue;
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, sliceCanvas.width, sliceCanvas.height);
        ctx.drawImage(canvas, 0, startY, imgWidthPx, sliceH, 0, 0, imgWidthPx, Math.ceil(sliceH));
        pdf.addImage(
          sliceCanvas.toDataURL("image/png"),
          "PNG",
          margin,
          margin,
          availableWidth,
          sliceH * ratio,
          undefined,
          "FAST"
        );
      }

      pdf.save("MBHS-SampleReport-Therapist.pdf");
    } catch (error) {
      console.error("Error generating PDF:", error);
      toast.error("Failed to generate PDF. Please try again.");
    } finally {
      if (offscreenContainer && offscreenContainer.parentNode) {
        document.body.removeChild(offscreenContainer);
      }
      setIsDownloading(false);
    }
  };

  return (
    <main className="min-h-screen bg-gray-50 pb-8">
      {/* Sample Banner */}
      <div className="bg-amber-50 border-b border-amber-200 px-4 py-3 text-center">
        <p className="text-sm font-medium text-amber-800">
          {t("practitioner.report.sampleBannerText")}{" "}
          <Link href="/signup" className="underline hover:text-amber-900">
            {t("practitioner.report.sampleCreateAccount")}
          </Link>{" "}
          {t("practitioner.report.sampleBannerSuffix")}
        </p>
      </div>

      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* Top Navigation */}
        <div className="flex items-center justify-between mb-6">
          <Link
            href="/"
            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
            </svg>
            {t("practitioner.report.backToMBHS")}
          </Link>
          <button
            onClick={handleDownloadPDF}
            disabled={isDownloading}
            className="flex items-center gap-2 px-6 py-2.5 bg-[#3B9EC9] text-white rounded-full hover:bg-[#2D8AB5] transition disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer text-sm font-medium"
          >
            {isDownloading ? (
              <>
                <svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
                <span>{t("practitioner.report.downloading")}</span>
              </>
            ) : (
              <>
                <span>{t("practitioner.report.downloadPDF")}</span>
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                </svg>
              </>
            )}
          </button>
        </div>

        {/* Report Card */}
        <div style={{ borderRadius: "12px", border: "1px solid #e5e7eb" }}>
          <div
            ref={reportRef}
            style={{ backgroundColor: "#ffffff", borderRadius: "12px", padding: "32px" }}
          >
            {/* Report Header */}
            <div
              data-pdf-section="header"
              style={{
                display: "flex",
                alignItems: "flex-start",
                justifyContent: "space-between",
                marginBottom: "24px",
                paddingBottom: "24px",
                borderBottom: "1px solid #f3f4f6",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                <Image
                  src={mbhsLogo}
                  alt="MBHS"
                  width={48}
                  height={48}
                  style={{ width: "48px", height: "48px", borderRadius: "8px" }}
                />
                <div>
                  <h1 style={{ fontSize: "24px", fontWeight: 700, color: "#111827", margin: 0 }}>MBHS</h1>
                  <p style={{ fontSize: "12px", color: "#9ca3af", margin: 0 }}>
                    Multidimensional Behavioral Health Screen
                  </p>
                  <p style={{ fontSize: "14px", color: "#4b5563", marginTop: "4px" }}>
                    {t("practitioner.report.selfScreeningReport")}
                  </p>
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <p style={{ fontSize: "14px", color: "#6b7280", margin: 0 }}>
                  {t("practitioner.report.date")}: {formatDate(JANE_DOE_CLIENT.screening_date)}
                </p>
                <p style={{ fontSize: "14px", fontWeight: 500, color: "#374151", marginTop: "4px" }}>
                  {JANE_DOE_CLIENT.name}
                </p>
                <p style={{ fontSize: "13px", color: "#6b7280", margin: 0 }}>
                  {t("practitioner.report.age")}: {JANE_DOE_CLIENT.age}
                </p>
                <p style={{ fontSize: "12px", color: "#6b7280", margin: 0 }}>{JANE_DOE_CLIENT.email}</p>
              </div>
            </div>

            {/* Results at a Glance */}
            <div data-pdf-section="results-glance" style={{ marginBottom: "32px" }}>
              <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#111827", marginBottom: "12px" }}>
                {t("practitioner.report.resultsGlance")}
              </h2>
              <p style={{ fontSize: "14px", color: "#4b5563", marginBottom: "16px" }}>
                {t("practitioner.report.resultsDescription")}
              </p>
              <div style={{ backgroundColor: "#f9fafb", borderRadius: "12px", padding: "16px" }}>
                <p style={{ fontSize: "14px", color: "#374151", marginBottom: "8px" }}>
                  <span style={{ fontWeight: 600 }}>{t("practitioner.report.percentile50")}</span> ={" "}
                  {t("practitioner.report.averageRange")}
                </p>
                <p style={{ fontSize: "14px", color: "#374151", margin: 0 }}>
                  <span style={{ fontWeight: 600 }}>{t("practitioner.report.percentile66")}</span> ={" "}
                  {t("practitioner.report.warrantAttention")}
                </p>
              </div>
            </div>

            {/* Detailed Results by Scale */}
            <div data-pdf-section="detailed-results">
              <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#111827", marginBottom: "24px" }}>
                {t("practitioner.report.detailedResults")}
              </h2>
              <div className="bg-gray-50 rounded-xl p-6">
                {/* Scale Headers */}
                <div className="flex items-center mb-6">
                  <div className="w-40"></div>
                  <div className="flex-1 relative text-xs text-gray-500" style={{ height: "36px" }}>
                    <span
                      className="absolute text-center leading-tight"
                      style={{ left: "50%", transform: "translateX(-50%)", bottom: 0, whiteSpace: "nowrap" }}
                    >
                      {t("practitioner.report.averageScore")}
                      <br />
                      ({t("practitioner.report.percentile50")})
                    </span>
                    <span
                      className="absolute text-center leading-tight"
                      style={{ left: "83%", transform: "translateX(-50%)", bottom: 0, whiteSpace: "nowrap" }}
                    >
                      {t("practitioner.report.clinicalThreshold")}
                      <br />
                      (≥66th percentile)
                    </span>
                  </div>
                </div>

                {/* Scale Bars */}
                <div className="space-y-4">
                  {scaleResults.map((scale, index) => {
                    const getBarColor = () => {
                      if (index < 2) return "bg-[#00B0F0]";
                      if (index < 6) return "bg-[#0070C0]";
                      return "bg-[#7030A0]";
                    };
                    return (
                      <div
                        key={scale.key}
                        data-pdf-section={`scale-${scale.key}`}
                        className="flex items-center"
                      >
                        <div className="w-40 text-sm font-medium text-gray-700 pr-4">{scale.name}</div>
                        <div className="flex-1 relative">
                          <div className="h-7 bg-gray-200 rounded-sm relative overflow-hidden">
                            <div
                              className={`absolute left-0 top-0 h-full rounded-sm flex items-center justify-end pr-2 ${getBarColor()}`}
                              style={{ width: `${scale.percentage}%` }}
                            >
                              <span className="text-xs font-semibold text-white">
                                {scale.percentage}%
                              </span>
                            </div>
                            <div className="absolute top-0 bottom-0 w-px bg-gray-500" style={{ left: "50%" }} />
                            <div className="absolute top-0 bottom-0 w-px bg-gray-700" style={{ left: "66%" }} />
                          </div>
                          <div className="relative text-xs text-gray-400 mt-1">
                            <span className="absolute" style={{ left: "50%", transform: "translateX(-50%)" }}>50</span>
                            <span className="absolute" style={{ left: "66%", transform: "translateX(-50%)" }}>66</span>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            {/* Suicide Risk Classification */}
            <div
              data-pdf-section="suicide-risk"
              style={{
                backgroundColor: suicideRisk?.toLowerCase()?.includes("high") || suicideRisk?.toLowerCase()?.includes("moderate")
                ? "#fef2f2"
                : suicideRisk?.toLowerCase()?.includes("mild")
                  ? "#fffbeb"
                  : suicideRisk?.toLowerCase()?.includes("low")
                    ? "#f0fdf4"
                    : "#f9fafb",
                borderRadius: "12px",
                padding: "24px",
                marginTop: "32px",
                marginBottom: "0",
              }}
            >
              <h2 style={{ fontSize: "16px", fontWeight: 700, color: "#111827", marginBottom: "12px" }}>
                {t("practitioner.report.suicideRiskClassification")}
              </h2>
              <span
                style={{
                  display: "inline-block",
                  padding: "8px 16px",
                  backgroundColor: suicideRisk?.toLowerCase()?.includes("high") || suicideRisk?.toLowerCase()?.includes("moderate")
                    ? "#FEE2E2"
                    : suicideRisk?.toLowerCase()?.includes("mild")
                      ? "#FEF9C3"
                      : suicideRisk?.toLowerCase()?.includes("low")
                        ? "#DCFCE7"
                        : "#F3F4F6",
                  color: suicideRisk?.toLowerCase()?.includes("high") || suicideRisk?.toLowerCase()?.includes("moderate")
                    ? "#DC2626"
                    : suicideRisk?.toLowerCase()?.includes("mild")
                      ? "#CA8A04"
                      : suicideRisk?.toLowerCase()?.includes("low")
                        ? "#16A34A"
                        : "#6b7280",
                  fontSize: "14px",
                  fontWeight: 600,
                  borderRadius: "9999px",
                  marginBottom: "12px",
                }}
              >
                {t("practitioner.report.suicideRiskLevel")}: {getRiskLabel(suicideRisk)}
              </span>
              <p style={{ fontSize: "14px", color: "#4b5563", lineHeight: 1.6, margin: 0 }}>
                {getSuicideRiskNarrative()}
              </p>
            </div>

            {/* Scale Interpretations */}
            <div data-pdf-section="interpretations-header" style={{ marginTop: "32px" }}>
              <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#111827", marginBottom: "20px" }}>
                {t("practitioner.report.scaleInterpretations")}
              </h2>
              {PRACTITIONER_SCALE_GROUPS.map((group) => {
                const groupScales = group.scales
                  .map((s) => scaleResults.find((r) => r.key === s))
                  .filter(Boolean) as typeof scaleResults;
                if (groupScales.length === 0) return null;
                return (
                  <div key={group.key} style={{ marginBottom: "24px" }}>
                    <h3
                      style={{
                        fontSize: "16px",
                        fontWeight: 600,
                        color: "#1F2937",
                        margin: "0 0 12px 0",
                        paddingBottom: "4px",
                        borderBottom: "1px solid #E5E7EB",
                      }}
                    >
                      {t(`practitioner.report.scaleGroups.${group.key}`)}
                    </h3>
                    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
                      {groupScales.map((scale) => {
                        const isElevated = scale.percentage >= 66;
                        const textKey = SCALE_INTERPRETATION_KEYS[scale.key];
                        const descKey = SCALE_DESCRIPTION_KEYS[scale.key];
                        const notElevatedKey = SCALE_NOT_ELEVATED_KEYS[scale.key];
                        return (
                          <div
                            key={scale.key}
                            data-pdf-section={`interpretation-${scale.key}`}
                            style={{
                              borderLeft: isElevated ? "4px solid #3B9EC9" : "none",
                              paddingLeft: "16px",
                            }}
                          >
                            <h4
                              style={{
                                fontSize: "14px",
                                fontWeight: 700,
                                color: "#111827",
                                margin: "0 0 4px 0",
                              }}
                            >
                              {scale.name} -{" "}
                              {isElevated
                                ? t("practitioner.report.elevated")
                                : t("practitioner.report.notElevated")}
                            </h4>
                            {descKey && (
                              <p
                                style={{
                                  fontSize: "13px",
                                  color: "#4b5563",
                                  lineHeight: 1.6,
                                  margin: "0 0 4px 0",
                                }}
                              >
                                {t(`practitioner.report.${descKey}`)}
                              </p>
                            )}
                            <p
                              style={{
                                fontSize: "13px",
                                lineHeight: 1.6,
                                margin: 0,
                                color: isElevated ? "#1F2937" : "#4b5563",
                                fontWeight: isElevated ? 500 : 400,
                              }}
                            >
                              {isElevated
                                ? textKey && t(`practitioner.report.${textKey}`)
                                : notElevatedKey && t(`practitioner.report.${notElevatedKey}`)}
                            </p>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* SSI-Based Clinical Resources — temporarily hidden */}
            {false && (<div data-pdf-section="ssi-resources" style={{ marginTop: "32px" }}>
              <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#111827", marginBottom: "16px" }}>
                {t("practitioner.report.ssiResources")}
              </h2>
              <div style={{ backgroundColor: "#f9fafb", borderRadius: "12px", padding: "20px" }}>
                <div data-pdf-section="ssi-demoralization" style={{ marginBottom: "20px" }}>
                  <h3 style={{ fontSize: "15px", fontWeight: 700, color: "#111827", marginBottom: "4px" }}>
                    {t("practitioner.report.ssiDemoralizationTitle")}
                  </h3>
                  <p style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, margin: "0 0 8px 0" }}>
                    {t("practitioner.report.ssiDemoralizationDescription")}
                  </p>
                  <button
                    style={{
                      display: "inline-flex",
                      alignItems: "center",
                      gap: "6px",
                      padding: "6px 14px",
                      fontSize: "13px",
                      fontWeight: 500,
                      color: "#374151",
                      backgroundColor: "#ffffff",
                      border: "1px solid #d1d5db",
                      borderRadius: "8px",
                      cursor: "pointer",
                    }}
                  >
                    <svg
                      style={{ width: "14px", height: "14px" }}
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
                      />
                    </svg>
                    {t("practitioner.report.viewSSIResource")}
                  </button>
                </div>
                <div data-pdf-section="ssi-anhedonia">
                  <h3 style={{ fontSize: "15px", fontWeight: 700, color: "#111827", marginBottom: "4px" }}>
                    {t("practitioner.report.ssiAnhedoniaTitle")}
                  </h3>
                  <p style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, margin: "0 0 8px 0" }}>
                    {t("practitioner.report.ssiAnhedoniaDescription")}
                  </p>
                  <button
                    style={{
                      display: "inline-flex",
                      alignItems: "center",
                      gap: "6px",
                      padding: "6px 14px",
                      fontSize: "13px",
                      fontWeight: 500,
                      color: "#374151",
                      backgroundColor: "#ffffff",
                      border: "1px solid #d1d5db",
                      borderRadius: "8px",
                      cursor: "pointer",
                    }}
                  >
                    <svg
                      style={{ width: "14px", height: "14px" }}
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
                      />
                    </svg>
                    {t("practitioner.report.viewSSIResource")}
                  </button>
                </div>
              </div>
            </div>
            )}

            {/* Self-Directed Client Resources */}
            <div
              data-pdf-section="single-session"
              style={{
                marginTop: "32px",
                backgroundColor: "#f9fafb",
                borderRadius: "12px",
                padding: "20px",
              }}
            >
              <h2 style={{ fontSize: "18px", fontWeight: 700, color: "#111827", marginBottom: "12px" }}>
                {t("practitioner.report.singleSessionTitle")}
              </h2>
              <p style={{ fontSize: "14px", color: "#4b5563", lineHeight: 1.6 }}>
                {t("practitioner.report.singleSessionDescPart1")}
                <a href="https://www.schleiderlab.org/" target="_blank" rel="noopener noreferrer" style={{ color: "#3B9EC9", textDecoration: "underline" }}>
                  {t("practitioner.report.singleSessionLabLinkText")}
                </a>
                {t("practitioner.report.singleSessionDescPart2")}
                <a href="https://tryprojectyes.org/" target="_blank" rel="noopener noreferrer" style={{ color: "#3B9EC9", textDecoration: "underline" }}>
                  {t("practitioner.report.singleSessionCoursesLinkText")}
                </a>
                {t("practitioner.report.singleSessionDescPart3")}
              </p>
            </div>

            {/* Important Information */}
            <div data-pdf-section="important-info" style={{ marginTop: "32px" }}>
              <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#111827", marginBottom: "16px" }}>
                {t("practitioner.report.importantInformation")}
              </h2>
              <div style={{ backgroundColor: "#f9fafb", borderRadius: "12px", padding: "20px", border: "1px solid #e5e7eb" }}>
                <ul style={{ margin: 0, paddingLeft: "20px", listStyleType: "disc" }}>
                  <li style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, marginBottom: "6px", display: "list-item" }}>{t("practitioner.report.noMedicalDiagnosis")}</li>
                  <li style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, marginBottom: "6px", display: "list-item" }}>{t("practitioner.report.selfReportedResults")}</li>
                  <li style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, marginBottom: "6px", display: "list-item" }}>{t("practitioner.report.qualifiedProfessional")}</li>
                  <li style={{ fontSize: "13px", color: "#4b5563", lineHeight: 1.6, display: "list-item" }}>{t("practitioner.report.resultsChange")}</li>
                </ul>
              </div>
            </div>

            {/* Item-Level Report Card */}
            <div data-pdf-section="report-card" style={{ marginTop: "32px" }}>
              <ReportCard itemResponses={JANE_DOE_ITEM_RESPONSES} />
            </div>

            {/* Footer */}
            <div
              data-pdf-section="footer"
              style={{
                marginTop: "32px",
                paddingTop: "16px",
                borderTop: "1px solid #e5e7eb",
                textAlign: "center",
              }}
            >
              <p style={{ fontSize: "13px", fontWeight: 600, color: "#374151", margin: 0 }}>
                {t("practitioner.report.mbhsVersion")}
              </p>
              <p style={{ fontSize: "12px", color: "#9ca3af", marginTop: "4px" }}>
                {t("practitioner.report.copyright")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}