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 },
  actionRow: {
    flexDirection: "row",
    gap: 12,
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    padding: 13,
    marginBottom: 8,
    backgroundColor: C.white,
  },
  rankBox: {
    width: 24,
    height: 24,
    borderRadius: 4,
    backgroundColor: C.accent,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    marginTop: 1,
  },
  rankText: { fontSize: 11, fontFamily: "Helvetica-Bold", color: C.white },
  content: { flex: 1 },
  title: { fontSize: 11, fontFamily: "Helvetica-Bold", color: C.ink, marginBottom: 3 },
  rationale: { ...S.body, lineHeight: 1.55 },
  badges: { flexDirection: "row", gap: 6, marginTop: 6 },
  badge: { borderRadius: 3, paddingHorizontal: 7, paddingVertical: 2.5 },
  badgeText: { fontSize: 7.5, fontFamily: "Helvetica-Bold", letterSpacing: 0.5 },
});

const IMPACT_STYLE: Record<string, { bg: string; text: string }> = {
  high: { bg: "#fef2f2", text: C.red },
  medium: { bg: C.amberLight, text: C.amber },
  low: { bg: C.surface, text: C.muted },
};
const EFFORT_STYLE: Record<string, { bg: string; text: string }> = {
  hour: { bg: "#f0fdf4", text: C.green },
  day: { bg: "#eff6ff", text: "#2563eb" },
  week: { bg: C.surface, text: C.muted },
};
const EFFORT_LABEL: Record<string, string> = { hour: "< 1 hr", day: "1 day", week: "1 week" };

interface Props {
  seo: SeoSection;
}

export function PriorityActions({ seo }: Props) {
  const actions = seo.priorityActions;
  return (
    <View>
      <Text style={s.heading}>Priority Actions</Text>
      <Text style={s.subtext}>Ordered by impact. Implement in sequence for maximum cumulative effect.</Text>

      {actions.map((a, i) => {
        const imp = IMPACT_STYLE[a.impact] ?? IMPACT_STYLE.medium;
        const eff = EFFORT_STYLE[a.effort] ?? EFFORT_STYLE.day;
        return (
          <View key={i} style={s.actionRow}>
            <View style={s.rankBox}>
              <Text style={s.rankText}>{i + 1}</Text>
            </View>
            <View style={s.content}>
              <Text style={s.title}>{a.title}</Text>
              <Text style={s.rationale}>{a.rationale}</Text>
              <View style={s.badges}>
                <View style={[s.badge, { backgroundColor: imp.bg }]}>
                  <Text style={[s.badgeText, { color: imp.text }]}>{a.impact.toUpperCase()} IMPACT</Text>
                </View>
                <View style={[s.badge, { backgroundColor: eff.bg }]}>
                  <Text style={[s.badgeText, { color: eff.text }]}>{EFFORT_LABEL[a.effort] ?? a.effort}</Text>
                </View>
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
}
