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

const PRIORITY_ORDER = { critical: 0, high: 1, moderate: 2, low: 3 } as const;
const PRIORITY_COLOR: Record<string, string> = {
  critical: C.red,
  high: C.amber,
  moderate: "#f59e0b",
  low: C.muted,
};

const s = StyleSheet.create({
  heading: { ...S.h2, marginBottom: 4 },
  subtext: { ...S.small, marginBottom: 16 },
  statStrip: { flexDirection: "row", gap: 10, marginBottom: 16 },
  statBox: {
    flex: 1,
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 12,
    backgroundColor: C.surface,
  },
  statLabel: { ...S.label, marginBottom: 4 },
  statValue: { fontSize: 22, fontFamily: "Helvetica-Bold", color: C.ink, lineHeight: 1 },
  table: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    overflow: "hidden",
    marginBottom: 14,
  },
  headerRow: {
    flexDirection: "row",
    backgroundColor: "#1e293b",
    paddingHorizontal: 10,
    paddingVertical: 7,
  },
  colSchema: { flex: 2.8, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8 },
  colStatus: { flex: 1, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8 },
  colImpact: { flex: 2.8, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8 },
  colLift: { flex: 0.8, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8, textAlign: "center" },
  colDiff: { flex: 1, fontSize: 7.5, fontFamily: "Helvetica-Bold", color: "#94a3b8", letterSpacing: 0.8, textAlign: "center" },
  row: {
    flexDirection: "row",
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderBottomWidth: 0.5,
    borderBottomColor: "#f1f5f9",
    alignItems: "center",
  },
  rowAlt: { backgroundColor: "#fafafa" },
  schemaCell: { flex: 2.8, flexDirection: "row", alignItems: "center", gap: 5 },
  dot: { width: 6, height: 6, borderRadius: 3 },
  schemaText: { fontSize: 9, color: C.body, fontFamily: "Helvetica-Bold", flex: 1 },
  statusPresent: { flex: 1, fontSize: 8.5, color: C.green, fontFamily: "Helvetica-Bold" },
  statusMissing: { flex: 1, fontSize: 8.5, color: C.red, fontFamily: "Helvetica-Bold" },
  impactText: { flex: 2.8, fontSize: 8, color: C.muted, lineHeight: 1.35 },
  liftBadgeActive: {
    flex: 0.8,
    fontSize: 8,
    color: "#065f46",
    backgroundColor: "#d1fae5",
    textAlign: "center",
    borderRadius: 3,
    paddingVertical: 2,
    fontFamily: "Helvetica-Bold",
  },
  liftBadgeMuted: {
    flex: 0.8,
    fontSize: 8,
    color: C.muted,
    textAlign: "center",
    borderRadius: 3,
    paddingVertical: 2,
  },
  diffEasy: {
    flex: 1,
    fontSize: 7.5,
    textAlign: "center",
    color: C.green,
    fontFamily: "Helvetica-Bold",
  },
  diffModerate: {
    flex: 1,
    fontSize: 7.5,
    textAlign: "center",
    color: C.amber,
    fontFamily: "Helvetica-Bold",
  },
  diffHard: {
    flex: 1,
    fontSize: 7.5,
    textAlign: "center",
    color: C.red,
    fontFamily: "Helvetica-Bold",
  },
  conflictBox: {
    borderWidth: 1,
    borderColor: "#fca5a5",
    backgroundColor: "#fef2f2",
    borderRadius: 4,
    padding: 12,
    marginTop: 4,
  },
  conflictLabel: {
    fontSize: 7.5,
    fontFamily: "Helvetica-Bold",
    color: C.red,
    letterSpacing: 1,
    textTransform: "uppercase",
    marginBottom: 7,
  },
  conflictItem: { fontSize: 8.5, color: "#991b1b", lineHeight: 1.5 },
});

interface Props {
  schemaForecast: SchemaOpportunityForecast;
}

export function SchemaOpportunityForecastPage({ schemaForecast }: Props) {
  const sorted = [...schemaForecast.prioritySchemaTypes].sort(
    (a, b) => PRIORITY_ORDER[a.priority] - PRIORITY_ORDER[b.priority]
  );

  const liftAvailable = schemaForecast.potentialCoveragePercent - schemaForecast.currentCoveragePercent;

  return (
    <View>
      <Text style={s.heading}>Schema Opportunity Forecast</Text>
      <Text style={s.subtext}>
        Industry-specific structured data priorities and estimated AI citation eligibility lift
      </Text>

      {/* Stat strip */}
      <View style={s.statStrip}>
        <View style={s.statBox}>
          <Text style={s.statLabel}>Current Coverage</Text>
          <Text style={s.statValue}>{schemaForecast.currentCoveragePercent}%</Text>
        </View>
        <View style={s.statBox}>
          <Text style={s.statLabel}>Potential Coverage</Text>
          <Text style={s.statValue}>100%</Text>
        </View>
        <View style={s.statBox}>
          <Text style={s.statLabel}>Lift Available</Text>
          <Text style={[s.statValue, { color: liftAvailable >= 30 ? C.green : liftAvailable >= 10 ? C.amber : C.muted }]}>
            {liftAvailable}%
          </Text>
        </View>
      </View>

      {/* Schema rows table */}
      <View style={s.table}>
        <View style={s.headerRow}>
          <Text style={s.colSchema}>SCHEMA TYPE</Text>
          <Text style={s.colStatus}>STATUS</Text>
          <Text style={s.colImpact}>EXPECTED IMPACT</Text>
          <Text style={s.colLift}>LIFT</Text>
          <Text style={s.colDiff}>DIFFICULTY</Text>
        </View>
        {sorted.map((item, i) => {
          const isLast = i === sorted.length - 1;
          return (
            <View
              key={item.schemaType}
              wrap={false}
              style={[s.row, i % 2 === 1 ? s.rowAlt : {}, isLast ? { borderBottomWidth: 0 } : {}]}
            >
              <View style={s.schemaCell}>
                <View style={[s.dot, { backgroundColor: PRIORITY_COLOR[item.priority] }]} />
                <Text style={s.schemaText}>{item.schemaType}</Text>
              </View>
              <Text style={item.present ? s.statusPresent : s.statusMissing}>
                {item.present ? "Present" : "Missing"}
              </Text>
              <Text style={s.impactText}>{item.expectedImpact}</Text>
              <Text style={!item.present ? s.liftBadgeActive : s.liftBadgeMuted}>
                +{item.estimatedLiftPercent}%
              </Text>
              <Text style={
                item.implementationDifficulty === "easy"
                  ? s.diffEasy
                  : item.implementationDifficulty === "moderate"
                  ? s.diffModerate
                  : s.diffHard
              }>
                {item.implementationDifficulty.charAt(0).toUpperCase() + item.implementationDifficulty.slice(1)}
              </Text>
            </View>
          );
        })}
      </View>

      {/* Schema conflicts */}
      {schemaForecast.hasSchemaConflicts && schemaForecast.schemaConflicts.length > 0 && (
        <View style={s.conflictBox}>
          <Text style={s.conflictLabel}>Schema Conflicts Detected</Text>
          {schemaForecast.schemaConflicts.map((conflict, i) => (
            <Text key={i} style={s.conflictItem}>
              {conflict.url}: {conflict.issue}
            </Text>
          ))}
        </View>
      )}
    </View>
  );
}
