import { useState } from "react";
import { useParams } from "react-router-dom";
import { motion } from "framer-motion";
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Legend, Tooltip } from "recharts";
import { PageTransition, staggerContainer, fadeUpItem } from "@/components/PageTransition";
import { portraitDimensions } from "@/data/portraitData";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { GradeHeroBlock } from "@/components/page-blocks";

/* ── colour helpers ── */
const dimColors: Record<string, string> = {
  valencia: "bg-valencia",
  sunflower: "bg-sunflower",
  "deep-sea": "bg-deep-sea",
  moss: "bg-moss",
  mist: "bg-mist",
  salmon: "bg-salmon",
};
const dimTextColors: Record<string, string> = {
  valencia: "text-valencia",
  sunflower: "text-sunflower",
  "deep-sea": "text-deep-sea",
  moss: "text-moss",
  mist: "text-mist",
  salmon: "text-salmon",
};

/* ── SWOT sample data ── */
const swotData = {
  strengths: [
    { text: "Shows natural curiosity and asks deep questions", dimension: "Bold Visionary Leader" },
    { text: "Collaborates joyfully with diverse peers", dimension: "Respectful Relationship Builder" },
    { text: "Expresses ideas clearly through drawing and speaking", dimension: "Inspiring Communicator" },
  ],
  weaknesses: [
    { text: "Gives up quickly when a first attempt fails", dimension: "Resilient Problem Solver" },
    { text: "Struggles to manage frustration during transitions", dimension: "Balanced Person" },
    { text: "Hesitates to share opinions in large-group settings", dimension: "Bold Visionary Leader" },
  ],
  opportunities: [
    { text: "PBEL Water project offers hands-on problem-solving", dimension: "Resilient Problem Solver" },
    { text: "Steering Committee can develop leadership voice", dimension: "Bold Visionary Leader" },
    { text: "Service learning builds community awareness", dimension: "Caring Citizen" },
  ],
  threats: [
    { text: "Perfectionism may discourage risk-taking", dimension: "Balanced Person" },
    { text: "Limited exposure to conflict-resolution models at home", dimension: "Respectful Relationship Builder" },
    { text: "Screen time may reduce focus during deep-work periods", dimension: "Balanced Person" },
  ],
};

const swotConfig = [
  { key: "strengths" as const, label: "Strengths", emoji: "💪", color: "bg-moss", border: "border-moss" },
  { key: "weaknesses" as const, label: "Weaknesses", emoji: "🔍", color: "bg-valencia", border: "border-valencia" },
  { key: "opportunities" as const, label: "Opportunities", emoji: "🌟", color: "bg-deep-sea", border: "border-deep-sea" },
  { key: "threats" as const, label: "Threats", emoji: "⚠️", color: "bg-sunflower", border: "border-sunflower" },
];

/* ── Fishbone / Ishikawa Root Cause Data ── */
interface FishboneBranch {
  category: string;
  emoji: string;
  color: string;
  causes: string[];
}

const fishboneData = {
  effect: "Student struggles with resilience, self-regulation, and confident self-expression",
  branches: [
    {
      category: "Mindset",
      emoji: "🧠",
      color: "valencia",
      causes: [
        "Fixed mindset — believes ability is innate",
        "Perfectionism discourages risk-taking",
        "Fear of being wrong in front of peers",
      ],
    },
    {
      category: "Experience",
      emoji: "📚",
      color: "deep-sea",
      causes: [
        "Limited exposure to iterative processes",
        "Few opportunities for public speaking",
        "No modeled 'productive struggle' from adults",
      ],
    },
    {
      category: "Environment",
      emoji: "🏠",
      color: "moss",
      causes: [
        "Praise at home centers on outcomes, not effort",
        "Screen time reduces focus during deep work",
        "Transitions at school feel abrupt",
      ],
    },
    {
      category: "Social-Emotional",
      emoji: "💛",
      color: "sunflower",
      causes: [
        "No personal calming toolkit yet",
        "Sensory overload during unstructured moments",
        "Limited conflict-resolution models at home",
      ],
    },
    {
      category: "Pedagogy",
      emoji: "🎓",
      color: "mist",
      causes: [
        "Needs more think-time before responding",
        "Large-group settings are intimidating",
        "Assessment focus on product over process",
      ],
    },
    {
      category: "Support",
      emoji: "🤝",
      color: "salmon",
      causes: [
        "Family unsure how to encourage growth mindset",
        "Peer dynamics amplify self-doubt",
        "Inconsistent language between home and school",
      ],
    },
  ] as FishboneBranch[],
  interventions: [
    "Embed 'fail forward' rituals — celebrate revision stories daily",
    "Co-create a personal 'calm-down menu' with student",
    "Use think-pair-share before whole-group discussions",
    "Parent workshop on growth-mindset praise techniques",
    "Visual countdown timers for smoother transitions",
    "Create a 'brave ideas' jar for safe opinion sharing",
  ],
};

