import { View, Text, StyleSheet } from "@react-pdf/renderer";
import { C, S } from "../styles";
import type { SeoSection } from "../../types";

const s = StyleSheet.create({
  heading: { ...S.h2, marginBottom: 4 },
  subheading: { ...S.small, marginBottom: 2 },
  metaLine: { fontSize: 9, color: C.muted, marginBottom: 6, lineHeight: 1.5 },
  // Confidence pill
  pill: {
    borderRadius: 3,
    paddingHorizontal: 7,
    paddingVertical: 2,
    alignSelf: "flex-start",
    marginBottom: 16,
  },
  pillText: { fontSize: 7.5, fontFamily: "Helvetica-Bold", letterSpacing: 0.8 },
  // Section wrapper
  section: { marginBottom: 20 },
  sectionHeading: { fontSize: 11, fontFamily: "Helvetica-Bold", color: C.ink, marginBottom: 8, lineHeight: 1.3 },
  // Table
  table: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    overflow: "hidden",
    marginBottom: 10,
  },
  headerRow: {
    flexDirection: "row",
    backgroundColor: C.surface,
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderBottomWidth: 0.75,
    borderBottomColor: C.border,
  },
  tableRow: {
    flexDirection: "row",
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderBottomWidth: 0.5,
    borderBottomColor: "#f1f5f9",
    alignItems: "flex-start",
  },
  rowAlt: { backgroundColor: "#fafafa" },
  colHeader: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, letterSpacing: 0.8 },
  cellText: { fontSize: 9, color: C.body, lineHeight: 1.4 },
  cellMuted: { fontSize: 8, color: C.muted, lineHeight: 1.4 },
  cellAccent: { fontSize: 8, color: C.accent, lineHeight: 1.3 },
  // Severity colors
  sevCritical: { fontSize: 9, color: C.red, fontFamily: "Helvetica-Bold" },
  sevHigh: { fontSize: 9, color: C.amber, fontFamily: "Helvetica-Bold" },
  sevMedium: { fontSize: 9, color: C.muted },
  sevLow: { fontSize: 9, color: C.muted },
  // Funnel
  funnelRow: { flexDirection: "row", gap: 6, alignItems: "flex-end", marginBottom: 10 },
  funnelBar: { width: "100%", borderRadius: 2 },
  funnelStageName: { fontSize: 7.5, color: C.muted, marginTop: 3, textAlign: "center" },
  funnelPct: { fontSize: 9, fontFamily: "Helvetica-Bold", color: C.ink, textAlign: "center" },
  funnelSessions: { fontSize: 7.5, color: C.muted, textAlign: "center" },
  funnelDropoff: { fontSize: 7.5, color: C.red, textAlign: "center", marginBottom: 4 },
  funnelDropoffRow: { flexDirection: "row", gap: 6, marginBottom: 6 },
  biggestDropoff: {
    backgroundColor: C.redLight,
    borderWidth: 0.75,
    borderColor: C.red,
    borderRadius: 4,
    padding: 10,
    marginBottom: 8,
  },
  biggestDropoffText: { fontSize: 9, color: C.red, fontFamily: "Helvetica-Bold", lineHeight: 1.4 },
  // Stats row
  statsRow: { flexDirection: "row", gap: 10, marginBottom: 12 },
  statBox: {
    flex: 1,
    backgroundColor: C.surface,
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 10,
    alignItems: "center",
  },
  statNum: { fontSize: 16, fontFamily: "Helvetica-Bold", color: C.ink, lineHeight: 1 },
  statLabel: { fontSize: 7, color: C.muted, textAlign: "center", marginTop: 3, letterSpacing: 0.5, textTransform: "uppercase" },
  // Channel tiles
  tilesGrid: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginBottom: 10 },
  tile: {
    flex: 1,
    minWidth: "45%",
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 11,
    backgroundColor: C.surface,
  },
  tileLabel: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, letterSpacing: 0.8, marginBottom: 5, textTransform: "uppercase" },
  tileMain: { fontSize: 14, fontFamily: "Helvetica-Bold", color: C.ink, lineHeight: 1 },
  tileSub: { fontSize: 8, color: C.muted, marginTop: 3, lineHeight: 1.4 },
  tileConv: { fontSize: 8, color: C.green, fontFamily: "Helvetica-Bold", marginTop: 2 },
  // Two-col layout
  twoCol: { flexDirection: "row", gap: 12, marginBottom: 10 },
  twoColLeft: { flex: 1 },
  twoColRight: { flex: 1 },
  colTitle: { fontSize: 8, fontFamily: "Helvetica-Bold", color: C.ink, marginBottom: 5, lineHeight: 1.3 },
  listItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 3,
    borderBottomWidth: 0.5,
    borderBottomColor: "#f1f5f9",
  },
  listUrl: { flex: 1, fontSize: 8, color: C.accent, lineHeight: 1.3 },
  listVal: { fontSize: 8, color: C.muted, marginLeft: 6 },
  // Progress bar
  barTrack: { height: 4, backgroundColor: "#e2e8f0", borderRadius: 2, marginTop: 4 },
  barFill: { height: 4, borderRadius: 2, backgroundColor: C.accent },
  // Median stat
  medianBox: {
    backgroundColor: C.accentLight,
    borderRadius: 4,
    padding: 12,
    marginBottom: 10,
    alignItems: "center",
  },
  medianNum: { fontSize: 22, fontFamily: "Helvetica-Bold", color: C.accentDark, lineHeight: 1 },
  medianLabel: { fontSize: 8, color: C.accent, marginTop: 4, lineHeight: 1.4 },
  // Recommendation text
  recommendText: { fontSize: 9, color: C.body, lineHeight: 1.55, marginTop: 6 },
  // Device tiles
  deviceRow: { flexDirection: "row", gap: 8, marginBottom: 10 },
  deviceTile: {
    flex: 1,
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 10,
    alignItems: "center",
    backgroundColor: C.surface,
  },
  deviceLabel: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, letterSpacing: 0.8, marginBottom: 4, textTransform: "uppercase" },
  deviceSessions: { fontSize: 13, fontFamily: "Helvetica-Bold", color: C.ink, lineHeight: 1 },
  deviceShare: { fontSize: 8, color: C.muted, marginTop: 2 },
  deviceConv: { fontSize: 8, color: C.green, fontFamily: "Helvetica-Bold", marginTop: 2 },
  deltaLine: { fontSize: 9, color: C.body, lineHeight: 1.5, marginBottom: 10 },
  deltaVal: { fontFamily: "Helvetica-Bold" },
});

