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: 14 },
  table: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    overflow: "hidden",
    marginBottom: 14,
  },
  headerRow: {
    flexDirection: "row",
    backgroundColor: C.surface,
    paddingHorizontal: 13,
    paddingVertical: 8,
    borderBottomWidth: 0.75,
    borderBottomColor: C.border,
  },
  row: {
    flexDirection: "row",
    paddingHorizontal: 13,
    paddingVertical: 9,
    borderBottomWidth: 0.5,
    borderBottomColor: "#f1f5f9",
  },
  colFactor: { flex: 2, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, letterSpacing: 0.8 },
  colDetail: { flex: 4, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, letterSpacing: 0.8 },
  factorText: { flex: 2, fontSize: 10, color: C.ink, fontFamily: "Helvetica-Bold" },
  detailText: { flex: 4, fontSize: 9.5, color: C.body, lineHeight: 1.45 },
  // Industry framework block
  frameworkRow: {
    flexDirection: "row",
    gap: 10,
    padding: 12,
    backgroundColor: C.accentLight,
    borderRadius: 4,
    borderWidth: 0.75,
    borderColor: "#c7d2fe",
  },
  frameworkBlock: { flex: 1 },
  frameworkLabel: { ...S.label, color: C.accent, marginBottom: 3 },
  frameworkValue: { fontSize: 9.5, color: C.ink, lineHeight: 1.45 },
  frameworkPill: {
    fontSize: 8,
    color: C.accent,
    backgroundColor: "#e0e7ff",
    borderRadius: 3,
    paddingHorizontal: 5,
    paddingVertical: 2,
    marginRight: 4,
    marginBottom: 3,
  },
  pillRow: { flexDirection: "row", flexWrap: "wrap", marginTop: 2 },
});

interface Props {
  seo: SeoSection;
}

export function Methodology({ seo }: Props) {
  const factors = seo.methodology?.factors;
  const framework = seo.industryFramework;

  if (!factors?.length && !framework) return null;

  return (
    <View>
      <Text style={s.heading}>Audit Methodology</Text>
      <Text style={s.subtext}>What was analyzed and how industry-specific context was applied.</Text>

      {(factors && factors.length > 0) && (
        <View style={s.table}>
          <View style={s.headerRow}>
            <Text style={s.colFactor}>FACTOR</Text>
            <Text style={s.colDetail}>WHAT WAS EVALUATED</Text>
          </View>
          {/* Always-present structural rows so the table never omits audit scope */}
          <View style={s.row}>
            <Text style={s.factorText}>Site crawl analysis</Text>
            <Text style={s.detailText}>Structural assessment across all indexable URLs: meta tags, H1 coverage, schema markup, internal linking, canonicalization, and mobile/indexability signals.</Text>
          </View>
          <View style={s.row}>
            <Text style={s.factorText}>Deep semantic review</Text>
            <Text style={s.detailText}>Detailed content analysis of representative high-value pages (homepage, services, about, contact, and sitemap-priority pages). Tone, depth, CTA architecture, and AI citation readiness evaluated per page.</Text>
          </View>
          {factors.map((f, i) => (
            <View key={i} style={[s.row, i === factors.length - 1 ? { borderBottomWidth: 0 } : {}]}>
              <Text style={s.factorText}>{f.factor}</Text>
              <Text style={s.detailText}>{f.lookedAt}</Text>
            </View>
          ))}
        </View>
      )}

      {framework && (
        <View style={s.frameworkRow} wrap={false}>
          <View style={s.frameworkBlock}>
            <Text style={s.frameworkLabel}>Industry</Text>
            <Text style={s.frameworkValue}>{framework.industry}</Text>
            {framework.subVertical && (
              <Text style={[s.frameworkValue, { color: C.muted, marginTop: 1 }]}>{framework.subVertical}</Text>
            )}
          </View>
          <View style={[s.frameworkBlock, { flex: 2 }]}>
            <Text style={s.frameworkLabel}>Audience Focus</Text>
            <Text style={s.frameworkValue}>{framework.audienceFraming}</Text>
          </View>
          {framework.relevantFrameworks.length > 0 && (
            <View style={[s.frameworkBlock, { flex: 2 }]}>
              <Text style={s.frameworkLabel}>Frameworks Applied</Text>
              <View style={s.pillRow}>
                {framework.relevantFrameworks.map((fw, i) => (
                  <Text key={i} style={s.frameworkPill}>{fw}</Text>
                ))}
              </View>
            </View>
          )}
        </View>
      )}
    </View>
  );
}