/* ── PoL Goals (Character + Mindset) ── */
interface PolGoal {
  characterGoal: string;
  mindsetGoal: string;
}

const polGoals: Record<string, PolGoal> = {
  boldVisionaryLeader: {
    characterGoal: "Share at least one original idea per week in class discussions, progressing to leading a team brainstorm by Q3",
    mindsetGoal: "Shift from 'What if I'm wrong?' to 'What if I try?' — embrace possibility thinking",
  },
  balancedPerson: {
    characterGoal: "Build a personal calm-down toolkit with 3 strategies; use independently by Q2",
    mindsetGoal: "Develop self-awareness: recognize body signals of frustration and name emotions accurately",
  },
  inspiringCommunicator: {
    characterGoal: "Progress from drawing-based expression to verbal + visual presentations by Q4 Showcase",
    mindsetGoal: "Believe that my voice matters — practice 'I think…because…' sentence frames daily",
  },
  resilientProblemSolver: {
    characterGoal: "Attempt at least two strategies before seeking help; document 'revision stories' monthly",
    mindsetGoal: "Reframe failure as data: 'This didn't work — what did I learn?' becomes automatic",
  },
  respectfulRelationshipBuilder: {
    characterGoal: "Learn active listening (eye contact, paraphrase) and practice daily in partner work",
    mindsetGoal: "Value diverse perspectives: seek out classmates with different ideas during projects",
  },
  caringCitizen: {
    characterGoal: "Identify one community need and take measurable action through the PBEL Water project",
    mindsetGoal: "See myself as someone who can make a difference — track impact with simple data",
  },
};

/* ── Radar chart data per quarter ── */
interface RadarPoint {
  dimension: string;
  shortName: string;
  exposure: number;
  current: number;
}

const radarDataByQuarter: Record<string, RadarPoint[]> = {
  q1: [
    { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 60, current: 35 },
    { dimension: "Balanced Person", shortName: "Balanced", exposure: 55, current: 30 },
    { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 70, current: 45 },
    { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 65, current: 25 },
    { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 60, current: 50 },
    { dimension: "Caring Citizen", shortName: "Citizen", exposure: 50, current: 30 },
  ],
  q2: [
    { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 72, current: 48 },
    { dimension: "Balanced Person", shortName: "Balanced", exposure: 68, current: 42 },
    { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 78, current: 58 },
    { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 75, current: 38 },
    { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 70, current: 60 },
    { dimension: "Caring Citizen", shortName: "Citizen", exposure: 65, current: 45 },
  ],
  q3: [
    { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 82, current: 62 },
    { dimension: "Balanced Person", shortName: "Balanced", exposure: 78, current: 58 },
    { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 85, current: 72 },
    { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 83, current: 55 },
    { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 80, current: 72 },
    { dimension: "Caring Citizen", shortName: "Citizen", exposure: 78, current: 60 },
  ],
  q4: [
    { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 90, current: 75 },
    { dimension: "Balanced Person", shortName: "Balanced", exposure: 88, current: 72 },
    { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 92, current: 85 },
    { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 90, current: 70 },
    { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 88, current: 82 },
    { dimension: "Caring Citizen", shortName: "Citizen", exposure: 85, current: 75 },
  ],
};

