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

const PHASE_COLORS: Array<{ bg: string; text: string }> = [
  { bg: "#d1fae5", text: "#065f46" },
  { bg: "#dbeafe", text: "#1e40af" },
  { bg: "#ede9fe", text: "#4c1d95" },
  { bg: "#ffedd5", text: "#9a3412" },
];

const s = StyleSheet.create({
  heading: { ...S.h2, marginBottom: 4 },
  subtext: { ...S.small, marginBottom: 12 },
  progressBar: {
    flexDirection: "row",
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    marginBottom: 12,
    overflow: "hidden",
  },
  progressNode: { flex: 1, alignItems: "center", padding: 6 },
  progressLabel: { fontSize: 7.5, fontFamily: "Helvetica-Bold", color: C.muted, marginBottom: 2 },
  progressScore: { fontSize: 11, fontFamily: "Helvetica-Bold" },
  phaseBlock: {
    borderWidth: 0.75,
    borderColor: C.border,
    borderRadius: 4,
    marginBottom: 8,
    overflow: "hidden",
  },
  phaseHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 7,
  },
  phaseName: { fontSize: 10, fontFamily: "Helvetica-Bold" },
  phaseTheme: { fontSize: 8, marginTop: 1 },
  phaseTimeframe: { fontSize: 7.5, marginTop: 2 },
  projectedScore: { fontSize: 16, fontFamily: "Helvetica-Bold", textAlign: "right" },
  projectedLabel: { fontSize: 7, textAlign: "right", marginTop: 1 },
  actionsArea: { padding: 7, paddingTop: 5 },
  actionRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 3,
  },
  typePill: {
    fontSize: 6.5,
    fontFamily: "Helvetica-Bold",
    paddingHorizontal: 4,
    paddingVertical: 1.5,
    borderRadius: 2,
    backgroundColor: C.accentLight,
    color: C.accentDark,
    marginRight: 5,
  },
  actionTitle: { fontSize: 8.5, color: C.body, flex: 1 },
  actionMeta: { fontSize: 7.5, color: C.muted, marginLeft: 4 },
  metricsRow: { flexDirection: "row", flexWrap: "wrap", marginTop: 4 },
  metricDot: { fontSize: 7.5, color: C.muted, marginRight: 8, marginBottom: 2 },
  footer: { ...S.small, textAlign: "center", marginTop: 8, color: C.muted },
});

interface Props {
  strategicRoadmap: StrategicRoadmap;
}

export function StrategicRoadmapPage({ strategicRoadmap }: Props) {
  const { phases, totalEffortHours, finalProjectedScore } = strategicRoadmap;
  const startScore = finalProjectedScore - strategicRoadmap.totalLiftPoints;

  const progressNodes = [
    { label: "Start", score: startScore },
    { label: phases[0]?.timeframe ?? "W1", score: phases[0]?.projectedScoreAtEndOfPhase ?? startScore },
    { label: phases[1]?.timeframe ?? "W2-4", score: phases[1]?.projectedScoreAtEndOfPhase ?? startScore },
    { label: phases[2]?.timeframe ?? "M2", score: phases[2]?.projectedScoreAtEndOfPhase ?? startScore },
    { label: phases[3]?.timeframe ?? "M3", score: phases[3]?.projectedScoreAtEndOfPhase ?? finalProjectedScore },
  ];

  return (
    <View>
      <Text style={s.heading}>90-Day Strategic Roadmap</Text>
      <Text style={s.subtext}>Phased implementation plan with projected score progression</Text>

      <View style={s.progressBar}>
        {progressNodes.map((node, i) => (
          <View
            key={i}
            style={[
              s.progressNode,
              i < progressNodes.length - 1 ? { borderRightWidth: 0.5, borderRightColor: C.border } : {},
            ]}
          >
            <Text style={s.progressLabel}>{node.label}</Text>
            <Text style={[s.progressScore, { color: i === progressNodes.length - 1 ? C.green : C.ink }]}>
              {node.score}
            </Text>
          </View>
        ))}
      </View>

      {phases.map((phase, i) => {
        const colors = PHASE_COLORS[i] ?? PHASE_COLORS[0];
        return (
          <View key={i} style={s.phaseBlock} wrap={false}>
            <View style={[s.phaseHeader, { backgroundColor: colors.bg }]}>
              <View>
                <Text style={[s.phaseName, { color: colors.text }]}>{phase.phaseName}</Text>
                <Text style={[s.phaseTheme, { color: colors.text }]}>{phase.theme}</Text>
                <Text style={[s.phaseTimeframe, { color: colors.text, opacity: 0.75 }]}>{phase.timeframe}</Text>
              </View>
              <View>
                <Text style={[s.projectedScore, { color: colors.text }]}>{phase.projectedScoreAtEndOfPhase}</Text>
                <Text style={[s.projectedLabel, { color: colors.text, opacity: 0.75 }]}>projected</Text>
              </View>
            </View>

            <View style={s.actionsArea}>
              {phase.actions.map((action, j) => (
                <View key={j} style={s.actionRow}>
                  <Text style={s.typePill}>{action.type}</Text>
                  <Text style={s.actionTitle}>{action.title}</Text>
                  <Text style={s.actionMeta}>{action.effortHours}h</Text>
                  <Text style={[s.actionMeta, { color: C.green }]}>+{action.expectedLiftPoints}pt</Text>
                </View>
              ))}

              {phase.successMetrics.length > 0 && (
                <View style={s.metricsRow}>
                  {phase.successMetrics.map((m, k) => (
                    <Text key={k} style={s.metricDot}>• {m}</Text>
                  ))}
                </View>
              )}
            </View>

            {i < phases.length - 1 && <View style={S.divider} />}
          </View>
        );
      })}

      <Text style={s.footer}>
        Total Implementation Effort: {totalEffortHours} hours over 90 days
      </Text>
    </View>
  );
}
