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: 6 },
  subtext: { ...S.small, marginBottom: 18 },
  // Proof point
  proofBox: {
    borderLeftWidth: 3,
    borderLeftColor: C.accent,
    paddingLeft: 12,
    paddingVertical: 4,
    marginBottom: 18,
    backgroundColor: C.accentLight,
    borderTopRightRadius: 4,
    borderBottomRightRadius: 4,
    padding: 12,
  },
  proofLabel: { ...S.label, color: C.accent, marginBottom: 4 },
  proofText: { fontSize: 11, fontFamily: "Helvetica-Oblique", color: C.ink, lineHeight: 1.6 },
  // Missing items list
  missingLabel: { ...S.label, marginBottom: 10 },
  missingRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    paddingVertical: 7,
    borderBottomWidth: 0.5,
    borderBottomColor: C.border,
  },
  lockBox: {
    width: 18,
    height: 18,
    borderRadius: 3,
    backgroundColor: C.accentLight,
    borderWidth: 0.75,
    borderColor: "#c7d2fe",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
    flexShrink: 0,
    marginTop: 1,
  },
  lockIcon: { fontSize: 9, color: C.accent, fontFamily: "Helvetica-Bold" },
  missingText: { flex: 1, fontSize: 10, color: C.body, lineHeight: 1.55 },
  // Sessions range box
  rangeBox: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 14,
    backgroundColor: C.surface,
    marginTop: 14,
    marginBottom: 14,
  },
  rangeLabel: { ...S.label, marginBottom: 5 },
  rangeText: { fontSize: 10, color: C.body, lineHeight: 1.6 },
  // CTA
  ctaBox: {
    backgroundColor: C.accentDark,
    borderRadius: 6,
    padding: 18,
    marginTop: 16,
    alignItems: "center",
  },
  ctaText: { fontSize: 14, fontFamily: "Helvetica-Bold", color: C.white, textAlign: "center", marginBottom: 6 },
  ctaUrl: { fontSize: 11, color: "#c7d2fe", textAlign: "center", fontFamily: "Helvetica-Bold" },
  ctaSub: { fontSize: 9, color: "#a5b4fc", marginTop: 5, textAlign: "center" },
});

interface Props {
  seo: SeoSection;
  isFirstParty: boolean;
}

export function LockedTeaserPage({ seo, isFirstParty }: Props) {
  if (isFirstParty) return null;
  const teaser = seo.lockedFirstPartyTeaser;
  if (!teaser) return null;

  return (
    <View>
      <Text style={s.heading}>What First-Party Data Would Reveal</Text>
      <Text style={s.subtext}>
        This audit is grounded in publicly available signals. Installing the meSEO Site Tag unlocks real user data,
        AI referral tracking, and conversion intelligence specific to your site.
      </Text>

      {/* Proof point */}
      {teaser.proofPointMetric && (
        <View style={s.proofBox}>
          <Text style={s.proofLabel}>Why It Matters</Text>
          <Text style={s.proofText}>{teaser.proofPointMetric}</Text>
        </View>
      )}

      {/* What you are missing */}
      {teaser.whatYouAreMissing && teaser.whatYouAreMissing.length > 0 && (
        <View>
          <Text style={s.missingLabel}>Insights You Are Currently Missing</Text>
          {teaser.whatYouAreMissing.map((item, i) => (
            <View
              key={i}
              style={[s.missingRow, i === teaser.whatYouAreMissing.length - 1 ? { borderBottomWidth: 0 } : {}]}
            >
              <View style={s.lockBox}>
                <Text style={s.lockIcon}>🔒</Text>
              </View>
              <Text style={s.missingText}>{item}</Text>
            </View>
          ))}
        </View>
      )}

      {/* Estimated sessions range */}
      {teaser.estimatedAiSessionsRange && (
        <View style={s.rangeBox}>
          <Text style={s.rangeLabel}>Estimated AI Sessions in Your Vertical</Text>
          <Text style={s.rangeText}>
            {`Sites in your vertical typically see ${teaser.estimatedAiSessionsRange.min.toLocaleString()}–${teaser.estimatedAiSessionsRange.max.toLocaleString()} AI-referred sessions per month with first-party tracking enabled. Without the Site Tag, this brand's actual AI session volume is not measurable.`}
          </Text>
        </View>
      )}

      {/* CTA */}
      <View style={s.ctaBox}>
        <Text style={s.ctaText}>Install Site Tag to Unlock First-Party Intelligence</Text>
        <Text style={s.ctaUrl}>{teaser.siteTagInstallUrl || "meseo.app/install"}</Text>
        <Text style={s.ctaSub}>Activation takes under 5 minutes via Google Tag Manager or direct script</Text>
      </View>
    </View>
  );
}