const quarterMeta = [
  { key: "q1", label: "Q1 · Explorer", color: "bg-moss", textColor: "text-moss" },
  { key: "q2", label: "Q2 · Investigator", color: "bg-deep-sea", textColor: "text-deep-sea" },
  { key: "q3", label: "Q3 · Creator", color: "bg-valencia", textColor: "text-valencia" },
  { key: "q4", label: "Q4 · Ambassador", color: "bg-sunflower", textColor: "text-sunflower" },
];

/* ── Component ── */
const MyGrowthPlan = () => {
  const { grade } = useParams<{ grade: string }>();
  const gradeKey = grade || "kg";
  const [selectedQuarter, setSelectedQuarter] = useState("q1");

  const currentRadar = radarDataByQuarter[selectedQuarter];

  return (
    <PageTransition>
      <div className="min-h-full bg-background">
        <GradeHeroBlock
          content={{
            layout: "detail",
            showLogo: false,
            backLabel: "Back to Kaleidoscope",
            backHref: `/grade/${gradeKey}`,
            mainIcon: "🌱",
            title: "My Growth Plan",
            subtitle: "SWOT Analysis · Root Cause Insights · Character & Mindset Goals · Growth Radar",
            smallLabel: "Sample for Families",
            backgroundPattern: "radial",
            accentColor: "salmon",
            patternPosition: "30% 70%",
          }}
        />

        {/* ─── 1. SWOT Analysis ─── */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-6 max-w-5xl">
            <motion.div className="text-center mb-10" initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-2">Step 1</p>
              <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground">SWOT Analysis</h2>
              <p className="text-muted-foreground mt-2 text-sm max-w-lg mx-auto">
                Teachers and families collaborate to identify each student's Strengths, Weaknesses, Opportunities, and Threats across all PoL dimensions.
              </p>
            </motion.div>

            <motion.div
              className="grid sm:grid-cols-2 gap-4"
              variants={staggerContainer}
              initial="initial"
              whileInView="animate"
              viewport={{ once: true }}
            >
              {swotConfig.map((cfg) => (
                <motion.div
                  key={cfg.key}
                  variants={fadeUpItem}
                  className={`rounded-xl border-2 ${cfg.border} bg-card overflow-hidden`}
                >
                  <div className={`${cfg.color} px-5 py-3 flex items-center gap-2`}>
                    <span className="text-xl">{cfg.emoji}</span>
                    <h3 className="font-display text-sm font-bold text-milk tracking-wide uppercase">{cfg.label}</h3>
                  </div>
                  <div className="p-5 space-y-3">
                    {swotData[cfg.key].map((item, i) => (
                      <div key={i} className="flex gap-3 items-start">
                        <span className="shrink-0 w-5 h-5 rounded-full bg-muted flex items-center justify-center font-display text-[0.6rem] font-bold text-muted-foreground mt-0.5">
                          {i + 1}
                        </span>
                        <div>
                          <p className="text-sm text-foreground leading-relaxed">{item.text}</p>
                          <p className="text-xs text-muted-foreground mt-0.5 italic">→ {item.dimension}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </motion.div>
              ))}
            </motion.div>
          </div>
        </section>

        {/* ─── 2. Root Cause Analysis — Fishbone / Ishikawa ─── */}
        <section className="py-16 bg-card">
          <div className="container mx-auto px-6 max-w-6xl">
            <motion.div className="text-center mb-10" initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-valencia mb-2">Step 2</p>
              <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground">Root Cause Analysis</h2>
              <p className="text-muted-foreground mt-2 text-sm max-w-lg mx-auto">
                An Ishikawa (fishbone) diagram maps the root causes behind each growth area across six categories.
              </p>
            </motion.div>

            {/* Fishbone Diagram */}
            <motion.div
              className="bg-background rounded-2xl border border-border p-6 md:p-8 overflow-hidden"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5 }}
            >
              {/* SVG Fishbone - Desktop */}
              <div className="hidden md:block">
                <svg viewBox="0 0 1000 500" className="w-full" style={{ maxHeight: 500 }}>
                  {/* Main spine */}
                  <motion.line
                    x1={80} y1={250} x2={860} y2={250}
                    stroke="hsl(var(--foreground))"
                    strokeWidth={3}
                    initial={{ pathLength: 0 }}
                    whileInView={{ pathLength: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.8 }}
                  />

                  {/* Effect (fish head) */}
                  <motion.g initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.8 }}>
                    <rect x={860} y={215} width={130} height={70} rx={12} fill="hsl(var(--valencia))" />
                    <text x={925} y={242} textAnchor="middle" fill="white" fontSize={10} fontWeight={700} fontFamily="Outfit">
                      EFFECT
                    </text>
                    <text x={925} y={258} textAnchor="middle" fill="white" fontSize={8} fontFamily="Outfit" opacity={0.9}>
                      Growth gaps in
                    </text>
                    <text x={925} y={270} textAnchor="middle" fill="white" fontSize={8} fontFamily="Outfit" opacity={0.9}>
                      resilience &amp; voice
                    </text>
                  </motion.g>

                  {/* Branches — top 3 and bottom 3 */}
                  {fishboneData.branches.map((branch, i) => {
                    const isTop = i < 3;
                    const xPositions = [180, 420, 660];
                    const xIdx = i % 3;
                    const bx = xPositions[xIdx];
                    const by = isTop ? 80 : 420;
                    const spineY = 250;
                    const branchColors: Record<string, string> = {
                      valencia: "hsl(var(--valencia))",
                      "deep-sea": "hsl(var(--deep-sea))",
                      moss: "hsl(var(--moss))",
                      sunflower: "hsl(var(--sunflower))",
                      mist: "hsl(var(--mist))",
                      salmon: "hsl(var(--salmon))",
                    };
                    const color = branchColors[branch.color] || "hsl(var(--foreground))";

                    return (
                      <motion.g
                        key={branch.category}
                        initial={{ opacity: 0, y: isTop ? -20 : 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ delay: 0.3 + i * 0.12 }}
                      >
                        {/* Branch line to spine */}
                        <line
                          x1={bx + 60}
                          y1={isTop ? by + 60 : by - 60}
                          x2={bx + 120}
                          y2={spineY}
                          stroke={color}
                          strokeWidth={2}
                          opacity={0.6}
                        />

                        {/* Category label */}
                        <rect
                          x={bx}
                          y={isTop ? by - 10 : by - 10}
                          width={120}
                          height={28}
                          rx={6}
                          fill={color}
                        />
                        <text
                          x={bx + 60}
                          y={isTop ? by + 9 : by + 9}
                          textAnchor="middle"
                          fill="white"
                          fontSize={10}
                          fontWeight={700}
                          fontFamily="Outfit"
                        >
                          {branch.emoji} {branch.category}
                        </text>

                        {/* Cause bones */}
                        {branch.causes.map((cause, ci) => {
                          const cy = isTop ? by + 24 + ci * 18 : by + 24 + ci * 18;
                          return (
                            <text
                              key={ci}
                              x={bx + 8}
                              y={cy}
                              fontSize={8}
                              fill="hsl(var(--muted-foreground))"
                              fontFamily="Outfit"
                            >
                              ─ {cause.length > 38 ? cause.slice(0, 38) + "…" : cause}
                            </text>
                          );
                        })}
                      </motion.g>
                    );
                  })}
                </svg>
              </div>

              {/* Mobile: Card-based fishbone */}
              <div className="md:hidden space-y-3">
                {/* Effect card */}
                <div className="bg-valencia rounded-xl p-4 text-center">
                  <p className="font-display text-xs tracking-[0.15em] uppercase text-milk/70 mb-1">Effect</p>
                  <p className="font-display text-sm font-bold text-milk">{fishboneData.effect}</p>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  {fishboneData.branches.map((branch) => {
                    const bgMap: Record<string, string> = {
                      valencia: "bg-valencia",
                      "deep-sea": "bg-deep-sea",
                      moss: "bg-moss",
                      sunflower: "bg-sunflower",
                      mist: "bg-mist",
                      salmon: "bg-salmon",
                    };
                    return (
                      <div key={branch.category} className="bg-muted rounded-xl overflow-hidden">
                        <div className={`${bgMap[branch.color]} px-3 py-2 flex items-center gap-1.5`}>
                          <span className="text-sm">{branch.emoji}</span>
                          <span className="font-display text-xs font-bold text-milk">{branch.category}</span>
                        </div>
                        <div className="p-3 space-y-1.5">
                          {branch.causes.map((cause, i) => (
                            <p key={i} className="text-[0.65rem] text-foreground leading-tight flex items-start gap-1">
                              <span className="text-muted-foreground shrink-0">─</span>
                              {cause}
                            </p>
                          ))}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Intervention Plan */}
              <div className="mt-8 bg-muted rounded-xl p-6">
                <p className="font-display text-xs tracking-[0.15em] uppercase text-deep-sea mb-3">🎯 Targeted Interventions</p>
                <div className="grid sm:grid-cols-2 gap-2">
                  {fishboneData.interventions.map((item, i) => (
                    <div key={i} className="flex items-start gap-2 text-sm text-foreground">
                      <span className="shrink-0 w-5 h-5 rounded-full bg-deep-sea text-milk flex items-center justify-center font-display text-[0.6rem] font-bold mt-0.5">
                        {i + 1}
                      </span>
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* ─── 3. PoL Goals ─── */}
        <section className="py-16 bg-background">
          <div className="container mx-auto px-6 max-w-5xl">
            <motion.div className="text-center mb-10" initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-moss mb-2">Step 3</p>
              <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground">Portrait of the Learner Goals</h2>
              <p className="text-muted-foreground mt-2 text-sm max-w-lg mx-auto">
                Each dimension has a <strong>Character Goal</strong> (observable behavior) and a <strong>Mindset Goal</strong> (internal shift).
              </p>
            </motion.div>

            <motion.div
              className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"
              variants={staggerContainer}
              initial="initial"
              whileInView="animate"
              viewport={{ once: true }}
            >
              {portraitDimensions.map((dim) => {
                const goal = polGoals[dim.key];
                if (!goal) return null;
                return (
                  <motion.div
                    key={dim.key}
                    variants={fadeUpItem}
                    className="bg-card rounded-xl border border-border overflow-hidden"
                  >
                    <div className={`${dimColors[dim.color]} px-4 py-3 flex items-center gap-2`}>
                      <span className="text-xl">{dim.emoji}</span>
                      <h3 className="font-display text-xs font-bold text-milk tracking-wide">{dim.title}</h3>
                    </div>
                    <div className="p-5 space-y-4">
                      <div>
                        <p className="font-display text-[0.65rem] tracking-[0.15em] uppercase text-muted-foreground mb-1.5 flex items-center gap-1">
                          <span className="w-2 h-2 rounded-full bg-valencia inline-block" /> Character Goal
                        </p>
                        <p className="text-sm text-foreground leading-relaxed">{goal.characterGoal}</p>
                      </div>
                      <div>
                        <p className="font-display text-[0.65rem] tracking-[0.15em] uppercase text-muted-foreground mb-1.5 flex items-center gap-1">
                          <span className="w-2 h-2 rounded-full bg-deep-sea inline-block" /> Mindset Goal
                        </p>
                        <p className="text-sm text-foreground leading-relaxed">{goal.mindsetGoal}</p>
                      </div>
                    </div>
                  </motion.div>
                );
              })}
            </motion.div>
          </div>
        </section>

        {/* ─── 4. Growth Radar (Spider Web) ─── */}
        <section className="py-16 bg-card">
          <div className="container mx-auto px-6 max-w-4xl">
            <motion.div className="text-center mb-8" initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-salmon mb-2">Growth Radar</p>
              <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground">Exposure vs. Current Level</h2>
              <p className="text-muted-foreground mt-2 text-sm max-w-lg mx-auto">
                The <strong className="text-deep-sea">blue area</strong> shows what the student has been exposed to through courses. The <strong className="text-valencia">orange area</strong> shows where they currently are. The gap represents growth opportunity.
              </p>
            </motion.div>

            {/* Quarter Selector */}
            <Tabs value={selectedQuarter} onValueChange={setSelectedQuarter} className="mb-8">
              <TabsList className="grid grid-cols-4 max-w-md mx-auto">
                {quarterMeta.map((q) => (
                  <TabsTrigger key={q.key} value={q.key} className="font-display text-xs font-bold">
                    {q.label.split(" · ")[0]}
                  </TabsTrigger>
                ))}
              </TabsList>

              {quarterMeta.map((q) => (
                <TabsContent key={q.key} value={q.key}>
                  <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.3 }}
                    className="bg-background rounded-2xl border border-border p-6"
                  >
                    <div className="flex items-center justify-center gap-2 mb-4">
                      <span className={`inline-block w-3 h-3 rounded-full ${q.color}`} />
                      <span className="font-display text-sm font-bold text-foreground">{q.label}</span>
                    </div>

                    <div className="w-full" style={{ height: 380 }}>
                      <ResponsiveContainer width="100%" height="100%">
                        <RadarChart data={currentRadar} cx="50%" cy="50%" outerRadius="75%">
                          <PolarGrid stroke="hsl(var(--border))" />
                          <PolarAngleAxis
                            dataKey="shortName"
                            tick={{ fontSize: 11, fill: "hsl(var(--foreground))", fontFamily: "Outfit" }}
                          />
                          <PolarRadiusAxis
                            angle={90}
                            domain={[0, 100]}
                            tick={{ fontSize: 9, fill: "hsl(var(--muted-foreground))" }}
                          />
                          <Radar
                            name="Exposure (from courses)"
                            dataKey="exposure"
                            stroke="hsl(var(--deep-sea))"
                            fill="hsl(var(--deep-sea))"
                            fillOpacity={0.25}
                            strokeWidth={2}
                          />
                          <Radar
                            name="Current Level"
                            dataKey="current"
                            stroke="hsl(var(--valencia))"
                            fill="hsl(var(--valencia))"
                            fillOpacity={0.3}
                            strokeWidth={2}
                          />
                          <Legend
                            wrapperStyle={{ fontSize: 12, fontFamily: "Outfit" }}
                          />
                          <Tooltip
                            contentStyle={{
                              backgroundColor: "hsl(var(--card))",
                              border: "1px solid hsl(var(--border))",
                              borderRadius: 8,
                              fontSize: 12,
                              fontFamily: "Outfit",
                            }}
                          />
                        </RadarChart>
                      </ResponsiveContainer>
                    </div>

                    {/* Gap Summary */}
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
                      {currentRadar.map((point) => {
                        const gap = point.exposure - point.current;
                        return (
                          <div key={point.dimension} className="bg-muted rounded-lg p-3 text-center">
                            <p className="font-display text-xs font-bold text-foreground mb-1">{point.shortName}</p>
                            <div className="flex items-center justify-center gap-3 text-xs">
                              <span className="text-deep-sea font-bold">{point.exposure}%</span>
                              <span className="text-muted-foreground">→</span>
                              <span className="text-valencia font-bold">{point.current}%</span>
                            </div>
                            <p className="text-[0.65rem] text-muted-foreground mt-1">
                              Gap: <span className={gap > 20 ? "text-valencia font-bold" : "text-moss font-bold"}>{gap}%</span>
                            </p>
                          </div>
                        );
                      })}
                    </div>
                  </motion.div>
                </TabsContent>
              ))}
            </Tabs>
          </div>
        </section>

      </div>
    </PageTransition>
  );
};

export default MyGrowthPlan;