function urlPath(url: string): string {
  try {
    const p = new URL(url).pathname.replace(/\/$/, "") || "/";
    return p.length > 50 ? p.slice(0, 48) + "…" : p;
  } catch {
    return url.length > 50 ? url.slice(0, 48) + "…" : url;
  }
}

function fmtPct(n: number): string {
  return `${n.toFixed(0)}%`;
}

function fmtNum(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return String(n);
}

interface Props {
  seo: SeoSection;
}

export function SignalCenterPage({ seo }: Props) {
  const sc = seo.signalCenter;
  if (!sc) return null;

  const confidenceColors: Record<string, { bg: string; text: string; border: string }> = {
    high: { bg: C.greenLight, text: C.green, border: C.green },
    moderate: { bg: C.amberLight, text: C.amber, border: C.amber },
    low: { bg: C.redLight, text: C.red, border: C.red },
  };
  const conf = confidenceColors[sc.dataConfidence] ?? confidenceColors.moderate;

  const stages = [
    { name: "Landing", ...sc.conversionFunnel.landing },
    { name: "Engagement", ...sc.conversionFunnel.engagement },
    { name: "Intent", ...sc.conversionFunnel.intent },
    { name: "Conversion", ...sc.conversionFunnel.conversion },
  ];

  const topFriction = sc.topFrictionEvents.slice(0, 8);
  const topDropoffPages = sc.conversionFunnel.topDropoffPages.slice(0, 5);
  const topAbandonedFields = sc.formAbandonment?.topAbandonedFields.slice(0, 5) ?? [];
  const topMetros = sc.deviceGeo?.topMetros.slice(0, 5) ?? [];

  return (
    <View>
      {/* Header */}
      <Text style={s.heading}>Signal Center</Text>
      <Text style={s.subheading}>Behavioral Telemetry</Text>
      <Text style={s.metaLine}>
        {`Real-visitor signals from the trailing ${sc.windowDays} days · ${sc.totalSessions.toLocaleString()} sessions`}
      </Text>
      <View
        style={[
          s.pill,
          { backgroundColor: conf.bg, borderWidth: 0.75, borderColor: conf.border },
        ]}
      >
        <Text style={[s.pillText, { color: conf.text }]}>
          {`DATA CONFIDENCE: ${sc.dataConfidence.toUpperCase()}`}
        </Text>
      </View>

      {/* ── 1. Friction Events ── */}
      <View style={s.section} break>
        <Text style={s.sectionHeading}>Top Friction Events</Text>
        {topFriction.length > 0 ? (
          <View style={s.table}>
            <View style={s.headerRow}>
              <Text style={[s.colHeader, { flex: 2.2 }]}>EVENT TYPE</Text>
              <Text style={[s.colHeader, { flex: 0.8, textAlign: "right" }]}>COUNT</Text>
              <Text style={[s.colHeader, { flex: 1, textAlign: "center" }]}>SEVERITY</Text>
              <Text style={[s.colHeader, { flex: 3 }]}>AFFECTED PAGES</Text>
            </View>
            {topFriction.map((ev, i) => {
              const isLast = i === topFriction.length - 1;
              const sevStyle =
                ev.severity === "critical"
                  ? s.sevCritical
                  : ev.severity === "high"
                  ? s.sevHigh
                  : s.sevLow;
              const affectedPages = ev.topAffectedPages.slice(0, 2);
              return (
                <View
                  key={i}
                  style={[
                    s.tableRow,
                    i % 2 === 1 ? s.rowAlt : {},
                    isLast ? { borderBottomWidth: 0 } : {},
                  ]}
                >
                  <Text style={[s.cellText, { flex: 2.2 }]}>{ev.displayName}</Text>
                  <Text style={[s.cellText, { flex: 0.8, textAlign: "right" }]}>
                    {ev.count.toLocaleString()}
                  </Text>
                  <Text style={[sevStyle, { flex: 1, textAlign: "center" }]}>
                    {ev.severity.charAt(0).toUpperCase() + ev.severity.slice(1)}
                  </Text>
                  <View style={{ flex: 3 }}>
                    {affectedPages.map((page, j) => (
                      <Text key={j} style={s.cellAccent}>
                        {urlPath(page.url)}
                        <Text style={s.cellMuted}>{` (${page.count})`}</Text>
                      </Text>
                    ))}
                  </View>
                </View>
              );
            })}
          </View>
        ) : (
          <Text style={s.cellMuted}>No friction events recorded.</Text>
        )}
      </View>

      {/* ── 2. Conversion Funnel ── */}
      <View style={s.section} break>
        <Text style={s.sectionHeading}>Conversion Funnel</Text>
        {/* Funnel bars */}
        <View style={s.funnelRow}>
          {stages.map((stage, i) => {
            const barH = Math.max(20, (stage.percent / 100) * 80);
            const opacity = 0.35 + (stage.percent / 100) * 0.65;
            return (
              <View key={i} style={{ flex: 1, alignItems: "center" }}>
                <View
                  style={[
                    s.funnelBar,
                    { height: barH, backgroundColor: C.accent, opacity },
                  ]}
                />
                <Text style={s.funnelStageName}>{stage.name}</Text>
                <Text style={s.funnelPct}>{fmtPct(stage.percent)}</Text>
                <Text style={s.funnelSessions}>{fmtNum(stage.sessions)} sess.</Text>
              </View>
            );
          })}
        </View>
        {/* Drop-off labels between stages */}
        <View style={s.funnelDropoffRow}>
          <View style={{ flex: 1 }} />
          {stages.slice(1).map((stage, i) => (
            <View key={i} style={{ flex: 1, alignItems: "center" }}>
              {stage.dropoffFromPrior > 0 && (
                <Text style={s.funnelDropoff}>
                  {`−${fmtPct(stage.dropoffFromPrior)} drop`}
                </Text>
              )}
            </View>
          ))}
        </View>
        {/* Biggest drop-off */}
        <View style={s.biggestDropoff}>
          <Text style={s.biggestDropoffText}>
            {`Biggest drop-off: ${sc.conversionFunnel.biggestDropoff.from} → ${sc.conversionFunnel.biggestDropoff.to} (${fmtPct(sc.conversionFunnel.biggestDropoff.percent)} lost)`}
          </Text>
        </View>
        {/* Top drop-off pages */}
        {topDropoffPages.length > 0 && (
          <View>
            <Text style={[s.colTitle, { marginBottom: 4 }]}>Top Drop-off Pages</Text>
            {topDropoffPages.map((p, i) => (
              <View key={i} style={s.listItem}>
                <Text style={s.listUrl}>{urlPath(p.url)}</Text>
                <Text style={s.listVal}>{`${p.stage} · ${p.sessionsLost.toLocaleString()} lost`}</Text>
              </View>
            ))}
          </View>
        )}
      </View>

      {/* ── 3. Form Abandonment (conditional) ── */}
      {sc.formAbandonment && (
        <View style={s.section} break>
          <Text style={s.sectionHeading}>Form Abandonment</Text>
          {/* Stats row */}
          <View style={s.statsRow}>
            <View style={s.statBox}>
              <Text style={s.statNum}>{sc.formAbandonment.totalCompletes.toLocaleString()}</Text>
              <Text style={s.statLabel}>Completions</Text>
            </View>
            <View style={s.statBox}>
              <Text style={s.statNum}>{sc.formAbandonment.totalStarts.toLocaleString()}</Text>
              <Text style={s.statLabel}>Starts</Text>
            </View>
            <View style={s.statBox}>
              <Text style={[s.statNum, { color: sc.formAbandonment.abandonRate > 60 ? C.red : sc.formAbandonment.abandonRate > 40 ? C.amber : C.green }]}>
                {fmtPct(sc.formAbandonment.abandonRate)}
              </Text>
              <Text style={s.statLabel}>Abandon Rate</Text>
            </View>
          </View>
          {/* Fields table */}
          {topAbandonedFields.length > 0 && (
            <View style={s.table}>
              <View style={s.headerRow}>
                <Text style={[s.colHeader, { flex: 2 }]}>FIELD</Text>
                <Text style={[s.colHeader, { flex: 1.2, textAlign: "right" }]}>ABANDON RATE</Text>
                <Text style={[s.colHeader, { flex: 1.2, textAlign: "right" }]}>TIME SPENT</Text>
                <Text style={[s.colHeader, { flex: 2.5 }]}>RECOMMENDATION</Text>
              </View>
              {topAbandonedFields.map((field, i) => {
                const isLast = i === topAbandonedFields.length - 1;
                return (
                  <View
                    key={i}
                    style={[
                      s.tableRow,
                      i % 2 === 1 ? s.rowAlt : {},
                      isLast ? { borderBottomWidth: 0 } : {},
                    ]}
                  >
                    <Text style={[s.cellText, { flex: 2 }]}>{field.fieldName}</Text>
                    <Text
                      style={[
                        s.cellText,
                        {
                          flex: 1.2,
                          textAlign: "right",
                          color:
                            field.abandonRate > 60
                              ? C.red
                              : field.abandonRate > 40
                              ? C.amber
                              : C.body,
                          fontFamily:
                            field.abandonRate > 40 ? "Helvetica-Bold" : "Helvetica",
                        },
                      ]}
                    >
                      {fmtPct(field.abandonRate)}
                    </Text>
                    <Text style={[s.cellMuted, { flex: 1.2, textAlign: "right" }]}>
                      {`${field.medianTimeSpent}s`}
                    </Text>
                    <Text style={[s.cellMuted, { flex: 2.5, lineHeight: 1.35 }]}>
                      {field.recommendation}
                    </Text>
                  </View>
                );
              })}
            </View>
          )}
        </View>
      )}

      {/* ── 4. Channel Mix ── */}
      <View style={s.section} break>
        <Text style={s.sectionHeading}>Conversion Channels</Text>
        <View style={s.tilesGrid}>
          {/* Phone */}
          <View style={s.tile}>
            <Text style={s.tileLabel}>Phone</Text>
            <Text style={s.tileMain}>{sc.channelMix.phone.count.toLocaleString()}</Text>
            <Text style={s.tileSub}>{fmtPct(sc.channelMix.phone.share)} of conversions</Text>
            {sc.channelMix.phone.conversionRate != null && (
              <Text style={s.tileConv}>{`CVR: ${sc.channelMix.phone.conversionRate.toFixed(1)}%`}</Text>
            )}
          </View>
          {/* Form */}
          <View style={s.tile}>
            <Text style={s.tileLabel}>Form</Text>
            <Text style={s.tileMain}>{sc.channelMix.form.count.toLocaleString()}</Text>
            <Text style={s.tileSub}>{fmtPct(sc.channelMix.form.share)} of conversions</Text>
            {sc.channelMix.form.conversionRate != null && (
              <Text style={s.tileConv}>{`CVR: ${sc.channelMix.form.conversionRate.toFixed(1)}%`}</Text>
            )}
          </View>
          {/* Paperwork */}
          <View style={s.tile}>
            <Text style={s.tileLabel}>Paperwork</Text>
            <Text style={s.tileMain}>{sc.channelMix.paperwork.count.toLocaleString()}</Text>
            <Text style={s.tileSub}>{fmtPct(sc.channelMix.paperwork.share)} of conversions</Text>
            {sc.channelMix.paperwork.conversionRate != null && (
              <Text style={s.tileConv}>{`CVR: ${sc.channelMix.paperwork.conversionRate.toFixed(1)}%`}</Text>
            )}
          </View>
          {/* Chat */}
          <View style={s.tile}>
            <Text style={s.tileLabel}>Chat</Text>
            <Text style={s.tileMain}>{sc.channelMix.chat.count.toLocaleString()}</Text>
            <Text style={s.tileSub}>{fmtPct(sc.channelMix.chat.share)} of conversions</Text>
            {sc.channelMix.chat.conversionRate != null && (
              <Text style={s.tileConv}>{`CVR: ${sc.channelMix.chat.conversionRate.toFixed(1)}%`}</Text>
            )}
          </View>
        </View>
      </View>

      {/* ── 5. Scroll-to-Conversion ── */}
      <View style={s.section} break>
        <Text style={s.sectionHeading}>Scroll-to-Conversion Patterns</Text>
        {/* Median stat */}
        <View style={s.medianBox}>
          <Text style={s.medianNum}>{fmtPct(sc.scrollToConversion.medianScrollDepthBeforeConversion)}</Text>
          <Text style={s.medianLabel}>median scroll depth at conversion</Text>
        </View>
        {/* Progress bar for median */}
        <View style={s.barTrack}>
          <View
            style={[
              s.barFill,
              { width: `${Math.min(sc.scrollToConversion.medianScrollDepthBeforeConversion, 100)}%` },
            ]}
          />
        </View>
        {/* Two-column layout */}
        <View style={[s.twoCol, { marginTop: 10 }]}>
          {/* High scroll, low conversion */}
          <View style={s.twoColLeft}>
            <Text style={s.colTitle}>High Scroll, Low Conversion</Text>
            {sc.scrollToConversion.highScrollLowConvPages.slice(0, 5).map((page, i) => (
              <View key={i} style={s.listItem}>
                <Text style={s.listUrl}>{urlPath(page.url)}</Text>
                <Text style={s.listVal}>{`${page.avgScroll.toFixed(0)}% scroll`}</Text>
              </View>
            ))}
            {sc.scrollToConversion.highScrollLowConvPages.length === 0 && (
              <Text style={s.cellMuted}>None identified</Text>
            )}
          </View>
          {/* Low scroll, high conversion */}
          <View style={s.twoColRight}>
            <Text style={s.colTitle}>Low Scroll, High Conversion</Text>
            {sc.scrollToConversion.lowScrollHighConvPages.slice(0, 5).map((page, i) => (
              <View key={i} style={s.listItem}>
                <Text style={s.listUrl}>{urlPath(page.url)}</Text>
                <Text style={s.listVal}>{`${page.avgScroll.toFixed(0)}% scroll`}</Text>
              </View>
            ))}
            {sc.scrollToConversion.lowScrollHighConvPages.length === 0 && (
              <Text style={s.cellMuted}>None identified</Text>
            )}
          </View>
        </View>
        {sc.scrollToConversion.recommendation && (
          <Text style={s.recommendText}>{sc.scrollToConversion.recommendation}</Text>
        )}
      </View>

      {/* ── 6. Device & Geo (conditional) ── */}
      {sc.deviceGeo && (
        <View style={s.section} break>
          <Text style={s.sectionHeading}>Device &amp; Geographic Breakdown</Text>
          {/* Device tiles */}
          <View style={s.deviceRow}>
            <View style={s.deviceTile}>
              <Text style={s.deviceLabel}>Mobile</Text>
              <Text style={s.deviceSessions}>{fmtNum(sc.deviceGeo.deviceMix.mobile.sessions)}</Text>
              <Text style={s.deviceShare}>{fmtPct(sc.deviceGeo.deviceMix.mobile.share)} share</Text>
              <Text style={s.deviceConv}>{`CVR: ${sc.deviceGeo.deviceMix.mobile.conversionRate.toFixed(1)}%`}</Text>
            </View>
            <View style={s.deviceTile}>
              <Text style={s.deviceLabel}>Desktop</Text>
              <Text style={s.deviceSessions}>{fmtNum(sc.deviceGeo.deviceMix.desktop.sessions)}</Text>
              <Text style={s.deviceShare}>{fmtPct(sc.deviceGeo.deviceMix.desktop.share)} share</Text>
              <Text style={s.deviceConv}>{`CVR: ${sc.deviceGeo.deviceMix.desktop.conversionRate.toFixed(1)}%`}</Text>
            </View>
            <View style={s.deviceTile}>
              <Text style={s.deviceLabel}>Tablet</Text>
              <Text style={s.deviceSessions}>{fmtNum(sc.deviceGeo.deviceMix.tablet.sessions)}</Text>
              <Text style={s.deviceShare}>{fmtPct(sc.deviceGeo.deviceMix.tablet.share)} share</Text>
              <Text style={s.deviceConv}>{`CVR: ${sc.deviceGeo.deviceMix.tablet.conversionRate.toFixed(1)}%`}</Text>
            </View>
          </View>
          {/* Mobile vs desktop delta */}
          {sc.deviceGeo.mobileDesktopDelta !== 0 && (
            <Text style={s.deltaLine}>
              {"Mobile-vs-desktop conversion gap: "}
              <Text style={[s.deltaVal, { color: sc.deviceGeo.mobileDesktopDelta < 0 ? C.red : C.green }]}>
                {sc.deviceGeo.mobileDesktopDelta > 0 ? "+" : ""}
                {sc.deviceGeo.mobileDesktopDelta.toFixed(1)} pp
              </Text>
              {" (mobile relative to desktop)"}
            </Text>
          )}
          {/* Metro table */}
          {topMetros.length > 0 && (
            <View style={s.table}>
              <View style={s.headerRow}>
                <Text style={[s.colHeader, { flex: 2.5 }]}>CITY</Text>
                <Text style={[s.colHeader, { flex: 1, textAlign: "right" }]}>SESSIONS</Text>
                <Text style={[s.colHeader, { flex: 1, textAlign: "right" }]}>CONV. RATE</Text>
              </View>
              {topMetros.map((metro, i) => {
                const isLast = i === topMetros.length - 1;
                return (
                  <View
                    key={i}
                    style={[
                      s.tableRow,
                      i % 2 === 1 ? s.rowAlt : {},
                      isLast ? { borderBottomWidth: 0 } : {},
                    ]}
                  >
                    <Text style={[s.cellText, { flex: 2.5 }]}>
                      {metro.city}
                      {metro.region ? `, ${metro.region}` : ""}
                    </Text>
                    <Text style={[s.cellText, { flex: 1, textAlign: "right" }]}>
                      {metro.sessions.toLocaleString()}
                    </Text>
                    <Text
                      style={[
                        s.cellText,
                        {
                          flex: 1,
                          textAlign: "right",
                          color:
                            metro.conversionRate > 5
                              ? C.green
                              : metro.conversionRate < 1
                              ? C.red
                              : C.body,
                          fontFamily:
                            metro.conversionRate > 5 || metro.conversionRate < 1
                              ? "Helvetica-Bold"
                              : "Helvetica",
                        },
                      ]}
                    >
                      {`${metro.conversionRate.toFixed(1)}%`}
                    </Text>
                  </View>
                );
              })}
            </View>
          )}
        </View>
      )}
    </View>
  );
}
