import { View, Text, Image, Page } from "@react-pdf/renderer";
import { C, S } from "../styles";
import { LOGO_LIGHT } from "../logo";
import { StyleSheet } from "@react-pdf/renderer";

const cs = StyleSheet.create({
  page: { ...S.coverPage },
  // Top accent strip
  accentStrip: {
    height: 6,
    backgroundColor: C.accent,
    width: "100%",
  },
  body: {
    flex: 1,
    paddingHorizontal: 54,
    paddingTop: 56,
    paddingBottom: 48,
    flexDirection: "column",
    justifyContent: "space-between",
  },
  // Top area: logo + badge
  topRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start" },
  logo: { width: 100, height: 30, objectFit: "contain" },
  logoFallback: { fontSize: 22, fontFamily: "Helvetica-Bold", color: C.white, letterSpacing: -0.5 },
  badge: {
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.3)",
    borderRadius: 20,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  badgeText: { fontSize: 8, fontFamily: "Helvetica-Bold", color: "rgba(255,255,255,0.7)", letterSpacing: 1.2, textTransform: "uppercase" },
  // Center: brand name + URL
  centerBlock: { flex: 1, justifyContent: "center", paddingVertical: 48 },
  auditType: {
    fontSize: 9,
    fontFamily: "Helvetica-Bold",
    color: C.accent,
    letterSpacing: 2,
    textTransform: "uppercase",
    marginBottom: 14,
  },
  brandName: { fontFamily: "Helvetica-Bold", color: C.white, lineHeight: 1.05, marginBottom: 10 },
  brandNameLong: { fontSize: 36 },
  brandNameShort: { fontSize: 48 },
  website: { fontSize: 13, color: "rgba(255,255,255,0.45)", letterSpacing: 0.2 },
  // Score block
  scoreBlock: {
    backgroundColor: "rgba(255,255,255,0.06)",
    borderWidth: 0.75,
    borderColor: "rgba(255,255,255,0.15)",
    borderRadius: 8,
    padding: 28,
    alignItems: "center",
    alignSelf: "flex-start",
    marginTop: 32,
  },
  scoreLabel: {
    fontSize: 8,
    fontFamily: "Helvetica-Bold",
    color: "rgba(255,255,255,0.4)",
    letterSpacing: 2,
    textTransform: "uppercase",
    marginBottom: 8,
  },
  scoreNum: { fontSize: 72, fontFamily: "Helvetica-Bold", color: C.white, lineHeight: 1 },
  scoreDenom: { fontSize: 20, color: "rgba(255,255,255,0.4)", marginLeft: 4, alignSelf: "flex-end", paddingBottom: 10 },
  scoreRow: { flexDirection: "row", alignItems: "baseline" },
  // Bottom
  bottomBar: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
    borderTopWidth: 0.75,
    borderTopColor: "rgba(255,255,255,0.12)",
    paddingTop: 16,
  },
  tagline: { fontSize: 9.5, color: "rgba(255,255,255,0.5)", lineHeight: 1.6 },
  dateText: { fontSize: 9, color: "rgba(255,255,255,0.35)" },
});

function scoreColor(score: number): string {
  if (score >= 80) return "#4ade80";
  if (score >= 65) return "#fbbf24";
  return "#f87171";
}

interface Props {
  brandName: string;
  website: string;
  auditDate: string;
  score: number;
  isFirstParty: boolean;
  siteTagDaysActive?: number | null;
  aiTrend?: number | null;
}

export function Cover({ brandName, website, auditDate, score, isFirstParty, siteTagDaysActive, aiTrend }: Props) {
  const nameFontSize = brandName.length > 28 ? "brandNameLong" : "brandNameShort";

  return (
    <Page size="LETTER" style={cs.page}>
      <View style={cs.accentStrip} />
      <View style={cs.body}>
        {/* Top: logo + badge */}
        <View style={cs.topRow}>
          {LOGO_LIGHT ? (
            <Image src={LOGO_LIGHT} style={cs.logo} />
          ) : (
            <Text style={cs.logoFallback}>meSEO</Text>
          )}
          <View style={cs.badge}>
            <Text style={cs.badgeText}>{isFirstParty ? "1st-party audit" : "meSEO Scraper Ai Audit"}</Text>
          </View>
        </View>

        {/* Center: brand + score */}
        <View style={cs.centerBlock}>
          <Text style={cs.auditType}>AI Search Visibility Report</Text>
          <Text style={[cs.brandName, nameFontSize === "brandNameShort" ? cs.brandNameShort : cs.brandNameLong]}>
            {brandName}
          </Text>
          <Text style={cs.website}>{website}</Text>

          <View style={cs.scoreBlock}>
            <Text style={cs.scoreLabel}>Audit Score</Text>
            <View style={cs.scoreRow}>
              <Text style={[cs.scoreNum, { color: scoreColor(score) }]}>{score}</Text>
              <Text style={cs.scoreDenom}> / 100</Text>
            </View>
            {isFirstParty && siteTagDaysActive != null && (
              <Text style={[cs.dateText, { marginTop: 8 }]}>
                {siteTagDaysActive}+ days of Site Tag data
              </Text>
            )}
          </View>

          {/* Hero stat: AI referral trend if available */}
          {aiTrend != null && (
            <View style={{
              marginTop: 18,
              backgroundColor: "rgba(255,255,255,0.06)",
              borderWidth: 0.75,
              borderColor: "rgba(255,255,255,0.15)",
              borderRadius: 8,
              padding: 18,
              alignSelf: "flex-start",
            }}>
              <Text style={{ fontSize: 8, fontFamily: "Helvetica-Bold", color: "rgba(255,255,255,0.4)", letterSpacing: 2, textTransform: "uppercase", marginBottom: 6 }}>
                AI Traffic Trend
              </Text>
              <Text style={{ fontSize: 28, fontFamily: "Helvetica-Bold", color: aiTrend >= 0 ? "#4ade80" : "#f87171", lineHeight: 1 }}>
                {aiTrend >= 0 ? "+" : ""}{aiTrend.toFixed(1)}%
              </Text>
              <Text style={{ fontSize: 9, color: "rgba(255,255,255,0.45)", marginTop: 4 }}>
                vs prior 60-day period
              </Text>
            </View>
          )}
        </View>

        {/* Bottom */}
        <View style={cs.bottomBar}>
          <View>
            <Text style={cs.tagline}>Audit completed by meSEO</Text>
            {isFirstParty && (
              <Text style={[cs.tagline, { color: "rgba(255,255,255,0.35)", fontSize: 8.5 }]}>
                Powered by meSEO Site Tag
              </Text>
            )}
          </View>
          <Text style={cs.dateText}>{auditDate}</Text>
        </View>
      </View>
    </Page>
  );
}
