import {
  Document,
  Image,
  Page,
  StyleSheet,
  Text,
  View,
} from "@react-pdf/renderer";

import type { FirecrawlBranding } from "../../../lib/branding-types";

const styles = StyleSheet.create({
  componentBody: {
    color: "#475569",
    fontSize: 8.25,
    marginBottom: 2,
  },
  componentCard: {
    borderColor: "#E2E8F0",
    borderRadius: 8,
    borderStyle: "solid",
    borderWidth: 1,
    marginBottom: 8,
    marginHorizontal: 4,
    padding: 8,
    width: "48.5%",
  },
  componentCardFull: {
    width: "100%",
  },
  componentDemo: {
    alignItems: "center",
    borderStyle: "solid",
    borderWidth: 1,
    display: "flex",
    justifyContent: "center",
    marginBottom: 4,
    minHeight: 24,
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  componentGrid: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    marginHorizontal: -4,
  },
  componentName: {
    fontSize: 9.5,
    marginBottom: 4,
  },
  confidenceFill: {
    backgroundColor: "#2563EB",
    borderRadius: 999,
    height: 6,
  },
  confidenceLabel: {
    color: "#475569",
    fontSize: 8.5,
    marginBottom: 2,
  },
  confidenceRow: {
    marginBottom: 6,
  },
  confidenceTrack: {
    backgroundColor: "#E2E8F0",
    borderRadius: 999,
    height: 6,
    width: "100%",
  },
  coverMeta: {
    borderBottomColor: "#E2E8F0",
    borderBottomStyle: "solid",
    borderBottomWidth: 1,
    marginBottom: 10,
    paddingBottom: 10,
  },
  footer: {
    color: "#94A3B8",
    fontSize: 8,
    marginTop: 10,
    textAlign: "right",
  },
  heroBand: {
    borderRadius: 8,
    marginBottom: 10,
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  heroBandText: {
    fontSize: 9,
  },
  label: {
    color: "#64748B",
    fontSize: 8.5,
    width: 84,
  },
  labelRow: {
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    marginBottom: 3,
  },
  logoContainer: {
    alignItems: "center",
    borderColor: "#CBD5E1",
    borderRadius: 10,
    borderStyle: "solid",
    borderWidth: 1,
    display: "flex",
    height: 40,
    justifyContent: "center",
    width: 40,
  },
  logoFallbackText: {
    fontSize: 12,
  },
  page: {
    backgroundColor: "#FFFFFF",
    color: "#0F172A",
    fontSize: 10,
    lineHeight: 1.4,
    paddingHorizontal: 34,
    paddingVertical: 34,
  },
  sectionHeading: {
    fontSize: 14,
    marginBottom: 8,
    marginTop: 8,
  },
  sectionSubtleText: {
    color: "#475569",
    fontSize: 8.75,
    marginBottom: 6,
  },
  specimenBodyText: {
    lineHeight: 1.35,
  },
  specimenCodeText: {
    fontSize: 9.5,
    lineHeight: 1.35,
  },
  specimenHeadingText: {
    fontSize: 18,
    lineHeight: 1.25,
  },
  splitCard: {
    borderColor: "#E2E8F0",
    borderRadius: 8,
    borderStyle: "solid",
    borderWidth: 1,
    flex: 1,
    padding: 8,
  },
  splitCardBody: {
    color: "#475569",
    fontSize: 8.25,
    marginBottom: 2,
  },
  splitCardTitle: {
    fontSize: 9.5,
    marginBottom: 4,
  },
  splitRow: {
    display: "flex",
    flexDirection: "row",
    gap: 8,
    marginTop: 6,
  },
  subtitle: {
    color: "#64748B",
    fontSize: 10,
    lineHeight: 1.35,
    marginBottom: 2,
  },
  swatchCard: {
    borderColor: "#E2E8F0",
    borderRadius: 8,
    borderStyle: "solid",
    borderWidth: 1,
    marginBottom: 8,
    marginHorizontal: 4,
    padding: 8,
    width: "48.5%",
  },
  swatchColor: {
    borderColor: "#E2E8F0",
    borderRadius: 6,
    borderStyle: "solid",
    borderWidth: 1,
    height: 32,
    marginBottom: 6,
  },
  swatchGrid: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    marginHorizontal: -4,
  },
  swatchMeta: {
    color: "#64748B",
    fontSize: 8.25,
  },
  swatchTitle: {
    fontSize: 9.5,
    marginBottom: 1,
  },
  title: {
    fontSize: 22,
    lineHeight: 1.2,
    marginBottom: 4,
  },
  titleRow: {
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  tokenColName: { width: "42%" },
  tokenColUsage: { width: "36%" },
  tokenColValue: { width: "22%" },
  tokenHead: {
    backgroundColor: "#0F172A",
    color: "#FFFFFF",
    display: "flex",
    flexDirection: "row",
    fontSize: 8.5,
    paddingHorizontal: 8,
    paddingVertical: 5,
  },
  tokenRow: {
    display: "flex",
    flexDirection: "row",
    fontSize: 8.5,
    paddingHorizontal: 8,
    paddingVertical: 5,
  },
  tokenRowAlt: {
    backgroundColor: "#F8FAFC",
  },
  tokenTable: {
    borderColor: "#E2E8F0",
    borderRadius: 8,
    borderStyle: "solid",
    borderWidth: 1,
    marginTop: 8,
    overflow: "hidden",
  },
  typographyMeta: {
    color: "#64748B",
    fontSize: 8.5,
    marginBottom: 4,
  },
  typographySpecimen: {
    borderColor: "#E2E8F0",
    borderRadius: 8,
    borderStyle: "solid",
    borderWidth: 1,
    marginBottom: 8,
    padding: 8,
  },
  value: {
    flex: 1,
    fontSize: 9.25,
  },
});

interface BrandPdfDocumentProps {
  branding: FirecrawlBranding;
  websiteUrl: string;
  focus: string | null;
  fontFamily: string;
}

function sanitizeText(value: unknown): string {
  if (typeof value !== "string") {
    return "";
  }
  return value
    .replaceAll(/[^\u0020-\u007E]/g, " ")
    .replaceAll(/\s+/g, " ")
    .trim();
}

function normalizeHexColor(value?: string): string | null {
  const raw = value?.trim();
  if (!raw) {
    return null;
  }
  const hex = raw.startsWith("#") ? raw : `#${raw}`;
  return /^#[0-9A-Fa-f]{6}$/.test(hex) || /^#[0-9A-Fa-f]{3}$/.test(hex)
    ? hex.toUpperCase()
    : null;
}

function readComponentString(
  component: Record<string, string | number | boolean> | undefined,
  key: string,
  fallback: string
): string {
  const value = component?.[key];
  if (typeof value === "string" || typeof value === "number") {
    const normalized = String(value).trim();
    return normalized || fallback;
  }
  return fallback;
}

function toPct(value: number | undefined): string {
  if (typeof value !== "number" || Number.isNaN(value)) {
    return "0%";
  }
  const clamped = Math.max(0, Math.min(1, value));
  return `${Math.round(clamped * 100)}%`;
}

function toSafeTypeSize(
  value: string,
  fallback: number,
  min: number,
  max: number
): number {
  const numeric = Number.parseFloat(value);
  if (!Number.isFinite(numeric)) {
    return fallback;
  }
  return Math.min(max, Math.max(min, numeric));
}

function initialsFromUrl(url: string): string {
  const safe = sanitizeText(url);
  if (!safe) {
    return "BR";
  }
  const host = safe.replace(/^https?:\/\//, "").split("/")[0] ?? safe;
  const initials = host
    .split(".")
    .filter((part) => part && part !== "www")
    .slice(0, 2)
    .map((part) => part.charAt(0).toUpperCase())
    .join("");
  return initials || "BR";
}

function isRenderableImageSrc(src: string): boolean {
  const lower = src.trim().toLowerCase();
  if (lower.startsWith("data:image/")) {
    return true;
  }
  if (lower.startsWith("http://") || lower.startsWith("https://")) {
    return true;
  }
  return /\.(png|jpe?g|gif|webp)(\?.*)?$/.test(lower);
}

export function BrandPdfDocument(props: BrandPdfDocumentProps) {
  const { branding } = props;
  const safeWebsiteUrl = sanitizeText(props.websiteUrl);
  const safeFocus = sanitizeText(props.focus ?? "");
  const safeScheme = sanitizeText(branding.colorScheme ?? "unknown");
  const generatedDate = new Date().toISOString().slice(0, 10);

  const logoRaw = branding.logo ?? branding.images?.logo;
  const logoSrc =
    typeof logoRaw === "string" && isRenderableImageSrc(logoRaw)
      ? logoRaw
      : null;
  const logoStatus = logoSrc ? "extracted" : "fallback";
  const initials = initialsFromUrl(safeWebsiteUrl);

  const colors = [
    ["Primary", branding.colors?.primary, "Primary actions and highlights"],
    ["Secondary", branding.colors?.secondary, "Secondary actions and accents"],
    ["Accent", branding.colors?.accent, "Callouts and emphasis"],
    ["Background", branding.colors?.background, "Main page background"],
    ["Text Primary", branding.colors?.textPrimary, "Primary body and headings"],
    ["Link", branding.colors?.link, "Links and interactive text"],
  ].map(([name, raw, usage]) => ({
    name,
    usage,
    value: normalizeHexColor(raw) ?? "#CBD5E1",
  }));

  const typography = {
    bodySize: String(branding.typography?.fontSizes?.body ?? "16px"),
    bodyWeight: String(branding.typography?.fontWeights?.regular ?? "400"),
    codeSize: String(branding.typography?.fontSizes?.small ?? "12px"),
    codeWeight: String(branding.typography?.fontWeights?.medium ?? "500"),
    headingSize: String(branding.typography?.fontSizes?.h1 ?? "48px"),
    headingWeight: String(branding.typography?.fontWeights?.bold ?? "700"),
  };
  const headingSpecimenSize = toSafeTypeSize(
    typography.headingSize,
    18,
    14,
    20
  );
  const bodySpecimenSize = toSafeTypeSize(typography.bodySize, 10, 9, 12);
  const codeSpecimenSize = toSafeTypeSize(typography.codeSize, 9.5, 8, 11);

  const fontInventory = (branding.fonts ?? []).slice(0, 8).map((font) => ({
    family: sanitizeText(font.family ?? "Unknown"),
    role: sanitizeText(font.role ?? "unspecified"),
  }));
  const fontFamilies = branding.typography?.fontFamilies;
  const fontStacks = branding.typography?.fontStacks ?? {};

  const spacingBase = String(branding.spacing?.baseUnit ?? 4);
  const spacingRadius = String(branding.spacing?.borderRadius ?? "8px");

  const buttonPrimary = branding.components?.buttonPrimary;
  const buttonSecondary = branding.components?.buttonSecondary;
  const input = branding.components?.input;

  const components = [
    {
      background:
        normalizeHexColor(
          readComponentString(buttonPrimary, "background", "#1F4ED8")
        ) ?? "#1F4ED8",
      border:
        normalizeHexColor(
          readComponentString(buttonPrimary, "borderColor", "#1F4ED8")
        ) ?? "#1F4ED8",
      corners: sanitizeText(
        JSON.stringify(buttonPrimary?.borderRadiusCorners ?? {}).replaceAll(
          /[{}"]/g,
          ""
        )
      ),
      label: "Get Started",
      name: "Button / Primary",
      radius: readComponentString(buttonPrimary, "borderRadius", spacingRadius),
      shadow: readComponentString(buttonPrimary, "shadow", "none"),
      text:
        normalizeHexColor(
          readComponentString(buttonPrimary, "textColor", "#FFFFFF")
        ) ?? "#FFFFFF",
    },
    {
      background:
        normalizeHexColor(
          readComponentString(buttonSecondary, "background", "#FFFFFF")
        ) ?? "#FFFFFF",
      border:
        normalizeHexColor(
          readComponentString(buttonSecondary, "borderColor", "#D1D5DB")
        ) ?? "#D1D5DB",
      corners: sanitizeText(
        JSON.stringify(buttonSecondary?.borderRadiusCorners ?? {}).replaceAll(
          /[{}"]/g,
          ""
        )
      ),
      label: "Learn More",
      name: "Button / Secondary",
      radius: readComponentString(
        buttonSecondary,
        "borderRadius",
        spacingRadius
      ),
      shadow: readComponentString(buttonSecondary, "shadow", "none"),
      text:
        normalizeHexColor(
          readComponentString(buttonSecondary, "textColor", "#111827")
        ) ?? "#111827",
    },
    {
      background:
        normalizeHexColor(
          readComponentString(input, "background", "#FFFFFF")
        ) ?? "#FFFFFF",
      border:
        normalizeHexColor(
          readComponentString(input, "borderColor", "#D1D5DB")
        ) ?? "#D1D5DB",
      corners: sanitizeText(
        JSON.stringify(input?.borderRadiusCorners ?? {}).replaceAll(
          /[{}"]/g,
          ""
        )
      ),
      label: "you@email.com",
      name: "Input",
      radius: readComponentString(input, "borderRadius", spacingRadius),
      shadow: readComponentString(input, "shadow", "none"),
      text:
        normalizeHexColor(readComponentString(input, "textColor", "#111827")) ??
        "#111827",
    },
  ];

  const tokenRows = [
    ["color-brand-primary", colors[0]?.value ?? "#1F4ED8", "Primary actions"],
    [
      "color-brand-secondary",
      colors[1]?.value ?? "#64748B",
      "Secondary accents",
    ],
    [
      "font-family-base",
      sanitizeText(fontFamilies?.primary ?? props.fontFamily),
      "Global typography font",
    ],
    ["radius-component-base", spacingRadius, "Buttons and fields"],
  ] as const;

  const { confidence } = branding;
  const { personality } = branding;
  const { designSystem } = branding;

  return (
    <Document
      author="Firecrawl Brand PDF"
      subject="Brand kit and implementation guide"
      title="Brand Kit Style Guide"
    >
      <Page size="A4" style={[styles.page, { fontFamily: props.fontFamily }]}>
        <View
          style={[
            styles.heroBand,
            { backgroundColor: colors[0]?.value ?? "#1F4ED8" },
          ]}
        >
          <Text style={styles.heroBandText}>
            Brand-forward guideline generated from detected visual tokens
          </Text>
        </View>
        <View style={styles.titleRow}>
          <View>
            <Text style={styles.title}>Brand Kit</Text>
            <Text style={styles.subtitle}>Visual Identity Snapshot</Text>
          </View>
          <View style={styles.logoContainer}>
            {logoSrc ? (
              <Image src={logoSrc} style={{ height: 24, width: 24 }} />
            ) : (
              <Text style={styles.logoFallbackText}>{initials}</Text>
            )}
          </View>
        </View>

        <View style={styles.coverMeta}>
          <View style={styles.labelRow}>
            <Text style={styles.label}>Website</Text>
            <Text style={styles.value}>{safeWebsiteUrl}</Text>
          </View>
          <View style={styles.labelRow}>
            <Text style={styles.label}>Scheme</Text>
            <Text style={styles.value}>{safeScheme}</Text>
          </View>
          <View style={styles.labelRow}>
            <Text style={styles.label}>Generated</Text>
            <Text style={styles.value}>{generatedDate}</Text>
          </View>
          <View style={styles.labelRow}>
            <Text style={styles.label}>Logo</Text>
            <Text style={styles.value}>{logoStatus}</Text>
          </View>
          {safeFocus ? (
            <View style={styles.labelRow}>
              <Text style={styles.label}>Focus</Text>
              <Text style={styles.value}>{safeFocus}</Text>
            </View>
          ) : null}
        </View>

        <Text style={styles.sectionHeading}>Color Palette</Text>
        <Text style={styles.sectionSubtleText}>
          Core visual colors extracted from the source brand.
        </Text>
        <View style={styles.swatchGrid}>
          {colors.map((color) => (
            <View key={color.name} style={styles.swatchCard}>
              <View
                style={[styles.swatchColor, { backgroundColor: color.value }]}
              />
              <Text style={styles.swatchTitle}>{color.name}</Text>
              <Text style={styles.swatchMeta}>{color.value}</Text>
              <Text style={styles.swatchMeta}>{color.usage}</Text>
            </View>
          ))}
        </View>

        <View style={styles.splitRow}>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Spacing System</Text>
            <Text
              style={styles.splitCardBody}
            >{`Base unit: ${spacingBase}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Global radius: ${spacingRadius}`}</Text>
          </View>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Image Assets</Text>
            <Text
              style={styles.splitCardBody}
            >{`Favicon: ${branding.images?.favicon ? "yes" : "no"}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`OG image: ${branding.images?.ogImage ? "yes" : "no"}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Logo href: ${sanitizeText(branding.images?.logoHref ?? "n/a")}`}</Text>
          </View>
        </View>
        <Text style={styles.footer}>Page 1 / 3</Text>
      </Page>

      <Page size="A4" style={[styles.page, { fontFamily: props.fontFamily }]}>
        <Text style={styles.sectionHeading}>Typography System</Text>
        <Text style={styles.sectionSubtleText}>
          Typography has a dedicated page to avoid specimen cut-off.
        </Text>

        <View style={styles.typographySpecimen}>
          <Text
            style={styles.typographyMeta}
          >{`Heading / ${typography.headingSize} / ${typography.headingWeight}`}</Text>
          <Text
            style={[
              styles.specimenHeadingText,
              { fontSize: headingSpecimenSize },
            ]}
          >
            Brand Heading Example
          </Text>
        </View>
        <View style={styles.typographySpecimen}>
          <Text
            style={styles.typographyMeta}
          >{`Body / ${typography.bodySize} / ${typography.bodyWeight}`}</Text>
          <Text
            style={[styles.specimenBodyText, { fontSize: bodySpecimenSize }]}
          >
            Body sample for product messaging and descriptive content.
          </Text>
        </View>
        <View style={styles.typographySpecimen}>
          <Text
            style={styles.typographyMeta}
          >{`Code / ${typography.codeSize} / ${typography.codeWeight}`}</Text>
          <Text
            style={[styles.specimenCodeText, { fontSize: codeSpecimenSize }]}
          >
            const token = &quot;color-brand-primary&quot;;
          </Text>
        </View>

        <View style={styles.splitRow}>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Font Inventory</Text>
            {fontInventory.length > 0 ? (
              fontInventory.map((font, index) => (
                <Text
                  key={`${font.family}-${index}`}
                  style={styles.splitCardBody}
                >
                  {`${font.family} (${font.role})`}
                </Text>
              ))
            ) : (
              <Text style={styles.splitCardBody}>
                No explicit font inventory in scrape.
              </Text>
            )}
          </View>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Font Families</Text>
            <Text
              style={styles.splitCardBody}
            >{`Primary: ${sanitizeText(fontFamilies?.primary ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Heading: ${sanitizeText(fontFamilies?.heading ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Body: ${sanitizeText(fontFamilies?.body ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Code: ${sanitizeText(fontFamilies?.code ?? "n/a")}`}</Text>
          </View>
        </View>

        <View style={styles.splitCard}>
          <Text style={styles.splitCardTitle}>Font Stacks</Text>
          {Object.entries(fontStacks).length > 0 ? (
            Object.entries(fontStacks)
              .slice(0, 4)
              .map(([key, stack]) => (
                <Text key={key} style={styles.splitCardBody}>
                  {`${sanitizeText(key)}: ${sanitizeText(stack.join(", "))}`}
                </Text>
              ))
          ) : (
            <Text style={styles.splitCardBody}>
              No font stack data detected.
            </Text>
          )}
        </View>
        <Text style={styles.footer}>Page 2 / 3</Text>
      </Page>

      <Page size="A4" style={[styles.page, { fontFamily: props.fontFamily }]}>
        <Text style={styles.sectionHeading}>Component Styles</Text>
        <Text style={styles.sectionSubtleText}>
          Includes border/corner/shadow details from scraped component props.
        </Text>
        <View style={styles.componentGrid}>
          {components.map((component, index) => (
            <View
              key={component.name}
              style={[
                styles.componentCard,
                ...(index === 2 ? [styles.componentCardFull] : []),
              ]}
            >
              <Text style={styles.componentName}>{component.name}</Text>
              <View
                style={[
                  styles.componentDemo,
                  {
                    backgroundColor: component.background,
                    borderColor: component.border,
                  },
                ]}
              >
                <Text style={{ color: component.text, fontSize: 8.5 }}>
                  {component.label}
                </Text>
              </View>
              <Text
                style={styles.componentBody}
              >{`bg ${component.background} / text ${component.text}`}</Text>
              <Text
                style={styles.componentBody}
              >{`border ${component.border} / radius ${component.radius}`}</Text>
              <Text
                style={styles.componentBody}
              >{`corners ${component.corners || "n/a"}`}</Text>
              <Text
                style={styles.componentBody}
              >{`shadow ${component.shadow}`}</Text>
            </View>
          ))}
        </View>

        <Text style={styles.sectionHeading}>Token Candidates</Text>
        <View style={styles.tokenTable}>
          <View style={styles.tokenHead}>
            <Text style={styles.tokenColName}>Token</Text>
            <Text style={styles.tokenColValue}>Value</Text>
            <Text style={styles.tokenColUsage}>Usage</Text>
          </View>
          {tokenRows.map(([name, value, usage], index) => (
            <View
              key={name}
              style={[
                styles.tokenRow,
                ...(index % 2 === 1 ? [styles.tokenRowAlt] : []),
              ]}
            >
              <Text style={styles.tokenColName}>{name}</Text>
              <Text style={styles.tokenColValue}>{value}</Text>
              <Text style={styles.tokenColUsage}>{usage}</Text>
            </View>
          ))}
        </View>

        <View style={styles.splitRow}>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Brand Character</Text>
            <Text
              style={styles.splitCardBody}
            >{`Tone: ${sanitizeText(personality?.tone ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Energy: ${sanitizeText(personality?.energy ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Audience: ${sanitizeText(personality?.targetAudience ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Framework: ${sanitizeText(designSystem?.framework ?? "n/a")}`}</Text>
            <Text
              style={styles.splitCardBody}
            >{`Library: ${sanitizeText(designSystem?.componentLibrary ?? "n/a")}`}</Text>
          </View>
          <View style={styles.splitCard}>
            <Text style={styles.splitCardTitle}>Confidence Scores</Text>
            <View style={styles.confidenceRow}>
              <Text
                style={styles.confidenceLabel}
              >{`Overall ${toPct(confidence?.overall)}`}</Text>
              <View style={styles.confidenceTrack}>
                <View
                  style={[
                    styles.confidenceFill,
                    { width: toPct(confidence?.overall) },
                  ]}
                />
              </View>
            </View>
            <View style={styles.confidenceRow}>
              <Text
                style={styles.confidenceLabel}
              >{`Buttons ${toPct(confidence?.buttons)}`}</Text>
              <View style={styles.confidenceTrack}>
                <View
                  style={[
                    styles.confidenceFill,
                    { width: toPct(confidence?.buttons) },
                  ]}
                />
              </View>
            </View>
            <View style={styles.confidenceRow}>
              <Text
                style={styles.confidenceLabel}
              >{`Colors ${toPct(confidence?.colors)}`}</Text>
              <View style={styles.confidenceTrack}>
                <View
                  style={[
                    styles.confidenceFill,
                    { width: toPct(confidence?.colors) },
                  ]}
                />
              </View>
            </View>
            <View style={styles.confidenceRow}>
              <Text
                style={styles.confidenceLabel}
              >{`Typography ${toPct(confidence?.typography)}`}</Text>
              <View style={styles.confidenceTrack}>
                <View
                  style={[
                    styles.confidenceFill,
                    { width: toPct(confidence?.typography) },
                  ]}
                />
              </View>
            </View>
          </View>
        </View>
        <Text style={styles.footer}>
          Page 3 / 3 - Generated from Firecrawl branding output
        </Text>
      </Page>
    </Document>
  );
}