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

const s = StyleSheet.create({
  heading: { ...S.h2, marginBottom: 6 },
  subtext: { ...S.small, marginBottom: 18 },
  card: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 6,
    padding: 22,
    backgroundColor: C.surface,
  },
  scoreRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 18,
  },
  scoreBlock: { alignItems: "center", flex: 1 },
  scoreNum: { fontSize: 48, fontFamily: "Helvetica-Bold", lineHeight: 1 },
  scoreLabel: { ...S.label, marginTop: 5 },
  arrowBlock: { alignItems: "center", paddingHorizontal: 12 },
  arrow: { fontSize: 22, color: C.muted },
  lift: { fontSize: 9, fontFamily: "Helvetica-Bold", color: "#16a34a", marginTop: 3 },
  footnote: { ...S.caption, lineHeight: 1.55, marginTop: 4 },
});

function numColor(n: number): string {
  return n >= 80 ? "#16a34a" : n >= 60 ? "#d97706" : "#dc2626";
}

interface Props {
  seo: SeoSection;
  auditType: "1st" | "3rd";
}

export function ScoreProjectionPage({ seo, auditType }: Props) {
  const actions = seo.priorityActions ?? [];
  const highImpact = actions.filter((a) => a.impact === "high").length;
  const medium = actions.filter((a) => a.impact === "medium").length;
  const maxPossible = getMaxPossibleScore(auditType);
  const projected = Math.min(maxPossible, seo.healthScore + highImpact * 9 + medium * 4);
  const lift = projected - seo.healthScore;

  return (
    <View>
      <Text style={s.heading}>Score Projection</Text>
      <Text style={s.subtext}>Indicative uplift estimate based on implementing priority actions.</Text>

      <View style={[s.card, { marginBottom: 10 }]} wrap={false}>
        <View style={s.scoreRow}>
          <View style={s.scoreBlock}>
            <Text style={[s.scoreNum, { color: numColor(seo.healthScore) }]}>{seo.healthScore}</Text>
            <Text style={s.scoreLabel}>Current Score</Text>
          </View>
          <View style={s.arrowBlock}>
            <Text style={s.arrow}>→</Text>
            {lift > 0 && <Text style={s.lift}>+{lift} pts</Text>}
          </View>
          <View style={s.scoreBlock}>
            <Text style={[s.scoreNum, { color: lift > 0 ? "#16a34a" : numColor(projected) }]}>{projected}</Text>
            <Text style={s.scoreLabel}>Projected Score</Text>
          </View>
        </View>

        <Text style={s.footnote}>
          {`Indicative estimate based on resolving ${highImpact} high-impact and ${medium} medium-impact finding${highImpact + medium !== 1 ? "s" : ""}. Actual improvement varies by site.`}
        </Text>
        {auditType === "3rd" && (
          <Text style={[s.footnote, { marginTop: 4 }]}>
            {`Maximum possible score is ${maxPossible} for third-party audits. Install the Site Tag to unlock the full 90-point ceiling.`}
          </Text>
        )}
      </View>
    </View>
  );
}
