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

const ss = StyleSheet.create({
  pill: {
    alignSelf: "flex-start",
    borderRadius: 12,
    paddingVertical: 6,
    paddingHorizontal: 14,
    marginTop: 10,
    marginBottom: 16,
  },
  pillText: { fontSize: 13, fontFamily: "Helvetica-Bold", color: C.white },
  tableHeader: {
    flexDirection: "row",
    backgroundColor: C.surface,
    borderBottomWidth: 0.75,
    borderBottomColor: C.border,
    paddingVertical: 5,
    paddingHorizontal: 6,
  },
  row: { flexDirection: "row", paddingVertical: 5, paddingHorizontal: 6 },
  badge: { borderRadius: 3, paddingVertical: 2, paddingHorizontal: 5, alignSelf: "flex-start" },
  badgeText: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.white },
  col1: { flex: 2.2 },
  col2: { flex: 1.2 },
  col3: { flex: 1.2 },
  col4: { flex: 1.8 },
  col5: { flex: 1.4 },
  gapText: { fontSize: 8, color: C.muted, paddingHorizontal: 6, paddingBottom: 5 },
});

const STANDING_LABELS: Record<string, string> = {
  "top-25": "top 25%",
  "top-50": "top 50%",
  "bottom-50": "bottom 50%",
  "bottom-25": "bottom 25%",
};
const STANDING_COLORS: Record<string, string> = {
  "top-25": C.green,
  "top-50": C.amber,
  "bottom-50": "#ea580c",
  "bottom-25": C.red,
};

function percentileColor(p: number) {
  if (p >= 75) return C.green;
  if (p >= 50) return C.amber;
  return C.red;
}

function standingLabel(p: number) {
  if (p >= 75) return "top quartile";
  if (p >= 50) return "top half";
  return "bottom half";
}

function fmt(n: number) {
  return Number.isInteger(n) ? String(n) : n.toFixed(1);
}

export function IndustryBenchmarkPage({
  benchmarkComparison,
}: {
  benchmarkComparison: IndustryBenchmarkComparison;
}) {
  const { industryDisplayName, dimensions, overallPercentile } = benchmarkComparison;
  const pillColor = percentileColor(overallPercentile);

  return (
    <View>
      <Text style={S.h2}>Industry Benchmark</Text>
      <Text style={[S.small, { marginTop: 4, marginBottom: 2 }]}>
        How {industryDisplayName} peers compare on key signals
      </Text>

      <View style={[ss.pill, { backgroundColor: pillColor }]}>
        <Text style={ss.pillText}>
          You're in the {standingLabel(overallPercentile)} of your industry
        </Text>
      </View>

      {/* Table header */}
      <View style={ss.tableHeader}>
        {(["Dimension", "Your Value", "Industry Avg", "P25–P75 Range", "Standing"] as const).map(
          (label, i) => (
            <View key={i} style={[ss.col1, ss.col2, ss.col3, ss.col4, ss.col5][i]}>
              <Text style={S.label}>{label}</Text>
            </View>
          )
        )}
      </View>

      {/* Dimension rows */}
      {dimensions.map((dim, idx) => {
        const bg = idx % 2 === 0 ? C.white : C.surface;
        const badgeColor = STANDING_COLORS[dim.brandStanding] ?? C.muted;
        const above = dim.gapToAverage >= 0;
        return (
          <View key={dim.name} wrap={false}>
            <View style={[ss.row, { backgroundColor: bg }]}>
              <View style={ss.col1}>
                <Text style={{ fontSize: 9, color: C.body }}>{dim.name}</Text>
              </View>
              <View style={ss.col2}>
                <Text style={{ fontSize: 9, fontFamily: "Helvetica-Bold", color: C.ink }}>
                  {fmt(dim.brandValue)}
                </Text>
              </View>
              <View style={ss.col3}>
                <Text style={{ fontSize: 9, color: C.body }}>{fmt(dim.industryAverage)}</Text>
              </View>
              <View style={ss.col4}>
                <Text style={{ fontSize: 9, color: C.muted }}>
                  P25: {fmt(dim.industryP25)} — P75: {fmt(dim.industryP75)}
                </Text>
              </View>
              <View style={ss.col5}>
                <View style={[ss.badge, { backgroundColor: badgeColor }]}>
                  <Text style={ss.badgeText}>{STANDING_LABELS[dim.brandStanding]}</Text>
                </View>
              </View>
            </View>
            <View style={[{ backgroundColor: bg }]}>
              <Text style={ss.gapText}>
                {fmt(Math.abs(dim.gapToAverage))} {above ? "above" : "below"} industry average
              </Text>
            </View>
          </View>
        );
      })}

      <Text style={[S.small, { color: C.muted, marginTop: 14 }]}>
        Benchmark estimates are indicative; based on industry sample data.
      </Text>
    </View>
  );
}
